Blog Posts by Ted Drake

  • Five Layers of Accessibility

    This post originally appeared on the Yahoo! Accessibility blog.

    accessibility-205x85Dirk Ginader gave this presentation on the 5 layers of accessibility at a Skills Matter event in London in 2009. It's an oldie, but a goodie.

    Dirk pushes the traditional view of web development as three layers (HTML, CSS, JavaScript) by adding CSS for JavaScript enabled users and ARIA functionality. This presentation also uses the Yahoo! Finance Currency Converter as an example of progressive enhancement.

    You can follow along with these slides or transcript.

    5 Layers of Accessibility - Slides

    The 5 Layers of Web Accessibility

    The 5 Layers of Web Accessibility - Presentation Transcript

    1. Hi there! :-)
    2. Ogres = Onions = Web Standards?
    3. LAYERS!
    4. Common Frontend Development knows 3 Layers
    5. The 5 Layers of Web Accessibility YDN Tuesday 5.5.2009 Dirk Ginader
      Twitter: @ginader
    6. The Markup is the most important Layer of all
    7. Source order = tab order
    8. Best matching HTML Element for the job?
    9. Is the page
    Read More »from Five Layers of Accessibility
  • How To Define Required Inputs With ARIA And HTML5

    This post originally appeared on the Yahoo! Accessibility blog.

    form with required fieldsrequired form

    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.

    The * can be a silent reminder

    Many web sites use an * to symbolize required fields as this looks simpler than repeating "required". Unfortunately, many screen readers will ignore special characters with their default verbosity

    Read More »from How To Define Required Inputs With ARIA And HTML5
  • Form Labels: Visible And Hidden

    This post originally appeared on the Yahoo! Accessibility blog.

    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.

    Connecting the label and input

    Fortunately labels are easy to use. There are two ways to connect the label to an input: Belt and Buckle.

    The belt method (implicit association) wraps the input in a label.

    The buckle method (explicit associtation) connects the label via the input's id value

    While the belt method is simpler, it doesn't provide as much flexibility with layout. It also fails to set focus on the input in Internet Explorer 6 and may not work with all versions of Window Eyes screen readers. It's also possible to combine the methods.

    Read More »from Form Labels: Visible And Hidden
  • ARIA Flowto Controls The Reading Order Of A Page

    This post originally appeared on the Yahoo! Accessibility blog.

    Designing a good reading order makes sites more efficient for users of screen readers. The reading order is controlled by the actual physical order of elements in the DOM, rather than the visual presentation.

    Screenshot of Yahoo! home page showing the order of modulesThe order of elements in a page

    Test the reading order of your page by turning off CSS. As a general rule, place more important content higher in the DOM order so it can be quickly accessed by users of screen readers. You can use the Web Developer Toolbar to quickly enable/disable CSS.

    Use the Web Developer to turn of CSSdisable CSS with Web Developer Toolbar

    Use ARIA to modify the page flow

    Use aria-flowto to define what part of a page a screen reader should visit. The following example would skip div#tv and continue to div#stock.

    How aria-flowto works

    Aria-flowto establishes the recommended reading order of content, so that the an assistive may overriding the default of reading in document order to its user. Aria-flowto could be used to control the reading order

    Read More »from ARIA Flowto Controls The Reading Order Of A Page
  • Use ARIA Region For Modules

    This post originally appeared on the Yahoo! Accessibility blog.

    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 outlinedARIA landmarks

    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.

    Standard module format

    The Yahoo! User Interface Library uses a standard module format. This common pattern for divs and classes make it easier to move modules

    Read More »from Use ARIA Region For Modules
  • Make Your Images Accessible

    This post originally appeared on the Yahoo! Accessibility Blog.

    Images make web pages interesting. So let's make them useful for everyone, not just those that can see them. That may seem like an oxymoron, but not if you think of them as either decoration or content. This page will introduce you to methods for properly using images on web pages.

    Images as content

    If your image provides more information than being purely decorative, it falls into the general context pool.

    Missing alt attribute

    Forgetting to put an alt attribute on your link does more than hide the information from your user. It can also cause the screen reader to tell the user the location of your image. This is especially useless and annoying on sites which use dynamic image resizing and CDN locations.

    Sample code for an image that has no alt attribute

    Sample image that has no alt attribute

    Listen: You'll notice the location of the image announced instead of what the image represents.

    Read More »from Make Your Images Accessible
  • Use Headers For Semantic Structure

    This post originally appeared on the Yahoo! Accessibility Blog

    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


    You can easily navigate the headers by

    Read More »from Use Headers For Semantic Structure
  • Accessible Solutions For Hiding Content

    How To Hide Content On A Web Page

    There are times when you want to hide content on your page. There are several methods, each has advantages and disadvantages. This page will help you understand why you would choose the best method.

    Completely Hidden Content

    Do you want to completely hide your content? This would be appropriate for a module that has a tabbed interface with 4 possible panels. One panel is displayed, the other three are hidden. You don't want to show those hidden panels to any user. Use display:none for the hidden panels.

    Screen readers will also ignore sections with visibility:hidden. However, visibility:hidden removes the object visually, but does not take it out of the flow. Therefore you could end up with unwanted white space.

    Sample code for completely hidden content

    This content is hidden from all users. You will not hear it with a screen reader

    .completelyhidden {

    Sample hidden content

    Begin example

    Read More »from Accessible Solutions For Hiding Content
  • Add Language Declarations For Multilingual Pages

    This post originally appeared on the Yahoo! Accessibility Blog.

    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.

    Sample code for assigning the document's language

    The language is defined with a series of characters, divide by hyphens. "en" means it is English. "-US" tells us this is American English. "en-GB" would be for Great Britain and "en-CA" is for Canadian English.

    Defining foreign languages in a page

    The following is a list of the word Potato in different languages. Each item will

    Read More »from Add Language Declarations For Multilingual Pages
  • Avoid “read more” Links in your WordPress Blog

    This post originally appeared on the Yahoo! Accessibility Blog.

    No Read More linksno-read-more

    WordPress makes it easy to display a truncated version of each article on home and archive pages. Unfortunately, the default presentation will insert a simple link that says "(read more)", which is not helpful to screen reader users who are faced with a list of repetitive links. It's much better to insert the article's title in the link text.

    This article will show you how to easy to accomplish by slightly modifying the archive.php file in your blog's theme.

    Basic functionality of the_content() in WordPress

    WordPress allows you to display a truncated version of a post when it is displayed in an archive section. This is accomplished by adding a quicktag that defines where a post should be truncated. WordPress will crop the article and insert a "read more" link to see the full post

    If the quicktag is used in a post to designate the "cut-off" point for the post to be excerpted, the_content() tag will only show the excerpt up to the

    Read More »from Avoid “read more” Links in your WordPress Blog


(33 Stories)