(8 min 4 sec reading time)
That’s a million-dollar question, isn’t it? 💰
First of all, what is SEO? SEO stands for search engine optimisation and includes all the techniques that help your website get more traffic and rank higher on search engine results pages (SERPs).
What is web accessibility? When we design and build accessible websites and applications, we allow everyone to navigate and interact with them, including people with disabilities or people experiencing temporary or circumstantial disabilities.
While accessibility may not be a direct ranking factor, many aspects of it overlap with SEO.
Content is our most powerful SEO tool, and it must be easy to read, view and listen to. When creating content for the web, our goal is to reach as many people as possible. Hence, our content must be accessible by as many people as possible.
So basically, SEO drives users to your site, and accessibility keeps them there. 🙂
Let’s see how it actually works!
We'll be exploring some of the most important content elements as follows:
- Page title |
<title> - Page description |
<meta name = "description"> - Headings |
<h1> to <h6> - Language |
lang="en" - Alt text |
<img alt="..."> - Lists |
<li> - Navigation structure.
Specifically, we’ll see how the above elements may affect your website performance and user experience.
This learning resource is intended for:
- UX writers, copywriters;
- UX/UI/content designers;
- Web designers/developers;
- Webflow designers/developers.
Page title
Introduction
The page title is a sentence that describes the content and purpose of a web page.
Where do we find page titles?
- Many of the results you see in search engines are derived from the title tag. When search engines crawl a website, they go through the entire site (HTML document) to determine what your content is about and how to categorise it.
- The page title appears on social media and chatting apps when we share the link of a web page.
- Page titles are displayed in the web browser tab. When you have multiple tabs open you can identify them based on the page title.
- The page title is also displayed when we bookmark a web page in our browser.
Who is responsible for page titles?
- UX writers, copywriters;
- UX/content designers;
- Web designers/developers.
Why are page titles important for accessibility?
- People that use screen readers to navigate the web hear the page title as the first thing when they select a webpage and when switching between browser tabs.
- People with cognitive and learning disabilities need unique and easy to understand page titles to help them know that they are on the correct page.
Recommended ✅
- Use meaningful titles appropriate to the context of the page.
- Use clear and descriptive language to allow people understand what the page is about.
- Keep page titles about 50-60 characters (which is what typically is displayed on search engines and social media).
Not recommended ❌
- Avoid misleading or clickbait titles.
- Do not use a list of keywords as the title.
Test 💡
- Confirm that the web page can be identified with the title (browser tab, social media).
- Confirm that the title is relevant to the content of the webpage.
- Share the web page on social media/chat apps to confirm that the page title is updated and being displayed correctly.
Page description
Introduction
The page description is a summary of the page content.
Where do we find meta descriptions?
- This information typically appears in search results when the words you're searching for are part of the page description.
- The initial part of the meta description appears on social media and chatting apps when we share web pages.
Who is responsible for page descriptions?
- UX writers, copywriters
- UX/content designers
- Web designers/developers
Why are page descriptions important for accessibility?
Screen readers will read out the page description to people with visual impairements to help them understand what the page is about.
Recommended ✅
- Use clear and descriptive language.
- Keep page descriptions between 120 and 160 characters, long enough to be sufficiently descriptive.
- Provide relevant information to help users understand the page context and decide whether they should visit the page or not.
Not recommended ❌
- Do not stuff keywords that might feel unnatural to read.
- Do not repeat the page title in the page description.
Test 💡
- Confirm that the page description is relevant to the content of the webpage.
- Check that the page description is displayed when sharing the web page on social media or chatting apps.
Headings structure
Introduction
Headings are often used to break up the content so that it is easier to find relevant information.
Where do we find headings?
- At the beginning of a page section.
- In featured rich snippets. Search engines use headings to determine segments of content and create featured rich snippets.
Who is responsible for headings?
- UX writers, copywriters
- UX/content designers
- Web designers/developers
Why are headings important for accessibility?
People that use screen readers can navigate web pages by headings, and based on what they hear, they may start navigating from a specific section on the page and bypass blocks of content. So, think of headings as the accessible name of a page section.
Recommended ✅
- Use clear and descriptive headings for each page section.
- Headings should follow a logical content flow of the webpage.
- Establish the headings hierarchy before the design.
- Heading level n should be nested inside heading level n-1.
Not recommended ❌
- Do not use more than 1 (one)
<h1>per page. - Do not skip headings hierarchy (
<h1>to<h6>). - Do not start the design/development without having established the headings structure.
Test💡
- Confirm the headings structure when finalising the website copy.
- Confirm that the headings structure reflects the logical content flow.
- Check that the design reflects the headings hierarchy.
- Check that the design reflects the logical content flow.
- Post development: use external tools such as Wave.
Language
Introduction
Every web page must have its main language identified.
When there are any parts on a page with text in a different language, that also must be identified.
Where do we set the identified language?
- In the HTML document.
- Project settings when using a website builder.
- It can be annotated in the design file for entire pages or parts of pages.
- It can be specified by the UX/copywriter for entire pages or parts of the pages.
Who is responsible for identifying the language?
- UX writers, copywriters
- UX/content designers
- Web designers/developers
Why is language important for accessibility?
- Screen readers can "speak" various languages, as long the content language is identified.
- People who use screen readers to navigate the web can select a default or more preferred languages and only access web pages in the pre-selected languages.
Recommended ✅
- Use the official language codes.
- For maximum support across screen readers and browsers, we can specify regional languages (e.g.
lang="en-us") that are technically allowable. - Specify language changes on a page.
Not recommended ❌
- Do not forget to identify the language of your web pages.
- Do not forget to specify any language changes on the page.
Test💡
- Inspect the web page on the browser.
- Use external tools, such as Wave.
- Check the project settings when using a website builder.
Alternative (alt) text
Introduction
We use alt text to images to describe them to visitors who are unable to see them. Images are a key component of engaging with the audience as they add visual enhancements to the content.
Why are alt texts useful?
- They provide better context to search engines, helping them index an image properly.
- When we have slow internet, images fail to load and will show alt-text instead.
Who is responsible for alt-text?
- UX writers, copywriters
- UX/content designers
- Web designers/developers
- SEO specialists
Why is it important for accessibility?
- Its original and primary purpose is to describe images to visitors who are visually impaired or unable to see them for any other reason.
- Including alt text to images ensures everyone, including people that use screen readers, can access and enjoy the content on your site.
Recommended ✅
- Describe the image as accurately as possible and specify its purpose.
- Alt text should contain text in the primary language of the page.
- Keep alt text of max 250 characters.
Not recommended ❌
- Do not stuff keywords into alt text
- Do not add alt text to images that do not add to the context (decorative).
- Do not include "image of" "picture of" as part of the alt text.
Test💡
- Wave
Lists
Introduction
We use lists to group items or parts of the content related to each other. Similar to headings, list items are used by search engines to determine segments of content and create featured rich snippets.
Where do we find lists?
- Navigation bar
- Footer
- List of features
- Cooking recipes
Who is responsible for lists?
- UX writers, copywriters
- UX/content designers
- Web designers/developers
Why are lists important for accessibility?
- Screen readers will let the users know when there’s a list on a web page. It will identify the list and each list item. The user may navigate through the list items or bypass them and move on.
- Lists also convey a hierarchical content structure, not just visual formatting.
Recommended ✅
- Use unordered lists (with or without bullets) when there’s no order or sequence of importance.
- Content with the visual appearance of a list (with or without bullets) should be marked as an unordered list.
- Use ordered lists when (with letters or numbers) to suggest a progression or sequence.
- Content that has the visual appearance of a numbered list should be marked as an ordered list.
Test💡
- Keyboard navigation using the Tab key
- Wave
Site navigation
Introduction
The website navigation describes how users can navigate between pages through links.
The navigation structure helps search engines:
- understand and crawl your content,
- identify the most relevant pages, and
- build page authority.
What are the main types of website navigation?
- Navigation bar – at the top of a web page.
- Without overcrowding, it is best practice to include the links to key strategic pages for SEO.
- Hamburger menu – at the top of a web page on mobile or tablet.
- We should include the same links as desktop navigation so that search engines are crawling the same version.
- Sidebar menu – in combination with the top navigation bar. The sidebar menu is an opportunity to enhance the internal site linking, as long as the strategic pages are always easy to access.
- Footer – at the bottom of a web page. The footer should include all the pages of the site and they're typically categorised.
Who is responsible for the website navigation?
- UX writers, copywriters
- UX/content designers/product managers
- Web designers/developers
Why is website navigation important for accessibility?
When we use the keyboard to navigate sites, we tab through links and interactive elements. By placing them in a logical and meaningful order, we improve our navigation experience.
Recommended ✅
- Use clear language to let users know what to expect if they follow a specific link.
- Use consistent link names throughout the site.
- Place navigation links in a logical meaningful order.
- The navigation must follow consistent patterns throughout the site.
- Links or any interactive elements must be consistently identified.
Not recommended ❌
- Do not create incomplete or overly crowded website navigation
- Do not place close to each other links that take to the same page, if not necessary (adjacent links).
Test💡
- Keyboard navigation using the Tab key.
- Wave
Final Words
Let's make the web accessible together!
There's so much more to web accessibility, but typically it starts with the content. The goal I set for this resource was to provide a place to start learning about accessibility and how it affects other areas of a web project.
Ultimately, when we create content for the web, we want it to be easily discovered, noticed and understood by our audience.
For improved visibility in search results, we need to pay attention to these content specifics and attributes so that people who navigate them can get a better experience.
This page is built and maintained by Mirela Prifti. The content of this page will be periodically updated.
If you need help, have questions regarding web accessibility, or if you see any errors, feel free to contact me at:
Top comments (0)