Learn the ropes of accessibility

Ideally, everyone should be able to use any website on the Internet. The Web increasingly becomes an essential resource in many aspects of life but sadly, there are categories of people who can’t enjoy equal access and opportunity due to their limited abilities. At Cieden, we always have user experience in focus when designing web pages and applications. However, it is possible for a site or an app to be considered usable and standards compliant but not accessible. One of our clients brought this issue to our attention, and after conducting thorough research, we would like to share some insights with you. So if you’re looking to understand accessibility, want to know how to make your website or application accessible or just want to have a clue about accessibility standards, then this guide is for you.

When product is useful but not accessible

What is accessibility and why it matters

More than 15% of the worldwide population has some form of disability. These people have special needs, and it might be difficult or even impossible for them to use websites. It is important to distinguish types and categories of disabilities which ultimately affect how people perceive, navigate, understand and interact with websites.

While there is a wide variety of disabilities, the major ones are grouped in categories:

  • Visual: Inability to see the content of the web or app due to blindness, low vision, color-blindness
  • Hearing: Inability to hear sounds and noises due to deafness and hard-of-hearing
  • Motor: Inability to use a mouse, slow response time, limited fine motor control
  • Cognitive: Inability to remember or focus on large amounts of information due to learning disabilities or distractibility

Although commonly disability is associated with permanent disability (e.g. blindness, hearing loss, PTSD), accessibility limitations can be temporary (e.g., like a broken arm, concussion), situational/conditional (e.g., noisy office, bright sunlight) or changing (due to aging). According to statistical evidence, hearing and vision impairments are more common among elderly people. And it’s not a secret that the global population is aging, so audience with limited abilities is going to increase significantly. Thus making web or apps accessible will maintain your audience or increase it.

By addressing accessibility issues, you’re not only expanding the audience of potential users/ customers or demonstrate social responsibility. As you learn more, you’ll find that addressing accessibility issues in this broader, more general sense almost always improves the user experience for everyone. Accessibility overlaps with other best practices, such as improved usability and user experience, mobile web design, device independence, internationalization, makes websites responsive, improves search engine optimization, and even reduces maintenance costs. Finally, it’s important to note that many countries have laws regarding web and software accessibility (US Section 508 Standards, EU Directive on the Accessibility of Public Sector Websites). Consequently, you may be legally required to match specific accessibility standards.

So where to start?

There is a wide variety of blogs on best practices and tools that help to audit your website. But if you don’t want to get lost in all the flood of information here is a good starting point for you based on WCAG (Web Content Accessibility Guidelines), published by W3C (World Wide Web Consortium). The W3C standards together with WAI which governs technical side of an issue are the absolute best resource for information and guideline on this subject. It provides a comprehensive overview of what it means for content to be accessible, although, it can also be a bit overwhelming.

We’ve prepared a summary you can start with and get an idea of what accessibility requirements are, and how their implementation might look like. We’ll touch fundamental concepts without getting into too much technical detail. So let’s get started!

Visual representation

Chose colors wisely

Coloring is very important during designing web pages, since over 90% of content information is presented using color. But making accessible website means that content representation does not solely rely on sensory characteristics, i.e., color, shape, size, visual location, orientation or sound, so that information has several ways of depiction. Especially, the color should not be used as the only visible means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Of course, there are no banned colors, you shouldn’t worry about that. However, there are several points you should consider when choosing a color and color combinations.

Firstly, make sure the colors you select contrast well to ensure that everyone can distinguish between various elements on the page. Here is where color contrast comes into play. As per WCAG guidelines, adjacent colors for user interface components or graphical objects should have a contrast ratio of at least 3:1. You shouldn’t sacrifice usability only because gray or any other low-contrast font color looks better on the design.

Left: About us Page on TypesetDesign(Contrast Ratio 1.71.)

Right: AXA Global Healthcare h(Contrast ratio 14.9 for the blue section, 6.39 for the gray section and 21 for the black-white section). Graphical objects and user interface components pass WCAG contrast test.

Secondly, you better avoid using clashing colors that could cause eye strain. Bright colors are primarily used in advertising and graphic design to draw attention, but particular color combinations can be harsh on eyes. Although vibrating color combinations pass WCAG contrast tests, some users can feel uncomfortable or even receive seizures when looking at them. There is a strict guideline regarding blinking or flashing content (blinking threshold is three times a second).

Different people uniquely perceive colors. According to statistics, 5% of the male population suffers from red-green blindness (the most popular form of color impairment), meaning that these people can’t distinguish red-green spectrum of colors. And they might see your website like this:



Check out this tool to simulate other types of colorblideness.

Thus, for users with colorblindess or color deficiency, it is important that color-coded information be available with another visual cue such as changes in shape, line texture or a text label.

Finally, don’t use too much color. Too many colors look bad, no matter which colors are used. Lots of hues confuse the eye, so readers don’t know where to start first.

You can get lost on the site of Round Table pizza delivery compared to minimalistic and conservative TimeOut.

One more useful consideration: it becomes increasingly popular to use images as a background, but you should never forget that text should be visible on it.

Top: Invisible Menu on the top of Opodo colorful background picture.
Bottom: Deuter uses a background color for Menu to make it visible on the bright background image.

Text and fonts considerations

Another extremely important part of how your website is perceived – text content. There are five main parameters of how you can adjust your text content: font style, size, spacing, a contrast to the background, and alignment.

Size

There are no strict requirements or guideline on font size. Most browsers allow users to enlarge or shrink the font size, according to their preferences. Alternatively, users alter the settings of their browsers to accommodate or use screen enlargement agents.

Nonetheless, it is important that increased text size doesn’t lose readability or functionality, meaning that text can be dynamically resized without requiring the user to scroll horizontally. Per WCAG guidelines, users should be able to resize all text on the page up to 200% of its original size.

