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.

Inform Users

Notifications

Focus

el.focus()

Live region

aria-live="polite | assertive | off"

Aria region polite

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

Aria region assertive

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

on-demand-live-region

For better browser support

aria-live="polite" role="status"
aria-live="assertive" role="alert"

User Action

Cookies modal

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

focus-trap

Updates

Refresh email

Envelop

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

Update examples

Weather icon Stock Soccer ball

Status

Login

Password strength

Uploading files

document.pdf
0kb

Takeaways

Sources

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