Search code examples
htmlscreen-readers

Is there a way for screen readers to NOT read type of HTML element?


As the title states, I wonder whether there is a HTML attribute that can be added to an element so a screen reader won't read the type of the element e.g. for

<h4>Subtitle</h4>

a screen reader would read "Subtitle. Heading 4"

Any feedback appreciated. Thank you!


Solution

  • Yes, you can do it but I would caution against it.

    You can use role="presentation" or role="none". They do the same thing and are interchangeable. The original ARIA spec just had "presentation" but there was some confusion from developers on what "presentation" meant so the spec added "none" as an alias for "presentation".

    <h4 role="presentation">Subtitle</h4>
    

    Adding role="presentation" would be analogous to having

    <div>Subtitle</div>
    

    You lose all the semantic benefits of using an <h4>. A screen reader user will not be able to navigate to the text using the H or 4 screen reader keyboard shortcut (for NVDA and JAWS). Nor will they see the text listed if they bring up a dialog that shows all the headings on the page.

    Presumably the code is using <h4> for a reason. Is that reason just to get the styling of what an h4 looks like? If so, then I can maybe see using role="presentation". But a better solution in that case is just use a <div> and point it to the same CSS class that the <h4> uses to get the styling (if you have a custom h4 CSS class). If you're using the default browser styling for an h4, then using a real h4 and turning off the semantics might be the best way to achieve that.