Yahoo! Accessibility

Accessible Content

Use semantic, structural markup to make your content accessible. This section also includes structural components of the ARIA specification.

Focus Feedback

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

Use ARIA region for modules

Friday, January 28th, 2011

As web pages become more interactive, there is a need for adding semantic information about our content. ARIA landmarks let us define the sections of our web page and their purpose.
screenshot with ARIA landmarks outlined

The Yahoo! home page with possible pre-defined ARIA landmarks


There are several benefits to using ARIA:

• Enhances document semantics and browsing
• High-level document structure/layout will be perceived by users of screen readers
• Screen readers provide keyboard shortcut for moving between landmarks

There is already a long list of pre-defined ARIA landmarks that you can begin using on your web site. If you want to define a module on your page that does not fit into a pre-existing role you can use the generic role=”region”. This article discusses how to use the region landmark role.

Continue reading Use ARIA region for modules

Use Headers for Semantic Structure

Wednesday, January 5th, 2011

Screen reader users have an advantage over other people when it comes to browsing web pages. The screen reader provides secondary methods to browse properly marked up pages. For instance, they can skip through the headers, lists, forms, and links. This is especially helpful when confronted with the mother of all drop-down topnavs.

Headers should define the content that immediately follows. Think of an essay that you may have written in school. The essay starts off with a title (the h1). The h1 defines what the entire paper is about. You will then define the main sections of your essay with subeaders (h2). If a section has multiple sub-sections, you’d use another header for each section (h3). Continue to increase the header number (h4, h5, h6) as the content becomes more granular. Avoid using headers without appropriate following content.

Header navigation with screen readers

Continue reading Use Headers for Semantic Structure

Accessible solutions for hiding content

Tuesday, January 4th, 2011

Add language declarations for multilingual pages

Tuesday, January 4th, 2011

In an increasingly global Internet web sites must be built for a diverse audience of users who may speak one or more languages. This includes establishing the base language for the page and changing the language for foreign words within the content. In making your pages language-aware you not only please your users, particularly those using screen reading software, but also search engines.
Luckily adding language awareness to your pages is fairly easy to handle. The first thing is to add a language declaration to your site.

Continue reading Add language declarations for multilingual pages