CODEWITHSUNDEEP
htmlaccessibilitywai-aria
tim
tim

Reputation: 208

Accessibility regarding role="status"

I believe my question is probably overly simple, but I can't seem to find much information about how role="status" determines what content to announce. Any feedback would be greatly appreciated. Unfortunately, most resources point to this page that 404s https://www.w3.org/TR/wai-aria/roles#status

Upvotes: 4

Views: 9946

Answers (2)

Gaurav Surtani
Gaurav Surtani

Reputation: 11

Can have a look at this. https://www.w3.org/WAI/WCAG21/working-examples/aria-role-status-searchresults/

Every time there's a button click and value changes in the DOM. role="status" makes it a point to announce those changes.

If you find a progress bar and add role status, it will announce every 4~5 seconds that the progress bar value is increasing.

Upvotes: 1

Josh
Josh

Reputation: 4322

<div role="status"> is analagous to <div aria-live="polite"> - see reference.

<div role="alert"> is analagous to <div aria-live="assertive" aria-atomic="true"> - see reference.

Live regions are a little tricky. To work correctly, they need to exist in the HTML at time of page-load, but they will only be announced when the content within the container changes. Updating the content within the container is usually accomplished via JavaScript.

When the aria-live attribute is set to an implicit value of polite, screen-readers should finish reading the current item before announcing the live region update.

When the aria-live attribute is set to an implicit value of assertive, screen-readers should interrupt the current flow of text to announce the live region update.

An implicit attribute of aria-atomic="true" means that the entire contents of the live region (not just the new or updated part) will be announced.

Terrill Thompson has a very good ARIA Live Region Test Page that demonstrates how live regions work in action.

Upvotes: 6

Related Questions