Accessibility Tips: Websites & Apps for Sight Loss

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. So we asked Chris from our Digital Team to compile some top tips for making websites and apps accessible for people with sight loss including blind and visually impaired people.

Essential for some – useful for all

For many years, devices such as phones, tablets and computers have had accessibility features built in to make them easier for people with sight loss to access. These include Zoom/Siri/VoiceOver on Apple products, 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 and ZoomText.

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 and website. if you are a web developer or app developer then please take a little extra time to make your app or webpage a little more accessible for people who use assistive technology or software.

Here are some things to think about when designing the layout, functionality and user interface of your app or website.

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 atten to how you label your links and buttons: ensured 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 can 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.

Layout and design

Good design means a better layout, and hence a better user experience for everyone, regardless of if they use assistive technolgogy.

Examples of how to make your lay-out more accessible including 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 layout 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 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 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 them more accessible. For example, enabling voice commands to go straight to certain features, and ensuring that the app works properly with the native iOS or Android keyboard to give people the option to dictate any text.

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, but also helps search engines to index contents of websites better.

Simple and understandable content

Unnecessarily long and overly complex language, use of jargon and syntax can make access difficult and frustrating – not only if you have a sight loss, but if you have English as an additional language or have a cognitive difficulty.

Keyboard accessibility

For some people with sight loss , accessing a website through a keyboard is essential – so this option is an important inclusion in any website design.

It is also essential if someone has a physical disability, an injured arm, or even a broken mouse!

Web content development packages

It is worth noting here that whilst web content development packages are great for being able to create a superior visual experience very quickly, they are not always the best for allowing accessibility for those who use screen-readers.

The reason for this is that most screen-readers use the tags in the HTML code for navigation. HTML tags are labels that are assigned to each individual item on the webpage. If someone using a screen-reader wants to skip through the headings on a webpage, they should just be able to use the keyboard shortcut to skip from one heading to the next.

The importance of accessibility

The risk with web content development packages is that they will allocate the same label to every item on the page, meaning someone with a visual impairment will have to listen to every item on the page, not just the information they want.

Accessibility is essential for developers and organisations that want to create high quality websites and web tools, and not to exclude people from using their products and services.

By increasing accessibility, you open your app to a wider audience, and make it easier for everyone to use. Case studies show that 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:

http://www.w3.org/standards/webdesign/accessibility

https://developer.android.com/guide/topics/ui/accessibility/

https://developer.apple.com/documentation/uikit/accessibility_for_ios_and_tvos

https://developer.microsoft.com/en-US/windows/accessible-apps