A quick guide for businesses to help understand the Importance of accessibility in Web Design

How does making your website more accessible increase traffic & conversions?

Designing a website is an exciting project. You are taking information from a client and building their thoughts and ideas into a visual and text based representation of themselves or their business. Just as every person is different every web site should be equally unique in its values, thoughts, looks and ideas. It's never been more important to have a website to display your business and a well structured and accessible website can be invaluable in helping get your message and ideals in front of your customers.

Accessibility in web design has long been a subject which comes and goes from web design and development circles. Although it’s universally agreed that the practice of making your website as usable by as many people as possible and on as many devices and browsers that there are out there, it’s not always the focus to design or develop for those users who may have disabilities. 

This article looks at how we can make websites more accessible across both parts of the usability scale.

Why is website accessibility important for your business?

The internet itself is an ever changing organic entity which is constantly evolving how we consume data and information. While web accessibility isn’t a legal requirement beyond government or public sector websites in the UK. There is a growing trend to create commercial and non profit sector website accessible. 

In the US the requirements for ADA (American Disabilities Act) compliance has seen an increase in lawsuits against web sites that are not accessible.

Why does website accessibility matter in recruitment?

👉 It’s a Legal Obligation

There are 14.1 million disabled people in the UK, 19% of which are working-age adults that have a right to access jobs. For organisations, it’s a legal obligation to give a fair hearing.

The law covers recruitment, employment and dismissal in the Equality Act. It’s essential that organisations have the right practices and tools to cater for people with disabilities.

👉 Diversify Your Workforce

A diverse workforce allows your organisation to tap into a larger pool of talent and potential. If your organisation does not have an inclusive recruitment process, then it will be missing out on many talented people who are simply unable to apply for roles or continue through the recruitment process.

A diverse and disability-friendly workforce unlocks benefits for an organisation, from fresh perspectives and creative ideas to better decision-making and problem-solving which increases employee engagement, thus increasing productivity and profitability.

Making your recruitment process more accessible will increase your chances of finding the perfect candidates to help your organisation flourish. By offering a holistic approach to reasonable adjustments to allow and disabled staff to navigate their job more easily will help not only attract a wider pool of talent, but also achieve higher staff retention rates, thereby saving your organisation money on recruitment costs.  

👉 It’s the right thing to do

People living with disabilities face barriers when seeking and entering employment. Due to the stigmas surrounding disability, it is highly likely that a disabled person will face discrimination or challenges when applying for jobs.

Making accessibility a priority in your organisation helps set industry standards, which will help all people with disabilities have a fair chance in the workplace.

👉 Who can Help?

At Includability, we recommend our Official Partners Recite Me. Their toolbar can be placed over existing websites to make the content more accessible and disability friendly with their language, text-to-speech, and sizing features.

How do I design accessible websites for different devices and network speeds?

Traditionally this was what web designers referred to as accessibility. Designing digital content and applications so that it could be viewed by a wide range of people on different devices and across varying network speeds. We call this responsive web site design and it refers to making the pages on a website respond to the size of the device that it is viewed on. 

In 2015 Google announced that is would start penalising websites in search results for not being responsive and as such this became an industry standard that any web site was required to have a responsive version for desktop, tablet and mobile.

Now with the introduction of large displays and also varying tablet and mobile sizes it can be normal to add anything up to 7 breakpoints at which a website will display itself to fit the said device. Coupled with various browsers versions this, without a structured approach, can increase the design and development time for a projects.

Lastly, and debatably the most important, part of designing an accessible website is speed. Google recently released its Core Web Vitals Metrics which cover Performance (speed), Accessibility, best practices and SEO (Search Engine Optimisation).

The metric by which nearly all websites are measured by is the speed at which they load. Google's focus on this means they measure this metric by emulating the speed a page loads on a 3G network and on a mobile device.

60% of the Core Web Vitals results are related to what do to improve the speed of a website and a range of measurements they use to do this. To find out more about Core Web Vitals here is an another article covering it.

Designing accessible websites for users with different disabilities 

Firstly designing for users with a disability is not hard and certainly shouldn’t be seen as specialist work. It is however easier for a web designer to build a web site with accessibility in mind rather than to amend an already existing one.

What is an accessible web site?

As I said previously making a website accessible means ensuring it can be used by as many people as possible. 

This includes those with: 

• impaired vision
• Motor difficulties
• Cognitive impairments or learning difficulties
• Deafness or impaired hearing
  

Back in 2018 when the accessibility regulations came into force in the UK, one of these requirements was that Public Sector websites and apps should be accessible by making it ‘perceivable, operable, understandable and robust’. You also needed to include and update an accessibility statement on your website. 

