WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How best to notify screen readers of updated section of page (aria live regions?)

for

From: Steve Green
Date: Jan 22, 2013 5:20AM

Here is the relevant section of the ARIA specification.

http://www.w3.org/TR/2011/CR-wai-aria-20110118/roles#tabpanel

From: <EMAIL REMOVED> [ <EMAIL REMOVED> ] on behalf of Steve Green [ <EMAIL REMOVED> ]
Sent: 22 January 2013 12:13
To: WebAIM Discussion List
Subject: Re: [WebAIM] How best to notify screen readers of updated section of page (aria live regions?)

This content is in a tabbed interface. WAI-ARIA has 'tab' and 'tabpanel' roles precisely for this sort of content. I have not tested this with a screen reader so I don't know how useful these roles are in practice.

Steve Green
From: <EMAIL REMOVED> [ <EMAIL REMOVED> ] on behalf of Birkir R. Gunnarsson [ <EMAIL REMOVED> ]
Sent: 22 January 2013 11:09
To: WebAIM Discussion List
Subject: [WebAIM] How best to notify screen readers of updated section of page (aria live regions?)

Hey gang

I'm practicing my ARIA, but also continuing my website testing and so on.
I have come across one situation, whose solution is not immediately
obvious to me.
On the page:
http://www.islandsbanki.is
(sorry, it is all in Icelandic, I know)
there is an h2 headings that says "fréttir", which means (news.
Underneath that heading is a list of two links:
Frettir
Greinar
(greinar = articles).
Below that is an area of a website with 3 to 4 stories )visually it is
probably a payne).
When you activate "fréttir" you get news stories, but when you
activate "greinar" the content of that panel changes to a different
set of stories (articles/analytics).
I am still trying to decide what would be the best way to notify
screen readers of either the currently active content (is it fréttir
or greinar), obviously putting a heading on the section with the
stories would be one way to go.
Also how to notify screen readers when
"content updated to greinar"
or
"content updated to Frettir".
I would imagine ARIA live regions would be the ideal way to do this,
but still can't find an example that closely enough matches this
situation.
I am increasingly seeing this type of displaying content, and I find
it quite convenient as a screen reader user, as long as I follow the
internal page updates easily.
So any ideas, suggestions or pointers to a very similar example welcome.
Cheers
-B