This shared space provides the City of Toronto's development, QA and UX communities with an evolving source of knowledge for ensuring the accessibility of City websites and web applications.

The details within are useful for both remediating issues in existing applications and adopting an Accessibility by Design approach during design and development.

The pages in the Knowledge Base:

provide concrete, code-based development techniques to improve accessibility in City web applications and content
explain why an issue or technique is important to users
identify the City’s recommended solutions for areas of confusion about WCAG requirements

Please feel free to contact the AODA Compliance Public Facing Project Team at digital.accessibility@toronto.ca with any questions or comments.

Knowledge Base Conventions

CSS Classes

This Knowledge Base uses a variety of code conventions. The following CSS classes are referenced in the code examples.

.sr-only

Bootstrap class name: .sr-only

Colloquial names: “screen reader-only”, “visually hidden”

Purpose: Visually hide content, but leave it available to users of assistive technologies such as screen readers.

Context: Hiding content using display: none will hide the content from all users (screen reader users and visual users). The CSS associated with this class or technique ensures screen readers can still read it.

Examples of when to use:

Providing a text alternative for an icon button like a magnifying glass/search button
Providing text intended to help non-visual users understand the interface.

.sr-only-focusable

Bootstrap class name: .sr-only-focusable

Colloquial names: “visible on focus”

Purpose: Visually hide content, but make it visible when it receives keyboard focus (e.g. when a user “tabs” into it using the TAB key)

Context: Some content may not be necessary for mouse users, but can help keyboard users (both visual users and screen reader users). This class is generally used for skip links that allow keyboard users to skip over a block of repetitive content and move directly to the main content of the page.

Examples of when to use:

Skip links before content that a keyboard user may want to jump over, e.g. a page header or a section navigation.

Terminology

Visual and Non-Visual Users

Visual User: Someone who relies on sight alone to understand page content.

Non-Visual User: Someone who uses means other than sight to understand page content. Examples might include a screen reader user.

We use the terms “visual user” and “non-visual user” (rather than, for example, “sighted” and “blind”) because a sighted user might be consuming a page in a non-visual way. For example, a sighted user with dyslexia might use a screen reader to help them understand content. The distinction is one of how a user is consuming the content, rather than making assumptions about why they are consuming it that way.