Accessibility review

Principle 1 - Perceivable

1.1

Text alternatives

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language

1.1.1

A

Image Maps

Use alt attributes on area elements

No one should be using image maps anymore…

1.1.1

A

Simple Images

Only use images of text where necessary e.g. logos

1.1.1

A

Simple Images

Put alt attributes on images. Images that have an empty ALT tag should be decorative only.

1.1.1

A

Complex Images (e.g., a chart or diagram)

Put alt and title attributes on images

1.1.1

A

Complex Images
(e.g., a chart or diagram)

Provide a link to a long description that is immediately adjacent to the image

1.1.1

A

Forms: Labels

Use label elements to associate text labels with form controls

1.1.1

A

Forms: Controls

Use title attribute to identify form controls when label element cannot be used

1.1.1

A

Time-based Media (e.g., live video and audio)

Use label that describes the purpose of live audio-only and/or video-only content using alt text

1.1.1

A

Forms: CAPTCHA

Provide a text alternative that describes the purpose of the CAPTCHA AND provides another CAPTCHA serving the same purpose using a different modality

1.1.1

A

Decorative Images

Use null alt text <img alt=""> and no title attribute or apply image with CSS
Ensure images used as spacing have an empty alt attribute

1.2

Time-based Media

Provide alternatives for time-based media

1.2.1

A

Audio-only (Pre-recorded)

Provide an alternative, a document that describes audio in the recording

1.2.1

A

Video-only (Pre-recorded)

Provide an alternative, a document that describes video in the recording

1.2.2

A

Audio: Captions (Prerecorded)

Provide captions (open (always visible) or closed)

1.2.3

A

Audio: Description or Media Alternative (Prerecorded)

Provide alternative for time-based media or audio descriptions in an audio track for prerecorded video

1.2.4

AA

Audio: Captions (Live)

Provide captions for live media and provide (open(always visible) or closed captioning)

1.2.5

AA

Audio: Description (Prerecorded)

Provide an audio track that includes audio descriptions for all prerecorded video

1.3

Adaptable

Create content that can be presented in different ways (for example simpler layout) without losing information or structure

1.3.1

A

Lists

Use ol, ul and dl elements for lists or groups of links

1.3.1

A

Headings

Use heading elements and proper structure (H1 > H2 > H3)

1.3.1

A

Data Tables

Use proper table mark-up to present tabular information

1.3.1

A

Data Tables

Use captions

1.3.1

A

Data Tables

Use headers and ids for complex tables (two or more rows of headings)

1.3.1

A

Tables

Guideline – Only use tables for data, not for layout

1.3.1

A

Tables

Ensure structural elements are not used within a display table - e.g. headers and scope attributes

1.3.1

A

Forms: Fieldsets

Where applicable, provide a description for groups of form controls using fieldset and legend elements (e.g. radio buttons, checkboxes)

For radio buttons/checkboxes, use FIELDSET and LEGEND

1.3.1

A

Forms: Grouping Elements

Where applicable, use the optgroup element to group option elements inside a select

1.3.1

A

Markup

Use markup as intended, use semantic elements to mark up structure and to mark emphasized or special text - e.g. use of the em element for emphasis, not italics

Form elements are properly labeled:

• Every form element should have a LABEL tag with unique ID referenced

  • LABELS should properly describe the element. If not, add hidden text to the LABEL.

1.3.2

A

Meaningful Sequence

Ensure the content has the same meaning when it has been linearized (all formatting, e.g. tables, CSS, removed)

Document source should match the visual representation on-screen. Instructions should precede the elements to which they refer.

1.3.2

A

Meaningful Sequence

Ensure space characters, such as space, tab, line break, or carriage return are not used to format individual words - e.g. non-breaking spaces used in words for spacing or line breaks used - The use of white space between words for visual formatting is not a failure, since it does not change the interpretation of the words.

1.3.3

A

Sensory Characteristics: size, shape, location or sound

If elements are referenced by shape, size, visual location, orientation or sound, ensure they are referenced in a way that they can be found without understanding the shape, size, visual location, orientation or sound

1.3.4

AA

Orientation

Ensure that content can be displayed in either landscape or portrait view

1.3.5

AA

Identify Input Purpose

Apply HTML 5.2 autocomplete attributes

1.4

Distinguishable

Make it easier for users to see and hear content including separating foreground from background

1.4.1

A

Color

Colour is not used as the only means to convey information, it is also available in text

1.4.2

A

Sounds: Audio Control

Sounds automatically turn off within 3 seconds or a button is provided to allow the user to stop the sound

1.4.3

AA

Color Contrast (Minimum)

Text is less than 18 point(not bold) or 14 point bold --> Contrast ratio must be 4.5:1 between text and background, including images of text (Does not apply to decorative images or logos). Validate using the Colour Contrast Analyzer.

1.4.3

AA

Color Contrast (Minimum)

Text is greater than 18 point(not bold) or 14 point bold --> Contrast ratio must be 3:1 between text and background including images of text
(Does not apply to decorative images or logos)

1.4.4

AA

Text and Form Controls

Text must be scalable to 200%, using the browser to zoom, without loss of content or functionality

