Blog Posts by Ted Drake

  • Accessible Data Tables

    Data Tables

    Tables have a bad rep in HTML programming. For years they were misused for page layouts. Tables are meant for displaying tabular data. Let's look at how you can build some complex data tables that are also accessible.

    While tables are easy to understand visually, we need to give screen reader users a bit more structure to give the data cells more context. A poorly written table will appear to the screen reader user as a series of data points and no reference to what they mean. We'll use the scope and headers attributes to add these contextual hooks.

    Some of the code in this page was borrowed from the NVDA user guide.

    Scope attribute connects data and title

    The is used in the top row of a data table or as the first cell of a row. Add the scope="row|col" attribute to define if the table header cell references data vertically or horizontally.

    Sample code for a table proper table headers

    Dept. Code/ Class NumberRead More »from Accessible Data Tables

  • Increase iOS Accessibility With Accessibility Hints

    This post originally appeared on the Yahoo! Accessibility blog.

    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.

    The Problem

    iOS accessibilityHintMany apps will use graphic icons to suggest available functionality. Unfortunately, these icons are not always made accessible to VoiceOver users. Other interactions take advantage of the natural reactions to swipe and pull on items. As VoiceOver users tend to explore by dragging their finger over the screen or using a single finger swipe to "tab" through the page, these interactions may not be discovered.

    For instance, a list of items may be refreshed by pulling down, a button may list a selection title and provide a drop down to select an alternate, images can be scrolled, and text can be tapped to trigger

    Read More »from Increase iOS Accessibility With Accessibility Hints
  • Defining isAccessibilityElement In Your iOS Application

    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.screenshot of an article within MarketDashmarketdash-article

    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.

    What is isAccessibilityElement?

    This article introduces isAccessibilityElement, how it determines what elements are interactive, and how it can easily create accessibility problems. Fortunately, this is an easy concept to

    Read More »from Defining isAccessibilityElement In Your iOS Application
  • Find Empty Links and Buttons

    This post originally appeared on the Yahoo! Accessibility blog.

    Angry button guy by Heidi BDo you know if your page has angry links and buttons? Buttons and links like to have good text; depriving them makes everyone angry. So use the following bookmarklet to discover which ones are not happy.

    The Problem

    CSS allows us to place background images on links and buttons, removing the need to have inline images and giving us more control over typography. This unfortunately has led to incorrect coding patterns. In general, it's a bad idea to place text within an image for maintainability and internationalization. It can also be an accessibility and Search Engine Optimization problem when the images are used to replace text.

    Bad HTML

    In the following code CSS is used to provide dimension and a background image for the link. However, there is no text for the screen reader or search engine spider to understand what the link represents: Get Location

    The Solution

    Links must always include

    Read More »from Find Empty Links and Buttons
  • Common Accessibility Mistakes

    accessibility-205x85Even the best-intentioned web developers can make simple accessibility mistakes. This presentation was put together for an internal Yahoo! conference for front-end engineers. It reminds web developers that there are still some basic problems on the web, let's fix these today and avoid them in the future. The presentation was written by Thierry Koblentz and Ted Drake.

    Slide Transcript

    1. Are you still doing that?!?!

      Common Accessibility Errors
      by Ted Drake, Yahoo! Accessibility Lab

    2. Contrast

      [The text on this slide is in a dark gray against a black background. It is very difficult to read]

      Make sure web sites have enough contrast
      Online contrast checker

    3. Click on the red button

      [the "red" and "green" text is in the same off-yellow color]

      Don’t use color as the only delimiter.
      Finance uses color + arrows.
      Yahoo! sites are pretty good at doing this correctly

    4. Lady Gaga stuns the Grammys

      [image of lady

    Read More »from Common Accessibility Mistakes
  • HTML5 Accessibility Challenges

    This post originally appeared on the Yahoo Accessibility Blog.

    This presentation was given at CSUN 2011, the 26th Annual International Technology & Persons with Disabilities Conference. It's an overview of where HTML5 came from, what it includes, how it helps accessibility, and where it can cause problems for accessibility.

    Slide Transcript

    1. HTML5 Accessibility

      Ted Drake, Yahoo! Accessibility Lab
      Logo is the new HTML5 icon with American Sign Language:

    2. Big Questions

      1. What is HTML5?
      2. Does it help or hurt?
    3. HTML5 logo with American Sign Language

      In the good ol' days...

    4. We had text

      [image of Yahoo! home page, circa 1997]

      Original internet pages were text based and accessible.
      Images were introduced and pages were still easy to read.

    5. Then came design

      [image of “Geocities 1996” a tribute to Geocities web designs on CSS Zen Garden]

      Animated gifs, clashing colors, flashing images, and more
      “Creating Killer Web Sites” released in 1997 by David Siegel

    Read More »from HTML5 Accessibility Challenges
  • Yahoo! Hack University: Accessibility Innovations and Challenges

    This post originally appeared on the Yahoo! Accessibility Blog.

    University of Washington Hack DayYahoo's HackU events allow Yahoo! engineers to hang out with college students for a week as they explore the latest technologies and spend 24 hours in a caffeine powered hack-a-thon. The University of Washington features several accessibility related research programs. So it was great to visit the campus last year and deliver this presentation on the existing accessibility challenges and future innovations.

    This HackU event featured some amazing hacks. The Accessible Hack award winning team attempted to translate data charts into readable text.

    You can skip the slide movie and go straight to the presentation transcript with notes.

    Presentation Transcript

    Accessibility lecture at the University of Washington

    1. Accessibility Innovations and Challenges
      • Ted Drake
      • Yahoo! Accessibility Lab
      • Thursday, March
    Read More »from Yahoo! Hack University: Accessibility Innovations and Challenges
  • Build An Accessible Ratings Widget

    This post originally appeared on the Yahoo! Accessibility blog.



    Building accessible websites often means looking at how a widget functions and not what it looks like. We can always use CSS to change the look of a tool, but you can't always make the wrong elements work correctly.

    Thierry Koblentz's article Developing an Accessible Star Ratings Widget for the Yahoo! Developer Network looks at the various rating widgets on the internet. He looks at how users can rate an article and the best way to display the aggregated rating.

    example ratings for 1 to 5 starsrating example

    This is how the ratings are displayed in the final version

    Inaccessible solutions

    Thierry found a wide variety of techniques for displaying ratings. Unfortunately, they fail one or more key accessibility tests.

    You might think that most rating systems would be based on some markup proven to be semantic and "operational" across many User Agents — that is, that rating systems would be based on a specific set of HTML elements and attributes to which

    Read More »from Build An Accessible Ratings Widget
  • Use ARIA To Define Invalid Responses For Form Inputs

    This post originally appeared on the Yahoo! Accessibility blog.

    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.

    Fail Road

    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.

    Using aria-invalid and aria-describedby for invalid responses

    Let's assume the user has entered data into a form and hit submit. Our nifty form validation code has found an input with an invalid response. We will place the aria-invalid="true" value on the input. and then associate it with the error message via aria-describedby attribute. It's also helpful to autofocus the first invalid input.

    Read More »from Use ARIA To Define Invalid Responses For Form Inputs
  • When Should You Use ARIA Role=”Application”?

    This post originally appeared on the Yahoo! Accessibility blog.

    ARIA roles give us much more control on defining how assistive technologies should interact with a page. The application role gives us complete control. But remember complete control can also lead to complete chaos. So how do you use this powerful role? When should it be used?

    Application vs. Document

    Before diving into the application role it's useful to understand the difference between application and document based web pages. Your average web page is a document. The user expects to read content and it may feature some interactive behaviors. Applications are more like a desktop application. The user has expects tool sets, instant changes, dynamic interactions.

    Wikipedia is a document based web site. Yahoo! Mail, on the other hand, is an application.

    The "application" role establishes the context and helps set the user's expectations that this is an application. Screen readers may announce the 'application'. This also

    Read More »from When Should You Use ARIA Role=”Application”?


(33 Stories)