Time Control in Web Accessibility

Sergei Kriger

@_sergeikriger

Page Life Cycle

Page Life Cycle

URL

Page Life Cycle

URL
Loading

Page Life Cycle

URL
Loading
Content

Page Life Cycle

URL
Loading
Content
Done!

5 3

What if Error?

Inform Users

Live Regions

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 vs. off

off = nothing

"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"

ARIA Live Regions

Live Region Tips

Doesn't work

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

Good Way!

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

Compatibility

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

on-demand-live-region

On Demand Live Region

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