There’s an overlap between making your website accessible and optimising it for Google and other search engines.
Web Content Accessibility Guidelines (WCAG) make sure everyone can access web pages. These guidelines promote readability for people with dyslexia, autism or other learning difficulties. They promote accessibility for people with sight loss, colour blindness, or hearing loss.
Search engines use automated bots to crawl web pages. These pages then get indexed on their database. This is then served to users on search engine result pages (like Google).
The crawling and indexing stage is crucial to the way search engines work. Search bots understand what’s on a webpage from information that meets WCAG standards.
Page titles
The page title is the name of the web page. The HTML code for adding a title tag is <title>.
Writing an engaging but relevant page title is important for accessibility and SEO. It helps users identify what the page is about and if it will be useful to them.
Page titles are listed on search engine result pages as the clickable link. The page title is also the first information screen users hear when they arrive on a page.
The information of a page title is often the main reason a user would click on a link on search result pages.
Page titles also appear on tabs on a user’s web browser, helping them identify web pages quickly.
Page titles need to be concise and should be no longer than 60 characters. This is to stop page titles from being cut short on search engine result pages. It also avoids screen reader users being bogged down with unnecessary information.
Headings
Page headings help structure a web page by splitting information out into sections. This helps users quickly find the information they are looking for. It also improves the readability of the page.
There are six levels to header tags, starting at Heading 1 and ending with Heading 6. The HTML code for header tags is <h1> to <h6>.
Structure of header tags
- H1 tags should be used as the main page heading and should only be used once per page
- H2 and H3 tags should be used as subheadings
- H4, H5, and H6 tags are used as subsections within subheadings
How screen readers use heading tags
Screen readers rely on the HTML header tag to identify headings. This helps users easily navigate around a page.
The screen reader will pick up the header tag HTML code then relay this information to the user. The user than decides if they wish to hear the information in the section, or move onto another section.
Heading tags should never be used for their formatting appearance. They should be only be used for on-page content structuring. This avoids search crawlers mistaking information that’s not part of the article. For example, using header tags on a website’s main menu or footer menu.
HTML heading tag structure and website accessibility
Bullet points and lists
Using bullet points and numbered lists helps break up content. It summarises information in an easier to read format. Bullet lists make content accessible for people with dyslexia, ADHD and autism. They’re also useful for people using screen readers.
These lists should be marked up with the correct HTML code to help web accessibility and SEO.
How screen readers use HTML lists
Screen readers understand HTML list codes like:
- <ul> for unordered bullet points
- <ol> for ordered lists with numerical or alphabetical values
- <dl>for descriptive lists and glossaries
The screen reader will be able to tell users that there is a list and how many items are in the list. It will also allow the user to skip the list.
This helps visually impaired users navigate around pages quicker. It makes it easier to get to the information they want.
How lists can help SEO
Featured Snippets are boxes that appear on search result pages. They provide a brief overview of information related to the user’s search query. These Featured Snippets help a website stand out against other websites.
Adding content in marked up HTML lists gives search engines the ability to display content in an engaging way on results pages.
Descriptive hyperlinks
A hyperlink is the visible words that display when a web page links to another location. It normally appears underlined, in a different colour, or both. They help users navigate around a website.
A well written hyperlink should be descriptive enough so that a user knows where the link will take them. But it should also be concise.
Hyperlink text and accessibility
Writing useful link text is a good accessibility practice and is a crucial part of WCAG. Many assistive technology users rely on links to get around a web page. That includes people who use screen readers or have other visual impairments.
SEO and hyperlinks
Well written text on internal hyperlinks helps search bots to better understand the content on your website.
How to write hyperlink text for better web accessibility
Image alt text
Alt text allows for a text based description of images. It is added to the HTML code of an image with the ‘alt=’ tag. Example:
<img src=”example.jpg” alt=”example alt text”>
Adding this alt-text to images is important for web accessibility. It allows people using screen readers to process images on a page.
Search bots also use this information to understand the contents of the image.
What’s good for users is good for search engines
Image alt tags should be there to improve user experience. Overly written alt text can confuse and alienate screen reader users.
Alt text doesn’t need to include every detail of the image. It just needs to provide an accurate and concise description.
This description will also let search bots know what the image contains.
How to write alt-text descriptions for image accessibility
Captions and transcripts
Adding captions to video content makes it accessible to a wider audience. It allows people who are deaf or have hearing loss to follow the content. It also makes it easier for users who have difficulty processing audio information.
Search bots use video captions to understand the contents and context of the video.
Providing a text alternative to visual content
Offering a few different ways to access visual content is both good for users and search bots. Adding a text transcript of video content on your website means users do not need to engage with the video at all.
Captions work by appearing in the video player. But transcripts layout the entire script in a document or on a single webpage.
This script gives users access to the video content at their own pace. It also lets them skim through to find the information they need.
Transcripts allow search engines to crawl the video content and give context to the information on the webpage.
A guide to using subtitles, captions and transcripts for accessibility