Inclusive Web Design

Implementing Inclusive Web Design Best Practices

Now that terminology (Web Accessibility Pt. 1) and legal compliances (Web Accessibility Pt. 2) have been clarified, the framework for application of inclusive design has been set!

Let’s talk about ways to make websites accessible.

The following are design tips and resources to help make an accessible website, but please note that there are various ways to do so, and these are only a few of them. Researching one’s audience and understanding how people’s interactions vary opens up opportunities for multiple and diverse ways in which to make them successful user-experiences.

1. Contrast: Make sure all content contains enough contrast.

Ensuring that there is enough contrast on all content guarantees that all elements are distinguishable. Standard contrast ratio according to W3 accessibility guidelines is 4.5:1, which means that if the background is white (1), everything that is displayed on it must be 4.5 times darker.
WebAIM Contrast Checker and ColorSafe are great tools to ensure enough contrast based on existing colors or in the planning of a color palette. Stark is a plug-in that allows for any two colors to be checked for contrast.

2. Color: Never utilize color as the only way to convey information.

Users who have colorblindness or who utilize screen readers may rely on other design elements and cues in order to navigate a page. Utilizing color alone prevents certain users from understanding the meaning of a particular action. Pairing color with another indicator ensures that no critical interaction, instruction, or information will be missed.

Color Brewer helps create color palettes that are colorblind safe and Color Oracle is a plug-in that simulates different types of color blindness by applying a color filter that shows what people with a particular form of color blindness would see. These are both great tools to check work before it is released.

3. Alternative Text: Provide a textual alternative to images and graphics.

“Alt text” should be provided for images so that users who utilize screen readers can still interact with them. Alternative text is a descriptive summary of what is happening in the image, giving context to users by “reading” the picture. Avoid wordiness and be precise: give just enough information for the user to understand the content of the image. When including alt text, do not use “picture of” or “image of”, screen readers automatically announce to the user as image as an image.

Also, if bandwidth is not available, alternative text still allows for the image to be available and described.

There are three ways to add alt text:

1. Include alt attribute: screen reader will read description of image. Used for images that have importance or images that are linked in order to describe where the link goes.
   Example: <img src> = “sunflower.jpg” alt = “sunflower in a field”
2. Include alt attribute but leave it blank: screen reader will completely skip over the image.
   Used for decorative images that serve no specific purpose.
   Example: <img src> = “sunflower.jpg” alt = “”
3. No alt attribute: screen reader will read name of file
   Example: <img src> = “sunflower.jpg”

3. Links: Make links descriptive and long enough to click on.

For users who utilize assistive technology such as screen readers, links must make sense out of context. Utilizing link titles that are informative help users navigate through the website more easily without having to guess what they are clicking on and where the link will go.

For example:
Instead of a link saying “read more”, be specific: “Read About Us”

This way, links are not only informative but also tend to be longer, which provides a larger area for interaction. This is beneficial for users with motor skills limitations. Interactive elements that are small make it difficult for users who may not be able to hold the mouse pointer with precision for extended periods of time.

4. Text: Text must be visible and easy to read.

• Do not use more than 3 different styles of fonts, this helps develop a structure and maintain consistency.
• Sans-serif fonts are friendlier in large bodies of text than serif fonts.
• Standard text size for body text should be between 12-16 pts.
• Line length should be limited to 50-60 characters on desktop.b. All text must be machine-readable and assistive technology friendly.This means that the format of text must take into account how assistive technologies function. For example: Screen-readers do not recognize underline, bold, or italic, so emphasizing text must be done by using “strong” <strong>, or “emphasis” <em>, tags.

5. Content: Utilize clear and simple language.

All text must account for all levels of literacy, so avoid unnecessary complexity. Break up large bulks of text to help with readability.

WebFX Readability Test Tool is a great tool to check the literacy level of an existing website or of bodies of text. A grade level of 8 (roughly around 13 years old or 8th grade level) is optimal.

6. Videos: a. Always add an alternative method of interaction.

Including textual elements ensures that users who have hearing impairments can still interact with video content. There are different types of textual elements that can be added and choosing which one to use depends on the goal of the interaction.

Subtitles: on-screen translation of dialogue. Typically used assuming the viewer can hear the audio, but may speak a different language.
Captions: on-screen transcription of dialogue. Usually include supplemental descriptions of sounds (music, closing doors, footsteps). Often used by people who are hearing impaired. Audio descriptions: Commentary and narration with objective descriptions. Often accompanies television, films, or video presentations as a means to depict key visual elements and provide information on visual content by giving it context.

Amara is a free tool that enables anyone to create captions and subtitles for videos.

b. Never let videos begin playing automatically.

Users may experience motion-sickness from the movements in the video as well as experience sensory overload. Users will either be investing time in trying to figure out how to turn off the video or will give up on interacting with the web page at all – either way this is an experience that can cause frustration, confusion, or anxiety.

7. Audio: Add transcriptions and provide adjustable options.

Audio content also needs an alternative method of interaction, which is usually through the use of transcripts.
Transcriptions: the transformation of audio materials (speech and non-speech) into text. They should provide descriptive cues about emotional responses, such as pauses and laughs, along with the dialogue. They are also searchable, which aids in navigation.

Allow the speed and sound levels to be adjustable. Users process and understand information differently or may have sensitivity to certain sounds, so providing them with the option to adjust both sound and speed to levels they feel comfortable with supports better user-experience.

8. Headers: Structure content by using headers carefully.

Defined headers help screen readers navigate through content, which makes in-page navigation easier. Utilize headers consistently and as clues for importance – skipping a heading level or using them out of order will cause confusion, but establishing a hierarchy helps users understand the layout of information.

9. Keyboard: Make sure all content can be accessed with a keyboard.

Some users may not be able to use a mouse or trackpad, which means their main form of navigation may be through the use of keyboard. Users navigate through content by pressing the “tab” key, so the “tab” order on a website should match its logical visual order.
This way, the page can be structured so that users can skip to particular parts of the page by adding features such as “skip to main content” at the top of each page. Users will then avoid having to tab through each individual navigation feature.

There are also various resources that help check the overall accessibility of a website:

• W3C Web Accessibility Evaluation Tools
• WAVE Accessibility Checker
• 508 CheckerAll of these tools and resources are readily available and support inclusive design practices by making checking for accessibility easy. Make utilizing them during the creative process part of the routine.The web has been an incredible asset to people with disabilities as it has allowed for greater opportunities for different methods of interaction with information. By creating barriers that limit access to this information, the sense of independence for certain users is also limited. The importance of accessibility in the web is much greater than just ensuring everyone can access what is on it: it is a step towards making the world a more welcoming and inclusive place in all of its aspects – regardless of ability.

Part 3 of 3 on Website Accessibility by Carolina Pereira. Have you seen our 5 Examples of Great B2b Website Designs