This is a fascinating deep dive by the people at Discord on their development of a focus ring component and all the problems they had to overcome:
Browsers implement default focus rings that apply to all elements, but the ability to style these is (currently) very limited. These rings, while they have recently improved greatly in Chrome and Edge, are also not very pleasant when integrated with the rest of Discord’s design, and other browsers like Firefox are almost entirely invisible in most cases due to the thinness and low contrast of their styles.
As such, we want to implement a custom focus ring style. At a glance, this seems relatively simple, but when dealing with the variety of use cases Discord has for these rings, the list of requirements quickly grows, and the options for implementations shrink.
Ideally, we want to match the browser’s focus ring behavior exactly. Within Discord, this means that a comprehensive focus ring implementation needs to:
- Perfectly map to the element that has focus (with exceptions listed below).
- Follow elements as they move when containers scroll.
- Follow elements as they animate and transition within the document.
- Not be clipped off when the focused element is bounded by
overflow: hiddenor other bounding techniques.
- Respect occlusion of overlapping elements, but not be occluded by an element’s own z-index.
Additionally, to be able to implement pleasant and overall better focus styles for various elements in the app, we have additional requirements to be able to:
- Apply the focus ring on a different element than the actual focused element
- Provide positional offsets to adjust ring placement around the element.
- Adjust ring styles to match the look and feel of the surrounding context (could include changing border radius, color, shape, and more)
- Specify a style for when focus is within an element, for example to indicate the bounds of a widget.
See the source link for the rest.
As a blind screen reader user, and in my career educating designers, developers, and testers on accessibility issues, I have had the opportunity to observe the techniques used by various users to understand the layout and operation of web pages and applications. I have also seen well-intentioned sighted testers believe that components or entire sites are not accessible because they were unfamiliar with the techniques of navigating the web without sight.
In this article, I will walk you through the ways a blind screen reader user can navigate a web page, gather information about its layout and organization, and use that knowledge to efficiently and rapidly navigate a site or application. I hope to convey the importance of using techniques other than the TAB key as a primary means of navigating a website and illustrate the power you provide to a screen reader user by following semantic HTML markup and the principles of the Web Content Accessibility Guidelines.
tabindexof the focused element to “0” ensures that if the user tabs away from the widget and then returns, the selected item within the group retains focus. Note that updating the
tabindexto “0” requires also updating the previously selected item to
tabindex="-1". This technique involves programmatically moving focus in response to key events and updating the
tabindexto reflect the currently focused item. To do this:
Bind a key down handler to each element in the group, and when an arrow key is used to move to another element:
- programmatically apply focus to the new element,
- update the
tabindexof the focused element to “0”, and
- update the
tabindexof the previously focused element to “-1”.
Here’s an example of a WAI-ARIA tree view using this technique.
For a more visual explanation, see the following video by Rob Dodson: