Accessible Web Design

module

Lock and Key resizeOne of the first things I learned working for a promotional products supplier was the importance of font style, font size, contrast, and image quality. We dealt mainly in pens, keychains, and other small giveaway items with small imprint areas so careful consideration had to be given to those elements when designing the message.

 

  • A non-serif font like Arial is much more legible than a serif font like Times New Roman in a small imprint area because serif fonts have thick/thin lines and tend to break and fill-in when reduced in size.
  • You need to focus on the essentials of your message since anything less than a 9 point font is difficult to read.
  • When choosing your item color, you have to consider your print color because low contrast red on navy won’t stand out, but high contrast white on navy truly “POPS”.
  • Crisp, clean images are a must, especially when working in small spaces.

When I started working with a website I assumed that if I stuck to those same basics, then combined them with color psychology and good writing and marketing skills, that’s all I’d need to come up with a web design that works.  After all, the key to good website design is aesthetics supporting content, right?

Wrong.

Turns out I also have to consider accessibility.

Outside of image load times and making sure that words and images are legible, accessibility isn’t something I’ve even thought about in terms of web design.  It’s not because I’m a jerk or I’m inconsiderate.  I think, like most of us, unless it’s brought to my attention, or it’s an issue for myself or someone I know, I assume others operate the same as I do.

The World Wide Web Consortium (W3C) website’s Accessibility page along with their Web Accessibility Initiative (WAI) site not only explains what accessibility means and why it’s important to incorporate accessibility into your web design, the sites also provide guidelines and resources to help you understand the issue and aid in implementation of your own accessibility initiatives.  While some work will require long-range planning and technical expertise, some changes I can readily incorporate even with my limited experience and skills.

Some easily incorporated changes are detailed in the “Tips to make your website accessible” video and include:

  • Incorporating alternative text in your html to describe images.
  • Making sure your html code includes heading and link information.
  • Arranging navigation tabs in an orderly fashion.
  • Using video that has been captioned.
  • Turning off autoplay for videos or audio.
  • Using the appropriate language for your audience.

Even something as simple as making sure links are bold and underlined rather than just a different color can help people with vision impairments like color blindness use your website more effectively.

By taking these extra steps, I not only increase my chances that people will find my website, I increase the chances that they will actually use my website.  In addition, there is an intangible benefit that can come into play. By simply making accessibility a priority, my website – and in turn me, my business, or my organization – may be looked upon more favorably.

Leave a comment