Code
Find accessible code samples and descriptions.
Wednesday, March 28th, 2012
I remember the first time I tested an iPad app for accessibility. Yahoo! Finance was preparing to launch MarketDash and wanted to make sure it was as accessible as the web site. With VoiceOver enabled and a Flip cam set to record, Victor Tsaran and I began exploring the app. The most confusing bug we found was an empty article page.
It was impossible to read a news article with VoiceOver enabled. It worked fine with VoiceOver disabled and I could read the article in Safari. However, the article within MarketDash was a black hole.
The Finance engineers added confusion by responding with "we needed to remove the accessibility setting." In other words, they made it more accessible by removing accessibility. Perhaps you’ve had a similarly confusing experience.
Continue reading Defining isAccessibilityElement in your iOS Application
Tags: Apple, iOS, isAccessibilityElement, Xcode
Posted in Featured, Mobile |
No Comments »
Thursday, March 22nd, 2012
Apple’s iOS Human Interface Guidelines encourage developers to create compelling, immersive mobile interfaces. The goal is to delight the user with an inventive interface that invites the user to touch and explore. Often times, this leads to designs with interactions that are not immediately understood.
Continue reading Increase iOS Accessibility with Accessibility Hints
Tags: accessibilityHint, accessibilityLabel, Apple, iOS
Posted in Featured, Mobile |
No Comments »
Friday, March 16th, 2012
The browser provides visual feedback when a control receives focus. The default visualization usually matches how focus is rendered on the host platform: On Windows this is a subtle dotted outline, on MacOS a blue glow.
Windows: 
Mac: 
The focus outline is important in that it both directs the users attention, and serves as a cursor for users who navigate using the keyboard (most commonly by pressing Tab or Shift + Tab). Often the focus outline is removed using CSS, making navigation impossible for keyboard users.
Continue reading Focus Feedback
Tags: CSS, keyboard
Posted in Accessible Content, Code, Keyboard Access |
No Comments »
Tuesday, October 11th, 2011
CSS background images are the most popular means of using image sprites, but this technique can cause problems for users of High Contrast mode in Windows. Background images are disabled when High Contrast mode is enabled, causing all sprites to disappear. For example, consider the following toolbar containing buttons labeled with icons created using background images:
Here is how the toolbar renders when High Contrast mode is enabled.
As illustrated, use of CSS background images can result in information loss for users when High Contrast mode is enabled, especially in the following use cases:
- An image is the only visual label for a UI control (e.g. a button, menuitem, etc.)
- An image conveys state (e.g. selected, checked, etc.) or other supplemental information (e.g. a message has an attachment)
This is especially problematic considering High Contrast mode is designed to make the UI easier to see. Fortunately there are several alternatives to background images that work in High Contrast mode.
Continue reading Techniques for High-Contrast-Friendly Icons
Tags: CSS, high contrast, icon, Internet Explorer, low vision, sprite
Posted in Images |
No Comments »
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
Tags: ARIA, button, CSS, Easy Fixes, HTML5, JavaScript, label, Progressive Enhancement, role, YUI
Posted in Forms, Images |
No Comments »
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.
Continue reading Create Dynamic Form Labels with ARIA
Tags: ARIA, aria-labelledby, form, JavaScript, jQuery, Labels, YUI
Posted in Forms |
No Comments »
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
Tags: ARIA, Autocomplete, JavaScript, live-region, Yahoo!, YUI
Posted in Forms |
No Comments »
Tuesday, July 26th, 2011
They say an image is worth a thousand words. This is especially true on the internet; where screen space is limited and an image can give users a quick summary of an article’s content, the appeal of a new product, or a summary of data. Images are also used to give fine control over typography and design.
Internet users also tend to click on images, as they are usually associated with links. Herein lies the problem. Images represent the link’s purpose visually, but how can you ensure the link is usable to non-visual users as well?
Continue reading Creating Accessible Image Links
Tags: alternate text, ARIA, aria-describedby, HTML, image, links, longdesc
Posted in Images |
No Comments »
![Flickr [EXPLORED]](http://farm4.static.flickr.com/3002/2704533754_7088a4a4cc_m.jpg)
