GitHub contributions chart is inaccessible to keyboard, screen reader, voice, low-vision users

[aardrian]

The contributions chart that appears on profile pages is inaccessible to many users. To limit the feedback to just WCAG 2.1 violations:

• The SVG used for the chart has no plain text equivalent to convey the rankings for the dates, potentially a violation of SC 1.1.1 Non-text Content.
• The SVG used for the chart does not convey the structure of the grid, potentially a violation of SC 1.3.1 Info and Relationships.
• The individual dates rely on instructions (from the legend) that only visually convey colored boxes to understand the content, potentially a violation of SC 1.3.3 Sensory Characteristics.
• The boxes use only shading to indicate less or more activity, a violation of SC 1.4.1 Use of Color.
• Zooming the page causes the chart to become clipped, with no method to scroll to see the left axis, a violation of SC 1.4.4 Resize text.
• At narrow viewports, the bulk of the grid is clipped with no way to scroll, a violation of SC 1.4.10 Reflow
• The tool-tips do not persist (to copy text or otherwise interact), a violation of SC 1.4.13 Content on Hover or Focus.
• 3 of the 5 colors used for the grid have a contrast ratio below 3:1 with the background, a violation of 1.4.11 Non-text Contrast.
• The tool-tips that list contributions on specific dates cannot be activated with the keyboard, a violation of SC 2.1.1 Keyboard.

Ways I have tried to convey this to GitHub:

• I reported this to GitHub using its contact form in February 2018 and did not hear back.
• I filed an issue on an unofficial GitHub repo in 2018 in the hopes someone from GitHub would see it.
• I logged it to UserVoice (which as since been shuttered) at the request of Microsoft Accessibility's Twitter account in June 2018.
• Pestering random people I think might have a connection and can help.

A potential solution:

• Convert it to a table. I have outlined a series of changes in this February 2018 prototype rebuild to show how it can be done. I would change the hover items to toggle-tips now that WCAG 2.1 is the standard. The post: GitHub Contributions Chart.

I see it is now possible to view my contributions in 3D. This was added since I first raised the issue of the inaccessibility of the contributions chart and, while that is a nifty feature, I think the time spent adding more seemingly inaccessible versions of the chart could have been better applied fixing what is there now.

edited to fix typo in 4.1.1 link

[benjiallen]

@aardrian thanks for the detailed feedback. I'll create internal issues for these bugs and I'll continue the discussion here should we require additional feedback.

[aardrian]

Ace! I look forward to seeing the outcome.

[edsummersnc]

Hi @aardrian! We shipped some improvements to the contribution graph today. See #49015 for details. Feedback is welcome!

[aardrian]

@edsummersnc Thank you for letting me know! I am thrilled to see these are improved for logged-in users.

I left feedback at the linked issue/discussion as a comment: https://github.com/orgs/community/discussions/49015#discussioncomment-5203941

It is a great start and I look forward to seeing the charts work (well) for all users. Thanks again!

[github-actions[bot]]

💬 Your Product Feedback Has Been Submitted 🎉

Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users.

Here's what you can expect moving forward ⏩

• Your input will be carefully reviewed and cataloged by members of our product teams. 
  • Due to the high volume of submissions, we may not always be able to provide individual responses.
  • Rest assured, your feedback will help chart our course for product improvements.
• Other users may engage with your post, sharing their own perspectives or experiences. 
• GitHub staff may reach out for further clarification or insight. 
  • We may 'Answer' your discussion if there is a current solution, workaround, or roadmap/changelog post related to the feedback.

Where to look to see what's shipping 👀

• Read the Changelog for real-time updates on the latest GitHub features, enhancements, and calls for feedback.
• Explore our Product Roadmap, which details upcoming major releases and initiatives.

What you can do in the meantime 💻

• Upvote and comment on other user feedback Discussions that resonate with you.
• Add more information at any point! Useful details include: use cases, relevant labels, desired outcomes, and any accompanying screenshots.

As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities.

Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