Koncept
Digital Media Agency

Norwich, Norfolk
01603 487896
[email protected]

Koncept

web accessibility graphic

A Guide To Web Accessibility For Beginners

Accessibility is becoming increasingly relevant, as we continue to strive for equality both on- and offline. What is Web accessibility, and how does it work? What do you need to know if you are looking to update your website, or create a new one? We’ll answer all of these questions and more in this beginner’s guide. 

What Is Web Accessibility? 

The Web eliminates physical barriers to communication and interaction, and it largely does this very successfully. However, many websites, applications, technologies, and tools are still poorly designed, creating barriers where they should be absent, and excluding many people from being able to use them. 

Web accessibility refers to the design of online products, services, and environments to be usable by as many people as possible, including people with disabilities. In web design, accessibility should be a priority, as it means making sure it can be used by as many people as possible, including people with a diverse range of hearing, movement, sight, cognitive ability, as well as situational barriers like a mobile device or a slow internet connection. Overall, it makes the web easier, clearer, and safer to use for everyone.

person using a braille keyboard

A person using a braille keyboard

There is no doubt that accessibility is universally beneficial, but why is it so important? What can be done to design accessible websites, and what are some of their features? And where should you begin if you want to make your website more accessible? We will answer all of these questions about web accessibility in this complete guide for beginners. 

Why Do Websites Need to Be Accessible?

There are many reasons why it is important to make the Web accessible, including ethics, legal requirements, and the positive impact of accessibility on user experience (UX). 

The ethical grounds for accessibility are  internationally recognised through a UN convention. The United Kingdom agreed to follow the United Nations Convention on the Rights of Persons with Disabilities, or the UN CRPD, in 2009, and much has been done to uphold it over the years. The CRPD is a detailed document which lists all the responsibilities of the government to ensure equality and non-discrimination for people with disabilities. 

United Nations CRPD logo

UN and CRPD logos, via Autism Europe

Article 9 of the UN CRPD covers accessibility, and outlines State Parties’ responsibility “to ensure to persons with disabilities access, on an equal basis with others, to the physical environment, to transportation, to information and communications, including information and communications technologies and systems”. 

To further this aim online, and to build on the Equality Act 2010 (which states that all UK service providers must make ‘reasonable adjustments’ for disabled people), the Government passed regulations for public sector websites and apps which came into force in September 2018. 

Public sector websites are required by the regulations to be “perceivable, operable, understandable, and robust”. They should adhere to the international WCAG 2.1 AA accessibility standard, and publish statements explaining to what extent their online services are accessible (although there are exceptions made for organisations who would face a disproportionate burden in doing so). This applies to public sector bodies including central government and local authorities, as well as some charities and other NGOs. 

WCAG 2.1 AA Compliance badge

WCAG 2.1 AA compliance badge, via EqualWeb

While the 2018 web accessibility regulations do not apply to all organisations, they set a good universal standard for all Web and app developers to aim for. After all, at least 1 in 5 people in the UK have a long-term illness, impairment, or disability, and many more have temporary disabilities. Accessibility means making your content and design clear and simple enough so that most people can use it without needing to adapt it, while also supporting those who do need adaptations. 

What Does an Accessible Website Look Like? 

We’ve already mentioned that there are internationally recognised standards for web accessibility, called the Web Content Accessibility Guidelines (WCAG) 2.1. These outline in detail which features are needed to meet the four key principles of accessibility – namely, for online content to be perceivable, operable, understandable, and robust. 

Without going into too much technical detail, we would like to give you a better idea of what exactly makes a website accessible. Let’s look at some examples of key elements that an accessible website should have. (Of course, keep in mind that websites can be accessible to varying degrees.) 

Text Alternatives

Providing text alternatives (or alt-text) for any non-text content, such as images, graphic design, interactive elements, etc, allows it to be adapted into other forms, such as large print, braille, speech, symbols, or simpler language. 

alt text input on windows

Example of Alt Text input for an image element, via W3

This way, people who cannot perceive visual or auditory media still have access to the information it conveys. Conversely, it is also important to ensure that decorative elements and those used for visual formatting can be ignored by assistive technology so they do not interfere with use of the site.  

Adaptable 

Making content adaptable means offering the possibility for it to be displayed in an alternative way (simple view, large text, braille, high contrast, etc.) without losing information or structure. 

