9 tips to make your website more accessible
When it comes to the web, accessibility is all about having a website that is easy for everyone to use and understand. Specifically, one that is designed and developed so that people with disabilities can use it.
Yet despite over 1 billion people living with a disability across the world, less than 1% of website homepages are likely to meet accessibility standards.*
When you consider that the web was fundamentally designed to work for everyone, this is rather depressing.
"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect" - Tim Berners-Lee
Tim Berners-Lee invented the web. So what happened? Did we break it?
Not really. But as the building blocks of the web (HTML, CSS and Javascript) have advanced to become more flexible, this has created more opportunity for error in design and development, which in turn creates barriers for disabled users.
Thankfully, with the right practices in place it is possible to create a better user experience for everyone on your website.
#9 Tips to make your website more accessible
1. Include alternative text descriptions - or "alt text" - on all images
"Alt text” describes the content of an image and should be provided for all images. It's really easy to include and makes a huge difference to screen reader users, allowing them to gain meaning and context of what's on the page. Without it, these users are excluded from important information on the image, especially if it is a chart or instructional information.
2. Page titles
Every web page requires a unique and concise page title that accurately conveys the page's content and purpose. Writing these well is critical for screen reader users as they are always the first page element to be dictated when landing on a web page. They will also boost your SEO!
3. Good use of headings
There are 6 levels of the heading element in HTML, from <h1> down to <h6>. By providing consistent and logical headings throughout your web pages, screen reader users are able to navigate the structure of the page.
Do:
All pages should have a <h1> level heading giving the title of the page.
Your headings should then step down in logical order.
Don’t:
Never skip levels e.g Heading 1 to Heading 3.
Never choose heading levels to achieve a certain font size.
Never use more than one <h1> on a page.
Good use of headings is also beneficial to people without visual impairment, allowing all users to quickly scan and make sense of the content on a page. It will also give your SEO a boost!
4. Link text & descriptions
Be descriptive with your link text to indicate where a link is going to go. For example, using “click here” for a link to your contact page isn't descriptive. If someone is using a screen reader to scan your page for links, “click here” provides no context. It would be better to use "contact me" as your link text instead. Being descriptive with your link text also makes for a more compelling call to action.
5. Make forms easy to complete
If you use forms on your website, make sure each form field is clearly labelled. When they are not labelled clearly, people who use screen readers do not have the same visual cues as a sighted user. Do not rely on the visual cues within a form field that then disappear when a person starts typing - only the labels will be read.
6. Ensure every page on your site can be navigated by a keyboard
There are many disabled people who cannot use a mouse and rely instead on keyboard access. You can test the accessibility of your web pages by using the tab key on your keyboard to make sure that every link or button can be reached. Does each link change appearance as you tab through? There should be a bordered box surrounding each link to help indicate to a sighted keyboard user where they are on a page.
7. Colour contrast
Having good colour contrast between your text and background is really important - and not just for people with low vision. Creating good readability is good for everyone! Thankfully there are loads of great tools you can use to check that you are meeting web accessibility standards when it comes to colour contrast ratio. I use SiteImprove.
8. Closed captions and transcripts
If you use video on your website, be sure to include closed captions and transcripts to give context and meaning to users who are unable to hear, either through disability or even situational impairment.
My 3 year old for example, still needs me to sit with him whilst he falls asleep at night. When he's taking a long time, I quietly watch video content on my phone that has closed captions so I don't disturb him. I also prefer to read video transcripts when doing any kind of e-learning, as I read quicker and also find that I understand information better when reading. Another reason why designing for accessibility is beneficial for everyone.
Don't forget transcripts for your podcasts either!
9. Avoid jargon and complex language
To be accessible, your content must be easy to understand. Avoid the use of jargon and acronyms and where you do need to use them, explain what they mean. This will not only help people with cognitive & learning disabilities but also people who are not familiar with the topic being written about.
This is not an exhaustive list by any means but it's a good starting point to improve the accessibility of your website.
As you can see, web accessibility is vital if you want to be inclusive.
It is vital if you want to improve your SEO ranking (because accessible websites rank better than those that aren't).
But more than anything, it is simply the right thing to do.
For a more in depth overview, check out HubSpot’s Ultimate Guide to Web Accessibility
Reference:
*2022 accessibility report by US charity WebAIM (Web Accessibility in Mind).
