How to Write Content That Screen Readers Will Ignore

Is there a way to write content that screen readers will ignore?

Halfway through writing the question I remembered where to look.

CSS can do this:

<span class="dontRead">Screen readers shouldn't read this</span>

.dontRead {
    speak: none;
}

Make screen reader ignore a section but read its focusable content

short answer: stop adding tabindex everywhere. screen reader users navigate with reading keys, so there's no point doing whatever it is you're trying to do with making things focusable...

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

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.

In HTML, how can I have text that is only accessible for screen readers (i.e. for blind people)?

As far as alt text, you are correct, that only works for images.. But you can use aria-label in place of the alt attribute for non-image elements like so:

Solutions that work

ARIA Labels ★ ★ ★ ★ ★ ★

aria-label (not to be confused with aria-labelledby, a related tag that instead pulls the accessible name from the text of another element) is used to add off-screen descriptive content to an element much in the way an alt= attribute adds off-screen descriptive content to images to be used when the images are not displayable.

The difference is, aria-label can be used on non-image elements.

<div aria-label="test A"><p aria-hidden="true">test B</p></div>
<!--
     result (screenreaders):  test A
     result (regular):        test B
-->

The addition of the aria-hidden attribute hides the inner text.

Position + Clip + Collapse ★ ★ ★ ★

.screenreader {
    position: absolute !important; /* Outside the DOM flow */
    height: 1px; width: 1px; /* Nearly collapsed */
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
    clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}

The clip is used to hide the 1px x 1px element completely, otherwise it will still be visible on the screen.

Position ★ ★ ★

.screenreader {
    position: absolute;
    left:-9999px;
}

<div>Wed<span class="screenreader">nesday</span>, Sept<span class="screenreader">ember</span> 24, 2014</div>

Indent ★

.screenreader {
    text-indent: -5000px;
}

The actual indent value is not important as long as it's outside of the range of your pages layout. The example will move the content to the left 5,000 pixels.

This solution only works for full blocks of text. It won't work well on anchors or forms, or right-to-left languages, or specific inline-text intermixed with other text.

Will not work

visibility: hidden; and/or display:none;

These styles will hide text from all users. The text is removed from the visual flow of the page and is ignored by screen readers. Do not use this CSS if you want the content to be read by a screen reader. But DO use it for content you don't want read by screen readers.

width:0px;height:0px

As above, because an element with no height or width is removed from the flow of the page, most screen readers will ignore this content. HTML width and height may give the same result. Do not size content to 0 pixels if you want the content to be read by a screen reader.

Further:

WebAIM Center for Persons with Disabilities
Fangs Screen Reader Emulator for Mozilla

How to add a Skip to main content link that only shows to screen readers, using Tailwind CSS?

Tailwind CSS let you designate elements as on visible to screen readers via "sr-only"

Code example (just inside the tag):

<a href="#main-content" class="text-center bg-black text-white underline text-2xl sr-only focus:not-sr-only">Skip to main content</a>

And then add <main id="main-content"> where the main content begins on that page.

And lastly, add the closing </main> tag right after the page's main content ends.

Link to TailwindCSS's screen reader only documentation