A11y: Add .is-sr-only to helpers

[Muhnad]

This is a **new feature **.

Why we need is-sr-only?

• we need is-sr-only to hide content visually and keep the screen readers read the content, that's mean the content is accessible to screen readers.

[Come2Daddy]

If it's hidden to the eye why should it be accessible to screen readers ?
Just found it's case specific, when you want screen readers to access some usefull hidden contents. I guess a more specific name would be better.

[Muhnad]

@Come2Daddy what about is-sr-only?

[Come2Daddy]

Sounds good.

[Muhnad]

@jgthms What do you think about class naming?

[jgthms]

is-sr-only is better I think yeah! Can you add some documentation as well to explain the purpose and how it works?

[Muhnad]

.is-sr-only: is a class for hiding elements text visually but keep the element available to be announced by a screen reader.

Using .is-sr-only we can:

• Provide additional details about the element like hidden labels, error details.
• Add additional instructions and information about navigation, actions and so on.

Examples:

<p class="has-text-danger">
  message here
</p>

in this example, we have a message styled by CSS with color: red and this means the message is important or invalid or danger and when the screen reader read the paragraph will read the text inside it so we need something to tell SR the content of the message is important so we need to hide the text from all users except SR.

<p class="has-text-danger">
  <span class="is-sr-only">Important </span>
  message here
</p>

another example:
imagine you have a button with an icon like this one:

<button class="delete"></button>

when screen reader read this button will announce empty button but actually the buttons have an "X" icon but this icon is added by CSS and screen reader read the HTML text so we need to add text for this button:

<button class="delete">
  <span class="is-sr-only">Close</span>
</button>

now SR will annonce the button with close text, so the user now know this button for close action.

Note we have another replacement for the latest example by adding aria-label for the button

  <button class="delete" aria-label="close"></button>

[Muhnad]

@Come2Daddy @jgthms take a look please 😄

[darylf]

@Muhnad I have a question about your examples.

What would a screen reader read if you added the aria-label to the danger text? Is there a benefit to using is-sr-only over the aria-label example?

<p class="has-text-danger" aria-label="Important">
  message here
</p>

[Muhnad]

@darylf in your example Screen reader will read the aria-label text only and will ignore the paragraph text.

Why does this happen?
it's all about accessible name algorithm work.

in your example, the accessible name will be 'Important' not 'message here' because ARIA overrides the HTML

the accessible name provided with the native HTML will be overridden by the accessible name provided with ARIA.

[darylf]

Thanks so much for explaining!

[JohnAherne]

I notice that is-sr-only-focusable is not in the docs. Has it not been added or not included for any reason.

Any ideas?

[JohnAherne]

Sorry. Should have said why I was interested.

I was looking to make use of the skip to main content trick. I found some javascript code - I think from w3c aria site - that is meant to make this trick work, but have not found a way to make it work reliably enough so that a partially sighted user would be able to make sense of what was going on.

[Muhnad]

@JohnAherne no you don't need any JS for a skip to content. it all about hiding content from the screen and when using :focus show the item.

check this skip navigation on webaim
check this component you will find there is not JS code to make the skip links work it just HTML elements and CSS skip links react component