Time Control in Web Accessibility

Time Control in Web Accessibility

Sergei Kriger

@_sergeikriger

Blind users

What if Error?

Live Regions

aria-live

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

off

aria-live polite

aria-live assertive

ARIA Live Regions

Focus

Interactive elements

tabindex

Takeaways

• Inform users
• aria-live="polite | assertive"
• el.focus()

Thanks!..

@_sergeikriger

Credits