Accessibility: sr-only or aria-label

Question

From MDN:

In the example below, a button is styled to look like a typical "close" button, with an X in the middle. Since there is nothing indicating that the purpose of the button is to close the dialog, the aria-label attribute is used to provide the label to any assistive technologies.

<button aria-label="Close" onclick="myDialog.close()">X</button>

According to the Bootstrap Documentation:

Hide an element to all devices except screen readers with .sr-only

So I guess I could also write:

<button onclick="myDialog.close()"><span class="sr-only">Close</span>X</button>

In a Bootstrap project, how can I choose which one to prefer?

Solution 1

In the MDN example, a screen reader will just speak just the word "close" since aria-label overrides the text in the button. This will work even if you re-use the code without Bootstrap.

In your example, a screen reader will speak "close x" since you are doing nothing to hide the "x" from screen readers. You are also adding a text node to then hiding it with a class.

I would use the example from MDN.

Solution 2

The class sr-only class is for whole blocks of text content which are only useful to those using a screen reader and should be hidden from others.

An example from and app I'm working on provides instructions for using an accessible controller with the web app:

<div class="sr-only">
  When voting with the text-to-speech audio, use the accessible
  controller to navigate your ballot. To navigate through the
  contests, use the left and right buttons. To navigate through
  contest choices, use the up and down buttons. To select or
  unselect a contest choice as your vote, use the select button.
</div>

In your example, you simply want to provide different text content for a screen reader. To answer your specific question, use the MDN example.

I've use aria-labels to hint to a screen reader when to add pauses by suffixing titles with periods or commas as necessary (More about Pausing in a screen reader for accessibility):

<h1 aria-label="Hello World.">
  Hello World
</h1>

Comments

[Mr_Green]

sr-only has nothing to do with accessibility. It just hides the element except screen readers. It doesn't mean that it automatically makes the element screen reader friendly.

[thdoan]

Note that in BS4 .sr-only has been replaced witih <button aria-label="Close"><span aria-hidden="true">X</span></button> in the code.

[ernesto]

@thdoan Do you know the purpose of the aria-hidden="true" inside the button? aria-label overwrites it where I have tested.

[Matty J]

@ernsto aria-hidden="true" will prevent the content within that element from being read out by a screen reader. So the screen reader will only read out 'Close' in @thdoan's example (instead of 'Close X').

[thdoan]

It really depends on the screen reader / text-to-speech client. I would consult with these articles first, but keep in mind they may be outdated already: (1) Text Links: Best Practices for Screen Readers; (2) title and aria-label attribute accessibility test case.