What we did August 2022

This month we looked at roles and landmarks and ARIA to understand how we can make our HTML accessible to those with vision problems.  People with such problems use a screen reader to hear what is written on our pages.  

HTML is semantic, that is each tag has a meaning. A header is not a footer and you wouldn’t place it at the bottom of a page. Browsers render the html as we write it. So, anyone using a screen reader who can’t see the page would be confusing be told the next tag was a header when you were expecting to be at the bottom of the document.

The problem appears to be that semantic tags alone can’t help render a voice reading of a page. Enter ARIA or Accessible Rich Internet Applications. It was conceived to enhance the semantic nature of html and to overcome gaps or add explanation to html thus rendering the page understandable to a screen reader. This allows us to add extra meaning to our HTML.

Here is a video on the problem from Web Accessibility for Beginners

“Semantic HTML & Accessibility”

We looked at ARIA roles with a focus on landmarks. ARIA roles fall into six elements.

1. Document structure roles

2. Widget roles

3. Landmark roles

4. Live region roles

5. Window roles

6. Abstract roles

Here is the MDN doc page on WAI-ARIA Roles

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles

One problem is that not all html tags are semantic. Div and span have no meaning but may be integral to page structure so if we apply a landmark or a role to these tags we give meaning to the structure. This site uses divs to divide to page into information areas so adding a landmark role to each div allows the screen reader to identify the purpose of each div.

So we experimented with ARIA Landmarks

Our main focus was landmarks. Starting with this W3C example site on Landmarks which shows the landmarks used on the page. 

This video describes how they work.

To finish off we have a video on how to uses ARIA on a problem page.

It’s by Jen Simmons who is Developer Advocate at Mozilla. This video is part of a beginner’s tutorial called “HTML Essential Training”

 We also have a few links suggested by John L on the topic.

Leone Watson and Allison Ravenhall

Steve South

Web Design leader