ADA Compliance

Monday, February 9th, 2009

Got an email from Grandpa Joe letting me know he was having trouble reading the site with the new design. Yup, the theme I borrowed used terrible non-compliant code for setting fonts (using “px” for reference – literally tying the font size to the number of pixels). I’ve been converting them to % codes instead (which makes a font appear at a percentage of your default text size). Of course, this means many design elements (like the sidebar and top menu) which are based on shapes with fixed “px” may look funky.

Anyway, I’ve always tried to make my website projects ADA compliant, but since my sum total of classroom training on web development is less than 48 hours, there is a lot I don’t remember and a lot I don’t know how to do.

Some tips I have learned, though, and do my best to remember (and this will serve as a refresher):

  1. Always use alternate text descriptions with photos and graphics (<img src="the-image-url" alt="short photo description" />). Also, not using graphics as navigational elements or buttons (without also including alt text).
  2. Links should stand out from regular text and should generally having meaningful descriptions (i.e. don’t have a link that says “click here” or “more” – instead, the link should indicate what the link points to)
  3. Use relative font sizes (% or em) instead of absolute or fixed font sizes (px or pt). The same is also true for table dimensions and various other elements.
  4. Use contrasting colors. As someone with color blindness (red/green), this drives me nuts. If I see a blog or website with pastel pink text over light green background, I assume it’s drivel written by an idiot. You can check to see if your text/background colors meet compliance with the colour contrast check. My black on silver in the main body was compliant. My light gray on medium gray sidebar was not (so I changed it)

Any other thoughts on keeping the web accessible to all? Are there other things I could do to make my site visually interesting but also accessible? Hopefully I’ve fixed enough that my 84-year-old Grandpa can still keep tabs on me.

p.s. I looked for a design with a black background specifically because of this article about the environmental impact of google’s white background.

Filed under: blogging meta by Jere Keys

3 Responses to “ADA Compliance”

  1. Lena Dahlstrom, on February 9th, 2009 at 2:38 am Said:

    FYI, “em”s are a better choice — although they’re admittedly not all that intuitive to work with. (Here’s a useful em calculator to convert from px, which also takes into account inheritance, i.e. the depth of the tags.)

    BTW, you can use ems to replace the px in your layout. It’s scalable if users enlarge their text, but it’s not as unpredictable as using %s.

    If you’re feeling adventurous, it’s not hard to add a style sheet switcher, which allows the “small-medium-large text” doo-hickie you’ve probably seen elsewhere.

    Jere Reply:
    February 9th, 2009 at 3:23 am

    Thanks. I’m going to sit on the code for a couple days because I’ve been fiddling with it nonstop for the last 72 hours, but I’ll look into the em calculator. I’m not exactly an expert at CSS (which is why I used a downloaded wordpress theme as the base), and I have to go slowly step-by-step to make sure I’m not breaking the page.

  2. QueerCincinnati, on February 10th, 2009 at 5:15 am Said:

    Love the blog design, btw.

    Will you do mine? Mine still looks like a fourth grader is blogging. Of course, I could edit my posts so the misspellings went away to help that…

« »