Creator: Accessible Libraries
Date of Update: November 13, 2024
Overview
Are you new to digital accessibility? We’ve compiled a top-five list of items for you when creating an accessible webpage or editing existing web pages. These are the items that everyone, whether you have a technical background or do not, can incorporate into their websites to make them more accessible.
You can download this list here:
Headings
Use proper Headings to structure content logically. A heading is a short phrase describing the next section. Think of it as the title of the text located underneath it. Headings are an important part of an accessible website. They are the main way a screen reader navigates your web pages.
When adding headings, you nest them according to how you want your information organized.
Heading Tips and Guidelines
- Follow the rule of hierarchy and do not skip levels. Doing so will confuse the reader and make them think they missed something.
- The heading hierarchy is as follows:
- Heading 1: top-level sections
- Heading 2: Next level down
- Heading 3: Can be used for subsections
- Headings 4-6: Rarely used
- The heading hierarchy is as follows:
- Try to have content between each heading, even if it is only a brief sentence.
- Avoid splitting headings. Having headings that split over two lines or jump without content between them can cause false navigation.
- Avoid empty spaces between headings.
- Do not put headings in a table for layout purposes.
Hyperlinks
A hyperlink is a link that users can click to open a webpage or move to another area in a document.
What is an Accessible Hyperlink?
Hyperlinks must be informative; the linked text tells readers where that link will take them. For example, instead of the text “Click Here,” you could use “Click here to read about accessible hyperlinks.”
Informative hyperlinks are beneficial for assistive technology users who navigate using links. Screen readers identify links in the document and then read the linked text. A bunch of “Read more” links is not helpful or informative.
Note: Try to avoid URLs, as screen readers generally mispronounce these. If you need to use the URL (e.g., the document you are working on will be a physical handout), try to use the shortest version of the URL.
Alternative Text
When using images in your websites, add alternative text to provide persons with print disabilities with descriptions of what is in your images.
If alternative text is not added, screen reader users will be excluded from accessing the full meaning of your images and graphics.
Do not use decorative images on your website.
How to create Alternative Text for your Images.
Here are some tips to follow when creating alternative text:
- Do not include the phrase “This is an image/graphic of…” in your alt text, as screen readers will announce that it is graphic.
- If there is text within an image, write it in the alt text.
- Your alt text should not include information available in the surrounding text. For example, do not use text from the image caption.
- Write for your audience. For example, you would describe an image meant for children (like a photo of the newest children’s book) differently than an image meant for adults.
- Use present tense and action verbs.
- Use inclusive language in your descriptions. For example, only gendering a person if you know their preferred pronouns.
- Describe the physical characteristics of people in images. Physical characteristics include hairstyle, skin tone, facial features, clothing, etc.
- For skin colour, we recommend using the emoji scale: Light Skin Tone, Medium Skin Tone, Dark Skin Tone, etc.
- Descriptions should be objective and free from censorship. People who use screen readers should receive equal access to the information conveyed in images.
Some things may be difficult to describe. The goal is to give the reader all the important information in an image.
Font and Font Attributes
When crafting content for your website, consider the font and font attributes you use. Font attributes can make your website inaccessible, so consider how and where to apply them. For example, small font, tight line/word/letter spacing, and poor colour contrast between the text and background make a webpage nearly impossible to read.
Font attributes are added to the font or text of your website to change or style it. Font attributes include:
- Font size (e.g., 14-point)
- Font colour (e.g., black)
- Font type (e.g., Arial)
- Bold/Italicize/Underline/Strikethrough
- Line spacing (e.g., single or double)
How do you ensure your font attributes are accessible?
Here is how you can ensure your font attributes are accessible:
- Use a larger font size when possible.
- Don’t use colour alone to convey meaning in your text. For example, hyperlinks are both a different colour and underlined. If they were just highlighted blue, it would be inaccessible for people who are colour-blind.
- Consider how your text contrasts with the background of your document. Black text on white is accessible, but light grey text on a white background has low contrast and is difficult to read.
- We recommend using a sans serif font like Arial or Verdana, as they are easier to read.
- Limit or avoid the use of all caps.
Colour Contrast
Colour contrast refers to juxtaposing colours used in a web page, image, chart, table, etc. For example, the contrast between the text and web page background. The Web Content Accessibility Guidelines recommend a minimum contrast of 4.5:1.
Use high colour contrast between your text and background. People with low vision may not understand your content if you use colours with low contrast (e.g., gray text on a light blue background).
Don’t use only colour to convey information in your post, as persons who are colour-blind may not be able to understand the information if you do.