BBC Accessibility page screenshot

Screenshot of tools from the BBC Accessibility page, including text display tools

It is important that content can be adapted while still conveying the right information in the right order. To achieve this, programmers must make it possible for key features, correct sequence, orientations, input purpose, and so on to be programmatically determined so that it can be adapted using assistive technology.

Distinguishable

This characteristic refers to how easy it is to see and hear content, including separating the foreground and background and different elements of a page. We often use contrasting colours to distinguish these, but this is insufficient to make the content accessible for people with colour perception barriers, for example. This can be resolved with specialist visual coding, as well as certain basic presentation rules. 

The WCAG 2.1 distinguishability guidelines require that any automatically-played audio on a page can be paused or stopped, and that the volume can be controlled separately from the system level. It also sets minimum contrast ratios for text and images of text, except for logotypes and decorative text. Users should also be able to enlarge text up to 200% without the use of assistive technology. 

various labelled colour contrasts

Examples of contrast ratios, via BC Open Textbooks

By ensuring basic distinguishability in web design, including visual coding, high contrast visual elements, and the possibility of large text, online content becomes significantly more accessible to all, and especially to people with visual and auditory disabilities. 

Easy to Use

This principle refers to how easy it is to operate user interface components and navigation on a website or application. Basic accessibility should allow for a site to be navigated using a keyboard, including to move across and interact with various elements of the page. It should also provide options to adjust timing when necessary by either pausing or extending an automated sequence. For example, if there are slides that change automatically at a certain speed, a user should be able to slow them down to be able to read and use the content appropriately. 

Similarly, moving, blinking, and scrolling features which occur automatically should have the option to  be paused, stopped, or hidden. In addition, flashing elements must not exceed three flashes per second, as this is likely to interfere with users’ ability to use the page as they may have seizures or other unwanted physical reactions. 

An accessible site should be easy to navigate, and there are many tools and strategies for ensuring this. For example, Web pages should be titled to describe their topic or purpose, links should have a clear purpose which can be determined either from the text alone or in combination with its programmatically determined context, and headings and labels should be descriptive. Mechanisms can be included to allow users to bypass content that is repeated on multiple pages, and various pages on a website should be accessible in more than one way. 

Easy to Understand

Both the content and operation of a website should be easy to understand. Namely, the language of a page and its contents should be programmatically determinable. The user interface should be consistent, where navigational mechanisms appear in the same order in a set of pages, and components with the same functionality should be presented consistently.

Furthermore, input errors should be identified and described to the user in text, with suggestions for how to fix it where possible. Where input is required, the fields should be clearly labelled and instructions provided where necessary. 

input field design dos and don'ts

Best practice for accessible input field design, via Adam Silver on Twitter

In other words, how the website and its elements work should be easily understandable, instinctive to operate, and labelled and explained wherever necessary. 

Robust

Finally, for web content to be accessible, it needs to be ‘robust’, meaning it can be interpreted by a wide variety of user agents (devices and programs) including assistive technologies. To achieve this, websites can be programmed with annotations, where elements are made identifiable in their content, purpose, and presentation. Where elements are interactive, such as links, selection tools, etc, these should also be compatible with user agents including assistive technologies. 

Now that you have a better idea of what elements and characteristics are needed to make a website accessible, let’s talk about what you can do to find out how accessible a site is, and where to begin if you want to make improvements, or if you want to make sure that your digital agency is prioritising accessibility. 

Where to Begin

If you or your company already have a website, and you would like to determine the extent of its accessibility, you will need to perform a technical evaluation. While there are helpful checklists available, the check is best carried out by a technical specialist who can go through the process with you and answer any questions, as well as suggest improvements which they can implement. 

If your brand is only starting to build its online presence, or you are looking to refresh and update it, you have a great opportunity to prioritise accessibility from the start. In doing so, you will maximise the number of people who can comfortably visit and enjoy your website, and who will have a positive experience with your brand. You will also be ahead of your competitors ethically and even legally, as more universal web accessibility regulations will doubtless be implemented in the near future. 

For further information and advice about how Web accessibility is relevant to you or your organisation, how to improve your current digital services, or how to develop your online presence for optimal accessibility, please feel free to get in touch with our team of specialists at Koncept, and we will be happy to help!

No Comments

Post a Comment

koncept.