Aug 27, 2020

-

Marketing

Web Accessibility: Have You Ticked All the Boxes?

We’ve created a short guide on making your website accessible for everyone. It includes our best practices and free resources curated to help you take simple but meaningful steps that’ll make a big difference for users of all ages and abilities.

Welcome to the self-proclaimed age of accessibility. Barrier-free architecture has been pursuing ambitious goals for the past decades. Yet, if we take a closer look, environments that are safe and usable for everyone, are still not the norm. And not only do we have a long way to go to make all public spaces accessible to everyone. Accessibility doesn’t stop with smoothly paved walkways. We now use our smartphones to perform even the most basic daily activities, like paying for a coffee, transferring money or booking a doctor’s appointment.

In the face of the COVID-19 crisis, it became evident that not all service providers were prepared to provide those of us with disabilities with up-to-date information in accessible formats.In a world where many of us rely on digital services to work, study, shop, access healthcare and banking services, the digital space too, needs to be a place that is accessible to everyone, able-bodied or not.

Types of Disabilities You Need to Consider

Let’s start with the basics, and take a look at what a disability is. In accordance with the Australian Disability Discrimination Act from 1992; “A disability might be something that affects or limits your movements, your senses, your communication abilities, or your learning abilities. It may or may not be visible, and it may be permanent or temporary. It may be something you were born with, or it may have appeared later in life or resulted from something that’s happened to you. Some people have more than one disability.”

Source: Disability & Accessibility Support Guidelines, Curtin University, Perth

Many people automatically associate the 'disabled' with someone who isn't able-bodied. Disabilities affect different people in different ways, they’re always specific to the person. They also have a varying influence on how people navigate the internet. Motor skill impairments have a different impact than photosensitivity and cognitive disabilities, which also affect the ways in which people interact with websites, but are often overlooked. People with disabilities may be unable to do certain things in the same ways able-bodied people would. This is something you should keep in mind when designing a website or web application - or you may not only lose out on business but risk serious legal consequences.

These are the different types of disabilities you need to factor in when designing or updating your website in order to make it accessible to everyone.

Typically these are the main accessibility challenges that web developers, product designers or content writers need to consider in order to make their websites, products or apps as accessible and user friendly as possible.

How to Make Your Website Accessible

The following tools and techniques will help you design and build better products for all of your users. Before we kick things off, we’d like to remind you of two things that’ll help you on your way to greater web accessibility:

Picking the Right Content Management System (CMS)

Not all tools are created equal. When designing a website from scratch, start with choosing a Content Management System that supports accessibility, such as Drupal and Wordpress. Most themes and templates will include some form of documentation including tips and tricks on how to further increase your site’s accessibility. And just like that, your job is 50 percent done! … Well, almost!

Text-To-Speech Screen Readers

You will hear us talk of screen readers a lot over the next few minutes. Screen readers are software applications that allow people with visual impairments to use a computer. Screen readers translate on-screen information into speech, which can be heard through earphones or speakers. Some screen readers are also able to provide information in Braille, which requires an external hardware device.

On newer versions of Apple, you can hold down the command button and simultaneously press the touch ID button three times to activate Voice Over. Try it out yourself and run a quick test on your website. It may help you understand what it's like to navigate your website as a person who can’t read or aren’t able to due to a conditional disability.

Design for Keyboard Accessibility

Users need to be able to navigate your website without the use of a mouse, especially since assistive technologies often rely on keyboard navigation. Your site is keyboard-friendly when users can access and use all major features of your site, using their keyboard and nothing else. A common way to do so is by using the Tab key.

You can easily check the keyboard-friendliness of your site, by heading over to your website right now and testing if you can use it without your mouse. If you find it difficult to navigate your site, have a look at WebAIM’s guide for keyboard-accessible design. Did you know? Apple’s onscreen keyboard that lets you use your Mac without a physical keyboard. Their Accessibility Keyboard is paired with Dwell, a software that allows users to perform mouse actions using eye- or head-tracking technology.

Use Descriptive Link Text

Naming your links appropriately should be a no-brainer, yet you’ll still find many “Click Here” anchor texts across the web. This can pose a barrier to users relying purely on screen readers to determine where a link will take them. A simple “Read More” button might look sleek and minimalistic at first glance. Yet it is a poor design solution, because it’s not immediately clear what the link describes or where it’ll lead to.

Text links should use short descriptive text (like so). This link is not only easy to understand, it’ll also allow users relying on speech recognition software to navigate your site with ease. Here is what a good, descriptive link text should look like:- Descriptive link: Visit this link to check out our work.- Generic statement: Learn More.

Add Alt-Text to Images

You’ll also want to provide descriptive text alternatives (alt-text) for all of your images. These are sometimes also referred to as alt attributes, alt descriptions, or alt tags.

