Blog Posts by Thierry Koblentz

  • Clip your hidden content for better accessibility

    This post originally appeared on the Yahoo! Accessibility blog.

    There's a balance between creating a clean, simple visual design and providing accessible content and functionality. One common solution is to provide text to screen readers that is hidden via CSS.

    comparison of form inputs with visible and invisible labelshidden and visible form label

    The top search form has a hidden label using the clip pattern. The bottom form's label is without CSS

    This article demonstrates how screen readers announce the various methods of hiding elements, such as labels, with CSS.

    Comments on Jonathan's blog, on Adaptive Themes, and other venues, show that many developers are still confused by what does what and for whom. So let's first recap what basic declarations mean when it comes to hiding content:

    Techniques that make content accessible to AT.


    position:absolute;
    clip:rect(1px 1px 1px 1px);

    position:absolute;left:-999em;

    Techniques that make content inaccessible (invisible to all users).

    visibility:hidden; /* in most screen readers*/

    display:none;

    /*in most screen readers and

    Read More »from Clip your hidden content for better accessibility
  • How to Temporarily Disable CSS for Testing

    This post originally appeared on the Yahoo! Accessibility blog.

    accessibility-205x85There are times you would like to disable the CSS on a web page. For instance, you may want to confirm the reading order of content. The following tips will help you disable CSS in various browsers.

    Firefox (Win and Mac)

    • Via the menu toolbar, choose: "View" > "Page Style" > "No Style"
    • Via the Web Developer Toolbar, choose: "CSS" > "Disable Styles" > "All
      Styles"
    • If the Web Dev Toolbar is installed, people can use this keyboard shortcuts:
      • Command + Shift + S (Mac)
      • Control + Shift + S (Win)

    Safari (Mac)

    • Via the menu toolbar, choose "Develop" > "Disable Styles"

    Opera (Win)

    • Via the menu, choose "Page" > "Style" > "User Mode"

    Chrome (Win)

    • Via the gear icon, choose the "CSS" tab > "Disable All Styles"

    Internet Explorer 8

    • Via the menu toolbar, choose "View" > "Style" > "No Style"

    Internet Explorer 7

    Internet Explorer 6

    • Via the Web Accessibility Toolbar, choose "CSS" > "Disable
    Read More »from How to Temporarily Disable CSS for Testing