week05 ARIA - UX-UI-Design-Lab/DH150-UX-WebCoding GitHub Wiki

Objectives:

  1. Label
  2. Activity: Screen reader
  3. ARIA attributes, aria-label
  4. Accessibility functions: font-size + dark-mode
  5. Assignment05
  6. Discussion: no aria is better than bad aria

As we add more interactive items, we have a more chance to have items that are not compliant to WCAG 2.1 success criteria.

I will use ARC toolkit to inspect more of the code. It doesn't matter which tool you use and I want to introduce you some other tools -- this ARC extension feels more friendly (at least) for me to show the details of the code.

https://chrome.google.com/webstore/detail/arc-toolkit/chdkkkccnlfncngelccgbgfmjebmkmce?hl=en

Two main errors I want to resolve: 1) the input form doesn't have a label (=so there is no accessible name for it, which means screen-readers or assistive technology cannot get what that text-alternative is about). 2) the icon buttons for the social media may look nice but not so kind to screen-reader, because they don't have a label (again).

Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. - https://www.w3.org/TR/WCAG21/#non-text-content

name: text by which software can identify a component within Web content to the user. The name may be hidden and only exposed by assistive technology, whereas a label is presented to all users. In many (but not all) cases, the label and the name are the same. - https://www.w3.org/TR/WCAG21/#dfn-name

The <label> seems to be the one we need to add. But, to understand what this message/error means (and why), let's get familiar with Screen Reader.

To experience what matters for screen reader -- Let's check how screen readers understand the website.

I will use screen-reader in Chrome extension:

or, you can use your Operating System's accessibility features.

I will demonstrate what happens with my work (assignment04 demo) via chrome voice-over and Mac OS voice over. Depending on the situation, the sounds from the voice-over (from my computer) may not be heard via zoom broadcasting. (I have 50%-50% success rate so far)

Visit the original website of your choice. You may want to experience the website by only listening - try it without watching the screen (or make the screen really dark). 1) Can you find what is the problem with the labels (and links)? Then, test with your latest version of your project markup. Because this markup has a relatively simple structure and you know the code behind of it, you may catch something that doesn't work perfectly when the interactive items are focused and read out. 2) what are the elements/content you find needs more work for assistive technology (screen readers) to serve more accessible/usable user-experience? Share your thoughts via CCLE.

Label

As you experienced with screen reader, a certain items are not understandable from the information the screen-reader reads out.

edit text, search entry, search, button

The problem is, it is not sufficient to understand what kind of "search" is about. We may assume that the search in this getty webpage would be search-anythinig-in-getty, or would it be? What if it is only for search-only-within-getty-research-tool?

To improve, we can try <label> to explain the context.

  <form>
       <label> Search in Getty Research Institute </label>
       <input id="mySearchInput" type="search"></input><button id="mySearchButton">search</button>
  </form>

When you test the web-page with screen reader, though, the label is not read. Because, it is not clear which form element that label is for. (In this example, we have input and button - we need to specify the label is for <input id="mySearchInput" ...>. You will use ID to link the label to input form.

 <form>
       <label for="mySearchInput" > Search in Getty Research Institute </label>
       <input id="mySearchInput" type="search"></input><button id="mySearchButton">search</button>
  </form>

It should work. Check more about <label> here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

You may want to try <legend>, when you have many input items (like list of check boxes or radio buttons) as a group in <fieldset>.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

ARIA label

What if someone wants to put the label visible, for example, social media icons (and other icon fonts)?

The social media links has only "link" - and known as "link" when Screen reader reads them. I can make it better by adding Label.

 <label for="gettyFacebook"> Visit Getty Research Facebook </label>
   <a href="https://www.facebook.com/gettymuseum" id="gettyFacebook" target="_blank" class="fab fa-facebook-square"></a>

 <label for="ettyTwitter"> Visit Getty Research Twitter </label>
   <a href="https://www.twitter.com/gettymuseum" id="gettyTwitter" target="_blank" class="fab fa-twitter-square"></a>

 <label for="gettyInstagram"> Visit Getty Research Instagram </label>
   <a href="https://www.instagram.com/gettymuseum" id="gettyInstagram" target="_blank" class="fab fa-instagram-square"></a>

 <label for="gettyYoutube"> Visit Getty Research Youtube </label>
   <a href="https://www.youtube.com/gettymuseum" id="gettyYoutube" target="_blank" class="fab fa-youtube-square"></a>

But, it will require much more space than expected, which may not look very efficient on the narrow small screen.

Another way we can try is to provide the label with ARIA.

You can add ARIA attributes of HTML to specify (or modify) the role, to change the status and properties more accessible (but may not need to be visible).

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

To start, let's test how to use ARIA - I can see aria-label.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

https://www.w3.org/TR/wai-aria/#aria-label

 <a href="https://www.facebook.com/gettymuseum" id="gettyFacebook" target="_blank" class="fab fa-facebook-square" aria-label="Visit Getty Research Facebook"></a>

It works! It only shows the icon, but the screen-reader can explain it.

aria-labelledby and aria-describedby

FYI, you can mimic <label> with aria-labelledby (two Ls) and add more info with aria-describedby). I recommend to use <label> but sometimes <label> cannot handle situations like having heading or having hyper link a in it. To use aria-labelledby and aria-describedby, you will use ID to link to the text of that ID-ed element has.

It may be useful in some situations, but it is not considered as a reliable solution in general - it may not work as expected in some browsers and with some elements. Check further information here:

https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/

As a demo, I will show what happens when I replace logos (SVGs, on the header and the footer) - in terms of screen-reader's action. I will apply aria to fix the issues.

We will put some more icon buttons. 1) to make font-size bigger or smaller; 2) to toggle the dark vs. light mode.

  • find the icon to use (ex. material icons) and download them. (and I will show how to use the external files and explain how to find a relative path.)
  • add the icons to the webpage by code as you want. (ex. right top corner, sized in 48 x 48 px, assign IDs)
  • add javascript to control the icon (document.querySelector)
  • add javascript to get user's click event
  • add javascript to run a function to make a change (set a new font-size or set a new background-color and font color)
  • check the functionality
  • check focus
  • check with screen-reader and improve the accessibility if needed.

Assignment05: Manual testing with Screen-reader

⚠️ **GitHub.com Fallback** ⚠️