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

Live Regions

ARIA Live Regions

Live Region Tips

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.');
         
      

Focus

Focus Tips

tabindex

Password validation

Email:

Password:

Please use at least 1 character, 1 number, 1 symbol and keep your password at least 8 characters long.

Very weak

Register

Takeaways

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

Thanks!..

@_sergeikriger

Credits