8 minute read

Accessibility Matters

We all know what web accessibility means right? We know it is a set of principles that enable visually challenged people access and navigate the internet. But is that really all it is?

Accessibility specifically in relation to the internet is firstly a design challenge. Its consideration has to be at the heart of every detail and process, and has to be embedded within an organisation almost like a culture from which innovation and creativity bloom. If accessibility is only considered at the build phase of a digital project it is often too late, as it then becomes expensive to retro fix solutions that fail to meet the standards provided by WCAG and other guiding bodies.

No.1 Typography

Our road to building accessible digital products starts with the typography.

We all want our message to come across clearly and that starts at the most basic level, the choice of typeface.

The typefaces we use are critical to the way information is absorbed and the complexities of the characters within a typeface matter, especially for impaired users who have trouble deciphering the words they make up.

It isn’t just for visually impaired users, but also for people with cognitive challenges like dyslexia who can also struggle to understand individual characters that construct words and sentences. Even though such users have coping strategies, asking them to read passages of text which use a typeface made up of complex flourishes is unhelpful at best.

That isn’t to say that a brand should be constrained to “boring” typefaces, but that the choice should be informed by a guiding set of principles as described by WebAIM:

  1. Use simple, familiar, and easily-parsed fonts
  2. Avoid character complexity
  3. Avoid character ambiguity
  4. Use a limited number of typefaces, fonts, and font variations
  5. Consider spacing and weight
  6. Ensure sufficient, but not too much, contrast between the text and the background
  7. Avoid small font sizes and other anti-patterns.

No2. Language

95% of content on the web is written so it’s really important that the language you use is easy to understand and digest.

Using clear language can make the difference between users finding what they need or getting frustrated enough to leave your website.

The good people at Harvard University nailed it:

“Plain language benefits all users, including people with cognitive disabilities, low reading literacy, and people who are encountering an unknown topic or language. For websites and web applications, people need to be able to find what they need, understand what they find, and use that to accomplish tasks.”

Very often organisations feel the need to use a jargon filled approach to the content they are trying to communicate. This may be seen as a way to sound knowledgeable about a topic, but in reality it is an approach that can alienate swaths of users.

Generally addressing simple things like button labels can have a dramatic effect on usability. For example, changing a button label from “More” to “Learn more here” immediately makes it more descriptive and lets the user know what they can expect to happen when pressing the button.

At The Designlab we take a great deal of care to design for a diverse set of people in every project we undertake. Our process creates digital applications that are inclusive of users from all walks of life, understanding peoples needs is key to designing and building better and more accessible experiences.

We believe good design only happens when you view your challenges from a wide range of perspectives.

No3. Colour

The use of colour to communicate is a wide topic that includes aspects of psychology, cultural cues, cognitive function & user guidance. From a digital point of view it most importantly pertains to users’ varying ability to perceive content.

In the UK 1 in 12 men and 1 in 200 women suffer from “colour blindness” / the inability to distinguish one colour from another, with deuteranopia (red-green colour deficiency) being the most common affliction. https://lnkd.in/dHESTBRM

Contrast (the clear distinction between 2 adjacent colours e.g. black and white) is a simple way to address colour related visibility issues.

When two colours have the same hue they appear as a single colour or very similar colours to colour blind users so by increasing / decreasing the tonal contrast level for one or the other we create contrast.

However, as there are several forms of colour blindness, ranging from the inability to see colour at all to seeing only certain parts of the colour spectrum e.g. colours in the red/pink part of the spectrum appear grey/khaki green (protanopia), using contrast only is not the always successful.

Age also have an impact on how colour is perceived.

The human eye sees the world in RGB (red, green, blue) and our retinas contain thousands of light-detecting cells. As we age, the number of these cells in our retinas diminishes. Shorter wavelengths are perceived as bluer and our eyes have evolved to be more sensitive to red, green and then blue, making them more sensitive to the green, brown, red, and orange range with blues and purples becoming fuzzy.

Applying this knowledge to our UX design help us successfully guide all users, regardless of age or colour affliction around a website/application. For example:

💜 Purple - displaying product colour choices by showing a colour swatch labelled with the colour name.

📞 - Accept / decline call buttons on mobile devices clearly defined with colour, symbols and labels, reinforcing a buttons’ potential action.

