About the Knowledge Base

This shared space provides the City of Toronto's development, QA and UX communities a detailed and evolving set of standards, practices and techniques for ensuring digital accessibility of City of Toronto websites and web applications.

The details within will be 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 are intended to:

Provide concrete 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 standard 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.

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.

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.

In This Space

Expand all Collapse all