The 4 principles above come from the accessibility guidelines outlined in the WCAG 2.1 Design Principles (see the GOV website below). These principles are a set of rules that not only improve the accessibility of a website but will subsequently improve how google sees your website in terms of its Core Web Vitals and also the Search Engine Optimisation. ‍

https://www.gov.uk/

Why design an accessible website?

It’s often perceived that designing for, what is termed 'accessibility' or 'disability', is specifically for those that have more obvious impairments. As such we tend to categorise these as disabled, blind or deaf. What web designers haven’t always done is understood and consider the various degrees of impairment. 

There has been many studies into accessible web design and there is strong argument that not only is a bigger audience attainable but that accessible websites have better search results, are more SEO friendly, are faster to download and that they are built and structured in a more usable way.

How can we design more accessible websites?  

In 1999 Jakob Neilson published a book called ‘Web Design Usability’ among a number of things it talked about consistency and standards, and recognition rather than recall. When designing any website, employing accessible style and layout should ensure that there is consistency and recognisable signposts and that the site is easy to use and accessible for all.

What are some ways to make a website more accessible?

Aria Labels

ARIA is a set of attributes you can add to HTML elements that define ways to make web content and applications accessible to users with disabilities who use assistive technologies (AT). When accessibility issues cannot be managed with native HTML, ARIA can help bridge those gaps. Aria is a great way to signpost and label sections and elements for screen readers and text to speech applications. In terms of web design Aria is used to add descriptive labels to HTML elements like buttons or links etc. 

Keyboard accessibility

Keyboards are a huge tool when navigating a web site for people who have visual impairment or are blind, those with motor disabilities and those who struggle to use a mouse or have fine control of their muscles.

Making sure the website flows from left to right and top to bottom when using the tab key helps ensure a logical and intuitive flow to telling the story of the page. If you can tab through your site in this manner that is a good place to start.

Sites with large navigation like e-commerce stores and those that cover a lot of services and sectors can often be tricky and cumbersome to use with a keyboard. Be mindful to try and be short and concise with the number of links in your navigation and the length of your page titles. Listening to lengthy titles can be tedious when using a screen reader.

Semantic Structure 

Semantic structure is one of the most important parts of accessible web design . Screen readers rely on the meaning of HTML elements and attributes to convey information to blind users and those with cognitive disabilities. Semantic elements describe the meaning of their enclosed content ie. Header, Footer, Nav etc. This allows users to listen to the page, just like listening to a story. 

As such using a structure that is clear and meaningful ensures the order of the story is understood by the user. Despite how the site looks through its styling and visual signposting, structuring the content and labelling it in a semantic way ensures that users can read the page in the correct manner as intended by the designer or copywriter. 

Users who use keyboards to tab through a website will also benefit from a semantic structure as this allows them to navigate through in a logical way.

In addition to improving accessibility, using semantic HTML has other advantages such as improving the SEO of websites, creating a better mobile experience and improving development experience by making code understandable.  

Colour Contrast

An estimated 2.2 Billion people in the world have some visual impairment.

An estimated 300 million people in the world have some kind of visual colour deficiency (colour blind) and yet we often overlook this as a web accessibility problem. 

That's why ensuring there is colour contrast between text and backgrounds is so important for legibility. The W3C recommend a ratio of 4.5-1 (AA) obviously the larger and heavier the font this becomes easier to read. Web design tools like Webflow have built in colour ratio checkers with their designer making it easy to employ at the least the minimum. 

As well as checking text we also look to check the contrast for icons at a minimum ratio of 3.0-1 against background colours and also borders on actionable elements such as text inputs, radio buttons, checkbox etc

Any text that sits on top of image or video content should be checked to ensure that it is clear as busy backgrounds may make text difficult to read.

Images

By simply adding an alternative text description (alt text) to images we can describe an image to a user who may be unable to see them. This includes when using screen readers or image blocking browsers. This is also great SEO as it allows search engines to identify the relevancy of an image to queries people search for.

