Why Brands Should Embrace Inclusive Web Design

Granny Bird, Forgetful Jones, and Slimey the Worm are Sesame Street characters that share one thing in common: they all have a special need, impairment, or disability.  They...

Fiona Gurtiza
Fiona Gurtiza December 2, 2019

Granny Bird, Forgetful Jones, and Slimey the Worm are Sesame Street characters that share one thing in common: they all have a special need, impairment, or disability. 

They might not be as popular as Ernie or Bert, but the show teaches us that inclusion is subtly taught to us as children. 

The same rule applies to the world of digital marketing. 

Years of research have taught experts how people use computers, search for information, and conduct online activities. As a result, it has led to exciting advances in machine learning. But more importantly, learning about the different ways people use the internet has helped pave the way for inclusiveness in technology. 

Google’s recent BERT update is one example. So are transcribed podcasts and closed caption videos. Font selections, color choices, and content structure are all factors to consider when designing web pages that will respond successfully to an accurate search query result. 

Take note that it is your job to help people make better decisions, which starts when they make a query on a search engine and arrive on your webpage.

Without truly understanding inclusivity and online customer behavior, you’re losing the opportunity to make your website work for everyone.

Why Inclusivity Matters 

Every person on the web has a question and is seeking a satisfying answer. They want a quick solution, preferably on a site that’s accessible and easy to use.

Achieving this is possible through three simple steps:

  • Creating informative content that ranks high on search engines; 
  • Getting users to click-through to your site with a well-written snippet; and
  • Answering the question with a well-designed, easy-to-use website.

The third bullet point, however, is where most marketers fall short. And understanding accessibility is the key to crafting better experiences for everyone online.

When talking about usability, your website should contain the following elements:

  • A clear, navigational structure
  • Easy-to-follow headings
  • Content that follows the inverted pyramid (where important info is found at the top)
  • Great on-page formatting (bullet points, numbered lists, etc.)
  • Useful resources that encourage readers to learn more

In short, it’s a website that allows everyone to enjoy what you have to offer.

Holistic UX and SEO

Holistic UX and SEO have been around for almost two decades. But along with inclusive web design, it’s still a relatively new concept.

But the holistic approach to SEO is integral if you want to rank high on search engines for specific queries. Holistic UX and SEO plays a crucial role in your marketing strategy by optimizing the entire user experience instead of treating it merely by the sum of its parts.

In a nutshell, it includes website accessibility, information architecture, and persuasive web design. 

And if you want to provide an optimal browsing experience, you’ll need to include those with disabilities or minor impairments. These include people who have a hard time browsing websites without using assistive software or devices. 

Inclusive Web Design

Inclusive web design is a practice that falls under holistic SEO. It involves designing products and services that are accessible and usable.

It goes one step further than website accessibility, which focuses on people with disabilities. Instead, inclusive web design considers people of different abilities, not just those with impairments. 

More particularly, it considers disabilities that could be temporary or situational. For instance, some users struggle with screen glare under sunlight, while others use mobile devices in noisy environments. Others could experience difficulty tapping links on their touch screen when they’re positioned too close to each other. 

When used hand-in-hand with strategic management tools and processes, inclusive design moves a brand closer to delivering products and services that offer value

Crafting Inclusive Design Personas

When incorporating inclusive design into your website, it helps to craft inclusive design personas to make sure you’re hitting the mark. Consider these factors:

  • Ability – How restricted is the user in his or her ability to perform routine tasks? Take note of their cognitive and physical disabilities. Your customer could be visually impaired or hard of hearing, for instance. 
  • Attitude – How does the user perceive the web? A customer from a developing country could be skeptical of sharing sensitive information online because of their lack of web exposure, for instance. 
  • Aptitude – How experienced and knowledgeable is the user about the web? Is he or she familiar with basic web navigation?

Other important factors include computer literacy and skills, access to the internet, language, culture, and economic background. Coming up with different personas and traits allow you to make your website more accessible.

Designing for Optimal User Experience

