Accessibility Dashboard
Skip to Main Content

Designing with Accessibility in Mind

Accessibility = People

A common misconception regarding accessibility is that is primarily for those with disabilities which is not the truth. Accessibility simply means that all people are able to access things, whether on the web or in everyday life. Wear glasses? Take them off and try going about your normal web browsing, probably not so easy. Accessibility is removing barriers.

The question is as designers how do we address this issue? We have to consider the issues at hand such as visual accessibility (screen readers), hearing accessibility (captions), cognitive accessibility (layout/organization), and ambulatory accessibility (keyboard control). Here are a few things to keep in mind:

Contrast Ratio & Color

color contrast examples

Have you ever read an email where the person who composed the email used a blue background and say, tiny 6 pt red text? Do you recall the burning sensation in your retinas and the looming migraine from staring at it too long? This is a prime example of a bad color ratio. Those with colorblindness will not notice the jarring red on blue but they will notice how difficult the text is to read due to the low contrast ratio combined with small text.

In the case of links/buttons/calls to action relying on a single color alone also poses some problems when trying to convey a meaning. Combining color and pattern can yield much better results across the board when color alone would not be enough.

WCAG 2.0 guidelines point to a 1.4.3 ratio with text that is less than 18 point, so basically most things besides headers. Large scale text? A minimum of 3:1 is required.

If you want to be sure your typography checks out check out these resources:

Structure

website structure examples

The structure and layout of more complex pages certainly can play a role. For those using screen readers it is of the utmost importance that the content is structured in an intelligent and fluent way. Some key tips for designing with structure in mind:

  • Group similar elements (buttons such as confirm/cancel).
  • Use primary headings (h1) for the title of the website/page only.
  • Use headings properly to organize your content. Skipping heading levels (h2 to an h4 for example) can cause confusion with screen readers interpreting it as missing content.

Labels

Accessibility relies on text that is instructive to a task such as filling out a form. These labels may tend to clutter a layout slightly but are actually crucial to some users. A dropdown box without context is worthless to anyone but giving a user all the necessary information helps everyone.

An important piece of this is in the field IDs added in the HTML which are the most descriptive bits of information for the task read by a screen reader. This is not to say clear visual labels are to be ignored. Creating an easy to understand form for all users should be a priority.

HTML5 also supports placeholder text which allows text to be added in the field as a hint. For instance a form field asking for your “favorite movie” could have a placeholder that reads “The Wizard of Oz” which serves as an easy to understand example.

Check out this video from user Mike Westorg on youtube for some great examples.

Complex Features

Tabbed lists and accordion menus are everywhere in modern web design, but are they good for everyone? These more complex content areas do pose some obstacles for screen readers and keyboard accessibility by adding a substantial amount of complexity for what really is simple content at times. Just take the time consider if the content you have is absolutely needed in tabs or an accordion.

Another tricky website feature that is incredibly popular is the homepage slideshow. Slideshows can raise a number of red flags:

  • Improper contrast ratio on items such as type, next/back buttons, and navigation buttons.
  • Lack of a pause feature and visible controls in general.
  • Keyboard accessibility issues (slideshow skipped entirely in some cases).
  • Lack of focus order.
example of accessibility problems with sliders

Example of a homepage slider with a lack of controls and bad contrast.

 

Clearly there is a lot of work needed to make slideshows enjoyable for everyone. Keeping in mind the content of the slideshow it may be wise to consider alternatives that cut back on unnecessary complexity.

It all comes down to common sense for the most part. Being aware of who you are designing for and their potential obstacles should be addressed early on in the web design process. The design can still be top notch with just a little more consideration for everyone who will be using it.

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>