icon
start-with-semantic-html-and-accessibility

Saturday, January 21, 2023 at 5:03 PM

What's A11y? Get to know Semantic HTML and Accessibility!

To the best of my knowledge, semantic HTML is for developers to better understand the website from the code level, as well as for the search engine to better interpreted. I've heard semantic HTML can improve the UX, but didn't really take it into account.
Until, I've read some articles on accessibility recently, and I feel like it's quite neccessary to get an overview of it. Hopefully, it I can take care of these details later on.

A11y is the abbreviation of Accessibility, and the 11 represents the 11 characters in between. The idea of A11y is to ensure the website is accessible to all people.

Pain Points

It wouldn't be easy for people who never experienced the pain to understand what it looks like for visually impaired people to access the web, and so do I. Therefore, let's dive into it and mimic the experience. Here I'll use the screen reader NVDA by NV Access.

I also tried out ChromeVox, but it wasn't easy to navigate around, I'm not sure but the hot keys are not working properly.

How Visually Impaired users access computer

Basically, the user can access the content via a screen reader, the screen reader read out the text whether it's on a software or website. The user will navigate through the keyboard's shortcut keys, and the screen reader will notify the user by reading out the content and related info.

My Review

After trying out the screen reader to access some of the websites, I wanna summarize parts of the experiences I've undergone. First off, it takes some time to get used to the shortcut keys to browse the website. Furthermore, it's quite confused in a lot of time, for say, the image that has no description, so as the links. Many of these are literally ruining my experience, and this is what really motivates me to learn more about it.

How to use NVDA

To taste it, you can install NVDA from the official website, and here are a few settings that helped me a lot in using the screen reader.

  1. Settings -> Mouse -> uncheck Enable mouse tracking； The reader won't keep reading aloud everything when you use the mouse.
  2. Settings -> Vision -> check Enable Highlighting； It can then visually see a rectangle around the content that the reader is reading.
  3. Settings -> Browser Mode -> change the value Maximum number of characters on one line to 250 characters； The reader might stop reading when the paragraph is too long, changing the max value can void it.
nvda-highlight.png
Here's the result after enable the setting 2 above. There's no anything other visual aids other than the default CSS by default.

Commonly Used Keys

Here are some shortcut keys that I found useful during my trial, learning more shortcut keys can help you be more efficient in browsing web content.

  1. Control + Alt + N : Open NVDA when closed
  2. NVDA + Q : Turn off NVDA
  3. ↓ : Read the next line
  4. NVDA + ↓ : Read the current line
  5. Control : Stop reading
  6. NVDA + N : Open the setting panel

The following keys are mainly used when browsing websites, it's applying to the next element when solely used, to navigate back to the previous element, combine it with a Shift.

  1. Tab : Next interactable element（Button, Link, Input）
  2. Space / Enter : Trigger the current interactable element（Click）
  3. H : Next heading（h1、h2...）
  4. D : Next Landmark
  5. F : Next Form
  6. T : Next Table
  7. B : Next Button
  8. K : Next Link
  9. G : Next Image
There're more hotkeys than those, for more details, you can hop over to this guide.

The Web Content on NVDA

Here I'll share how the screen reader interprets different types of web elements with text records, mainly on the commonly used elements and with or without the particular attributes.

Commonly Seen Elements

Website titles, headings, paragraphs, links, buttons, forms, and tables are the elements that are widely used in all websites. In general, the screen reader will read out the element's content, then the type of the element, as well as some of the related information.

Website Title - <title>

The website title is what we can see in the top bar of the browser, when the user loads the website, the first context read out by the screen reader is the website title, followed by other elements in order.

<title>Learn more on Accessibility | A11y, on KaLok's Blog</title>
# Read out：learn more on accessibility a11y on kalok's blog

Headings - <h1> - <h6>

Headings are the most important element to help the users to figure out what's the main idea of the following blocks. If the website has a bad heading that does not match the related content, it'll confuse the user and contribute to a very bad user experience.

Notice here, the reading order of the screen reader is depending on the order of the source code, it's not depending on the level of headings!

<h1>How title are interpreted by screen reader</h1>
# Read out：how title are interpreted by screen reader, heading level one

<h2>Title is way more important</h2>
# Read out：title is way more important, heading level two

Paragraph - <p>

For the paragraph element, the screen reader will directly read out the content of it, there'll be no any other information, so I'll just pass it here.

Link - <a>

Normally, when we are coding the link elements, we tend to keep the link content as short as possible for the sake of the outlook (for example: read more, click here...), and the reader will only read out the link content: 

<a href="https://google.com">Read More</a>
# Read out：link, read more
# if link has been visited, Read out：visited link, read more

From the code and result above, we can tell if the near content block did not provide any useful information, the user can barely know where the link will head to, which makes the user not really sure whether to click the link or not. There're two solutions, either we provide the context around or use the aria-label attribute as follows:

<a href="https://apple.com/..." aria-label="to Order MacBook Pro 14 now">Order</a>
# Read out：link, to order macbook pro 14 now
# if link has been visited, Read out：visited link, to order macbook pro 14 now

When we used the aria-label attribute, the screen reader will ignore the link content and read out what's inside the attribute. In this case, we keep the website clean and also provide the necessary information for the user.

Button - <button>

Basically, the result or effect of the button is the same as the link element, what the screen reader read out is the same, except the type of the element will be read out differently.

<button onClick="fn()" aria-label="Display user image">Display</button>
# Read out：button, display user image
# if button has been visited, Read out：visited button, display user image

List Item - <ul> / <ol>

By default, the list elements can be recognized by the screen reader and read out the list info with every list item, something the screen reader will also provide the position of the list item (x out of y).

The screen reader will go through the whole list at once, the user needs to use ↓ proceed to the next list item element.

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

# Read out：list with 3 items, one html
# Next item：two css
# Next item：three javascript

We know there're some slightly different between unorder list and the order list, which also results in the screen reader, the reader will read out the prefix symbol of the item differently.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

# Read out：list with 3 items, bullet html
# Next item：bullet css
# Next item：bullet javascript
<ul style="list-style: square;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

# Read out：list with 3 items, black square html
# Next item：black square css
# Next item：black square javascript

Summary

What I've mentioned above is just some obvious and common knowledge of web accessibility, it will take far more time to learn beyond that. But it's also worth learning these knowledge since it's really necessary to enhance the user experience.

Hopefully, I can do more studies on this topic and implement more advanced approaches with aria.

References

  7. Intro to ARIA -- A11ycasts #13 - https://www.youtube.com/watch?v=g9Qff0b-lHk

  9. Stops reading midway through sentence - https://github.com/nvaccess/nvda/issues/9482