Text on images is a no (it's not 1999!!). The only time it may be used is when showing infographics or tables however we would always suggest creating a text description of what is being shown within the content of the site.

Lastly adding an aria label to images of relevance like a homepage logo or buttons allows screens readers to understand their purpose quickly.

Text

It should go without saying that font size is incredibly important when creating text based content. Not only should the various heading sizes determine hierarchy but also paragraph text should be legible and at least 16px. In our experience there are occasions when smaller font size is needed however this should never be below 12px.

Another thing to consider is visual cues within the body of text including underlines, bold or italic font weights and alternative colours for links so they stand out.

Buttons

Buttons have what's called states like hover, focussed, visited. Using the focussed state allow users who use keyboards to tab their way through the web site elements and are particularly useful for buttons and navigation elements. On Mobile devices having buttons and links that are large enough can be an issue due to the size of devices. Ensuring that the minimum size of a button or text link is set can reduce frustration especially for users with reduced muscular movement.

Forms  

Auto focus on forms can cause havoc and confusion for screen readers as it moves them to a form field without permission or context. Its best practice to let visitors fill out the form themselves when the primary purpose of the page isn’t to input information in a form.

Don’t use placeholder text as labels. This was a trend on larger sites like estate agents and car sales portals. Placeholder text is usually low contrast colours like grey and is hard to read even for those without a visual impairment. Once you have elected a field the text disappears meaning you can sometimes forget the information you need to input. Screen readers cannot understand what the labels are and as such the form becomes meaningless to them. Make sure every field has a text label to ensure your form is legible and valuable.

Animation

Animation when used correctly can add life to even the most mundane of websites. However there are trends in web site design too over animate sections of pages. Using interactions and animation responsibly will help reduce distracting the user which can also lead to dizziness, nausea, headaches, and seizures in people with vestibular and photosensitivity disorders.

Setting anchor links to animate when transitioning from the top to the bottom of a page or vice versa can be harmful to people who are sensitive to motion.

Audio and Video Media 

Auto Playing media can cause confusion and stress for people who have cognitive impairments. This is also an issue for screen readers in being able to hear over what the pages content is. Include Audio descriptions and transcripts, these benefit both blind and deaf users and also those that have cognitive limitations when interpreting visual cues. Make sure any media has controls so that the user can easily pause and play any media. 

Signposting

Over the years designers have spent time creating signposts for users to help them navigate a page or website. Using these aids in identifying page elements does not mean you are reducing creativity. Equally redesigning the way we use a website can be detrimental to how the user engages and interacts on a site.

Often we see attempts to create websites that ignore how users interact with content. This can be especially detrimental for users who are used to using websites in a certain way with an easily identifiable structure and signposting. 

Signposts are one type of navigational aid. They provide the information people need to make decisions when using a website. Below are some simple signposts that should be considered when creating an accessible website design.

• Underlined text as links in paragraphs
• Using the logo as a home button
• Having the navigation on the top of the page
• Using a hamburger icon for the mobile menu
• Using a magnifying glass icon for a search bar
• Using bullet points for lists
• Using descriptive names for links
  

The idea of a sign post is to point users in the right direction and over time we have evolved to understand where certain elements might be on a page, what their meaning is and what will happen if we interact with them. In designing accessible websites attempting to change what we have taught users over the last 20 years can create a confusing experience.

Will designing an accessible website cost more?

In web development we often say, everything costs more that's an afterthought, which is why creating and thinking about accessibility first can help you become not only a market leader in how your business is presented but also ensure that any changes to Government Guidelines on accessibility are less likely to impact you financially with updates and rebuilds.

If you have an existing site the best way to see how you stack up in terms of accessibility is to have an audit performed on the website to identify your site’s needs, necessary improvements, and priorities. There are several tools that can help you do this. Once you have performed the audit you can look at short, medium and long term changes you need to make to bring yourself up to standard.

If however if you are looking to have a new website built then accessibility should be something that is discussed as a primary goal when creating a spec or brief for your project. Knowledgeable designers or agencies should be able to answer any queries you have without difficulty.

Conclusion

Much of what I have discussed here is actionable and mainly about good web design and development. Some of it however depends upon the type of content, layout, structure and design that is required for the project. With technology ever changing only by using structured systems can we ensure an accessible internet for all.

Hopefully if you’re a web designer this article will give you some ideas to refer to. Or if you are a business or individual looking to start a new web design project it will outline some things to look for when considering an accessible approach to your new website and choosing the right designer for your project.

In short designing for accessibility, means designing for everyone. Designers should always be trying to improve and build upon their skillset. Designing for accessibility should be something that is championed as a minimum standard. It has always been the designers who have had to overcome changes in technology to ensure that people regardless of education, ability, age or social economic situation have access to the same information and opportunities. 

Credits/Sources

• ‍Webflow Accessibility Statement‍
• W3 Accessibility Statement‍
• https://developer.mozilla.org/‍
• https://www.colourblindawareness.org/‍
• https://www.interaction-design.org/‍
• https://beta.ada.gov/
• https://uxdesign.cc/

Written by James @ Includability