Comments on: Easy ARIA Tip #5: aria-expanded and aria-controls

By: lang

lang — Wed, 09 Mar 2011 18:05:35 +0000

Finally, I think some screen readers may automatically try to read live changes on a page when a userâ€™s click or key press caused the change. Firefox has an object attribute to tell the AT when this has happened. Iâ€™m not sure if anyone has implemented that.

By: Type-Style

Type-Style — Wed, 05 Jan 2011 16:39:31 +0000

@anon
2: jepp you are right!
3: Ill guess so! But why should a controlling element not have an expaned attribute?

Anyway in this posted is “aria-live” mentioned.
I would be more than happy if you could make an Aria-Quick-Tip #6 with that topic.

Regards Type!

By: anon_

anon_ — Sat, 01 Jan 2011 20:36:31 +0000

1/
IMO an element X which “controls the expansion of another grouping container that is not ‘owned by’ the element” shouldn’t have an aria-expanded attribute because when the element Y it is controlling collapse the element X is still visible (expanded).

2/
aria-controls makes no sense if javascript is disabled (unless you are using the HTML5 details tag)

3/
if the controlling element doesn’t have an aria-expanded attribute, a tabindex will still make them “clickable”?

By: Jens Grochtdreis

Jens Grochtdreis — Thu, 11 Mar 2010 15:20:55 +0000

Thank you for the good explanation. As you’ve mentioned my blog I started to add WAI-ARIA as you described to it. I wrote an article – in German – about the jQuery-script that enhanced the website in the WAI-ARIA-way:
http://grochtdreis.de/weblog/2010/03/11/anreicherung-meiner-webseite-mit-wai-aria/

By: Anreicherung meiner Webseite mit WAI-ARIA « F-LOG-GE

Anreicherung meiner Webseite mit WAI-ARIA « F-LOG-GE — Thu, 11 Mar 2010 15:14:50 +0000

[...] Zehe hat in seinem Blog freundlicherweise beschrieben, welche Elemente welche Attribute bekommen müssen. Diese Technik ist nur sinnvoll und [...]

By: Philipp

Philipp — Mon, 22 Feb 2010 12:08:05 +0000

