Author: Victoria

How your content affects people with visual or hearing impairments

Making sure your charity’s website is built to WCAG accessibility guidelines is a great start, but for a truly accessible website, you also need to make sure the text and images you add to your website are accessible too. This is especially important if you are running a not-for-profit website. There may be stricter accessibility laws to meet, more vulnerable groups you wish to reach, and often the primary purpose of your website will be getting information to the people who need it.

1 Generic wording for links

If a visitor to your website is using a screen reader, they may get a list of all the links from your text out of context. For this reason, it is very important to make sure that the words that are linked make sense on their own. So for example “to find out more about the history of our organisation click here” would not work well, as a screen reader would just show “click here” without the rest of the sentence. Instead, try “read more about the history of our organisation”

2 Missing alt text for images

“Alt text” is a short description of an image which can be used by screen readers to describe images on your page to visually-impaired visitors. Missing alt text for images is one of the most common mistakes, affecting 61% of homepages^[i] . You don’t need to provide alt text if an image is purely decorative, but if it adds any useful information to your page, make sure to add alt text. (Please note, you don’t need to add “image of” or “illustration of” as that context will be added by the screen reader.)

3 Using an image of text

It’s best never to make text a part of an image, as this can’t be resized by users with poor vision who have set a larger font size in their browser. Since the alt text is only for visitors using a screen reader, the alt text won’t be sufficient to solve this problem. Additionally, text that is integrated within an image may not be readable for users on mobile phones as it might be displayed at too small a size. It also can’t be translated for users who don’t speak English as a first language. The one exception is logos – here it is best to use an SVG file so it can be scaled up when needed, and to make sure all the wording from the logo is in the alt text.

4 Text overlayed on an image

It’s quite common on websites to have banners with an image background and text overlayed on top. When doing this, it is crucial to think about the contrast between the text and the image behind it, as this can be a very common issue with making text legible for the visually impaired. It is possible to use this style, but you need to make sure that every part of the image that might have the text over it has a minimum contrast of 4:5:1 to the text colour. And remember you can’t just rely on how it looks on your current screen. The text may overlap different parts of the image on different screen sizes and with different font sizes set in the browser. Good solutions here can be to put a tint over the image or a shadow behind the text to increase the contrast.

5 No captions for audio content

For hearing-impaired visitors, it’s important to make sure any video or audio content you add to your website has subtitles, or a transcript of the text, so that hearing-impaired users can still access the content. Just like subtitles on a TV, these can often also be useful for hearing visitors who are in loud environments or who can’t/won’t turn on the sound.

Eonic Digital are experts in accessibility. Not only will we build your website to WCAG guidelines, we can also advise you on how best to add content to your website in a way that works for disabled users.

For your next web project, why not choose a web agency that makes the needs of disabled users a priority? If you aren’t sure if your current website is accessible, here at Eonic Digital we offer a free review of your existing website, to let you know of any barriers your disabled users might face.

Please contact us on 01273 761 586 to find out more.

[i]https://moz.com/learn/seo/alt-text#:~:text=97.4%25%20of%20homepages%20have%20accessibility,of%20all%20homepage%20accessibility%20errors

Here are just a few of the ways that all my latest websites are designed to be easy to use for disabled visitors:

1 Colour Contrast

To make sure your site is easy to use for visitors with poor vision, I make sure all the text on your website contrasts sufficiently with the background to make it easy to read (using at least a 4:5:1 contrast ratio to be specific). I also make sure that if text is over a video or image, you can still read the text clearly on every screen size. Elements within a form will also have a good contrast ratio to the background.

2 Font Size

I make sure the default font size used on your website is large enough that it’s easy to read. Then I make sure that when a visitor increases the font size in their browser, everything still works smoothly up to 200% font size increase.

3 ‘Skip to Content’ Button

For visitors using screen readers, or who can’t use a mouse, it can be tedious having to go through the whole menu at the start of each page. To help here, I add a skip to content link, which lets users go straight to the text of the page. To see this, you can hit tab after a page on this site loads and the button will appear.

4 Highlights for Keyboard Users

