accessibility

Subscribe to all “accessibility” posts via RSS or follow GitHub Changelog on Twitter to stay updated on everything we ship.

→ ~ cd github-changelog
→ ~/github-changelog|main git log main
showing all changes successfully

The Comment Box Becomes More Consistent and Accessible

We are excited to announce a significant update to the comment box used in GitHub issues, discussions, and pull requests, aiming to refine and enhance how you interact and collaborate. This release is a testament to our ongoing efforts to provide an exceptional user experience, making GitHub more intuitive, consistent, and accessible across the platform.

A screenshot of the new comment box

The updated comment box is designed to integrate seamlessly with the existing GitHub environment, ensuring a familiar yet improved experience for all users. Highlights and improvements include:

  • Enhanced User Experience: The newly revamped comment box brings an elevated experience to a wider range of users across various devices. With this update, we've enhanced the responsiveness and streamlined the markup to better accommodate keyboard and screen reader users. This ensures a uniform and smooth user experience across issues, discussions, and pull requests, promoting seamless communication and collaboration.
  • Consistency and Familiarity: Our design philosophy for the new comment box was clear: keep it familiar, make it better. We’ve developed the updated version to closely resemble the original while enhancing it with improved accessibility, consistency, and ease of use across various screen sizes. The transition for you will be smooth, with no disruptions to your workflow.
  • Commitment to Accessibility: This update contributes to our continuous journey to make GitHub more accessible to everyone. The comment box now aligns more closely with our accessibility commitment, enhancing the experience in features such as issues, pull requests, and discussions. Check out our Accessibility Commitment to learn more about how we are making GitHub more inclusive.

We are excited for you to experience the new comment box and we welcome feedback to continue improving GitHub for everyone.

See more

New Default: Underlined Links for Improved Accessibility

By default, links within text blocks on GitHub are now underlined. This ensures links are easily distinguishable from surrounding text. If preferred, you can "hide" underlines for these links in the accessibility settings. More details can be found in the documentation – managing the appearance of links.

Should you encounter any issues with this feature during its public beta, please provide feedback.

Thanks for aiding our mission to enhance GitHub's accessibility!

See more

Enhanced Accessibility for Links in Text Blocks Public Beta

To improve accessibility for our users, we've introduced a new accessibility setting to underline links within text blocks. Links should be easily distinguishable from surrounding text, not just by color but by styling. You can now toggle an accessibility setting to either "show" or "hide" underlines for links in text blocks, ensuring clear visibility and differentiation. You can learn more about this functionality in the documentation.

During this public beta phase, your feedback is invaluable. If you spot a link within a text block that isn’t underlined when the setting is enabled, please let us know.

Thank you for supporting our commitment to making GitHub more accessible for everyone!

See more

Accessibility improvements for npmjs.com

Many accessibility improvements have been deployed to npmjs.com. Highlights include:

  • Site-wide improvements to color contrast, text resize, and support for users with low vision.
  • Improvements that enable keyboard-only access including visual tracking of the focus indicator.
  • Improved support for assistive technologies including screen readers.

Your feedback is welcome! Please share feedback on the accessibility community discussions page and learn more about GitHub accessibility at accessibility.github.com.

See more

Light and dark theme color contrast improvements

a11y contrast improvement

We improved the color contrast of our default light and dark themes on github.com, making them accessible to all users. These changes were made to Primer, GitHub's Design System, as part of our commitment to making GitHub inclusive to all developers. Visit accessibility.github.com for more information.

The VS Code light and dark themes will also be updated to match these changes.

See more

Accessibility improvements for the contribution graph

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.

Image of a Contribution Graph with the contributions done on June 16 showing in a tooltip

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 reply on this feedback discussion.

See more

Specify theme context for images in Markdown GA

You can now specify whether to display images for light or dark themes in Markdown, using the HTML <picture> element in combination with the prefers-color-scheme media feature.

For example:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png">
  <img alt="Shows an illustrated sun in light color mode and a moon with stars in dark color mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
</picture>
See more

Specify theme context for images in Markdown (Beta)

You can now specify whether to display images for light or dark themes in Markdown, using the HTML <picture> element in combination with the prefers-color-scheme media feature.

For example:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png">
  <img alt="Shows an illustrated sun in light color mode and a moon with stars in dark color mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
</picture>

An animated screenshot of an issue comment that changes the color mode. The content shows an octobiwan in light and stormtroopocat in dark color mode.

See more

Tritanopia Colorblind Theme Beta

A new Tritanopia colorblind theme for blue/yellow color blindness is now available to all github.com users in a public beta. Based on customer feedback, the previous Colorblind theme has been split into two themes: a Protanopia & Deuteranopia colorblind theme, and a Tritanopia colorblind theme. A Protanopia & Deuteranopia colorblind theme is now also available in beta. Navigate to the “Appearance” page in your profile settings to update your theme preferences.

Share feedback

 

See more

Protanopia & Deuteranopia Colorblind Themes Beta

New Protanopia & Deuteranopia colorblind themes for red/green color blindness are now available to all github.com users in a public beta. Based on customer feedback, the previous Colorblind theme has been split into two themes: a Protanopia & Deuteranopia colorblind theme, and a Tritanopia colorblind theme. This Protanopia & Deuteranopia colorblind theme is an update to the previous Colorblind themes. A Tritanopia colorblind theme is now also available in beta. Navigate to the “Appearance” page in your profile settings to update your theme preferences.

Share feedback

 

See more

Managing keyboard shortcuts using accessibility settings

You can manage your keyboard shortcuts using the new accessibility settings page.

Screenshot of the new accessibility settings page

You can choose to disable "character key shortcuts". This turns off keyboard shortcuts that only use single characters like s, g c, and . (the period key). Shortcuts which make use of modifier keys like command and control are not affected by this setting.

This feature prevents accidental triggering of keyboard shortcuts. This is important for people who use a keyboard and for people who use assistive technologies like voice input.

Read our documentation on managing accessibility settings.

See more