Accessibility is solved at the design stage. So if you want to design for accessibility, you’ll need an inclusive web design. And this includes those outside of your target demographic, such as customers with disabilities. It also encompasses those from different countries and cultures.

But where do you start? 

It helps to apply a critical analysis technique of viewing designs from different lenses. After all, coming up with a good design starts when you view things from different perspectives.

Lenses work in the same way because they ask us to leave our worldview behind and see things from a different context.

The Different Lenses of Accessibility

Accessibility lenses are a filter that helps you understand different aspects of design and how they can affect the needs of your customers. Paying attention to these lenses can guide you in designing a more accessible website. 

Animation and Effects 

Great animation brings your page to life, guides user focus, and makes it easier to navigate a website, the same way that misusing animation can confuse and distract. 

Fast-flashing effects (flashes that exceed three times a second) or high-intensity patterns can trigger seizures, for instance. Other motion effects could also result in dizziness and nausea. 

Use animation to your advantage by learning how to design it safely. Start by making sure that the animation on your site covers small distances and matches the direction and speed of other moving objects. 

Audio and Video

Autoplay videos and audio are a great engagement tool, but they can also break user concentration. When they make a person uncomfortable, they put someone in a position to track the media and either mute or stop it from playing. But not everyone is capable of doing this.

As a general rule, use autoplay sparingly. Along with providing easy-to-use controls, make sure your videos include subtitles and transcripts so your audience can consume your content in a way that works best for them. 

Color 

Color is a crucial element of design because it evokes emotions, feelings, and ideas. The power of color is lost when your users perceive colors differently. People with red-green color blindness, for instance, see reds, greens, and oranges, as yellowish. 

On top of that, color can hold different meanings in different countries and cultures. Western cultures use red and green to represent positive and negative trends, respectively, but it is the opposite for Eastern and Asian cultures. 

For good measure, add a non-color identifier to your site. Identifiers like icons or text descriptions can bridge cultural differences. Moreover, try to avoid oversaturated or high contrasting colors so everyone feels comfortable using your site.

Controls 

Controls describe any UI element that a user can interact with. It includes buttons, inputs, and links. But if these controls are too small or clumped too close together, they can cause discomfort.

Small controls can be hard to click for those who struggle with tremors and reduced dexterity, for example. And the default size for checkboxes can pose problems for older customers. On top of that, accidental screen touches can frustrate anyone, especially if it navigates someone away from the page or makes a person lose context. 

Place controls far enough apart to reduce touch errors. And always provide text labels so your users understand what its purpose is. 

Font

Technology allows us to open browsers on any device, from small watches to huge 4K screens. This means the font you use should be as responsive as the design on your site. 

As a result, your design should be flexible enough so users can customize the font size, height, or line spacing for comfortable reading. People with dyslexia may struggle with decorative or cursive font styles, for example.

As a general rule of thumb, your site should use larger texts, shorter line lengths, and taller line heights to make reading easier. 

Images and Icons

Images are useful in conveying feelings or simplifying complex ideas. But even if you’re using a straightforward image, it helps to annotate the photo to avoid misinterpretation. This is why creating an alt text for your images is important. 

Descriptions should be kept brief. A well-written description should help users know what’s going on in a photo in a single sentence.

If explaining the image requires a lengthy explanation, however, save it for the caption. Just make sure your alt text allows users to access important info quickly.

Readability and Structure 

Layout contributes greatly to user experience. Ideally, it should contain a logical and meaningful sequence that guides users effortlessly through your page.

On a similar vein, hard-to-read text can be mentally taxing or tiring. In consequence, it can cause problems for those with cognitive disabilities or who aren’t fluent in the language you use. 

Use simple language and organize your content to make it easier to remember and digest. Speak in short, punchy sentences. You can also break your content into headings, lists, or images to support various learning styles. 

Using the different lenses of accessibility during the web design process can help you understand the needs of your audience better. Looking through each one can aid you in refining the user experience to suit everyone’s needs. 

For more help designing a custom web solution, get in touch with Growth Rocket today.