Skip to content

Accessibility: hiding content responsibly, VoiceOver introduction, etc.

  • In this article, I want to discuss all the ways to hide something, be it through HTML or CSS, and when to use which.

  • It is important to note that any focusable elements within an element with aria-hidden="true" remains focusable, which can be a big problem for screen readers. Make sure there are no focusable elements within such container and that the element itself is also not focusable either (see the fourth rule of ARIA).

  • NVDA and JAWS are the most popular options with about a 40% market share each according to the 2019 WebAIM survey. VoiceOver in comparison has about a 13% market share.

  • [..] developer tools don't give us a good impression of what the user experience is actually like when using a screen reader. Fixing accessibility issues without testing them with assistive technologies is akin to fixing design issues without testing them in a browser.

  • One interesting thing to note is that the VoiceOver cursor isn't the same as keyboard focus. You might have heard that screen reader users navigate via the Tab key. This isn't totally true. The Tab key will only cycle through interactive (focusable) elements on a page. For example, if you want to navigate through fields in a form or links in a navigation. It won't show you any non-interactive elements like paragraphs and images. The VoiceOver cursor will go over each element on the page. Even if it's not interactive.

  • The VoiceOver screen reader has an issue where unordered lists with a list-style-type value of none applied to them will not be announced as a list. To address this, add a zero-width space as pseudo content before each list item to ensure the list is announced properly. This ensures the design is unaffected by the bug fix and that list items are not improperly described.

    ul {
    list-style: none;
    }
    ul li::before {
    content: '\200B';
    }