Blog Posts by Todd Kloots

  • HTML5 tags or ARIA, which is better?

    This post was originally published on the Yahoo! Accessibility blog.

    One aspect I haven't seen fully addressed in the argument for using HTML5 tags, especially when considering methods to bullet-proof methods, is user benefit. Yes, the new elements in HTML 5 (nav, footer, header, aside, section, article) give developers a more expressive language. However, if that language isn't interpreted by the browser to actually mean something then there is less, and in some cases, no benefit to the end user.

    To put a finer point on this: currently browsers don't consistently translate HTML 5 elements into accessible information. You could defer the solution to that problem to the browsers. That would be a valid position if we didn't already have an viable alternative in ARIA roles. Unlike HTML 5, ARIA works now, and is consistently supported across the A-Grade. Plus ARIA is supported by assistive technology like screen readers.

    What do I mean by "works now"?


  • Techniques for High-Contrast-Friendly Icons

    This post was originally published on the Yahoo! Accessibility Blog.

    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:

    Screen shot of a toolbar with buttons labeled with icons created using background images

    Here is how the toolbar renders when High Contrast mode is enabled.

    Screen shot of a toolbar with buttons labeled with icons created using background images rendered in High Contrast mode

    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

    Read More »from Techniques for High-Contrast-Friendly Icons
  • Understanding ARIA Widgets

    his post originally appeared on the Yahoo! Accessibility blog.accessibility-205x85

    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.

    The goal is to train developers how to think about ARIA widgets such that using ARIA feels familiar and natural—something all developers can feel confident using and making part of their everyday toolkit.

    In the interest of being as concise and straightforward as possible, without being overly pedantic this article will be limited in scope to the markup and styling for ARIA widgets. Keyboard access for ARIA widgets, while an important topic, has been intentionally left out since it is a broader topic deserving an article of its own, and the implementation guidance varies between devices (mobile and desktop) and platforms (Mac and Windows).


    Read More »from Understanding ARIA Widgets
  • Focus Feedback

    This post originally appeared on the Yahoo! Accessibility blog.accessibility-205x85

    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: Focus outline on Windows Mac: Focus outline on MacOS

    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.

    The Problem

    The focus outline is removed when either the outline-style and/or the outline-width properties are set to "0" or "none", or the outline-color is set to "none" or "transparent." Here's some examples of common uses of the outline found while grepping Yahoo! CSS files.

    outline: none;
    outline: 0;
    outline-style: none;
    outline: medium none;
    outline: 1px;
    outline: 0px none transparent;

    The Cause
    That's how

    Read More »from Focus Feedback