Accessibility in Digital Design

For years, software developers have emphasized accessibility standards in design. Every user is different, and has different needs. Much like architecture, if the design of software doesn’t accommodate those needs, and insodoing shuts out potential users based on physical capability or language barriers, it has failed. The ADA provides a wealth of information in regards to accessibility in web design. In some cases, such as government services that receive federal funding, ADA accessibility is required by law.

Designers of Digital Marketing campaigns, must also be mindful of accessibility. Even though marketing-focused design is often more informational than functional, the information still needs to be accessed. Furthermore, the typical audience of a digital marketing campaign on an individual level is only passively engaged, so any accessibility barrier will exponentially decrease overall engagement. Compare this to software, where the user is actively engaged and has a higher (depending on the alternatives available) tolerance for barriers and inaccessible design. It’s clear that we as digital marketers must put the same level of thought to accessibility as our peers in the software space.

So why do designers of digital marketing campaigns often overlook accessibility? First off, it takes time, which is often in short supply in a digital campaign. Also, it can be a hard sell on an invoice (think: strategy). Probably most of all, many digital marketers and designers don’t know how to do it. Below are a few ideas to help designers start considering accessibility in their campaigns.

Low-hanging Fruit

There are a many areas of design that accessibility-thinking can immediately impact. Often, only minor adjustments to your existing line of thinking will be required, far outweighed by the end-payoff.

Colorblindness

About 8% of men and 0.5% of women are affected by some form of color deficiency1, the most common being red-green colorblindness. This is important to remember when choosing complementary colors and evaluating contrast. Below is an example, on the left is how people without color deficiencies see reds and greens. On the right is the same image passed through a tool called Sim Daltonism, which emulates different forms of colorblindness (in this case, Protanopia).

Sim Daltonism is a free app available to Mac users to help evaluate designs using different forms of colorblindness. There are also tools available for Windows users, such as Color Oracle. A quick pass of your interface design through a color blindness simulator will help identify and adjust potential issues.

Interaction and Navigation

There are many ways people navigate and interact with digital interfaces. The most common, of course, are with a cursor, guided by a mouse or trackpad, or on a touch device. Cursor-based and touch-based interfaces can typically be identified by the context (a small screen is most likely a touch device), and adjustments can be made to accommodate (bigger tappable areas around buttons, for instance). But for people with physical limitations, the above methods don’t always work.

An interface should be able to be navigated without a mouse. It’s common (and typically a default browser behavior) to use the tab key to switch between fields in a form, but the designer must make sure the browser reads through the fields and buttons in a logical order. Also, the “focus” style of the elements must be clear and obvious as the user moves throughout the interface. This is also a case for not hacking the style of form elements, which when done improperly can obfuscate the default outline and focus styles.

Dexterity

Dexterity issues are another (and maybe the most common) accessibility barrier, and can affect any user regardless of physical ability. This is more related to mouse-based interfaces, but can be applied to touch interfaces as well. For a user, the cursor-to-mouse-to-hand relationship is unnatural. We get somewhat used to it, but something as simple as changing a setting on your mouse or using someone else’s computer can cause major dexterity issues.

As designers, we can help account for this by trying to consider the intent of the user. For instance, jQuery hoverintent is an open source plugin that tries to guess what the user was trying to do by adding a slight delay before initializing/deinitializing an element on hover. That will prevent the user accidentally initiating an action, like opening a menu, when in fact they were just trying to move the cursor across the screen.

Providing a larger clickable area is also a good way to account for both dexterity issues and touch interfaces.

A designer could add the link text, and center the link horizontally using margin.

nav a {
  display: block;
  float: left;
  margin: 20px;
}

However, by doing this, only the link text (red) will be clickable (the area around the link is margin, and isn’t clickable):

Instead, using padding will make the clickable area of the link much larger and easier to hit.

nav a {
  display: block;
  float: left;
  padding: 20px;
}

Resulting in:

Screen Readers and Logical Content

Most of what we interact with on websites is visual. As designers, we love beautiful photography and typography, and thoughtful use of color. For a blind user, however, none of that matters. The content of the site must also be presented in a format that can be interpreted by a screen-reader and converted to a braille touchpad. There are two critical factors for this to be successful.

First, the content must be in a logical order for the screen reader to parse. The beginning of the content should appear early in the DOM, if not first. For instance, say you have an article on the right and an aside on the left. Logically, you would put the aside first in the DOM and float both elements left to stack up next to one another. But a screen reader would interpret that with the aside coming before the content, which is likely not correct hierarchically. There are many tools out there to emulate what a screen reader sees, but the quickest test is to view your page without any CSS or JavaScript and see if the content still seems logical.

Images on their own cannot be interpreted by a screen reader (yet). Making sure you have alt tags in place to describe the image, and avoid using CSS backgrounds for images that would be considered “content” is the best way to make sure the fullest intended experience will be conveyed to the user. And bonus, all that helps with SEO too because search engine bots interpret web pages in much the same way as screen readers.

Flexible Content Layout

This is less of an ADA accessibility concept and more for general diversity of users. In print, the content we typeset likely won’t change much. Once it’s printed, it’s printed. On the web, however, the user has more power to manipulate the content to suit their specific needs. Most browsers, for example, allow adjustment in the size of text on a page. Make sure those adjustments don’t break your layout. Also, your site might be in English, but the user might require a different language. What happens when your site is converted to Mandarin? Does the layout hold up? By allowing flexibility in layout, in terms of the size and positioning of elements, it’s much easier for these changes to take place without degrading the user experience.

This is only a drop in the bucket of potential usability and accessibility considerations we should be paying attention to. Failing to consider these things creates unnecessary barriers between your brand and your audience. It’s also important to recognize that no two projects, or audiences, are the same, and each will require it’s own set of unique considerations for accessibility.

Citations:

1. Source: http://wearecolorblind.com/article/a-quick-introduction-to-color-blindness/