To further assist visitors who can’t use a mouse, I make sure that if you navigate through a page using the tab button on your keyboard, there is always a clear highlight to show you where you are in the page.

5 Avoiding Conveying Information Only Through Colour

You need to make sure that you don’t rely only on colour to give information as this will be difficult for colour-blind users. One place this often happens is with links – just changing the colour of the text isn’t enough to show it can be clicked. That’s why I make sure to add an underline to our links, so colour-blind users can easily pick them out of the text on the page.

There are also many other more technical ways to keep code accessible – if you would like further details about how to make a websites accessible, please contact me.

Making sure the website is built for users with disabilities is only half the story; you also need to make sure the content you add to the site will work for them too. Find out more in my future articles on accessibility.

What is web accessibility?

People with a range of disabilities may have extra requirements when using websites. At present, disabled people are 50% more likely to face barriers accessing digital and online services compared to non-disabled people^[1], and accessibility errors are slowly going up^[2].

In the UK, 1 in 4 people are disabled, and 71% of users with disabilities say they will leave a website if it is not accessible^[3]. So making sure your website is accessible can help you reach as many people as possible.

Here are a few examples of how disabilities can affect how people use a website:

• People with visual impairments may need the following:
  • The ability to increase the size of the text on the website to make it easier to read
  • To be able to access text descriptions of any visual information such as pictures
  • To have a high level of contrast between foreground and background colours
  • To be able to use a screen magnifier
  • To be able to use a screen reader to read out the text on the website
• For colour-blind users it is important that information isn’t conveyed only using colour
• People who have difficulties with their hands may need:
  • Larger areas to click on for links and buttons
  • To be able to navigate around the website using the keyboard instead of the mouse
  • To be able to use speech recognition software to interact with the website
• People with hearing loss may need captions or text transcripts for videos or other audio content
• People with dyslexia, learning difficulties or lower literacy levels may need:
  • Content written using the simplest wording possible
  • Clearly laid out content optimised for skim reading
  • Consistent use of design elements and visual clues to help them find their way through the site

The Web Content Accessibility Guidelines (WCAG) are a set of standards that help website developers and content writers to make sure the sites they create are accessible to people with disabilities.

How can I test for accessibility?

There are various tools online that can test some elements of accessibility on a website, but other areas will need to be check manually.

Checking your accessibility score

You can enter the address of your website on Google page speed to see a range of metrics, including an accessibility score. This can tell you how well your website performs on a subset of accessibility issues, and highlight which areas have problems. Please note that this only tests a single page of your website, so it is best to test multiple pages from your website to get a more comprehensive view of how accessible your website is.

Testing your wording

You can test how easy to read your text is by using www.webfx.com/tools/read-able/, which will give you a reading age for the text on a page. Again, make sure to test multiple pages from your website to get a clearer view of how easy to read your text is. Microsoft word also give a Flesch-Kincaid Grade Level, which you can interpret using this conversion table.

Testing your colours

If you are choosing colours for your website or branding, you can check if they will meet accessibility guidelines with a checker such as Web Aim – we recommend at least AA compliance to make sure your website is accessible to most visitors.

Testing for screen readers

The best way to do this is to have a go with a screen reader and see how easy it is to use your website. You can see a range of tools available for testing here.

Manual checks

• Try increasing the size of the font in your browser by 200% and looking through your website to see if everything still looks OK. Please note you need to change the text size, not zoom in.
• Navigate around your website without using the mouse. Use the tab button on your keyboard to move between links and buttons on your page. Can you get to all the links? Can you tell which link is currently highlighted?

This list is not comprehensive, but should give you a good sense of how well your website works for disabled visitors.

[1]https://business.scope.org.uk/article/accessibility-and-disability-facts-and-figures

[2]The WebAIM annual accessibility analysis of the top 1 million homepages

[3]https://webaim.org/projects/million/

[4]https://userway.org/blog/disability-statistics/#:~:text=What%20is%20the%20current%20state,accessible%20to%20people%20with%20disabilities.

Accessibility should be a concern for all organisations, but especially if you are running a charity or other not for profit organisation. Accessibility can help you reach a wider audience and be more inclusive to everyone who might need your help. Here are a few top reasons this could benefit your charity and society at large.

