Let's take a look at an example: Hey. Some problems:

1. No focus rings on some elements.
2. Invisible elements are receiving focus (action menus).
3. All elements within email list are tabbable (even though they also have arrow key support).
4. Grid navigation is not supported.
Now let's take a look at it with a screen reader. A few issues:

1. Many elements are missing labels (e.g. selection checkboxes).
2. Improper use of <details> to open a menu.
3. Impossible to navigate to individual parts of a mail (sender, subject, time). Hard to distinguish.
There's also the fake combobox for the search field that's completely unusable with a screen reader. The search results aren't announced at all.

Please, don't try to implement this if you're not going to put the effort in to make it accessible. Use a library.
Building web apps without JS is a nice idea, but it's definitely not better for accessibility. Remember, ARIA is a contract: it's only supplies semantics, not behavior. Until the web platform has higher level widgets built in, you must bring the corresponding JS!
You can follow @devongovett.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled:

By continuing to use the site, you are consenting to the use of cookies as explained in our Cookie Policy to improve your experience.