Blog
Our guide to creating accessible documents
Posted Jul 2022
Websites and apps should be made accessible to provide equal access and equal opportunity to people with sight loss and other disabilities. In fact, the UN Convention on the Rights of Persons with Disabilities recognises access to information and communications technologies, including the Web, as a basic human right. But how exactly can you make your website or app accessible?
Chris from our Digital Enablement Team shares his top tips for doing just that.
For many years, devices such as phones, tablets and computers have had accessibility features built in to make it possible for people with sight loss to access them. These include Zoom/Siri/VoiceOver on Apple products and Magnification/Google Assistant/Talkback on Android devices.
Other operating systems, such as Windows, feature built in Magnifier and Narrator programmes, but you can also download other software including JAWS, NVDA, ZoomText and SuperNova.
For apps and websites to be as accessible as possible with assistive technology such as screen readers and magnification software, it is important to ensure that certain aspects are taken care of when designing and developing your app or website. If you are a web developer or app developer, please take a little extra time to make your app or website accessible for people who use assistive technology or software. Unfortunately, apps and websites aren’t automatically accessible – there’s work you need to do for people with sight loss to be able to use your app or website effectively.
We totally understand if you aren’t sure what makes a website or app accessible. That’s why we’ve put together this guide to give you a starting point.
Below we outline some things to think about when designing the layout, functionality and user interface of your app or website, to make it more accessible to as many people as possible.
Jump to:
Contrast
Choosing colours with poor contrast can make websites and apps harder to access, as it means somebody with low vision could struggle to read the content. Good design means more contrast between the foreground and background. Making links, icons and buttons clear is also important.
Good contrast can also make it easier to use mobile devices in different situations, such as in varying lighting conditions.
Links and buttons
Imagine trying to push a thread through the eye of a small needle – this is what it can feel like for some visually impaired users when trying to find a link or a button.
Making any buttons or links larger and easier to see will make navigating your app or website much easier.
On top of that, pay attention to how you label your links and buttons: ensure that they are labelled so that someone would know what would happen when they activate that link or button, and also ensure that the app or website is coded properly so that a screen reader will read those labels. There’s nothing more frustrating for a screen reader user navigating a website or app than encountering a button and just hearing ‘button’.
Similarly, avoid labelling links or buttons with phrases like ‘click here’. Screen reader users may navigate through your page link by link, so having links and buttons with unclear labels won’t be of much use to someone using a screen reader.
Lay-out and design
Good design means a better lay-out, and hence a better user experience for everyone, regardless of if they use assistive technology.
Examples of how to make your lay-out more accessible include using properly formatted headings when adding titles to sections on your web page, using properly formatted lists when listing items, and having easy-to-find navigation menus and bars so that users can easily navigate to different sections of your website or app.
Any web user would get frustrated with bad lay-out and design and this may negatively impact on their confidence, especially if they are new to technology. On top of that, having properly formatted elements and a good design makes it easier for people to find what they are looking for.
Customisable text
If your website or app contains lots of written information, then including the ability to alter text size and colour (without loss of functions or clarity) will enable people to customise the text to suit their needs and preferences. Many devices have built-in customisation features such as Dark Mode on the iPhone, so ensure also that your app or website will work well when these functions are enabled.
Voice recognition
Some people may prefer to access devices using their voice rather than using buttons or controls on the touchscreen. Many devices have built-in voice assistants like Siri and Google Assistant. Designing your app to work with these features can be a great way to make it more accessible. For example, enabling voice commands to go straight to certain features, and ensuring that the app will support dictation of text will mean people having the ability to access all or some of your app or website purely using their voice.
Similarly, many people access information through assistants on smart speakers, such as Alexa on the Amazon Echo, so making your website or app accessible on these devices could open up what you offer to even more people.
Text-to-Speech
Text-to-Speech technology, usually referred to as screen readers, has been around for a long time both for people with sight loss and other disabilities, such as dyslexia. For this to work effectively however, websites and apps need to be coded to be compatible with this technology. This means making sure elements are labelled so that screen readers will read the labels, adding alt text to images and graphics, and making sure headings are formatted as proper headings, and much more!
This not only helps the user, it also helps you to rank higher in search results so even more people will discover your website.
Simple and understandable content
Unnecessarily long and overly complex language, use of jargon, and long sentences and paragraphs can make access difficult and frustrating, not only for those with sight loss, but also those who have a learning difficulty or are neurodivergent, or use English as an additional language.
For screen reader users, long sentences and paragraphs means fewer pauses between words, so taking a lot of information in all in one go.
When designing your app and website, consider your target audience, and pay attention to the length of sentences and paragraphs.
Keyboard accessibility
For some people with sight loss, accessing a website through a keyboard is essential, so this is an important in any website design.
It is also essential if someone has a physical disability, an injured arm, or even a broken mouse!
When designing a website, ask yourself: will pressing Enter on that link activate it and take the user where they would expect? If the website is interactive, for example a form with visual elements or an online game, are there alternatives to visual controls such as drag and drop, and CAPTCHA solvers that are keyboard compatible?
Avoid accessibility plug-ins
Avoid plug-ins that claim to improve accessibility for screen reader users by implementing a screen reader mode that can be toggled on and off, because more times than not, they actually don’t improve accessibility and don’t work reliably.
These tools can actually break the functionality of your website, so your site ends up being more accessible when the user isn’t using screen reader mode.
Test, test, test!
One of the most effective ways to check your website is accessible, is to interact with it using assistive technology, and also to request feedback from disabled people who use assistive technology in their day-to-day life.
You could also get in touch with an individual or organisation that specialises in digital accessibility consultancy, that can support you before and during the design and development stage and then test your website or app with different assistive technology.
Remember: for your website and app to be accessible, it needs to be compatible with all forms of assistive technology. Sight loss is a spectrum, so the ways in which visually impaired people access the digital world vary greatly.
The importance of accessibility
Accessibility is essential for developers and organisations that want to create high quality websites and apps, and to not exclude people from using their products and services.
Some people with sight loss may rely on the digital world to access and discover services. Making your website or app accessible means someone being able to access the information they need, or being able to access the service being offered. If a website is inaccessible, it can put some people off using your service altogether.
By increasing accessibility, you open your app or website to a wider audience, and make it easier for everyone to use. Accessible websites have better search results, reduced maintenance costs, and increased audience reach, amongst other benefits.
No matter what platform you are developing for there is lots of advice and guidance on the best practice and how to design this into your website or app. The links below will give you some useful information and guidance:
