Web Content Accessibility Guidelines (WCAG 2.0)
The Web accessibility guidelines provide success criteria referenced under 3 levels.
-
Level A : 25 success criteria
-
Level AA : Level A + 13 success criteria (FLWS is committed to meeting Level AA)
-
Level AAA : Level AA + 23 success criteria
Content creation
Writing Page titles
Every page should have a clear title at the top of the page. Creating a relevant page title is just as important as placing the page in the correct location. Add enough information so that the title is understandable while scanning.
If there is a title that may be frequently used by other groups, add a bit more detail to the page title to ensure that it is understood in search results. Consider how it will appear:
-
in a search
-
in the navigation
-
on the page
Example:
Instead of “Links” Use “Resources for divorce & separation”
Sequence of content
The reading sequence of a page will be determined by the page structure. When the sequence in which content is presented affects its meaning, think of how this content will be presented to different users.
<insert image example>
Heading sequence
Headings and sub-headings give structure to a web page, separating content into meaningful sections. They help users scan pages to find what they are looking for quickly and easily. They're also important to screen reader software, which provides keyboard shortcut keys that go from heading to heading
Ensure the heading and navigation order is logical and intuitive. Headings should always be nested under the appropriate higher level heading.
H1 heading
H2 heading
H2 heading
H3 heading
H3 heading
Ambiguous link text
Link text should be meaningful in isolation — it should make sense if taken out of context of the copy and indicate the nature of the link target. An ambiguous link is a link where its purpose cannot be determined when viewed on its own without context
-
Avoid the use of links named just "Read more" or "Click here".
-
Avoid multiple links with the same text on one page, especially if the links lead to different locations.
Example:
Instead of “Click here to learn how to get a copy of your marriage certificate”
Use “Learn how to get a copy of your marriage certificate”
Linking to external websites
When linking to an external website, follow the same best practices outlined above. The the link text, or an icon, should indicate that it is linking to an external site.
The link to the external website should be set to ‘open in a new window’ and . This ensures the external website will open in a new browser tab, and the context of the page your user was on will not be lost.
Tables
Someone that cannot see the table cannot make the visual associations between elements. Use table captions or a header above the table and proper row / column headers to help assistive technologies make that association.
Images and text styles
Alternative text
Computers and screen readers cannot analyze an image and determine what the image presents. Text must be provided to the user which presents the CONTENT and FUNCTION of the images within web content.
Alternative text can be presented in two ways: within the ALT attribute of the image or in the surrounding context
-
For images that do not convey content, set a null alternative text (alt text = "").
Note: all linked images must have alternative text. -
For complex images and diagrams, equivalent alternatives should be provided in context (e.g. a transcript).
Example:
Instead of "image_1234.png" or "Image of a mountain"
Use "Mountain in Whistler"
Example:
<insert image>
For photography, use "Close up, greyscale photograph of man outside, face in focus, unfocused background."
For a TV-series use "Star of the show, Adam Lee, looking strained outside in the rain."
Images of text
Avoid using images of text, instead include the text in the page content using one of the style options provided. Alternatively, you can use the alt-text field as a transcript option.
Colour contrast
Colour contrast is about using colours that provide enough contrast between content and the background to accommodate low vision impairments and colour deficiencies.
- Text and non-decorative images need to be clearly legible for everyone regardless of whether they have moderately low vision or colour deficiencies.
- Text and images of text must have a minimum contrast ratio to match the accessibility guidelines.
- Use this online colour contrast calculator to input your colours and see if they meet the requirements
https://webaim.org/resources/contrastchecker/
Sensory characteristics
Instructions provided for understanding and operating content should not rely solely on sensory characteristics of components such as shape, colour, size, visual location, orientation, or sound.
Example:
Instead of “To go to next page, press the button to the right. To go back to previous page, press the button to the left.”
Use “Press the Next button to go to next page, press the Back button to go back to a previous page.” or use designs that don’t require instruction.
Video and moving content
Video captions
Provide synchronized captions for videos, to accommodate hearing impaired users.
Text / audio descriptions
Provide a text transcript or a special descriptive-audio track to accommodate visually impaired users.
Pause, stop, hide
Avoid automatically moving, blinking, or scrolling content that cannot be paused, stopped, or hidden. This relates to any animated GIFs that are used in page content.
Moving content can be used to draw the user’s attention as long as it lasts less than 5 seconds.
Resources
Accessibility resources
Alt text resources