Web Accessibility Follow

Contrast

Criteria

Text, visual elements, and interactive elements must have strong contrast against the background the element it is placed on. This could be the page background, an image or pattern.

Providing enough contrast between the foreground and background enables readability for sighted individuals. Black on a white background would be considered as the best contrast.

WCAG recommends a contrast ratio of 4.5:1 for regular text, and 3:1 for large text.

Example

The text of a paragraph should be easily legible on the background colour of the page. 

How to test

The Emulate Vision Deficiencies feature in Chrome DevTools can help identify vision deficiencies experience your web app. Alternatively, a colour contrast checker can be used.

Colour

Criteria

Color should not be the only visual means of distinguishing a visual element. Any information conveyed by color should also be available in text. Pairing color with another indicator aims to ensure that sighted individuals who cannot distinguish between some colors can still understand the content.

Example

On a form, a required field can have typically red styling such as red background or red border, but it should also include a text to easily identify this required field, e.g. 'Field is required'

How to test

Check any use of colour for statuses, success, failure, warnings, etc. should have accompanying text to explain the meaning of the colour used.

Alternative Text

Criteria

Alternative text (alt text) is required for all visuals that provide meaningful information, such as images, graphs, and charts. Descriptive alt text explains the image to provide a similar experience to that of a sighted individual. Images used solely for decoration should be given an empty alt tag.

Example

A company logo used on a landing page or email should have alt text of the company name.

How to test

Hide any images or media in your asset and check the alt text informatively describes the item that is being hidden.

Heading Styles

Criteria

Heading styles designate content organization. Using headings indicates the hierarchy of content. Predefined style headings in text editors enable clear understanding of the structure of the document or web page. Headings should be in sequential order and that they do not skip a level.

Example

A page title should use <h1> HTML tags and subtitles should use subsequest heading types in order, i.e. <h2>, <h3>, etc.

How to test

Heading tag checkers can be used to ensure correct ordering of headings.

List Styles

Criteria

Use bulleted or numbered list styles to denote list structure. This ensures consistent formatting and helps screen readers understand the content structure and organization.

Example

A list should use <ul><li> HTML tags for unordered lists and <ol><li> HTML tags for ordered lists. Nested lists can use a combination of both.

How to test

Check any lists are using correct HTML tags.

Links

Criteria

The purpose links can be determined from the link text alone or adjacent surrounding link text. Link text like 'click here' does not provide context to understand where the link is going unless surround text explains the action.

Example

Link text for a registration form could be 'sign up to attend the event'. Alternatively, supplementary text can be used which could be 'sign up to the event by clicking here'.

How to test

Check any links have meaningful and descriptive text.

Tables

Criteria

Format and use simple tables with column and row headers. Split nested tables up into simple tables, and do not use tables to control layout.

Example

HTML table syntax should be used systematically with <table>, <th> and <tr> tags.

How to test

Check syntax for tables is correct according to checklists.

Audio and Video

Criteria

Audio content should have a full transcript. Video content should have accurate captions, and an audio description that describes the visual information of the video.

Example

Videos should have subtitles/captions to aid users with visual impairments to understand the content being played.

How to test

Check audio and video media have alternative means to understand content.

Movement, Animation, Flashing

Criteria

Moving, blinking, or scrolling information that starts automatically, lasts more than five seconds, and is presented in parallel with other content, provide a mechanism to pause, stop, or hide it. Check that content does not contain anything that flashes more than three times in a one second period.

Example

An animation/gif that automatically plays and loops on a page, or a loading spinner, or a blinker for a cursor.

How to test

Ensure a mechanism is in place to pause, stop or hide the item.

Shape, Size, Position

Criteria

Descriptions of content should not rely on solely on references to shape, size, or position. Additional information should be included in any instructions that allows individuals to understand them even if they cannot perceive shape, size, or position.

Example

A multipage interface should not have just a right arrow to proceed to the next step, there should be the word 'Next' to accompany the arrow.

How to test

Any instructions should not rely on shapes, size or position to describe an action.

Keyboard Navigation

Criteria

Content should be accessible without using a mouse. The tab key is typically used to navigate the interactive elements of a web page. The enter key, the spacebar, and the arrow keys are also commonly used where 'focus' and 'active' HTML states indicate the item that is being selected. 

Example

Using the 'tab' key to navigate a form should highlight the inputs that are being focused on and ready for interaction, where the final 'submit' button should have a visual indicator when focused such as a border.

How to test

Disable mouse/trackpage and navigate the asset with just a keyboard, ensuring the focus order is intuitive and follows the structure of the page

Resize Text

Criteria

Information and functionality should not be lost when resizing text from 100% up to 200%. Resizing text must be achieved without the use of assistive technology, like a screen magnifier that increases the size of all content, or the zoom function in a browser. One example is to 

Example

When zooming into a web page, the content should automatically adjust it's layout to ensure all content is visibile.

How to test

Resize the page zoom to 200% via browser functions and check that there is no missing or overlapping content, and that horizontal scrolling is not required.