5 Things I Didn’t Know About Web Accessibility

With the increasing pervasiveness and availability of the web, web accessibility is becoming less of a feature and more of a necessity. But these rules do not only apply to public-facing applications, but more and more internal applications are requiring ADA compliance. Some guidelines are difficult (even impossible) to follow while keeping up with current design trends. Public-facing applications need to weigh the cost on aesthetics to decide whether it will help or hinder traffic. It is also important for sites in finance and communication to keep in mind possible law suits that may arise from unintentionally portraying misleading content to screen readers. As I have been developing accessible websites, I have found that there are some small improvements that can be made to dramatically increase accessibility, without hitting your design too hard (and may even help your UX).

At a glance

But first, Web Accessibility at a glance. W3 provides some overarching principles to follow. (For a full list of guidelines, visit this link.

Perceivable

Operable

Understandable

Robust


The big five

  1. h1-h6 tags must be in order
  2. h3 should be subsection of h2, which should be subsection of h1. If you follow good css and style techniques, this shouldn’t be too much of an issue, but it’s an easy one to forget.

  3. Background image vs image tag actually matters
  4. Screen readers interpret background images and img tags differently. In essence, use background images if it is not part of the content and use an image tag if it has some kind of inherent meaning, like a warning icon or an image that you would want part of the page if printed.

  5. Colors shouldn’t be the only thing to define meaning
  6. In an attempt to be minimalist in your design, it can be easy to use just colors to change the meaning of content. For those that are blind or colorblind, meaning and intention is lost if color is the primary indicator. For example, add an image to your error/success messages, modify text when an element is active, or add a text description when a form field is invalid.

  7. Can’t skimp on alts
  8. It is really easy to gloss over this, but screen readers fail without alts on images. It’s that simple. It takes a few seconds and is worth your while.

  9. Sufficient contrast
  10. Text becomes unreadable/unnoticeable to some users if it there is not enough contrast between the background and the text. This also goes for background images. Keep this in mind. W3 points out two situations where contrast is not important.

    Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

    Text that is part of a logo or brand name has no minimum contrast requirement.


    There are more tools out there than you think

    For a fast and easy approach, Chrome has a web accessibility audit tool.

    There is also a great interactive javascript tool that I have found useful called Tota11y and (shameless plug) a rails gem that I created here.

    Also, do what this guy did and try out a screen reader for a week. You are bound to learn some things that will be easier to keep in mind when developing.

    Happy coding.


Steven Spiel

Steven is a former SciMed developer.