Accessibility improvements for the contribution graph

[glorialangreo]

The contribution graph now supports keyboard interaction and compatibility with assistive technologies. Users can navigate the graph and filter contributions using the keyboard. While navigating the graph, a summary of each day is displayed visually in a tooltip and announced by screen readers.

Users can move keyboard focus to the contribution graph and then navigate it using the following commands:

• Press arrow keys to navigate cell by cell
• Press Page Up to navigate to the first cell in a column
• Press Page Down to navigate to the last cell in a column
• Press Home to navigate to the first cell in a row
• Press End to navigate to the last cell in a row
• Press Enter to filter content in the Contribution Activity section by the current cell

If the user is running a screen reader, it will announce the following text when the graph receives keyboard focus:

Contribution Graph, table, 54 columns, 8 rows.
User activity over 1 year of time. Each column is one week, with older weeks to the left. Select a cell to filter the "Contribution Activity" section.

When the user navigates to a cell, the screen reader will read a summary such as:

11 contributions on Monday, February 21, 2022.

We are excited to make one of our favorite GitHub features available to more users! If you encounter any issues with these changes, please leave a comment here.

[banocean]

Contribution Graph, table, 54 columns, 8 rows.
User activity over 1 year of time. Each column is one week, with older weeks to the left. Select a cell to filter the "Contribution Activity" section.

@glorialangreo 8 days per week, nice

[aardrian]

I am excited for these changes. For the first time, a screen reader user can consume the content. Thank you!

As I am sure you are aware, there are still some outstanding issues. Some of them I outlined in https://github.com/orgs/community/discussions/17281.

The charts are still broken for users in Windows High Contrast Mode / Contrast Themes (which maps to forced-colors):

The tool-tips still have the 1.4.3 issues I identified in the other request / issue / question / discussion (text cannot be selected, do not dismiss without moving pointer/focus).

I also feel the left column headers should probably be fixed since they scroll out of the container view:

Finally, I think the screen reader labeling might be a bit verbose. The instructions to use the table as exposed in NVDA (NVDA 2022.4 with Firefox 110) are so long they require an extra key press to complete. I made a transcript (with keyboard interactions):

T
Contribution Graph table clickable with 9 rows and 54 columns User activity over one year of time. Each column is one week, with older weeks to the left. Select
↓
a day to filter the quote contribution activity quote section.
↓
caption Contribution Graph
↓
row 4 clickable 4 contributions on Monday, December 12, 2022
Ctrl + Alt + →
column 44 clickable 4 contributions on Monday, December 19, 2022

That is a lot of listening to get to the first cell.

Here is a transcript from JAWS (JAWS 2023 with Chrome 110) to activate one of the dates:

T
54 columns and 8 rows Contribution Graph Column 1, Row 1 Day of Week
Ctrl + Alt + ↓
No contributions on Sunday, March 20, 2022 Row 2
Ctrl + Alt + ↓
5 contributions on Monday, March 21, 2022 Row 3
Enter↵
Main Region Contribution Graph Grid User activity over one year of time. Each column is one week, with older weeks to the left. Select a day to filter the quote contribution activity quote section. 5 contributions on Monday, March 21, 2022 selected col 14 row 3
Tab↹
Learn how we count contributions Link
Shift + Tab↹
Contribution Graph table Column 14, Row 3 Contribution Graph Grid User activity over one year of time. Each column is one week, with older weeks to the left. Select a day to filter the “contribution activity” section. 5 contributions on Monday, March 21, 2022 selected col 14 row 3

A lot is announced when moving in and out of the table.

I think instead of giving each cell a verbose name you could use the row and column header to provide the month and day, and then lead with the number of contributions (and maybe leave that word out altogether). At least for the context of supporting screen reader table navigation.

But I defer to the results of formal testing with screen reader users who are also GitHub users.

[aardrian]

@jamieshark I am checking to see if this is in development and, if so, when you expect it some of your updates will be available.

[jamieshark]

Hey @aardrian - sorry for the delay. I was focused on different work, but now am back on working on this. Expect an update by this week, thanks for checking back in.

[jamieshark]