(oups, wordpress stripped my source example, so i posted it on pastebin: http://pastebin.com/f71eb2e05 )

By: Philipp

Philipp — Mon, 22 Feb 2010 12:04:05 +0000

Does it make sense to mark a region as “aria-expanded: false”, if it’s removed from the DOM with “display: none”?

If I have construct with many ARIA-stuff inside, do you think that’s too much? It declares the whole box with the expandable content inside als aria-live:polite, gives the “Close”-Button a role:button and the expandable fulltext has a aria-expanded:true/false, if you click on the headline or close button.

Here is an example:

Headline
Close Box
Full text only visible if you click on the h2-element

By: Marco

Marco — Wed, 17 Feb 2010 08:15:19 +0000

Hi Aaron, sorry for the delay in responding! You wrote:

does aria-controls affect the behavior of any of the screen readers? Or can the screen reader user navigate to what it points to?

Theoretically, a screen reader can use the relational info provided by IAccessible2/ATK to provide a navigational means to navigate to that content. However, I am not aware than any screen readr actually uses that info yet. But perhaps this article inspires some creativity among the screen reader developers!

When the item is expanded, should the author make it next in the tab order so that users can navigate to it with a tab key when itâ€™s expanded?

Yes, this is an excellent point, and I’ve updated the article to reflect that. Thanks! So far, I have seen mostly cases where the newly expanded content actually follows the item that expands the new chunk, directly in the source code. In this case, screen readers pick it up. The example I linked to, does this. The list of archive months appears in the source code directly below the “Archive” heading, which makes it easily navigable just by down arrowing.

Finally, I think some screen readers may automatically try to read live changes on a page when a userâ€™s click or key press caused the change. Firefox has an object attribute to tell the AT when this has happened. Iâ€™m not sure if anyone has implemented that. If they have, it might be important to put aria-live=â€offâ€ on the expanding region.

I am not aware of any Windows screen reader trying to do automatic detection of non-marked up live regions. Orca on GNOME does that to some extent, but it didn’t do it for me in this example. I guess it depends on testing the web page with a screen reader (this should be done anyway), and set this attribute if necessary. I’ll put a note in the article update to that effect.

By: Travis Roth

Travis Roth — Fri, 12 Feb 2010 20:39:27 +0000

Hi Marco, Good article. Aaron has some good questions in the comment section.

Also a comment about the comments of your blog: they pick up a lot of Twitter repeats which ads a lot of repetative comments making it easy to miss real discussion…

By: Aaron Leventhal

Aaron Leventhal — Fri, 12 Feb 2010 14:31:34 +0000

Hi Marco, does aria-controls affect the behavior of any of the screen readers? Or can the screen reader user navigate to what it points to?

When the item is expanded, should the author make it next in the tab order so that users can navigate to it with a tab key when it’s expanded? Perhaps from there the user would navigate with more tab keys or arrow keys depending on what it is.

Finally, I think some screen readers may automatically try to read live changes on a page when a user’s click or key press caused the change. Firefox has an object attribute to tell the AT when this has happened. I’m not sure if anyone has implemented that. If they have, it might be important to put aria-live=”off” on the expanding region.

By: alastc (alastc)

alastc (alastc) — Thu, 11 Feb 2010 16:35:01 +0000

Twitter Comment

RT @gezlemon: Nice post from @MarcoZehe on how to use aria-expanded and aria-controls to make accessible menus: [link to post] #fb

- Posted using Chat Catcher

By: gezlemon (Gez Lemon)

gezlemon (Gez Lemon) — Thu, 11 Feb 2010 15:13:00 +0000

Twitter Comment

Nice post from @MarcoZehe on how to use aria-expanded and aria-controls to make accessible menus: [link to post] #fb

- Posted using Chat Catcher

By: sprungmarkers (Sylvia Egger)

sprungmarkers (Sylvia Egger) — Thu, 11 Feb 2010 11:48:00 +0000

Twitter Comment

RT @kprobiesch "Easy WAI-ARIA Tip #5: aria-expanded and aria-controls" is now live! [link to post] (from @MarcoZehe) #waiaria #a11y

- Posted using Chat Catcher

By: fernmuendlich (Maik Wagner)

fernmuendlich (Maik Wagner) — Thu, 11 Feb 2010 11:33:00 +0000

Twitter Comment

@marcozehe hat einen neuen Easy WAI-ARIA Tip geschrieben: #5: aria-expanded and aria-controls" [link to post]

- Posted using Chat Catcher

By: Maik Wagner

Maik Wagner — Thu, 11 Feb 2010 10:42:55 +0000

Der Artikel kommt passend als Reminder fÃ¼r mein Projekt; aria-expanded wollte ich ja auch schon lÃ¤ngst eingebaut haben – Frisch an’s Werk!

By: sriniworld (Srinivasu)

sriniworld (Srinivasu) — Thu, 11 Feb 2010 09:35:02 +0000

Twitter Comment

RT @ppatel New blog post: "Easy WAI-ARIA Tip #5: aria-expanded and aria-controls" is now live: [link to post] RT @MarcoZehe

- Posted using Chat Catcher

By: sindrewimberger (Sindre Wimberger)

sindrewimberger (Sindre Wimberger) — Thu, 11 Feb 2010 09:34:01 +0000

Twitter Comment

New blog post: "Easy WAI-ARIA Tip #5: aria-expanded and aria-controls" is now live! [link to post] #fb /via @MarcoZehe

- Posted using Chat Catcher

By: kprobiesch (Kerstin Probiesch)

kprobiesch (Kerstin Probiesch) — Thu, 11 Feb 2010 07:50:59 +0000

Twitter Comment

"Easy WAI-ARIA Tip #5: aria-expanded and aria-controls" is now live! Go and read it here: [link to post] (from @MarcoZehe)

- Posted using Chat Catcher

By: webaxe (Web Axe)

webaxe (Web Axe) — Thu, 11 Feb 2010 07:43:59 +0000

Twitter Comment

"Easy WAI-ARIA Tip #5: aria-expanded and aria-controls" [link to post] New blog post from @MarcoZe

- Posted using Chat Catcher