skip to main content

Posts tagged “accessibility”

  1. Reducing motion with the picture element
    bradfrost.com

    Brad Frost:

    I was just talking with Dave about the accessibility of moving images on the web, and he said:

    hm… I wonder if you could use picture + prefers-reduced-motion?

    He then sends the following code:

    <picture>
      <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source> 
      <img srcset="animated.gif alt="brick wall"/>
    </picture>
    

    Whoa! This is a revelation.

  2. There are a few CSS techniques for hiding content visually while keeping it accessible to screen readers, but none of them are perfect — and in some cases may even be harmful.

    @zellwk has put together a great round-up of the issues.

  3. Accessibility Events
    css-tricks.com

    Mat Marquis:

    It could seem like an enticing option for our users, at first glance: an enhanced, fully-featured website, on the one hand, a fully accessible alternative experience on the other. That unravels with even the slightest examination, though: if the fully-featured website isn’t accessible, the accessible website won’t be fully featured. By choosing to have the “accessible experience” deviate from the “real website,” we end up drawing a sharper line between those two definitions, and we nudge the “accessible experience” closer to an afterthought—limited and frustratingly out-of-sync with the “real” website, like so many dedicated mobile sites quickly became.

  4. How the Web Became Unreadable
    wired.com

    Kevin Marks:

    There’s a widespread movement in design circles to reduce the contrast between text and background, making type harder to read. Apple is guilty. Google is, too. So is Twitter.

    My plea to designers and software engineers: Ignore the fads and go back to the typographic principles of print — keep your type black, and vary weight and font instead of grayness. You’ll be making things better for people who read on smaller, dimmer screens, even if their eyes aren’t aging like mine. It may not be trendy, but it’s time to consider who is being left out by the web’s aesthetic.

  5. How do you figure?
    scottohara.me

    A deep dive into figure accessibility from Scott O’Hara:

    A figcaption is meant to provide a caption or summary to a figure, relating it back to the document the figure is contained within, or conveying additional information that may not be directly apparent from reviewing the figure itself.

    If an image is given an empty alt, then the figcaption is in effect describing nothing. And that doesn’t make much sense, does it?