At its heart, accessibility is about enabling as many people as possible to use your website. If you’re new to accessibility though, it can be difficult to know where to start.
Here are 11 things you can do to improve the accessibility of your website that don’t need a web developer. As long as you have access to your website’s Content Management System (CMS), you can make these changes today.
1. Use plain language
The first, most important and most impactful thing to do is use plain language. Using plain language benefits everyone who uses the web.
Your CMS may include a plugin that helps you optimise your content by giving a readability score. If it doesn’t, you could use a tool like Hemingway Editor instead.
Some plain language tips:
-
use short, clear sentences and paragraphs
-
avoid complex words, especially if there is a simpler alternative
-
if you need to use acronyms, include the full version on first use
-
use bullet lists to aid comprehension when the order is not important
-
use numbered lists for steps in a process or hierarchy
-
avoid idioms such as ‘raining cats and dogs’ or ‘under the weather’
Content Design London's resource on clear language can help you get started.
2. Use headings for structure and meaning
Headings provide structure to your pages and should group related content. Most people skim web pages. Your headings should summarise the content below them and help people to decide if they want to read on.
Many assistive technologies use headings to navigate web pages. It’s important to structure your content to make it predictable and consistent.
Some tips on headings:
-
use only one H1 (level 1 heading) per page
-
heading order should follow H1 > H2 > H3
-
don’t skip heading levels
-
don’t use a heading to style text
The A11y project has a guide on how to create an accessible structure for your web pages using headings.
3. Provide alternate text for images
Alternate or alternative text, known as ALT text, replaces an image for people who can’t access it. It’s used by people using screen reader software. It also appears on screen in the event of the image being unable to load.
If your image is functional, or contains content, you should add ALT text that replicates it.
Some tips on ALT text:
-
write meaningful descriptive text for your images
-
don’t make your ALT text too long - under 125 characters is ideal
-
decorative images don’t need ALT text
Mozilla Developer Network (MDN) has a great page on how to use ALT text in different contexts.
4. Avoid images of text
Putting text inside an image hides it from those who can’t perceive it. Images of text exclude people with a visual impairment. They also exclude people when they don't load due to low mobile bandwidth.
If the text content in an image is important enough to make it to your web page, make it ‘real’ text instead.
Princeton University’s Digital Accessibility department says Do not use images of text. Listen.
5. Use descriptive link text
Link text should help people to understand what will happen as a result of following a link. The most effective link text can make sense out of context.
Some tips on writing your link text:
-
provide a short description of where the link will take you
-
avoid ambiguous links such as ‘Click here’ and ‘Read more’
-
don’t repeat yourself - make the text of each unique link unique too
-
don’t use different link text for links with the same destination
-
if the link is to a document, include the document format and size, like this ‘Application form (PDF, 1.3MB)’
Scope has guidance on how to write better link text for accessibility.
6. Don’t convey meaning using colour alone
Using colour alone excludes colour blind people and those with visual impairments. Asking these users to ‘follow the instructions in the blue rectangle’ won’t be accessible.
How to improve this:
-
use text labels and icons along with colour
-
use pattern as a secondary indicator, for instance in the different segments of a pie chart
-
for infographics, provide the same information in text form
WebAIM’s article on designing for colour blindness.
7. Check your font size and styling
Make sure that your text size is large enough. How it appears will vary between devices, but a good rule is no smaller than 16px for body text.
Avoid using underlines for emphasis - people can mistake underlined text for hyperlinks. Use bold instead.
Be sparing in your use of italics. For instance, they’re invaluable when citing references. Avoid using large blocks of italic text.
Be mindful in your use of ALL CAPS. They reduce readability in longer form content. They also slow readers down by removing the ability to recognise words by their shape.
Google Fonts have a super resource on accessibility in typography.
8. Use unique, descriptive page titles
Using unique page titles helps your website’s users to understand where they are.
Page titles are often the same as the first level heading (H1) of a page, and part of the web address (URL) too. They are the first thing read out by screen readers, search engines use them, and they appear on the tab in a web browser.
Harvard University Digital Accessibility has a short guide on writing web page titles.
9. Provide transcripts and captions
If your web page includes audio content, provide a transcript. This should be next to the embedded audio, to make the same content available to all users in text form.
For video content you should provide a transcript, and captions in the video itself.
W3C’s guide to making audio and video media accessibleis a great place to start.
10. Check your text alignment
When you publish web content in English, you should use left aligned text as default. This reduces the effort required to follow the flow of text from one line to another. It also supports people’s natural tendency to skim content.
You can use centred text for small amounts of content. Avoid it in large blocks as it affects readability.
Amber Hinds’ post on text alignment and readability is a useful intro.
11. Avoid using PDFs
The PDF format is a product of the print industry. You can make PDFs accessible, but more often than not they present a barrier to users. PDFs are often large files that are not well structured or optimised. They're not designed for consuming online, especially on mobile devices.
If you have content that needs to be on the web, do your best to make it a web page. If this is not an option, you could create it as a Word document. You can then use Word’s integrated accessibility checker before uploading it to your CMS.
Why GOV.UK content should be published in HTML and not PDF - highlights some of the pitfalls of using PDFs online.
In conclusion
The 11 pointers I’ve shared above will go a long way towards making your website more accessible. If you would like to discuss some of the other things that you can do, we’d love to hear from you.
At manifesto, we offer a range of accessibility services. These include audits, usability testing and code reviews.