🔴 - Think of how we use green and red buttons - red = danger & green = safe and we therefore assign + and - actions to them. For users with protanopia this is problematic as they will see two different shades of green as they are blind to the red spectrum.

✔️ - By adding a cross to denote a negative action or a checkmark one can easily clarify the possible consequences of interacting with a button.

Read more about colour blindness

No. 4 User Interfaces

In the early days, this UI element was difficult, if not impossible, for impaired website visitors using screen readers, as the content appeared as blank areas on the screen. Although this component has improved, it can still present accessibility issues because it consists of a moving set of images and information that cognitively challenged users can find hard to process. It is often also made worse by inadequate controls that can help the user navigate through and digest the presented information. The most valuable and obvious solution here is enabling the user to pause the carousel and navigate at their own pace.

Another UI that has become a standard part of the user experience (UX) landscape is finding a product, adding it to your cart, and proceeding through the checkout.

This process is so standard that most eCommerce websites follow the same pattern as unexpected functionality will slow down conversions to sales. These UI features and UX processes have become ingrained in our understanding of navigating an eCommerce website. Time-poor people want well-established patterns that enable them to navigate to complete the task they visited for quickly.

Some good examples here are:

  • UI elements like tabbed content for extra information, e.g. sizing guides for clothing
  • accordions, e.g. a menu displaying headers stacked on top of one another, and when clicked, they reveal/hide associated content

These elements help organise the extra detail that is not primary or important information.

UI choices can also become problematic when these elements' presence is unexpected, e.g. when an accordion (used to organise some peripheral information) is used on a general page.

This problem can also be compounded when the UI device is used only as an aesthetically pleasing, neat way to organise content with form prevailing over function. If a user has to click another element to reach important content that didn’t need to be hidden, it presents an extra challenge for those who are less able to interact with the website.

No. 5 Page structure and the importance of semantic code

While creating some genuinely inspiring digital projects is possible, it is essential to underpin what we create with semantic code.

So what is semantic code then, and why is it important?

All web pages are created with individual elements that work together to make each page. These elements include titles, text passages, images and more, and the semantic page structure is almost like creating an address for each component. For example, my house exists on my street, in the town I live in, which is in a specific county. This same principle can be applied to HTML code structure.

In basic terms, code written as <div class=”header”></div> to define the header section of a web page is meaningless to both SEO spiders and, importantly, also to screen readers used by impaired users. So instead, we would determine the header section of a website with the HTML element <header>The header</header>, which clearly defines the element.

It may already be evident that if we use my earlier example <div class=”... that a page's structure would soon become akin to a bowl of noodles - the structure is lacking though it may look and taste fantastic. Instead, we would then structure a page with defined HTML5 tags that help to signpost different kinds of content, making it easier for our impaired users to navigate and decipher.

As you can see in the following example, if the page is structured using only the basic block element div, the structure becomes harder to navigate. This is because the elements defer to the style attribute ‘class’ for the page structure. This approach is purely for visual aesthetics and will negatively impact a user's ability to navigate the content using a screen reader. It will also negatively impact SEO because search engines are unable to determine the content hierarchy:

        <div class=”header”>
            <div class=”navigation”>The navigation system</div>
        <div class=”main”>
            <div class=heading1>Page title</div>
            <div class=paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Donec id felis vel felis facilisis mollis.</div>
        <div class=”aside”>Sidebar content</div>
        <div class=”footer”>Footer elements like links to the privacy policy</div>

In contrast to the example above, the following example becomes clearer to navigate. Going back to the analogy of a postal address, it is possible to see where in relation to its parent and siblings an element resides, due to the proper use of semantic HTML5 elements to define the page structure.

        <header>The navigation system</header>
                    <h1>Page heading</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Donec id felis vel felis facilisis mollis.</p>
            Sidebar content
        <footer>Footer elements like links to the privacy policy</footer>

For accessibility, this approach is a must because it means that users who rely on screen readers and other tools can move easily between parts of a page, enabling them to find the information they need more quickly. Without the proper semantic code structure, this ability would be lost and the content would be challenging to digest.

As already mentioned, using this approach also has significant benefits for SEO as it allows search engines to understand the page content and ultimately assign a higher value to it as a possible search result.

Creativity is contagious... pass it on! Subscribe to our bi-weekly email inspiration...