These web accessibility tips can be used by content authors to guide them in creating content that is fully accessible to all users. This list is not intended to replace or map to formal standards such as the World Wide Web Consortium’s (W3C’s) Web Content Accessibility Guidelines.
Use headings correctly to organize the structure of your content. Screen reader users can use heading structure to navigate content. By using headings (heading 1 or <h1>, heading 2 or <h2>, etc.) correctly and strategically, the content of your website will be well-organized and easily interpreted by screen readers.
Examples of proper use of headings:
Use heading 1 for the primary title of the page. Use headings to indicate and organize your content structure. Do not skip heading levels (e.g., go from a heading 1 to a heading 3), as screen reader users will wonder if content is missing.
Use short headings to group related paragraphs and clearly describe the sections. Good headings provide an outline of the content.
Avoid writing in all capital letters as this is difficult for some people to read (for example, “Our History” – not “OUR HISTORY”).
Avoid using italics or underlining text for non-linked text. Words are recognized by their shape and italicizing/underlining words change their shape, which can make them more difficult to read. If a word in the document requires emphasis it can be bolded.
Some abbreviations can cause confusion. Rather than use e.g., i.e., and etc., write out the full phrase (for example, that is, so on).
Write dates out rather than using numbers (for example, October 30, 2022, rather than 30/10/2022).
Avoid long paragraphs of text. Break text into smaller sentences or paragraphs or use bullet points to make it easier to read/comprehend.
Include proper alt text for images.
Alt text should be provided for images, so that screen reader users can understand the message conveyed by the use of images on the page. This is especially important for informative images (such as infographics). When creating the alt text, the text should contain the message you wish to convey through that image, and if the image includes text, that text should also be included in the alt.
The exception to this rule is when an image is used purely for decoration; in this case, the alt text can be left empty so that the screen reader user is not distracted from the more important content on the page.
Avoid placing text in/on top of photos/images. If text needs to go over an image, ensure there is strong colour contrast. It is helpful to add a solid block behind the text, so the text is not directly over the image (with strong colour contrast of text/block behind).
Use text instead of pictures of text, and control its appearance using CSS. Pictures of text become blurry when enlarged, take longer to download, and are inefficient for the website author to edit. In addition, text in pictures is not selectable, searchable or promotes search engine optimization.
Give your links unique and descriptive names
When including links in your content, use text that properly describes where the link will go. Using "click here" is not considered descriptive, and is ineffective for a screen reader user.
Just like sighted users scan the page for linked text, visually-impaired users can use their screen readers to scan for links. As a result, screen reader users often do not read the link within the context of the rest of the page. Using descriptive text properly explains the context of links to the screen reader user.
The most unique content of the link should be presented first, as screen reader users will often navigate the links list by searching via the first letter.
For example, if you are pointing visitors to a page called "About Us":
Try not to say: "Click here to read about our company."
Instead, say: "To learn more about our company, read About Us."
Keep your content simple to read and understand. Content written in plain language can ensure that users can quickly understand and act on your content.
Use colour with care.
The most common form of colour deficiency, red-green colour deficiency, affects approximately 8% of the population. Using only colours will prevent individuals from understanding your message.
Other groups of people with disabilities, particularly users with learning disabilities, benefit greatly from colour when used to distinguish and organize your content.
To satisfy both groups, use colour, but also be sure to use other visual indicators, such as an asterisk or question mark.
The WebAIM Contrast Checker is one of several tools you can use to evaluate colour contrast, which will assist you in making your page as visually usable as possible to individuals with low vision or varying levels of colour blindness.
Use tables for tabular data, not for layout.
Using tables for page layout adds additional complexity to screen reader users. Whenever a screen reader encounters a table, the user is informed that there is a table with "x" number of columns and rows, which distracts from the content. Also, the content may be read in an order that does not match the visual order of the page. Do not create the layout of a website using a table.
When a data table is necessary (i.e. you have a set of data that is best interpreted in a table format, such as a bank statement), use headers for rows and columns, which helps explain the relationships of cells.
Use tagged PDF, the only type of PDF that supports headings and alt text for images. Use the PDF Accessibility Checker that’s provided by Adobe Acrobat. For more information, see the UW Accessible Technology page Creating Accessible Documents.
PDF preserves a document’s appearance across operating systems and devices. If this characteristic is not essential, consider using another format such as regular text, which is much more accessible.
Provide plenty of space between lines and blocks of text. This helps many users to track text horizontally and generally makes text easier to read.
Ensure that all content can be accessed with the keyboard alone in a logical way.
Users with mobility disabilities, including repetitive stress injuries, may not be able to use a mouse or trackpad. These people are able to access content through the use of a keyboard by pressing the "tab" or "arrow" keys, or through the use of alternative input devices such as single-switch input or mouth stick. As a result, the tab order should match the visual order, so keyboard-only users are able to logically navigate through site content.
Long pages with lots of content should be broken up with anchor links (jump lists), allowing keyboard-only users to skip to relevant portions of the page without having to negotiate through other content.
If videos are provided on the website, ensure they are captioned/subtitled, and make transcripts available in an accessible format(s).