Test of changing the role of a span in a menu

This is a test of changing the role of a span to fix an accessiblity issue.

Creating links intended for screen reader users that are hidden visually

TOC

In some cases, developers may want to create links that are only intended for screen reader users, that are hidden visually. There are two ways to create visually hidden links:

  • The aria-label method
  • The clip method

One case where you might want to have visually hidden links is the case of social media icons. For example, visually you might want to show a Facebook logo for the link, but screen reader users you would spell out the word ‘Facebook’ in the link. So, it would appear as a Facebook logo button, but have an accessible name of ‘Facebook’.

The aria-label method

Aria-label is the attribute that can change the accessible name of a link. In this method, a CSS class is placed in the <a> tag to visually show the Facebook icon, like class=”fb”. Then the aria-label attribute is used in the <a> tag to provide an accessible name. Without aria-label in it, it would be an empty link.  
Aria-label code example:

  <a href="https://www.facebook.com/stateuniversity"  class="fb" aria-label="State University Facebook  page"></a>
  

The clip method

In the clip method, the text that’s desired to be visually hidden is wrapped in a <span> and given a CSS class, like: class=”visually hidden”. Then in that CSS class definition, the text is thrown off-screen, so it’s not seen visually, but remains available for screen reader users. It’s called the clip method because it uses the clip CSS property to redefine the visible portion of the link element and totally clip it from being seen.
Clip method code example:

  <a href="https://www.facebook.com/stateuniversity"  class="facebook_icon">
<span class="visually-hidden">State University Facebook page</span>
</a>

Some CSS for the code example:

  <style> …
.visually-hidden {
border: 0;    clip: rect(0 0 0 0);
height: 1px;    margin: -1px;
overflow: hidden;    padding: 0;
position: absolute;   width: 1px;
}
</style>

Updated clip method CSS

The MDN docs say that the clip CSS property is now deprecated. Here is the CSS updated to use the clip-path method:

  <style> …
.visually-hidden {
border: 0;    clip-path: rect(0 0 0 0);
height: 1px;    margin: -1px;
overflow: hidden;    padding: 0;
position: absolute;   width: 1px;
}
</style>

The clip-path property can also clip with different shapes, other than a rectangle, like: circle, ellipse, and polygon.


 

Resources about creating visually hidden links:

Using role=”presentation” on HTML tables for special cases

HTML table example with role=”presentation” on it

In this example, screen readers should not treat the data table as a table because role=”presentation” removes those table semantics. For this technique to work the role=”presentation” has to be in the table element itself, not on a wrapper div. Upon testing, NVDA and Narrator comply and treat it as normal text without saying anything about the table rows or cells. Layout tables are a case where you might use role=”presentation” to make the table not look like a true data table to screen readers.


Railroads in Columbus Union Station table example
Railroad name Years in operation Succesor company
New York Central 1853-1968 Penn Central
Pennsylvania Railroad 1846-1968 Penn Central
Penn Central 1968-1971 (company existed until 1976) Conrail / Amtrak
Norfolk & Western 1838-1982 Chessie System / CSX
Baltimore & Ohio 1830-1972 (name still used until 1987) Norfolk Southern
Chesapeake & Ohio 1869-1972 Chessie System / CSX

For comparision here’s the same table example but with role=”presentation” removed:


Railroads in Columbus Union Station table example
Railroad name Years in operation Succesor company
New York Central 1853-1968 Penn Central
Pennsylvania Railroad 1846-1968 Penn Central
Penn Central 1968-1971 (company existed until 1976) Conrail / Amtrak
Norfolk & Western 1838-1982 Chessie System / CSX
Baltimore & Ohio 1830-1972 (name still used until 1987) Norfolk Southern
Chesapeake & Ohio 1869-1972 Chessie System / CSX