Author: Dennis

About Carousels and ARIA Tabs

Post author By Dennis
Post date July 26, 2013
No Comments on About Carousels and ARIA Tabs

Jared Smith (@jared_w_smith) of WebAIM recently launched a clever web page on why carousels are not good practice called Should I Use A Carousel? (which totally went viral on its launch day!) There is a slide deck Keyboard and Interaction Accessibility Techniques (on Slideshare) for which this website was made. I was fortunate enough to see Jared present this at Open Web Camp 5 July 13 at PayPal.

I don’t think that a carousel itself is super terrible. But in my experience, carousels are hardly ever coded with accessibility in mind and hardly ever designed with decent usability. In addition, supporting smaller devices is an issue and coupled with the poor usability data, carousels are overall a bad idea. If you absolutely must implement a carousel, here are some design/interaction tips:

Let the user start the carousel animation.
Give the user the ability to pause the carousel.
Ensure the controls have textual labels.
Ensure the control of the currently displayed panel is indicated visually and programmatically.
Ensure the controls have ample hit areas (for mobile, fine motor disability).

On the development side, a carousel can be challenging to make screen reader accessible. It seems that the most straight forward approach is to use the ARIA tab model which is pretty straight forward and fun to do! Here’s a summary of what to do in the markup:

Each carousel content container has a role of tabpanel.
Each control, typical designed as dots, has a role of tab.
The container of the controls/tabs has a role of tablist.
Add aria-labelledby to the tabpanels which point to the id of the associated control/tab.
To each control/tab, add aria-controls (which points to the id of the associated tabpanel) and aria-selected (boolean) attributes.

Here are some code resources to help make sense of this. This first by Marco may be most relevant:

Advanced ARIA tip #1: Tabs in web apps by Marco Zehe
Tab Panel Example by Web Axe author
Accessible jQuery-ui Components – tab example
Open Ajax tab panel example
Accessible ARIA Tabs by Accessible Culture

Added: Carousel Concepts by W3C WAI
Added: The Unbearable Inaccessibility of Slideshows via SitePoint
Added: Accessible Tabs – Part 2: The Solution by Nomensa
Anatomy of an accessible carousel (Slideshare) by Access iQ
Accessible carrousel using ARIA (tab pattern) – July 2018

Updated August 2017

socialmedia twitter w3c

Companies’ Accessibility Twitter Accounts and More

Post author By Dennis
Post date July 16, 2013
3 Comments on Companies’ Accessibility Twitter Accounts and More

Here are some large companies’ accessibility Twitter accounts, and other important related links. Follow for great information. Most of the descriptions are taken from the Twitter bio.

~~@PayPalinclusive – An official feed from the PayPal Accessibility Team and related initiatives. For account-related issues, contact @AskPayPal. San Jose, California.~~ No longer active.
@msftEnable by Microsoft. Great info and resources at Microsoft accessibility.
@IBMaccess – Official IBM Accessibility Twitter account. Managed by @timjpowers & @Mac690 and follows the IBM Social Computing Guidelines. San Jose, CA · ibm.com/able
@GoogleAccess – The official Twitter account for Google’s accessibility team. California, USA · google.com/accessibility/
@FBaccess – The official Twitter account for the Facebook accessibility team. Please report specific accessibility issues at the Facebook accessibility help center.
@AdobeAccess ‏- The official Adobe Accessibility account. adobe.com/accessibility
~~@NokiaAccess – Making mobile devices accessible for all. Dallas, Texas · nokiaaccessibility.com~~
@w3c_wai – not really a “company” but the owner of WCAG. Nuff said.
@STCaccess – [Society for Technical Communication] Tweets from the SIG (Karen and Cyn) about accessibility issues for technical communicators, spiced with dashes of usability and other goodies. stc-access.org
@BBCOuch – blog and radio talk show on the BBC with a focus on disabled people and diverse stories. London · bbc.co.uk/ouch/
@BarclaysAccess – Barclays Bank UK. Barclays accessibility
@YahooAccess – closed, very sad. Hopefully will come back one day. Also, the Yahoo accessibility blog appears to be no longer maintained.

And of course, follow me on Twitter at @WebAxe and also on my Web Axe Facebook page.

Accessibility Information Pages Show Commitment to all Site Users by @LFLegal (list of companies’ accessibility info pages).
HP Accessibility & Aging page.
BBC My Web My Way – accessibility how-to for users.
Added: Oracle’s Accessibility Program.
Added: Fujitsu universal design.
Accessibility Statement generator by W3C WAI.

Updated November 2018.

facebook jobs

3 Big-Time Accessibility-Related Job Openings

Post author By Dennis
Post date July 1, 2013
No Comments on 3 Big-Time Accessibility-Related Job Openings

Here are three huge accessibility job opportunities, two in Silicon Valley. Good luck!

Accessibility Architect at Amazon, Sunnyvale, CA.
Accessibility QA Specialist at Facebook, Menlo Park, CA.
Senior Program Manager, Accessibility at Comcast, Philadelphia, PA.

Want more? Follow me (@WebAxe), @accessible_jobs and @a11yJobs on Twitter.

captcha gov visual

Rock bottom for Captcha, White House

Post author By Dennis
Post date June 1, 2013
1 Comment on Rock bottom for Captcha, White House

Unbelievable and embarrassing. Is this a new low for CAPTCHA and also for the White House? Let me explain.

In order to sign an online petition by the White House to make books globally accessible to the blind, one must register an account. The fail point is that to register, one must complete a Captcha and the audio version is indecipherable. Therefore, blind folks cannot sign a petition advocating equality for the blind!

A very sad irony.

Here’s an example of the audio Captcha required to decipher in order to register to complete the petition. Because it’s impossible to decipher, the website does not meet Section 508 requirements as the White House claims.

Unfortunately there is still no clear solution to the Captcha accessibility and usability issues. For now it seems a combination of other techniques (see links below) is the best way to go.

Press links:

Blind advocates blast White House (Politico)
Captcha Fail Leaves Blind People Unable To Sign ‘We The People’ Petition To Help The Blind (Huffington Post)
Blind people can’t sign the petition supporting treaty for the blind (MSN)

Articles on Captcha alternatives:

Spam-free accessible forms (WebAIM)
In Search Of The Perfect CAPTCHA (Smashing Magazine)
Alternatives to CAPTCHA (EvenGrounds)

articles title

My Comment on “Tackling Accessibility on The Web”

Post author By Dennis
Post date April 24, 2013
2 Comments on My Comment on “Tackling Accessibility on The Web”

Here is my comment on the blog Tackling Accessibility on The Web by @Treehouse.

An OK article, but a few of the techniques are incorrect/outdated. The data table caption is for a *title*, not a description. Never use tabindex (except 0 and -1 for keyboard focus with JavaScript interaction). Title attributes on links (and in general) is no longer recommended; screen readers usually don’t read them, browsers don’t support them for keyboard users, and it’s not supported (hardly) on mobile. Most implementations just have redundant information anyway. Also note that ARIA landmark roles are a good place to start learning ARIA, but there is much, much more to learn.

Another comment also states that the title attribute on links is not a great practice and provides a couple great links. Also note that the title attribute is still a must for an iFrame to describe its content.