a11yTips — Using aria-describedby properties to describe…

Using aria-describedby properties to describe Close buttons’ actions

Make sure the aria-describedby property is used to identify form control labels

Buttons intended to close modal dialog windows are often represented as simple “X” characters, located in the upper right corner of the windows. While this use has become a widely accepted user interface design convention throughout websites, it can still confuse some users, especially those who cannot actually see the screen and would only hear about an actionable page component called X. In order for these buttons to be meaningful to all users, including those who use screen readers, authors need to make sure the value conveyed through assistive technologies is much more descriptive.

To do so, simply make sure to explicitly and programmatically associate the “X” value with complementary information that will provide context and purpose for the button. This complementary information can reliably be conveyed through the use of the aria-describedby property, assigned to the button itself. While it will not provide additional information to sighted users, doing so will allow non-sighted users who cannot benefit from the visual indicators of the page to still get a clear understanding of the button’s purpose or function.

User Story

As a user using assistive [...]

Read article at dboudreau.tumblr.com

Article Taxonomies

Categories: Terms: , , , , Keywords: