ARIA is a W3C specification that can be used to dramatically improve the accessibility of custom widgets, especially for users of screen readers. For those unfamiliar with ARIA this article aims to explain the unfamiliar through the lens of the familiar: existing HTML widgets.
Forms
Accessible form design.
Easy Fixes to Common Accessibility Problems
Thursday, October 6th, 2011
Making a site or application accessible can seem so overwhelming that it can completely stall efforts before they begin. But sometimes simple changes can provide the necessary momentum while resulting in significant improvements for users.
So, in the spirit of small things that make a big difference, here’s a list of fixes for common accessibility problems.
Continue reading Easy Fixes to Common Accessibility Problems
Create Dynamic Form Labels with ARIA
Thursday, August 18th, 2011
Many times ARIA is used as a quick fix for accessibility issues caused when more semantic elements should have been used. For instance, an input could use aria-label when the design for the page does not include a visible label tag. Another common use is role="button" when links are used for actions instead of the semantic button. ARIA roles and attributes provide simple solutions to low-hanging fruit; something developers with legacy code and screen reader users can appreciate.
An Accessible Solution for Yahoo Search Direct
Monday, August 15th, 2011
Caridy Patiño, the principal frontend engineer for Yahoo! Search Direct, just wrote an article for the Yahoo! User Interface blog on what went into creating an accessible, dynamic search box: Making Search Direct Accessible.
Caridy worked with Victor Tsaran, of the Yahoo! Accessibility Lab, to fine tune the experience of screen reader users typing a search query and being notified of potential results.
Continue reading An Accessible Solution for Yahoo Search Direct
Use ARIA to define invalid responses for form inputs
Friday, February 25th, 2011
Form Validation
The most difficult part of building web page forms is validation. It’s best to have some form of instant validation via CSS and/or JavaScript. You also need to validate the responses at the server level for security.
There are plenty of articles on building robust JavaScript and server side validations. There’s even a YUI module for forms: The YUI 3 Form Module — Forms and Validation Made Simple. This article will focus on a set of ARIA attributes that let you define the error message for an invalid input.
Continue reading Use ARIA to define invalid responses for form inputs
How to define required inputs with ARIA and HTML5
Tuesday, February 8th, 2011
This form has clearly labeled required fields
It’s important to let users know when a form input is required. Most developers do this via visual tricks; such as placing an asterisk near the input, using color, or other background images. While this helps the sighted viewers, we need to define the labels clearly for screen reader users.
The most direct method is to actually tell the user within the label the input is required. Wrapping the required text in a strong allows the CSS to modify the colors and screen readers will emphasize the text.
<label for="tc">I have read and approve terms and conditions <strong>(required)</strong></label>
<input type="checkbox" value="yes" name="tc" id="tc"/>
<input type="checkbox" value="yes" name="tc" id="tc"/>
Continue reading How to define required inputs with ARIA and HTML5
Form labels: visible and hidden
Tuesday, February 8th, 2011
What are form labels
Each input on your form needs a label. Yes, that includes radio buttons, check boxes, and file uploads. Labels tell people what an input expects. They also provide larger targets for those with less motor control.
Clip your hidden content for better accessibility
Wednesday, February 2nd, 2011
There’s a balance between creating a clean, simple visual design and providing accessible content and functionality. One common solution is to provide text to screen readers that is hidden via CSS. 
Please visit our Screen Reader Test: Accessible solutions for hiding content for more information on the accessibility of hidden content. This article demonstrates how screen readers announce the various methods of hiding elements, such as labels, with CSS.
The top search form has a hidden label using the clip pattern. The bottom form's label is without CSS
Continue reading Clip your hidden content for better accessibility
Copyright © 2010 - 2012 Yahoo! Inc. All rights reserved.
