Time Control in Web Accessibility

Sergei Kriger

Clock icon

Time Control in Web Accessibility

Sergei Kriger

@_sergeikriger

SinnerSchrader logo.

Page Life Cycle

Browser before loading.

Page Life Cycle

URL in the address bar.

Page Life Cycle

Web page is loading.

Page Life Cycle

Web page loaded.

Page Life Cycle

Web page loaded.
Facebook login. Support chat.

Blind users

Round glasses.

What if Error?

Inform Users

Live Regions

aria-live

aria-live="polite | assertive | off"

How Live Region Works

         
        <div></div>
         
      

Step 1: Add Attribute

         
        <div aria-live="polite"></div>
         
      

Step 2: Update Content

         
        <div aria-live="polite"></div>
         
        const el = document.querySelector('div');
        el.textContent = 'You liked it.'
         
      

Polite vs. Assertive

polite  vs.  assertive  vs.  off

off

off  =  nothing

aria-live polite

"My mom always said life was like a box of chocolates – you never know what you're gonna get."

aria-live assertive

"My mom always said life was like a box of chocolates – you never know what you're gonna get."

Live Regions

aria-live="polite" aria-live="assertive" aria-live="off" aria-controls="[ID] [ID]"

role="log" role="status" role="alert" role="progressbar" role="marquee" role="timer"

Live Region Tips

Compatibility

         
        <div role="status" aria-live="polite"></div>
         
        <div role="alert" aria-live="assertive"></div>
         
      

On Demand Live Region

         
        const liveRegion = new OnDemandLiveRegion({
          level: 'polite'
        });
         
        liveRegion.say('You liked it.');
         
      

User Action

Focus

el.focus()

Focus Tips

tabindex

<div tabindex="0 | 1 | 2 | ...">

Browser support

Browser Google Chrome Browser Firefox Browser Safari Browser Internet Explorer

Demo

Password validation

Takeaways

Inclusive components by Heydon Pickering

Aria best practices.

Accessibility for everyone

Accessibility for everyone by Laura Kalbag.

Inclusive components by Heydon Pickering

Inclusive components by Heydon Pickering.

Thanks!..

@_sergeikriger

Credits

Icons made by Hadrien from www.flaticon.com is licensed by CC 3.0 BY
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 Icon Works from www.flaticon.com is licensed by CC 3.0 BY
Icons made by Icongeek26 from www.flaticon.com is licensed by CC 3.0 BY
Icons made by Dave Gandy from www.flaticon.com is licensed by CC 3.0 BY
Icons made by Eleonor Wang from www.flaticon.com is licensed by CC 3.0 BY