Skip to content

3.5 ARIA.md

Latest commit

 

History

History
182 lines (161 loc) · 7.09 KB

3.5 ARIA.md

File metadata and controls

182 lines (161 loc) · 7.09 KB

Accessibility- ARIA

Source: Accesibility - Udacity Front End Web Development Nanodegree

Goals:

  • What is ARIA?
  • How to modify the role attribute?
  • How to use the ARIA spec to dive into the WAI-ARIA information for the attribute?
  • How to add specific information for a particular ARIA property?
  • How to use ARIA extended labeling options (to provide screenreader only label string)?
  • How ARIA can specify semantic relationships beyond the label? (Ex: ARIA owns to modify accesibility three)
  • Examine the Default Semantics of Native HTML elements. Not all are override by ARIA.
  • ARIA has a set of landmark and document structured roles to help users navigate and understand the page structure.
  • How to hide things from Assistence Technology (aria-hidden)?
  • How to show thinkgs only for Assistence Technology (aria-hidden true)?
  • How to explore ARIA-live regions?

Table Of Contents: ARIA

  • a. WAI-ARIA: ARIA DO´s and DONT´s
  • b. Role
  • c. ARIA labelling
  • d. Landmarks and ARIA roles
  • e. ARIA realtionships
  • f. Visible and Hidden content
  • g. ARIA live
  • h. ARIA relevant (Atomic Relevant Busy)

Resources

a. ARIA DO´s and DONT´s:

  • WAI-ARIA: Web Accessibility Initiative - Accessible Rich Internet Application.
  • ARIA attributes need to have explicit values (NO "empty values").

ARIAS DO´s

  • modify Accessibility tree.
  • give semantic meaning to non-semantic elements.
  • give new semantic meaning to native semantic element (role, name, elements).
  • Example:
<button role="switch" aria-checked="true" class="toggle">
  Enable
</button>

-Express UI-patterns (not existing in HTML). Example: tree widget -Add labels (only accessible to assistive technology). -Provide semantic Relationship. -Provide live updates (aria-live). -video.

ARIAS DONT´s

  • Modify element behaviour.
  • Modify element appearance.
  • Add focus.
  • Add event handling.

b. Role

  • Role = particular UI pattern.
  • The role attribute= in same element as tabindex attribute.
<div tabindex="0" role="checkbox" aria-checked="true" class="checkbox" checked>check me</div>

Resources

c. ARIA labelling

  • aria-label attribute

    • Used for element with visual appearance only.
    • Override other labelling (<label>) or text content (button ) except aria-labelledby attribute.
    • Add click behaviour to <label>

  • aria-labelledby attribute

    • Overcome all other labelling methods.
    • Refers to another element (label), by using an id-value of labelling element.
    • More than one element id (multiple labels).
    • Refer to hidden elements for assistive technologies(hidden).
    • NO click behaviour like <label> and aria-label.

Name the Elements

  • Provides the label for the first (outer) element.
  • To hide element from the accessibility tree, choose "No label".
  • HTML labelling techniques, ARIA roles and ARIA attributes, only work effective, if used correctly.

d. Landmarks and ARIA roles

  • Landmarks are NOT supported in older Browser versions.
  • Instead, use role attribute: -Examples: 
    <header role="banner">
<nav role="navigation">
<main role="main">
<aside role="complementary">
<footer role="contentinfo">
<dialog role="dialog">

e. ARIA relationships

  • ARIA relationship attributes
    • Refer to one/more elements on a page (to make a link between them).
    • The difference is: 1. What does the link mean. 2. How the link is represented to users.
  • Attributes:
    • aria-labelledby
    • aria-describedby
    • aria-owns
    • aria-activedescendant
    • aria-posinset
    • aria-setsize

Resources

f. Visible and Hidden content

  • Goal: finetune the user experience of users using assistive technology, to ensure that certain parts of the DOM is either:
  • Hidden: 
    <button style="visibility: hidden;">
<div style="display: none;">
<span hidden>

Or

  • Only visible to assistive tech: aria-hidden="true"
  1. element positioned absolute far off the screen. position: absolute; left: -1000;
  2. aria-label
  3. aria-labelledby or aria-describedby reference a hidden element.

g. ARIA live

for in time alerts to user.

  • ARIA live has three important values:
  • aria-live="off"(default): updates to region is not represented to user, unless assistence technology is currently focused to that region.
  • aria-live="polite" : (background change) alert = important, not urgent.
<div class="chat-history" arialive="polite">
We are head of in...!
</div>
  • aria-live="assertive": alert = important & urgent.
<div class="alertbar" arialive="assertive">
Could not connect!
</div>
  • Include ARIA live attributes in initial Page load
  • Try different type of changes to see what works on different platforms (screen readers).

Resources

h. ARIA relevant: (Atomic Relevant Busy)

  • The following attributes work with aria-live:
  • They finetune what is communicated to the user when the live region changes:

1) ARIA-ATOMIC: true assistive tech presents the entire region as a whole.( aria-atomic)

<span  aria-labelledby= "birthdayLbL" 
       aria-live= "polite" 
       aria-atomic= "true">
<input type="number" id="day" value="18"> 
<input type="number" id="month" value="10">
<input type="number" id="year" value="1983">
</span>
  • NOTE: Only need to be specified if true, if false= by default.

2) __ARIA-RELEVANT:__indicates type of changes needed to be presented to the user. ( aria-relevant)

  • aria-relevant="additions" ==> any element added to live region .
  • aria-relevant="text" ==> any text content added to any descendant element.
  • aria-relevant="removals" ==> removal of any text/ element within the live region.
  • aria-relevant="additions text" (default).
  • aria-relevant="all" ==> text additions or -removals. (All is relevant)

3) ARIA-BUSY:

  • aria-busy ==> temporarily ignore changes to the element.

ARIA is to make the job as web developer easier and to include as many users as posible.

Check this ARIA CHEETSHEET