Web Accessibility Guide

Advice and guidance to help web developers create improved accessibility for B.C. government web properties.

A quick guide to improving web accessibility

Once you have reviewed and listed the errors on your site or enhancements required reference the information below to address issues.

Why

Understand success criterion 2.4.1 Bypass Blocks

How

How to meet success criterion 2.4.1 Bypass Blocks

  • Positioned at the top of the page within the <body> tags generally top left corner or near the logo
  • Hidden until focused on, activated by “Tab”
  • Enables the user to skip to navigation (to get to other pages on the site). Accompanied by anchor link to the navigation interface elements on the page and ARIA role “navigation” (discussed below)
  • Enables the user to skip to main content (to get to the core information on the page). Accompanied by anchor link to the heading of the main content on the page and ARIA role “main” (discussed below)
  • Enables the user to skip to an accessibility statement (this is the website’s position on supporting accommodation and can be a location to add other methods or processes to interacting with the information or services)

Why

Understand success criterion 2.4.3 Focus Order

How

How to meet success criterion 2.4.3 Focus Order

  • Tabindexes of 0 do not hinder the sequence of the page’s tab order, however is useful to create a tab focus for items that get skipped (often widgets)
  • Tabindexes of -1 do not get a tab focus, however, can position a keyboard operator or screen reader to a desired position on the page
  • Tabindexes of 1 or more are a hindrance to the user experience and should be avoided
  • Do not introduce custom controls on a page as it may interfere with the assistive technology

Why

Using ARIA landmarks to identify regions of a page

How

To help users using screen readers and other assistive technologies ARIA tagged zones on the page helps the user determine where they are in the context of the page. ARIA labels are used to section off all zones of the web page (no content should not have a label).

Best bets on ARIA landmark labels:

  • ARIA role “banner”: used for the top of the page including main site navigation
  • ARIA role “main”: used for the main body content of the page
  • ARIA role “navigation”: used for the navigation of the site
  • ARIA role “complementary”: used for secondary information that supports the page
  • ARIA role “alert”: used for alert or call out information needed to let the user know about influencing information about the page
  • ARIA role “form”: used for online form fields collection
  • ARIA role “search”: used for search input

For more information on ARIA labelling:

  • Heydon Works – Practical ARIA examples
  • Mozilla - ARIA
 

Why

Understand success criterion 1.1.1 Non-text Content

How

  • Avoid using text in images
  • Provide a meaningful alt text for images. I.e. describe what is in the image or what it is of. (e.g. B.C. Provincial logo)
  • When using infographics ensure there is a text description available to explain
  • Do not provide alt text for meaningless images (decorative) , an empty alt tag should be used and where applicable placed as a background image using CSS

Why

Understand success criterion 2.4.6 - Headings and Labels

How

  • Ensure <h> tags are used for headings
  • Ensure the <h> tags follow a sequential order (i.e. <h1><h2><h3><h2>)
  • Avoid making headings as links
  • Do not use bold or italics as a means to create a heading
  • Do not use heading styles to emphasize text outside the context of a heading
 

Why

How

  • Abbreviations and acronyms need periods. E.g. B.C.
  • Avoid the use of text in images
  • Provide the ability to resize text
  • Use relative units for font size (percents or ems)
  • Do not highlight and underline (mimicking a link)
  • Use plain language
  • Ensure there is adequate colour contrast between front and background colours (Colour Contrast Checker)
  • Avoid the use of ALL CAPS, bold and italics
  • Avoid blinking or moving text

Why

How

  • Let the user know what they are linking to. Identify if the user will be opening another window, going to a different website or opening/downloading a document. Note, default to open in the same window
  • Do not over saturate a page with links
  • Ensure the link is meaningful. Do not say “click here”. Let the user know what they are doing when clicking, e.g. find out more about fish
  • Use anchor links to help the user skip to parts of the page quickly if there is a lot of content (like providing a table of contents) 
  • Make redirects seamless (no delay or information to confuse the user)
  • Allow the user to choose their interaction with the site (i.e. open page in new window, refresh page, pop up interaction)
  • Ensure user interaction is predictable (Opening new windows or tabs only when necessary)
 

Why

Understand success criterion 1.3.1 Information and Relationships

How

Using table markup to present tabular information

  • Do not use tables to layout content
  • Tables should represent data only
  • Ensure tables are not too complex
  • A title and description of the table is present using the <caption> tag
  • Use proportional sizing
  • Avoid spanning cells
  • Column header tables: use <th> for headers, <td> for data cells
  • Column and row header tables: use <th scope=”col”> for column headings and <th scope=”row”> for row headings

Why

Understand success criterion 1.4.3 Contrast

How

  • Check the use of colours using the colour contrast checker
  • Avoid the use of images as background behind text
  • Check images and web elements for contrast effects when placing text over a background colour (includes white background with light text)

Why

Understand success criterion 1.2 Time-based Media (Audio and Video)

How

  • Do not provide time sensitive settings on elements on the site, allow the user to interact with the beginning/ending of element use
  • Ensure there is no flashing animation
  • Provide an alternative means to interact with the information or service if the user has difficulty. I.e. captions or transcript for videos
  • Ensure the elements can be controlled using a mouse or keyboard only (must be both)
  • Do not use Flash

Why

How

  • Ensure the form can be navigated by keyboard only
  • Include form control labels, ensure the form label matches the visual rendered label
  • Ensure fieldsets are identified along with <legend> and labels. This ensures that each selectable item in the fieldset has context back to the legend
  • Include alt text for image buttons
  • Ensure form validation is accessible
  • Create an alert to identify the errors on the page providing the ability to enter the information again
  • Clearly describe the error(s) and include instructions
  • Set error form controls with <aria-invalid=”true”>. This helps the screen reader to navigate to the input errors to redo them
  • Allow resubmission and revalidation

Why

How

  • Ensure the interaction is keyboard accessible (onFocus or onBlur as opposed to onHover or onMouseOver)
  • As much as possible keep the user within the same page and window
  • Provide adequate warning of the behaviour through adding alt text to the link or including the wording in the link text
  • Use ARIA roles to assist with pop ups, rollovers and accordions