WAI-ARIA in 5 steps

Sergei Kriger @_sergeikriger

AA

WAI-ARIA

Web Accessibility Initiative —
Accessible Rich Internet Applications

Assistive Technologies

5 #1 Don't Use ARIA

Sign in

Screenshot: Google sign-in button with devtools

#2 Roles

What

Item one
Item two
Item three

Item one
Item two
Item three

<header> <main> <footer>
<nav> <article>

#3 States and Props

What it does

London, the capital of England and the United Kingdom, is a 21st-century city with history stretching back to Roman times.

role="tablist" role="tab" role="tabpanel" aria-selected="true" aria-controls="IDREF" aria-labelledby="IDREF"

#4 Accessible Names

Plain text

         
        <p>Don't Worry Be Happy</p>

Pseudo elements

           
          <p>Don't Worry Be Happy</p>

          p::before {
            content: 'Before';
          }
          p::after {
            content: 'After';
          }

Controls

         
        <input type="checkbox"> Subscribe

Controls

         
        <label>
          <input type="checkbox"> Subscribe
        </label>

Labels & Descriptions

         
        <button>
          <img src="signin.svg">
        </button>

Labels & Descriptions

         
        <button>
          <img alt="Icon" src="signin.svg">
        </button>

Labels & Descriptions

         
        <button aria-label="Sign in">
          <img role="presentation" src="signin.svg">
        </button>

Labels & Descriptions

        <h2 id="ref-1">Sign in</h2>
        <div id="ref-2">Fill your email and password.</div>
         
        <button aria-labelledby="ref-1"  aria-describedby="ref-2">
          <img src="signin.svg">
        </button>

Priority

Text (incl. ::before ::after)
Native attributes (e.g. alt title <label> <caption>)
aria-label
aria-labelledby aria-describedby

^* Very approximately. Needs to be tested with ATs.

Spec vs. Reality

w3.org/TR/accname-1.1

#5 Focus

Recap

Don't use ARIA
Roles
States and Props
Accessible names
Focus

w3.org/TR/wai-aria-1.1

Thanks!.. Questions?

@_sergeikriger

Credits

Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY

Icons made by Google from www.flaticon.com is licensed by CC 3.0 BY

Icons made by Smashicons from www.flaticon.com is licensed by CC 3.0 BY

Rudloff [CC BY 3.0], via Wikimedia Commons

Icons made by Hadrien from www.flaticon.com is licensed by CC 3.0 BY