article

Learn the ropes of accessibility

8 min read

Anastasiya Mudryk Anastasiya Mudryk
17 Jan 2019
I

deally, everyone should be able to use any website on the Internet. The Web has become an increasingly essential resource in many aspects of life but sadly, there are some people who can’t enjoy equal access and opportunity due to disability. At Cieden, we always have the 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 compliant with standards 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, how to make your website or application accessible or just learn more about accessibility standards, then this guide is for you.

When a product is useful but not accessible

Accessibility and why it matters

More than 15% of the global 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 between the 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 types are grouped into the following categories:

Visual: Inability to see the content of the website or app due to blindness, limited vision, color-blindness

Hearing: Inability to hear sounds and noises due to deafness and being 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 being too easily distracted

Although disability is commonly 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., a 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 no secret that the global population is aging, so audiences with limited abilities are set to increase significantly. Thus making web or apps more easily accessible will either maintain or increase your audience.

By addressing accessibility issues, you’re not only expanding your audience of potential users/customers, you are also showing your commitment to social responsibility. As you learn more along the way, 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, website responsiveness, search engine optimization, and even reduces maintenance costs. Lastly, it’s important to note that many countries have laws regarding website and software accessibility (US Section 508 Standards, EU Directive on the Accessibility of Public Sector Websites). Therefore, you may be legally required to comply with specific accessibility standards.

So where to start?

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

We’ve prepared a summary to get you started and help get a better picture of what accessibility requirements are, and what their implementation might look like. We’ll touch on fundamental concepts without getting into too much technical detail too. So let’s get started!

Visual representation

Choose colors wisely

Color is a vital consideration t when it comes to designing web pages since over 90% of content information is presented in color. But making a website more accessible means that content representation does not rely solely on sensory characteristics, i.e., color, shape, size, visual location, orientation or sound, so that information can be depicted in several ways. 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 so that everyone can distinguish between the various elements on the page. Here is where color contrast comes into play. As per WCAG guidelines, the adjacent colors selected for user interface components or graphical objects should have a contrast ratio of at least 3:1. You shouldn’t sacrifice usability simply because, for example, gray or any other low-contrast font color looks better in 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). The graphical objects and user interface components pass the WCAG contrast test.

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

Unsurprisingly different people perceive colors differently. According to statistics, 5% of the male population suffers from red-green blindness (the most popular form of color impairment), which means that they cannot distinguish between red and green on the color spectrum. To illustrate, they might see your website like this:

Check out this tool to simulate other types of colorblindness.

Thus, users with color blindness or color deficiencies require color-coded information to be available, along with another visual cue such as changes in shapes, line textures or text labels.

Lastly, hold back from using too much color. A plethora of color always looks bad, no matter which colors are used. Lots of hues confuse the eye, leaving readers bewildered and unsure where to start first.

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

One more consideration to bear in mind is that it has become increasingly popular to use images as a background, but you should never forget that the text should always be clearly visible.

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 aspect of how your website is perceived concerns the text content. There are five main parameters which determine how you can adjust your text content: font style, size, spacing, background contrast, and alignment.

Size

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

Nonetheless, it is important that larger fonts do not compromise their readability or functionality. This means that texts can be dynamically resized without requiring the user to scroll horizontally. As per WCAG guidelines, users should be able to resize all texts on the page to up to 200% of their original size.

To achieve this, consider using relative units (such as percentages or ems) to specify font sizes, rather than absolute units (such as pixels or points). The general consensus is that 16px for body text is a good starting point.

Contrast

Good fonts and sizes lose all their value if the background is unsuitable. A clearer contrast always works much better than using shades of similar 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 the contrast for better accessibility and gives web designers a number to shoot for. However, a higher contrast ratio is recommended for enhanced accessibility (Level AAA).

Some useful tools are Contratschecker and WebAIM, which you can use to evaluate and select a suitable color combination.

There are plenty of tools which help to assess contrast ratio and verify conformity to WCAG standards. Nevertheless, designers should find that the Stark plugin for Sketch is the most handy. It features a color-blind simulator, contrast checker and color suggestion tool. If some colors don’t meet your benchmarks, 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, and really affects the feel of a design, the typographical rhythm, and readability.

The too tight text feels crowded and becomes harder to read, whereas lines which are spaced apart can appear unrelated and disjointed. Users with cognitive disabilities or visual impairment may also have difficulties tracking lines of text when they are spaced too closely together.

Here are the accessibility guidelines for 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, each line should be no bigger than 80 characters or glyphs (40 for CJK). However, best practice for line length indicates that 40-60 characters for English body text or 20-40 for short English text are optimum for comfort.

Alignment

Eye Tracking 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 center justified. Right justified texts pose different problems since a ragged left margin severely reduces reading speed and comfort levels.

Font

There are no requirements or guidelines for fonts, but they should, of course, be clear, readable and readily available on users’ computers. Therefore cursive and fantasy fonts are generally a poor choice for web content. And it is worth bearing in mind that using too many different fonts can create a confusing visual layout. This is bad news for all users but can pose particular problems for users with reading disorders, learning disabilities, or attention deficit disorders.

Here are some examples of poor typography:

and lastly …

Navigation and website layout

Help users navigate the web page using just their keyboard

For a website to be truly accessible, it should be possible to work on it without the need for 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 with a keyboard only. 

The most common way to navigate using a keyboard is by using the Tab and arrow keys, and to use the enter/return key for selecting or submitting answers. 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 don’t forget to avoid the so-called “keyboard trap,” which is what happens when a user can’t move away from the object in focus. Also ensure that entire web page, not just parts, conform to standards. Another good tip to improve usability is to provide the ability to bypass blocks of content that are repeated multiple times.

Stark plugin for Sketch

Moreover, when a user interface component comes into focus, this 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 interpret it properly.

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 several other assistive agents. Thus, non-text content (images, media, etc) should include alternative text (Alt text) in the markup/code so that assistive technologies can reproduce this content. When creating the alt text, it should contain the message you wish to convey through that image or basically describe the image itself. This text appears inside the image container in cases where the image cannot be displayed.

The image title is another feature 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 cases like this, the alt text can be left empty. For time-based media (e.g. video clip) captions or a short summary description that can be interpreted by an assistive agent are recommended. Captions are not only very useful 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 other noisy locations. The audio data can be visually presented through in-sync captioning.

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

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

Use headings correctly to organize the structure of your content

Assistive technologies use a heading structure to navigate content, and accessibility guidelines dictate the logical focus order for the content, where headers, paragraphs, and sub-headers should be organized based on content direction. It is therefore vital 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 enough information for you to get an idea of how to build a more accessible website or app. The good news is that you can conduct your own accessibility audit by using such tools as WAVE, AChecker, PowerMapper, Tenon.io or through browser extensions.

Helping your users have a better experience, regardless of their limitations or disabilities, is definitely worth the effort. And we would be more than happy to assist you on your quest!

Anastasiya Mudryk
by Anastasiya Mudryk

start your project with us.

But we
can’t do it
unless you
decide to
reach out

what are you looking for?