An Introduction to Web Accessibility
We recently celebrated Global Accessibility Awareness Day by attending an internal, remote session led by two of our experts on accessibility — Marv and Nusrath.
The session gave the rest of our team a chance to catch up and learn more about accessibility and an opportunity to use a range of tools including a web disability simulator.
The disability simulator was for the ‘Virtual Empathy Lab’ activity that we took part in towards the end of the session which Liz summed up well when she said ‘I really enjoyed the simulator exercise, whilst I recognise that its not entirely representative of individuals experiences, it does give you a glimpse into the difficulties they may experience. It could be really useful when trying to help clients understand the types of challenges some users face’ .
Although following the presentation on accessibility our team discussed additional platforms that could and should be made more accessible such as apps, games, and more, we will mostly be focusing on raising awareness of website accessibility issues throughout this blog.
Where to start with website accessibility?
Website accessibility is focused on creating websites that can be used by as many people as possible. To better understand this, it can be useful to consider what makes a website inaccessible to people.
The 2023 WebAIM analysis of the top 1 million homepages found that a staggering 96.1% of errors, WCAG 2 failures, fell into one of just 6 categories:
Low Contrast Text — 83.6%
Missing Alternative Text — 58.2%
Empty Links — 50.1%
Missing form input labels — 45.9%
Empty buttons — 27.5%
Missing document language — 18.6%
WCAG stands for Web Content Accessibility Guidelines and is a set of guidelines developed by the World Wide Web Consortium (W3C) to ensure that digital content is accessible to people with disabilities.
Icons Representing The 6 Most Common Web Content Accessibility Guidelines Failure Types
Low Contrast Text
Low contrast text can occur due to various reasons. Some common reasons include; using a text colour that is too similar to the colour of the background, using fonts that are overly stylistic, and using font sizes that are too small.
WebAIM’s Colour Contrast Checker showing a 1.8:1 contrast ratio for blue on red. This contrast ratio fails Web Content Accessibility Guidelines.
Great footballing rivals like Sheffield Wednesday and Sheffield United may appear to play in very different, even contrasting colours with Sheffield Wednesday playing in blue and Sheffield United in red.
However, when it comes to accessibility, it is not just the difference between two colours that matters as other factors can also lead to a low contrast ratio. This is why it is often best to check that there is enough contrast between your chosen colours using a contrast checker.
WebAIM’s Contrast Checker is one of many great tools available to help you check your colour contrast ratio. WCAG 2.0 level AA, which is the level that we aim for, requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. The higher the ratio the better.
Missing Alternative Text for Images
Screen readers are essential tools for people with visual impairments or other accessibility needs. They help ensure that more people have access to digital content and are not excluded. It is therefore vitally important that digital content is created with people who use screen readers in mind.
Alternative text or alt text as it is commonly called is a textual description that is added alongside a HTML image. It is used to describe the image to ensure that people using screen readers are not excluded from consuming the content. Effective alt text should be clear, concise and relevant to the image it represents.
Website image icon with a tag labelled “Alt Attribute”
Empty Links
Empty links refer to hyperlinks which do not use descriptive text to describe what the hyperlink is about or where it goes. For example, if we wanted visitors of this blog to visit our team page, we would write something along the lines of “You can learn more about the people at Hive by going to our team page” rather than just writing “You can learn more about the people at Hive by clicking here”.
Writing “Click here” or “Read more” does not help to convey what the text is about. To ensure that screen readers are not excluded, it is essential that linked text accurately describes its purpose or destination.
Cross going through a “click here” button
Missing Form Input Labels
When creating a form, it is important to label the relevant input fields. This ensures that people using screen readers can understand the purpose of an input field. If an input field does not have a label, some people may not be able to interact with the form on your website.
Using clear and descriptive input field labels can help reduce confusion and frustration, ensure those using a screen reader can understand the purpose of a field in a form and also reduce keyboard navigation issues that can arise when the labels are missing.
Hive’s contact form with and without input field labels
Empty Buttons
An empty button, also known as an empty link button or icon-only button, refers to a user interface element that lacks visible text or descriptive labels, but relies solely on icons or images to convey its purpose or function.
This is a problem because without proper labelling or alternative text, people using screen readers are unable to understand the purpose of the button. Furthermore, empty buttons can make websites more difficult to navigate and interact with effectively.
To overcome this problem, when using buttons on your website — it is crucial to provide clear and descriptive labels or alternative text. By adding meaningful text alongside the button’s visual icon or image, users can easily understand the purpose and functionality of the button.
Sheffield Eagles Heritage Project’s website with and without empty buttons
Missing Document Language
Missing document language refers to the absence of the “lang” attribute in HTML markup, which indicates the language of the document or specific sections. If the correct document language is not specified, screen readers and other assistive tools may struggle to accurately pronounce and interpret the content. This can lead to mispronunciations, incorrect grammar, and difficulties in understanding the meaning of the text.
By adding the “lang” attribute developers can ensure that content is interpreted and presented correctly to those using assistive technology.
Example of the “lang” attribute indicating that a document is in English
Web accessibility is a critical aspect of designing and developing websites. Although this blog has only provided a simplistic introduction to just a few web accessibility issues, fixing the most common issues is certainly a good place to start and can significantly enhance the usability and inclusivity of many websites.
By becoming more aware of web accessibility, we can make progress towards creating a more inclusive online world where everyone can participate, engage, and benefit from the vast resources and opportunities on the web.
We look forward to continuing our work in improving the accessibility of a range of websites as we strive for a world where accessibility is not an afterthought, but an integral part of all digital content.
Accessibility Testing Tools and Other Resources
We have included a list of additional tools and resources to further help you ensure your website is accessible.
Accessibility Insights Extension
Accessibility in Government Dos and don’ts
Deque’s 12-Step Accessibiity Starter Checklist
