A look at how we improved the readability of code on GitHub.
Overview
The article discusses GitHub's commitment to accessibility in its code search and code view features, highlighting the design process and implementation strategies used to enhance usability for developers with disabilities. It outlines three major tasks undertaken to improve accessibility, including external auditing, design reviews, and office hours for engineers.
What You'll Learn
1
How to conduct accessibility audits on web features
2
Why proper HTML markup and tab order are crucial for accessibility
3
How to implement ARIA live announcements for dynamic content
Prerequisites & Requirements
- Understanding of web accessibility principles
- Familiarity with screen readers and accessibility testing tools(optional)
Key Questions Answered
What methods did GitHub use to improve accessibility in code search?
GitHub employed external auditing, design reviews, and office hours with accessibility experts to enhance the usability of its code search and view features. These methods helped identify accessibility barriers and implement effective solutions.
How does GitHub ensure proper focus management during code search?
GitHub addressed focus management by ensuring that after a sort option is selected, the focus returns to the dropdown instead of the page header. This prevents confusion for keyboard and screen reader users, enhancing their navigation experience.
What challenges did GitHub face with screen reader navigation in code?
Previously, code was presented as a table, which hindered screen reader navigation. The new implementation allows for character-by-character navigation and maintains whitespace semantics, improving accessibility for users relying on screen readers.
What is the purpose of the TreeView component in GitHub's code view?
The TreeView component allows users to navigate between folders and files quickly, supporting accessibility by adhering to ARIA specifications and providing a more intuitive experience for all developers.
Technologies & Tools
Frontend
Aria
Used to enhance accessibility features in web applications.
Frontend
Treeview
An open-source component developed to improve file navigation in the code view.
Key Actionable Insights
1Implement regular accessibility audits for new features to identify potential barriers early in the development process.Conducting audits with external experts can reveal nuanced accessibility issues that internal teams may overlook, ensuring a more inclusive product.
2Utilize ARIA roles and properties effectively to enhance screen reader compatibility in web applications.Proper use of ARIA can significantly improve the user experience for individuals relying on assistive technologies, making your application more accessible.
3Encourage collaboration between design and development teams to ensure accessibility is considered from the outset.Involving designers in the development process helps create interfaces that are not only visually appealing but also functionally accessible.
Common Pitfalls
1
Failing to manage focus correctly after dynamic content changes can lead to confusion for users relying on keyboard navigation.
This often occurs when developers do not consider how focus should shift after actions like sorting or filtering, which can disrupt the user experience.
2
Overloading screen reader users with multiple announcements can create a chaotic experience.
When multiple ARIA live announcements compete, it can confuse users. It's essential to prioritize announcements to ensure clarity.
Related Concepts
Web Accessibility Best Practices
Screen Reader Technology
Designing For Inclusivity