1 You can increase the size of your audience

In the UK, 1 in 4 people are disabled ^[1] , and almost a third of households contain at least one disabled person. Web accessibility can affect a wide range of conditions, including some that are not generally considered disabilities, such as colour blindness. Here are some stats on groups in the UK that can benefit from web accessibility.

• 5 million people have a learning disability^[2]
• 3 million people have dyslexia^[3]
• 2 million people are living with sight loss^[4]
• 12 million have hearing loss above 25dBHL^[5]
• 3 million people are affected by colour blindness^[6]

On top of this there are other accessibility issues it can be harder to calculate, for example, the range of people who can’t use a computer mouse effectively, such as users with arthritis, MS, Parkinson’s, peripheral neuropathy, limb loss and a range of other conditions.

And don’t forget to factor in the extra benefits to non-disabled users too. Just as subtitles on TV are often used by non-disabled people, the same can be true online. For instance, captions on videos, or text transcripts of a video’s content, can be handy if you are in a crowded office or on a busy train and don’t have your headphones.

Increasing the size of text or zooming in can be useful if you are further from the screen, eg if you are showing something on a projector at a meeting, or viewing a website via your TV. And making sure you don’t embed text as part of an image can allow Google to translate that text to other languages, making your site easier to use for non-English speakers.

In addition to this, some accessibility fixes can help make your site more responsive, so it is easier to use for customers looking at the site on a mobile phone.

More visitors can lead to more donations

The online spending power of people with access needs is around £274 billion per year^[7] to UK business.

It could be easy to think that disabled users might persevere with your website even if it doesn’t work quite right for them, but that would be a mistake. Organisations often lose money when disabled visitors leave their inaccessible websites. 7 in 10 disabled customers^[8] say they will click away from a website they find difficult to use. In 2019, the estimated loss from the ‘Click-Away Pound’ was £17.1 billion^[9] . Organisations that priorities digital inclusion have 28% higher revenue^[10] .

2 It’s the law

For a private business owner, the law makes it clear that you have to make ‘reasonable adjustments’ to make sure your services are accessible to people with disabilities, under The Equality Act 2010 . It’s also not enough to wait until a disabled person makes a complaint about your website to start thinking about accessibility. According to the UK Equality and Human Rights Commission (EHRC) any organisation that provides a service online has an ‘anticipatory’ duty to make reasonable adjustments. Any disabled website visitor who feels they have been discriminated against by a company online can make a claim in court

Public sector organisations

All public sector organisations, which includes government departments, NHS organisations, colleges and universities and some charities, are subject to extra laws, in addition to the ones mentioned above.

The Public Sector Bodies (Website and Mobile Applications) (No. 2) Accessibility Regulations 2018 (PSBRA) states that any public sector website offering a service must meet the Web Content Accessibility Guidelines (WCAG) level AA. These rules can be enforced by the EHRC.

3 It’s the right thing to do

It’s not easy to be a disabled person in a world that hasn’t been built for you. While for an able person, the difficulties faced by disabled people might only be noticeable now and again, for a disabled person trying to get through the day, you face constant barriers both big and small, and they all add up.

According to Scope, 49% of working age adults feel excluded from society because of their condition or impairment, and 41% working age disabled people do not feel valued by society.

While sometimes there can be substantial challenges to making a service accessible, such as trying to make an historical building accessible, the web is one place it could be very easy. And because the physical world is often much harder for disabled people to access, they have an even greater need of online services than able people do.

Despite this, disabled people are 50% more likely to face barriers accessing digital and online services compared to non-disabled people^[11] , and accessibility errors are slowly going up^[12] .

How to make your website more accessible

Getting an accessible website doesn’t have to cost more money – all you need is a web freelancer that knows how to meet the guidelines, and to learn a few techniques yourself to make sure the content you add will work for disabled people too.

Whenever possible I build all websites to WCAG AA standards. I can meet the AAA standards on request, although this will restrict the colour palette available. I can also offer you help and advice on making sure the content you add to your website meets these rules too.