Since screen readers read these alt-text, you have to make them meaningful. Reading the alt tags alone should paint a pretty clear picture of a page’s content. Learning how to describe an image properly, pays off: It gives context to users who would otherwise miss it and improves your site’s SEO, giving search engines more information to crawl. Here is what accessible alt-text could look like:

Alt-text:HTML: <img src="/images/womanonlaptop.jpg" alt="A Young Woman Sitting In Front of Her Laptop Smiling" />

Alt-text:HTML: <img src="/images/Manhattan.jpg" alt="A Photo of Manhattan Island at Sunrise" />

Use Header Tags Correctly

Headers communicate how a page is organised. Which is not only useful for able-bodied readers, but helps screen readers who rely on the in-page navigation clues these headers provide. Screen readers pay attention to header tags and use them as clues to rank the importance of the information displayed on the site.

When organising your content with headers, please keep the following in mind: - From bottom to top: The most important header is (<h1>), the least important (<h6>)- Avoid skipping heading ranks, it can be confusing- Headings with an equal or higher rank should always start a new section

Enable Resizable Text

Now that you know how to make title tags and link descriptions accessible, let's take a look at design questions.

How do you know that the information on your site is displayed big enough for users of all ability levels to read it? What is readable for you might be much too small for others, or vice versa. Since no two users are alike, it can be a challenge to factor in all the different needs and requirements people may have. The Web Content Accessibility Guidelines, state that visitors should be able to resize text on a website up to 200 percent. Most devices and browsers have an in-built feature that supports resizing. But if you don’t build your site with this in mind, resizing text to twice its original size could break your design or make it impossible to interact with your content.

Unfortunately, text resizing widgets are often overlooked, and most users have never even heard of the fact that they can resize fonts in their browsers. The only way to really solve this issue is by going BIG. Don’t be afraid to step things up a notch; improving the readability of your web content is an easy way to measurably increase the time people spend on your site. Adequate spacing between letters and text lines matters as well. If you need a refresher, have a look at this article on UX essentials we featured recently.

Choose Colour Contrast Wisely

Colour blindness affects around 1 in 12 men and 1 in 200 women worldwide.

Accessibility in web design means crafting experiences for all people, using the design principles you already know. Step one is making sure that all text elements stand out against the background. As such, you want to choose a text colour that contrasts well with the colour of the background, to ensure that really everyone can distinguish between the elements on your page. Grey on white, for example, is not a good idea. Instead, use a dark colour over a light one and make sure that different colours don’t bleed into each other. When designing call-to-actions or navigation elements, check the contrast ratio of your colour combinations. To meet W3C’s minimum AA rating, your background-to-text colour contrast ratio should be at least 4.5:1.

People perceive colours in different ways. Whilst colours can be helpful tools to navigate and understand a website for those who are able to see them, users with disabilities might be unable to access a site that purely relies on colour schemes. Designing for colour blindness means using both colours and symbols to convey information.

Source: Ishihara’s Test for Colour Deficiency I Colblindor

Design Forms for Accessibility

And since we’ve already brought up forms, there are a few more things to consider when designing forms for accessibility. Forms can be a useful addition to your website, if every field is labeled appropriately, that is. If they are not, screen reader users may not be able to identify what type of content should be entered into a form field.

Here is what else you need to know about creating accessible forms:

Give each field a well-positioned, descriptive label.
Use the label tag or an ARIA property to pair every label with the right input field.
Use the semantically correct HTML tags.
Place labels right next to the respective fields.
If fields are related or similar, group them together using fieldsets.

CAPTCHA should not be used to validate submissions, as it is by definition exclusive. Distorted characters may help to separate computers from humans, but they also often prevent people with disabilities from performing the requested procedure. WebAIM has a helpful list of alternatives to CAPTCHA, which can help you keep forms free of spam.

Web Accessibility - A List of Helpful Resources

Making Accessibility A Priority from the Start

Making sure that your website is accessible to every user, should always be your priority. It’s not just the ethical thing to do, your business will also see immediate benefits in lower bounce rates and increased traffic and conversions. Keep up with updates to the WCAG Accessibility Tests to make sure you’re always following the latest accessibility guidelines. If you’re ready to start setting up or redesigning your website, having the right partner in your corner can make all the difference. Don’t hesitate to contact the Anchor Digital team for all your web design needs and questions. Our web designers and developers take accessibility seriously.

December 19, 2023

What Ad-Free Social Media Could Mean for Advertisers

Learn about ad-free social media subscriptions hitting Europe and the impact they could have on Australian advertisers.

November 27, 2019

Everything You Need To Know About Wireframes, Mockups and Prototypes In Modern Web Design

You can’t build a house without the proper tools. In a similar way, you can’t build a great digital product, without knowing which steps you have to take along the way.