Hi @aardrian! I'm working with @ericwbailey to address the concerns you've brought up here. Some of them are easier fixes and others are trickier so I can't say for sure exactly when changes will be released, but we're aiming to have updates rolled out within the month or so. Thanks again for your patience while we tinker with this feature.

[aardrian]

@jamieshark Thanks for the update! I look forward to seeing them.

[heyitsab]

Hi @aardrian! I'm an engineer on @jamieshark's team who has been working on the contribution graph recently.

First, thank you so much for all of your thoughtful and detailed feedback. Your time and expertise is valuable, and we're so grateful that you invested time to let us know how we could be doing better. I wanted to update you about some recent changes we've shipped to the contribution graph.

Support for high contrast mode

We've updated the contribution graph to use the size of the squares as an indicator of contribution intensity when a user has forced-colors mode enabled.

Improved tooltip behavior

The tooltips triggered by hovering over or focusing a grid cell in the contribution graph are now selectable and dismissible without changing the user's focus.

Updated screen reader content while navigating the grid

We've updated the information that is announced by screen readers as users navigate the graph. We've removed the repetitive descriptions of the grid, and updated the announced content to include how many contributions were made on the focused date, and how that number fits into the user's overall contributions trend. ie:

3 contributions on November 2nd. Medium-low contributions.

We’ve also added descriptive text to the activity overview spider graph, so that screen readers can announce how a user’s contributions are broken down between commits, pull requests, issues, and code review.

Improved year selection behavior for mobile users and users who browse at 200% zoom

We’ve updated the profile page to always display a year picker, so that users on smaller layouts can view contribution history for a given year on any screen size.

[Zerbaib]

hey i have a problem with this i have commit in a projet but my calendar is not update


need help

[banocean]

is it the default branch?

[dasibcryptoidology]

The contribution graph now supports keyboard interaction and compatibility with assistive technologies. Users can navigate the graph and filter contributions using the keyboard. While navigating the graph, a summary of each day is displayed visually in a tooltip and announced by screen readers.

Users can move keyboard focus to the contribution graph and then navigate it using the following commands:

• Press arrow keys to navigate cell by cell
• Press Page Up to navigate to the first cell in a column
• Press Page Down to navigate to the last cell in a column
• Press Home to navigate to the first cell in a row
• Press End to navigate to the last cell in a row
• Press Enter to filter content in the Contribution Activity section by the current cell

If the user is running a screen reader, it will announce the following text when the graph receives keyboard focus:

Contribution Graph, table, 54 columns, 8 rows.
User activity over 1 year of time. Each column is one week, with older weeks to the left. Select a cell to filter the "Contribution Activity" section.

When the user navigates to a cell, the screen reader will read a summary such as:

11 contributions on Monday, February 21, 2022.

We are excited to make one of our favorite GitHub features available to more users! If you encounter any issues with these changes, please leave a comment here.

I

[aardrian]

Has this rolled out yet?

I ask because when I navigate with JAWS/Chrome, I cannot get into the cells. The column and row headers announces as graphics. Which makes sense since the entire thing is an SVG with no roles.

It also doesn't seem to use system colors when I activate Windows Contrast Themes.

The WCAG contrast issues among the different cells are still there of course, but now I can enjoy them when I try to force them to WHCM!

NVDA/Firefox at least considers it a table and I can get into the cells, but when I get to a cell I hear "column 27 selected clickable 4 contributions on Monday, December 19, 2022". Oh, I see now, I am being served an HTML table in Firefox.

Oh, wait, I get it. The SVG is for the logged-out view and the table is for the logged-in view. And yup, the Contrast Themes output is the same as before. And JAWS announces as "4 contributions on Monday, December 19, 2022
Row 3".

I don't think the verbosity in the cells has dropped. But the non-screen-reader keyboard navigation improvements are nice.

Sorry this is stream-of-consciousness, I am in post-dinner lethargy.

[jamieshark]

Still working on it @aardrian!! Or rather, there have been some other things that have taken priority before this, but we are planning out the changes and work for the upcoming months. Thanks for your patience, and I promise that this is something that's been top of mind for me since it's been brought up.

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