Page titles, commonly referred to as title tags – concisely describe the information that can be found on each page. This is helpful for all users (and is majorly beneficial for SEO) but can be vital for users with visual impairment. Without these titles, your website can be nearly impossible to navigate or find information on, especially for those who utilize screen readers.

Your website needs to have concise, unique page titles, around 60 characters long, that are appropriately descriptive for the content found on the page. These titles are also commonly what's chosen to appear, by search engines, as the heading for the search result to your web page.

	Studies found that in 2019, nearly 15% of all website are missing page titles.
	2.4% of Americans are visually impaired and rely on screen readers to navigate the web.

Further Reading

• Page titles: Criteria, best practices, examples, and testing.

• How to write page titles for web accessibility.

• Moz: Title Tags

• Ahrefs: Crafting the Perfect SEO title tag

Page titles, commonly referred to as title tags – concisely describe the information that can be found on each page. This is helpful for all users (and is majorly beneficial for SEO) but can be vital for users with visual impairment. Without these titles, your website can be nearly impossible to navigate or find information on, especially for those who utilize screen readers.

Your website needs to have concise, unique page titles, around 60 characters long, that are appropriately descriptive for the content found on the page. These titles are also commonly what's chosen to appear, by search engines, as the heading for the search result to your web page.

	Studies found that in 2019, nearly 15% of all website are missing page titles.
	2.4% of Americans are visually impaired and rely on screen readers to navigate the web.

Further Reading

• Page titles: Criteria, best practices, examples, and testing.

• How to write page titles for web accessibility.

• Moz: Title Tags

• Ahrefs: Crafting the Perfect SEO title tag

Graphic and typographic elements on your site need proper contrast and color to be visually accessible for all users. They must be able to perceive the content that’s on a page and read text clearly. Your website should aim for 7:1 contrast ratio for normal size text and 4.5:1 for larger text.

The contrast ratio is a good indicator because your eyes can deceive you – even if it seems to have enough contrast to you, different people perceive color differently. As a general rule, there should be as much contrast as possible between text color and background color (for example, don’t put light text on a light background).

	Out of all WCAG 2 failures recorded in February 2020, 86.3% had issues with a low contrast ratio.
	It’s estimated that 10% of the world population would benefit from designs that are easier to see with a better contrast ratio used throughout.

Further Reading

• Wave - Quick Accessibility Scan

• WebAIM - Website Contrast Ratio Checker

• How to fix web accessibility contrast conundrums.

• Lean about the myths of color contrast accessibility.

Despite what individual designers may tell you, there is no ‘best’ font – but there are some key elements to look at when it comes to typographic readability and accessibility. Your website should use simple fonts that align with your brands message – in an appropriate size (over 14px), weight, spacing, line length, and color. Avoid using too many fonts on one site, or fonts that have ambiguous or complex characters.

To increase readability, your content should be aimed at the lowest reading level appropriate for your users. Stylizations such as bold and italics should be only for visual emphasis, and you should left-align text whenever possible.

	Nearly 40% of Americans alone are nearsighted, making small font sizes consistently one of the top complaints in website usability studies.
	A large part of website accessibility falls on typography – after all, web still is 95% typography.

Further Reading

• Online Utility - Calculate Readability Score

• How your website should be designed for readability.

• Why should we focus on readability?

Many users – such as those who are blind, lack fine motor control, lack the physical ability to use a mouse, or those who like efficiency – rely on a keyboard to navigate websites rather than a mouse.

Your website needs to use a visual indicator of keyboard focus for sighted users, and all interactive elements (including form fields, links, and buttons) should be able to be navigated through via the keyboard. Ideally, there should also be a way to bypass navigation (such as a “skip to main content”) button to avoid having to tab through lengthy lists.

	19.9 million Americans (8.2%) have difficulty lifting or grasping. This could impact their use of a mouse.
	Since truly great online experiences are ones that are available to everyone, it makes sense that designers and developers attend to keyboard usability.

Further Reading

• How to test for keyboard navigation accessibility.

• How to use keyboard accessibility to improve navigation.

• Achieve keyboard accessibility: A guide.

Special consideration needs to be taken when considering audio, video, or other moving and flashing elements on your website. As a general rule, nothing on your website should flash more than 3 times per second to keep your content from triggering seizures – and ideally should have options to turn any flashing or blinking motions off.

Autoplay should be avoided whenever possible, not only for accessibility, but also due to general user annoyance. Any audio or video also needs to be easily controlled, stopped, or paused using keyboard controls.

	Autoplay is bad for all users, but especially for those who use screen readers, as they navigate a website by listening.
	Around 102,000 people in the U.S. have photosensitive epilepsy which can be triggered by as little as 3 flashes in a second which can cause fatal seizures.

Further Reading

• How create accessible videos.

• Why is autoplay an accessibility no-no?

• How to use the three flash or below threshold.

Your website needs logically-ordered semantic HTML elements. This includes using elements like <header><nav><main><footer>for the page structure and sequential h1 to h6 tags. Elements also need to be used properly and for their intended purpose, such as using a <ul> element to display an unordered bulleted list.

This is fundamental for accessibility technologies, as many accessibility functions are built-in to HTML, such as the ability to navigate to a <button> element using the tab key. It also has the benefits of making your website easier to develop, function better on mobile devices, and improve onsite SEO.

	A great deal of web content can be made accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times.
	~82% of Screen Reader users rely on the HTML headings to navigate a web page.

Further Reading

• How to see the HTML code of any website.

• Why HTML is a good basis for accessibility.

• Learn all about semantic structure.

• Using Headings for SEO

Audio, video, and images all need to have appropriate alternatives or metadata for users who may use the web differently.

All images on your site should have file names, alt descriptions, and captions that reflect the content of the image for non-sighted users. Non-content related images should have a blank alt description, such as those used for decorative purposes only.

Audio files on your site need to be high-quality, with the speaker clearly heard, ideally with any background noise or music low in the background. You should also ideally have transcripts of audio files, including navigation to navigate the transcript.

The videos on your website should have closed captioning or subtitles, and ideally sign language. The media player must have accessibly navigated controls, so users can use their keyboard to stop, play, and close the videos.

	Out of 130,000 random web pages, 61.9% were missing alternative text on images. Out of those that did, 9.3% used questionable or repetitive text such as ‘image’ ‘blank’ or the file name.
	71% of all students without hearing difficulties use captions, primarily to help them focus and retain information.

Further Reading

• What web-based media players are accessible?

• How to plan accessibility into audio and video Media.

• How to write effective alt text descriptions.