Resize the page to 200% to make sure nothing is cut off. Text must be scalable to 200% using the browser to zoom, without loss of content or functionality. Use relative font sizes (e.g. percent or ems).

1.4.4

AA

Text

Use relative font sizes e.g. percent or ems in CSS

1.4.5

AA

Images of Text

Use CSS to style elements/control visual presentation of text

1.4.5

AA

Images of Text

Do not include text in images

1.4.10

AA

Reflow

Content can be presented without loss of information or functionality and without requiring scrolling in two dimensions for 320 CSS Pixels (vertical) and 256 CSS pixels (horizontal)

1.4.11

AA

Non-Text Contrast

Maintain a 3:1 contrast ratio of adjacent colors for user interface components such as controls (includes hover/focus states), or a highly visible focus indicator

1.4.12

AA

Text Spacing

Review for loss of content/functionality when adjusting line height (1.5x), spacing (2x), letter spacing (0.12x) and word spacing (0.16x) the font size

1.4.13

AA

Content on Hover or Focus

If using hover/keyboard focus triggers to display content, ensure they are dismissable and hovering over the element will not cause the content to disappear

Principle 2 - Operable

2.1

Keyboard accessible

Make all functionality available from the keyboard

2.1.1

A

Keyboard

Ensure all controls (e.g. links, buttons) are available using the keyboard

2.1.2

A

Keyboard Trap

Ensure users do not get trapped and are able to use the keyboard to navigate all elements on the page

2.1.4

A

Character Key Shortcuts

If using keyboard shortcuts, include a mechanism to turn the shortcut off, or ensure the shortcut is only active when the component has focus.

2.2

Enough time

Provide users enough time to read and use the content

2.2.1

A

Session Timeout: Timing Adjustable

Provide a script that warns user a time limit is about to expire AND allow user to extend the default time

Standard timeout changes to be applied

2.2.1

A

Timing Adjustable

If meta http-equiv for a redirect is used, ensure the time-out is set to zero

2.2.2

A

Pause, Stop, Hide:
For moving, blinking, scrolling or auto-updating

Allow content to be paused and restarted from where it was stopped

2.2.2

A

Pause, Stop, Hide:
For moving, blinking, scrolling or auto-updating

Create content that blinks for less than 3 seconds

2.2.2

A

Pause, Stop, Hide:
For moving, blinking, scrolling or auto-updating

Use control that stops moving, blinking, or auto-updating content

2.2.2

A

Pause, Stop, Hide:
For moving, blinking, scrolling or auto-updating

Provide link or button that reloads the page without any blinking content

2.3

Seizures

Do not design content in a way that is known to cause seizures

2.3.1

A

Flashing Content

Ensure that no component of the content flashes more than three times in any 1-second period

2.4

Navigable

Provide ways to help users navigate, find content and determine where they are

2.4.1

A

Bypass Blocks: Skip Navigation

Provide a link to skip to the main content area (included in the template)

Longer pages that are broken out into sections should have means to navigate between those sections using anchor links.

2.4.2

A

Page Titled

Provide a meaningful and descriptive title to help users orient themselves

2.4.2

A

Page Titled

Provide a title using the title element

2.4.3

A

Forms: Focus Order

Elements receive focus in a meaningful order by creating a logical tab order through links, form controls, and objects

2.4.4

A

Links

Use meaningful links - provide link text that describes the purpose of the link

Links should be uniquely identified and describe the purpose of the link. Watch for areas where the same link is used for multiple elements on the same page (e.g. "Delete" links on several items should be labeled "Delete {element name}").

2.4.5

AA

Multiple Ways

Provide a sitemap or a search in addition to links to navigate

2.4.6

AA

Headings and Labels

Ensure headings and labels are descriptive

2.4.7

AA

Forms: Focus

Use default form elements to ensure focus indicator is visible when users navigate to each element

2.4.11

AA

Focus Appearance

Focus encloses the entire component with a minimum 3:1 contrast ratio

2.4.12

AAA

Focus Not Obscured

When an object receives keyboard focus, that focus is entirely visible and not obscured by other content.

Watch for this when using ‘sticky’ navigation bars or other floating content such as cookie notifications

2.4.13

AAA

Focus Appearance

When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:

• is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and

• has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.

2.5

Input Modalities

Make it easier for users to operate functionality through various inputs beyond keyboard.

2.5.1

A

Pointer Gestures

Avoid using only gestures for controls - ensure alternatives exist (ie. for pinch-to-zoom, ensure there are manual zoom controls)

Applies mostly to applications with embedded maps

2.5.2

A

Pointer Cancellation

Avoid tying event handlers to mousedown/touchstart/pointerdown events

2.5.3

A

Label in Name

Visible labels are contained within the hidden labels. Hidden labels may be more verbose to ensure uniqueness on the page.

2.5.7

AA

Dragging Movements

Dragging movements can be achieved using a single pointer if needed without dragging (ie. an alternate method to achieve the same effect is presented)

Only if using drag and drop

2.5.8

AA

Target Size (minimum)

Minimum size for pointer inputs is 24x24px.

