Search code examples
htmlaccessibility

How to set text to be accessible on a webpage

When a user clicks tab on my page, it travels to all the links and buttons. Simply anything that is interactive. This works fine.

But how will a person that has accessibility limitations know there is a text on the page and to get it read out or to tab to it.

What's the norm here. Cause I tried the same on well known sites like stackoverflow and bbc.co.uk. They are doing the same where tabbing only works on links and buttons. It ignores text.

What about text. I tried using arrow keys which does nothing. If I press down it scrolls the page.

I get that the person could highlight the text and then get it read out to them with a screen reader. But that is assuming they are able to highlight in the first place.

What's the expected behaviour. How do we deal with text to get read out.

Imagine a page in following format. At present tab skips all text and only highlights the links and buttons. How do we handle text for accessibility. How do we set it up for keyboard access or have I pictured this wrong and text should indeed be ignored.

<!DOCTYPE html>
<html>
<body>
    <h1>Heading 1</h1>
    <p>This is some sample text.</p>
    <h2>Heading 2</h2>
    <p>This is some more sample text.</p>
    <h3>Heading 3</h3>
    <p>Here's even more sample text.</p>
    <!-- All the above ignored by screen reader unless you highlight with a mouse, arrow key does nothing even on sites like bbc.co.uk -->
    <button>Button 1</button>
    <a href="#">Link 1</a>
    <button>Button 2</button>
    <a href="#">Link 2</a>
</body>
</html>

P.S: If it matters, using mac with built in screen reader. Also tried on Windows with NVDA, same outcome.

Solution

  • You don’t need to do anything additional to allow for reading your website (except for providing a proper semantic structure of your document, which you did).

    Desktop screen readers distinguish between reading and interaction. The latter is done via the Tab keys.

    As you mentioned, arrow keys are usually used for reading, but only together with a modifier key.

    According to WebAIM’s guide on Using VoiceOver to Evaluate Web Accessibility, you can use

    VO+a to start reading

    VO + → to read next item

    The modifier key for VoiceOver, here referred to as VO can be customised. By default, it’s Control + Option. So you’d press Control + Option + a to start reading.