Ways to make your website more accessible, starting today
Everyone deserves equal access to information.
While sometimes an afterthought, accessibility should be infused into your ongoing website strategy. When you design with accessibility in mind, you improve everyone’s user experience. This includes users with permanent or temporary auditory, cognitive, physical, speech, and visual disabilities.
We’ve captured the high-level ways to make your website more accessible without the need for too much coding. Several of these—when working with a developer—can be one-and-done.
Add alt text to images
An alt tag or alternative (alt) text is an attribute that describes an image. It is used by screen readers and search engine bots to understand the context of the image in relation to the content around it.
Describe the image succinctly and accurately using the subject and context to guide you.
Do not start with "picture of..." or "Image of..." Jump right into the image's description.
Review for spelling errors. Misspelled words could diminish the user experience or confuse search engines crawling your site.
For charts, graphs, and diagrams, make sure you include:
The chart type
The type of data
The reason for including the chart
Images that are purely decorative or are described in adjacent text do not need alt text.
Use headings to structure content
When you structure your content by using HTML heading tags (h1, h2, h3 etc.) correctly, this makes your website easy to read and interpret by screen readers.
Structured headings are particularly useful for screen readers as it allows users to jump from heading to heading, allowing them to quickly skim a page.
Use one <h1> for the main page title only.
Do not skip heading levels, as screen reader users will think content is missing. Think of <h2> as section headings, and <h3> as sub-headings within these sections.
Avoid small font sizes
Make sure your font size isn’t too small. For easy readability, use a minimum size of 16 pixels for body copy.
The space between lines of text within a paragraph should be quite open—not so open that each line looks like an individual paragraph—but open enough so that each paragraph doesn’t look cramped.
Line lengths are important, too. Too wide and they become difficult for the reader to comfortably read; too narrow and you increase eye strain when jumping between lines.
Make sure that there is enough spacing between characters.
Avoid all caps where possible, we start to see rectangular blocks rather than individual letter shapes—making words harder to parse quickly, reducing readability.
Select an accessible colour palette
Using colours that clash or have low contrast against one another makes text difficult to read. For example, bright red text on a white background, a common colour combination, is not actually considered accessible as the contrast levels between the red and white are not sufficient—meaning your warning text may be difficult to read when most needed.
Select colours that are not too similar in tone and have enough contrast between them.
Make sure your text is easy to read and stands out from the background colour.
Avoid text on images
Whenever possible, avoid having text on images—text should be “live” and not part of an image. An exception to this rule is charts and diagrams. And, when it comes to data visualisation, make sure that:
If unavoidable, use images that are large enough for the text to be legible, also ensuring that the portion of the image that is covered by text is as plain as possible. This is where you need to use alt text, too.
If possible, add a headline and caption for the image on the page (as actual text).
If you are not able to add a caption on the page, add a comprehensive (but still succinct) alt tag.
Create captions and transcripts for media
Adding closed captions and/or transcripts to your video and audio content is useful not only for accessibility, but also for users who may be using your website when they can’t play audio.
Do not rely on auto-translations provided by some video platforms. While better than nothing, they are often full of errors. You can add caption files after you upload and post too.
Provide text transcript links directly under the video when you cannot add closed captions. If you make transcripts a separate page on your site, they become crawlable by search engine bots providing an extra benefit.
Test your website on mobile devices
Mobile is the number one place to reach your audience, so it is crucial that you test your website on mobile devices.
Make sure content—especially text is easily readable from an arm’s distance—if it isn’t, see the tips at the top of this post.
Ensure buttons and other clickable objects are large enough to be tappable without precision.
Avoid placing buttons and other clickable objects too close to each other to avoid accidental taps.
Don’t replace text labels with icons. Icons and text—or text alone—is better. If you can only use icons, then alt text is your friend.
Make links more accessible
When including links to your content, use descriptive text so users understand the content of the next page.
Avoid using generic descriptions such as ‘click here’. It is better to spell out the action you want the user to take, e.g., ‘Explore our videos’.
The link text should match the content of the page that you are linking to.
Underline or adding a colour background to your links will help make them stand out.
Be mindful when using emojis in text
A screen reader translates an emoji’s meaning via its universal name. It’s very common for the description to not match the intended meaning of the emoji.
Use emojis as an enhancement, not to replace an actual word.
It’s best to place emojis at the end of your message. Putting emojis in the middle of a sentence or paragraph disrupts the flow.
Use emojis sparingly, once or twice only. If you use six ‘high five’ emojis, a screen reader will read out the words ‘high five’ six times.
Be mindful about the context for certain emojis across different cultures, nationalities, and age groups.
Everyone deserves an enjoyable and easily accessible user experience when visiting your website. Making your website accessible to more people can increase sales, bolster brand perception, and make everyone feel included.
Would you like us to do a thorough review to ensure your website reaches everyone?