Principle 3 - Understandable

3.1

Readable

Make text content readable and understandable

3.1.1

A

Language

Use language attributes on the HTML element (in the template)

3.1.2

AA

Language

Use language attribute to indicate a change in language (e.g. lang="fr")

On occasion, both English and French may be included on the same screen. Use the language attribute to indicate a change in page language (e.g. on an English page, tag the French elements).

3.2

Predictable

Make Web pages appear and operate in predictable ways

3.2.1

A

Forms: Focus

Use "activate" rather than "focus" as a trigger for changes of context. For example, forms should not be submitted automatically when a component receives focus

3.2.1

A

On Focus

Ensure new pages are not opened when the window is loaded

3.2.2

A

Forms: Submit Buttons

Provide a submit button to initiate a change to the page

3.2.3

AA

Consistent Navigation

Present repeated components in the same relative order each time they appear (e.g. Previous/Next buttons in the same order and location every time).

3.2.4

AA

Consistent Identification

Use labels, names, and text alternatives consistently for content that has the same functionality (e.g. always use the label "Search" for searches rather that "Search" on one screen and "Find" on another).

3.2.6

A

Consistent Help

Help (for task completion, such as contacting Transport Canada regional service center) should be a commonly referenced page, accessible in the same manner across an application and presented in the same order (email, followed by telephone number)

3.3

Input assistance

Help users avoid and correct mistakes

3.3.1

A

Forms: Error Identification

Provide text descriptions to indicate required fields that were not completed, to inform when user input falls outside the required format or allowed values.

See Error & validation messaging

3.3.1

A

Forms: Error Identification

When necessary, provide information that is not in the list of allowed values

See Error & validation messaging

3.3.2

A

Forms: Labels or Instructions

Provide descriptive labels and provide expected data format and example

See Error & validation messaging

3.3.2

A

Forms: Labels or Instructions

If the labels are not clear, provide instructions when content requires user input

See Error & validation messaging

3.3.2

A

Forms: Labels or Instructions

Use the label element to associate form controls with text labels

3.3.2

A

Forms: Labels or Instructions

When a label element cannot be used (e.g. form controls within a table) use title attribute to identify form controls. Ensure attributes are unique (e.g. Select {element name}, Quantity for {element name}).

3.3.3

AA

Forms: Error Suggestion

Provide a text description to identify required fields that were not completed

See Error & validation messaging

3.3.3

AA

Forms: Error Suggestion

Provide a text description when user input falls outside the required format or values

Provide information about how to correct input errors (e.g. field is required, list of acceptable values/format).

See Error & validation messaging

3.3.4

AA

Forms: Error Prevention

If form is a final submission or legal transaction (e.g. purchase), provide the user with an opportunity to review and correct information before submitting, or provide a "I have confirmed" checkbox in addition to a submit button, or inform the user of the allowable timeframe to make corrections.

3.3.4

AA

Forms: Error Prevention

If form causes information to be deleted, request user confirmation to continue

3.3.4

AA

Forms: Error Prevention

If form is a test, provide users with the ability to review and correct answers before submitting

3.3.7

A

Redundant Entry

Carrying forward information already entered so users don’t have to re-enter the same information (ie. addresses, licence/account reference numbers, searching while preserving previous search criteria entered, etc…)

3.3.8

AA

Accessible Authentication

If implementing your own authentication (ie. not GCKEY/SIP):

• Ensure password managers can be used via browser autofill

• Support cut and paste of passwords into password fields

• Don’t use CAPTCHAs

3.3.9

AAA

Accessible Authentication

Same as 3.3.8, but limited to an alternate means of doing a cognitive test, , or providing a mechanism to assist the user in completing the cognitive test.

Principle 4 - Robust

4.1

Compatible

Maximize compatibility with current and future user agents, including assistive technologies

4.1.1

A

Parsing

Ensure pages validate to the doctype. Validate the HTML source code using the W3C Validator. Do this before and after going through the above list as it is incredibly easy to introduce new validation issues after fixing accessibility issues.

• W3C validator
  
  

• HTML 5 validator
  
  

4.1.1

A

Parsing

Ensure opening and closing tags are used according to specification

4.1.1

A

Parsing

Ensure id attributes are unique on a web page

4.1.1

A

Parsing

Ensure elements do not contain duplicate attributes

4.1.2

A

Forms: Labels

Use the label element to associate form controls with text labels

4.1.2

A

Forms: Labels

Use the LABEL element to associate form controls with text labels. Use the TITLE attribute to identify form controls when LABEL cannot be used.

4.1.2

A

Name, Role, Value

Use accessibility API features of a technology to expose names and roles

4.1.2

A

Forms: HTML controls

Ensure div or span is not used with scripting to mimic HTML controls

4.1.2

A

Technologies

Only technologies with sufficient techniques can be used as a primary format (currently HTML, CSS, SMIL, Flash and Scripting)

4.1.2

A

HTML equivalents

Until there are sufficient techniques for PDFs available, PDFs require HTML equivalents

4.1.3

AA

Status Messages

Use ARIA role=status to present status messages or ARIA role=alert or live regions to identify errors.