0

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!

Ileana Profeanu
  • 377
  • 2
  • 10
  • 33
  • 1
    I imagine that's up to the configuration of the screen reader rather than something the HTML can affect. – DBS Dec 09 '21 at 12:02
  • Why do you want that? It would break the expectation of the one using the screenreader. If one is using a screen-reader you are used to how it promotes certain elements, so why do you want to mess around with that? – t.niese Dec 09 '21 at 12:02
  • Does this answer your question? [Is there a way to write content that screen readers will ignore?](https://stackoverflow.com/questions/672156/is-there-a-way-to-write-content-that-screen-readers-will-ignore) – Peter Krebs Dec 09 '21 at 13:33
  • Otherwise there is this guide: [HTML Accessability](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML). Anything else is intended by the screen reader and people are used to it. – Peter Krebs Dec 09 '21 at 13:36
  • 1
    Does this answer your question? [How to Avoid screen Reader reading out element name](https://stackoverflow.com/questions/49872358/how-to-avoid-screen-reader-reading-out-element-name) – Spectric Dec 09 '21 at 19:10

1 Answers1

1

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.

slugolicious
  • 15,824
  • 2
  • 29
  • 43