January 29, 2020: DMAnc Event. 2 hour course to teach you how to produce a podcast.
Sign up here >

"Interesting and consistently informative workshop with a great host, Susan Finch. Extremely happy to have made the time to listen in, and am definitely thinking about getting into future workshops as well as looking into Susan’s work!" Nicolai - Switzerland

Your audience could have a disability – can they read your website?

Currently I’m taking a course offered by WebAim.org to get certified in creating and editing electronic documents for ADA level 2 compliance or more. After only one module completed, I highly recommend this course for anyone interested in having their materials understood by 100% of the potential audience, rather than only 75%. I’ll be writing a post on each module to share some of the key points I learned.

You can view the links below to learn more about the disability types and WAI requirements.

Simple tips to make images ADA compliant:

You probably thought that alt text was simply for SEO purposes. I’ve worked with government entities since the web started and had to learn early on about accessibility. An alt tag is only part of the story. How you use it makes it effective.

William Shakespeare

William Shakespeare – with no alt text since the information about the image is here.

Example: Here we have two correct presentations of this man. One has an alt tag with his name “William Shakespeare,” the other has a caption with his name, so there is no need for the alt tag.

The alt tag also doesn’t say “image of…” because the devices that would read it already say, “graphic of….” That would sound redundant, “graphic of image of William Shakespeare.” This holds true for Word and PowerPoint. Oh, and for alt tags keep it to just a few words. Save lengthier information for the “description” tag.

That extra oomph!

Keep decorative graphics such as swirls for dividers to a minimum. I know that many themes offer those stylish divider options. Not only does it add up in your page load time, but they are unnecessary to understand. Opt instead for a simple <div> with css giving a nice line below or above. Skip the image, but not the effect of division. You can also use a simple “horizontal line” in between.

4 Characteristics of Hyperlinks that make them accessible:

  1. Descriptive
  2. Concise
  3. Unique
  4. Visually Distinct

DESCRIPTIVE: Linked text should clearly describe the function of the hyperlink. Out of these which do you think is the most clearly defined link?

  • Michelle Obama’s book on Amazon.com (this one)
  • Becoming
  • Amazon.com
  • Click here
  • A first lady’s journey from poverty to privilege.

CONCISE: Link a few words to make it clear. Avoid linking entire sentences. You may need to edit your copy better, but that can’t hurt to do, can it?

UNIQUE: Your linked text should not be repeated as text that links elsewhere on the page. Avoiding “click here” will help you with this.

VISUALLY DISTINCT: Save the underline in your CSS for links only. Underline them all. That brings us to color and contrast.

CONTRAST IN TEXT AND LINKS:

Check the contrast before you create any branding. Do it before you launch your site too. You want to make it easy for those who are visually impaired to view. This includes those who need high contrast or people who are colorblind. I have two in my family so I’m more sensitive to this. Here is a great tool from WebAim to check contrast.

We get so caught up on the LOOK of our websites, latest trends and more, but we forget what we really want people to do: read our site, connect with the content and follow our call to action. Make it easy to read. Fancy fonts and trendy colors don’t always serve you well.

COLOR RELIANCE:

We make assumptions in charts, graphics, tables that people will better understand our meaning because of the colors we choose to display our message. This is also guided by culture. Think about this list of plants that can be poisonous to dogs. Those are listed in red. The others are ok.

  1. African Daisy
  2. Autumn Crocus
  3. Azalea
  4. Carnation
  5. Daffodil
  6. Dieffenbachia
  7. Marigold
  8. Rose
  9. Sage

If someone is colorblind, these will all look safe for dogs.  Better to separate the list or call out the items:

  1. African Daisy
  2. Autumn Crocus – toxic
  3. Azalea – toxic
  4. Carnation
  5. Daffodil – toxic
  6. Dieffenbachia – toxic
  7. Marigold
  8. Rose
  9. Sage

Non-toxic plants to dogs:

  1. African Daisy
  2. Carnation
  3. Marigold
  4. Rose
  5. Sage

Toxic plants to dogs:

  1. Autumn Crocus
  2. Azalea
  3. Daffodil
  4. Dieffenbachia

Your homework?

Time to go through your site images. If you use WordPress easy way is through the media library and tune it up. If you use stock photos, the description that comes in the meta tags may be quite bizarre. Take the time. While you’re at it, why not optimize those image so they load faster using a plugin like Smush to optimize your media library?


Resources: