Inclusive Design: Going Beyond Hearing or Seeing

Have you ever considered if your website’s design is inclusive for everyone?

Inclusive design is a newer concept, but an important one. Design always has two parts: an emotional aspect, and a functional aspect. The emotional aspect allows your user to identify with and feel connected to your brand, while the functional side is how your user interacts with the brand and design itself. Inclusive design focuses on both of these aspects, with the goal of being able to share your message with everyone, regardless of abilities.

Making an inclusive website simply means designing for everyone. Not only is it the more ethical thing to do, but it’s also a way to spread the reach of your brand. In this article, I’m going to explain the principles of inclusive website design for people with audio and visual disabilities.

Inclusive Design for the Hearing Impaired

Websites are fundamentally a visual medium, leading one to think that the hearing impaired would have no problem navigating a website on a day to day basis. However, there are many things that can impede how a person with hearing impairments interacts with a design or website.

Marie van Driessche, a Dutch designer based in Amsterdam, specializes in inclusive design for people with hearing impairments, like herself. She is fascinated by the way in which people interact with digital products and web pages. Let's look at the main obstacles of inclusive web design and her recommendations to overcome them.

Written Language is a Second Language

For many deaf people, written language is their second language - the first being sign language. This can create some difficulties in understanding the information presented on a website. For example, some people may struggle to understand synonyms, play-on-words, puns, and metaphors because these concepts exist differently in sign language.

To increase understanding, van Driessche recommends these guidelines:

• Separate information into points and bulleted lists
• Write with a journalistic style, presenting the main idea in each paragraph and explaining it
• Use short sentences, with around 7 to 10 words per line
• Try to translate content visually, for example, using graphics, diagrams, or images. Videos are also a good option, but you have to take into account the video accessibility (which I’ll explain below)
• Use accessible and clear language, to avoid increasing the cognitive load of the user.
• It is important to include a glossary of specialized vocabulary from your website, where you define the high-level terms you use in a simple way
• Use blank space to make reading easier

Video Use

Videos are a fantastic method for communicating information in a visual way. But in many cases, narration can rest on spoken language alone, which creates accessibility issues for the hearing impaired. How can we solve it?

The ideal solution would be to have the videos “dubbed” in sign language. When you start playing the video, an icon pops up informing the user that the information is available in this language, allowing the user can choose which one to watch.

But due to budget constraints and interpreter availability, this is not an option for all companies.

The simpler solution in the majority of cases is to add subtitles to the video. There are a few guidelines you should follow when adding subtitles. For example, respecting the minimum time the words are on the screen and the maximum number of characters per line. The subtitles should reflect the content that is being spoken about, but it does not have to be a literal translation. In fact, it is okay to condense the information.

Finally, there is also the option to make a transcript of the video available to users. Automatic transcriptions can be a good initial step, but they often contain errors and can be difficult to read, so they need to be reviewed by a professional.

Inclusive Design for Visually Impaired People

In the United States, there are around 4 million people with impaired vision, according to the US Department of Health. However, not everyone has the same circumstances or needs the same accommodations. It’s important to understand what kind of visual impairments exist:

• Color Blindness: People with color blindness are unable to see some colors or distinguish between them. Red and green tones tend to be the hardest for them. In some rare cases, it can be all colors.

• Low Visual Acuity: People with low visual acuity perceive shapes less clearly. There can be multiple causes for this issue, like astigmatism or brain damage.

• Blurry or Obstructed Vision: This problem is usually associated with loss in the field of vision due to pathologies such as macular degeneration, glaucoma, or cataracts.

• Full Blindness: People with complete blindness can't see anything, not even light. This disability is the one that requires more adaptations in web design, but it can be solved thanks to adaptations such as screen readers.

Recommendations to improve the readability of your web design

• Aim for a clean and clear design
• Choose sans-serif fonts, such as Arial, Verdana or Helvetica because they are easier to read
• Don't use italic or cursive fonts, as it makes it harder to distinguish individual characters and therefore makes it difficult to read.
• Use wide spaces between letters and words for easy reading. This applies to different settings, such as tracking (word spacing), leading (space between lines of text), kerning (space between individual letters), or line width.
• Increase font size. Although the specific measurement will depend on the website, it is generally recommended that there be between 30 and 40 characters per line.
• Use bold font whenever possible
• Use a simple background design that won’t confuse the content.
• Avoid gray text, as there is often not enough contrast for it. Instead, try to include pronounced contrast of color, size, and shape.
• Avoid shadow on texts
• Use thick lines since they are clearer than fine ones.

Take a look at your website with your eyes squinted. If you can still read and understand it, then it is likely that you have a good amount of legibility and a more inclusive design.

Design for people with color blindness

The world uses colors as a way to communicate. For example, red is used as a warning and green is used to imply that something is right. But these tones are actually the most difficult tones to distinguish for most people with color blindness.

For an inclusive design, try using a variety of resources, such as symbols, texts, or textures. When you have finished designing a page on your website, take a look at it in grayscale and see if you can still understand the message.

Web Design for Screen Readers

Screen readers are a device that allows people with full blindness or extremely limited visibility to access to the web. To make it easy for screen readers to analyze a webpage, the following recommendations should be taken into account:

• Use a simple, single-column design
• All content such as images, objects, scripts, or CSS should have an alternative text. Alternate text is an HTML element that serves a dual function: all users can see it if an item doesn't load, but screen readers also play it so the user knows what's there. Therefore, these texts must be simple and descriptive, with no redundant elements that can be inferred from the main text of the page.
• In an inclusive design, the links and buttons are descriptive (not like "click here"). This way, users using screen readers can know what the link is and where it's headed.

I hope these tips help you make your website more user-friendly and inclusive for everyone who uses it!