To accomplish this, you better use relative units (such as percentages or ems) to specify font sizes, rather than absolute units (such as pixels or points). It is generally agreed that 16px for body text is a good starting point.

Contrast

Good font and size loses any value on a bad background. A clearer contrast always works much better, than using shades of similar in hue and saturation.

The WCAG checks colors based on a luminosity ratio of at least 3:1 for larger text, and 4.5:1 for smaller text (for Level AA conformity). This ratio defines contrast for accessibility and gives web designers a number to shoot for. Although, a higher contrast ratio is recommended for enhanced accessibility (Level AAA).

Here are nice tools Contratschecker and  WebAIM you can use to check and pick a suitable color combination.

There are plenty of tools which help to assess contrast ratio and verify conformity to WCAG standards. But designers should find Stark plugin for Sketch as the most handy one. It contains color-blind simulator, contrast checker and color suggestion tool. If some colors don’t pass inspection, this tool provides contrast friendly color combinations within the same color family.


Stark plugin for Sketch

Spacing

Line spacing (lead) has an undervalued impact on readability, but more importantly, on accessibility. Actually, line spacing is as important as font size.  Line spacing impacts the feel of a design, rhythm of typography, and readability.

Too tight text feels crowded and becomes harder to read, while too large lines appear unrelated and spacey. Users with cognitive disabilities or visual impairment might have troubles tracking lines of text when too closely spaced.

Here are accessibility guidelines with regards to letter, word and line spacing:

  • Line height (line spacing) to at least 1.5 times the font size
  • Letter spacing (tracking) to at least 0.12 times the font size
  • Word spacing to at least 0.16 times the font size

Another factor that heavily influences readability is line length. As per WCAG requirements it should not be bigger than 80 characters or glyphs (40 for CJK). However, relying on best practices ideal line length for comfortable reading os 40-60 characters for English body text or 20-40 for short English text.

Alignment

Eyetracking studies have routinely shown that left-aligned text is the easiest to read. Many people with cognitive disabilities have a great deal of trouble with blocks of text that are justified (centered). Right justified text results in a ragged left margin that severely reduces speed of reading or makes it way uncomfortable.

Font

There are no requirements or guidelines with regards to fonts, but naturally, they should be plain, readable and available on users’ computers. Thus, cursive fonts and fantasy fonts are generally a poor choice for web content. And it is worth to keep in mind that using too many font faces can create a confusing visual layout. This is bad for all users, but it may be especially difficult for users with reading disorders, learning disabilities, or attention deficit disorders.

Here are some examples of bad typography:

and finally….

Navigation and website layout

Allow users to travel the page with keyboard only

For a website to be accessible, it should work without the use of a mouse. This includes accessing pages, links, buttons, content, forms and so on. Moreover, many assistive technologies rely on keyboard-only navigation, so it must be possible to use the site’s major features via a keyboard only.

The most common way of navigating with a keyboard is using the Tab key and arrow keys for navigation and enter for selection or submitting answer. When using a keyboard, there should be a visible indicator – keyboard focus,’ that will jump between areas on a page in a meaningful sequence, especially, when navigation sequences affect meaning or operation.

But keep in mind that there should be no so-called “keyboard trap” when a user can’t move from the object in focus. Also ensure that entire web page conforms to standards, not just a part of it. Another usability tip is to provide the ability to bypass blocks of content that are repeated multiple times.

Here is how it looks on BBC website

Additionally, when a user interface component receives a focus, it shouldn’t initiate a change of context. When a page contains dynamic content, using ARIA landmarks can give the element the missing information so the screen reader can properly interpret it.

Non-text content should have alternative representation

To work around accessibility issues, many people use assistive technologies to browse the internet, like screen readers that vocalize the text on each page, Braille terminals, alternative keyboards and many other assistive agents. Thus, non-text content (images, media, etc) should have alternative text (Alt text) in the markup/code so that assistive technologies can reproduce content. When creating the alt text, the text should contain the message you wish to convey through that image or basically describe an image. This text appears inside the image container when the image cannot be displayed.

Image title is another attribute that can be added to the image tag, which is displayed in a popup.


Title tag on Mr. Bottles website / Alt tag on National Geographic website

The exception to this rule is when an image is used purely for decoration. In this case, the alt text can be left empty. For time-based media (e.g. video clip) it is recommended to provide captions or short summary description that can be interpreted by assistive agent. Captions are very useful not only for people with disabilities but also for users who may be using your website somewhere where they can’t play audio, such as in an office or in a noisy location. The audio information can be visually presented through in-sync captioning.


BBC (left: captioned image; right: subtitles for video)

It is worth to mention that using alt text and providing text transcript for podcasts or other audio elements also has a positive side effect that improves site’s SEO, just consider writing descriptive summaries of each image including your keywords whenever it makes sense.

Use headings correctly to organize the structure of your content.

Assistive technologies use heading structure to navigate content, consequently, accessibility guidelines dictate logical focus order of content, where headers, paragraphs, and sub-headers should be organized based on content direction. Thus, it is important to use headings (<h1>, <h2>, etc.) correctly so that the content of the website is well-organized in a meaningful flow, and easily interpreted by screen readers.

Tips for proper usage of headings:

  • Use <h1> for the primary title of the page and not for other purposes.’
  • Do not skip heading levels (e.g., go from a <h1> to a <h3>), as screen reader users will wonder if the content is missing.

We hope that this short summary provides sufficient information for you to get an idea of how to build an accessible website or application. You can conduct accessibility audit yourself using such tools as WAVE, AChecker, PowerMapper, Tenon.io or browser extensions.

Allowing your users to have better experience regardless of their limitations or disabilities is worth the effort. And we will be happy to assist you in this initiative.