Accessibility at Discord - Brandon Dail, React Advanced 2021

Discover how Discord's accessibility team is enhancing their platform with improved navigation and screen reader support, sharing lessons and open-sourcing the solution for developers.

Key takeaways

Accessibility is a critical aspect of Discord’s development, with a dedicated team working to improve the platform’s accessibility features.
The team has implemented keyboard navigation and screen reader support, allowing users to navigate the platform using only their keyboard.
The focus ring system has been overhauled to provide more accurate and accessible focus indicators.
The outline property in CSS has limitations that can lead to clipping of focus rings, making it difficult to implement accessible focus indicators.
The team has developed a focus ring system that uses the outline property in combination with the within pseudo-class to provide more accurate and accessible focus indicators.
The focus ring system requires careful placement of the focus ring to prevent it from being clipped by the outline property.
The team has implemented a way to offset the outline from the target element using the outline-offset property.
The outline property does not respect border radius, which can lead to issues with focus rings on circular elements.
The team has implemented a solution to ensure that focus rings are applied to the correct element when using the within pseudo-class.
The solution uses a combination of the outline property and the within pseudo-class to provide accurate and accessible focus indicators.
The team has implemented a way to apply focus rings to custom color choices, such as role colors, which can be user-defined.
The team has developed an experimental runtime system to check for accessibility issues in the DOM, using a mutation observer to detect changes in the DOM.
The runtime system uses a debouncing mechanism to prevent the system from running too frequently and consuming too many resources.
The team has implemented a way to report and track accessibility issues, using a hash function to prevent the same issue from being reported multiple times.
The team has open-sourced their focus ring system and encourages other developers to use and contribute to the project.
The team has implemented a way to provide feedback on accessibility issues, using an accessibility feedback form and encouraging users to provide feedback on the platform’s accessibility features.

Accessibility at Discord - Brandon Dail, React Advanced 2021

More talks