ACPF Project
- Kim Collins (Unlicensed)
- Marcel Banal
Owned by Kim Collins (Unlicensed)
The AODA Compliance Public Facing (ACPF) Project team is an Information & Technology Division initiative responsible for digital accessibility leadership within the City.
The scope of the project includes:
Evaluation of all public-facing web applications for digital accessibility.
Evaluation of high-priority internal-facing applications for digital accessibility.
Coordination of remediation with application owners.
Ensuring compliance is met on an ongoing basis.
Delivering digital accessibility training, education and awareness.
Enhancing City processes to include Accessibility by Design.
Experienced ACPF Project team evaluators, using the City of Toronto Digital Accessibility Testing Guide as a guide, will evaluate applications against the list of criteria in the Principles: Supported WCAG Success Criteria page.
Please feel free to contact the AODA Compliance Public Facing project team at digital.accessibility@toronto.ca with any questions or comments.
Space Index
|
|||||||||||||||||||||||||||||||
0-9 |
AAccessibility Permission FlagTo allow assistive technology to read the document How to fix File > Properties > Security Choose "No Security" from the "Security Method" dropdown list > OK This will override the security settings of the document if any has been applied. Screenshot Acce
ACPF Project
The AODA Compliance Public Facing (ACPF) Project team is an Information & Technology Division initiative responsible for digital accessibility leadership within the City. The scope of the project includes: Evaluation of all public-facing web applications
Adobe Acrobat Pro
In this section How to perform an accessibility check using Adobe Acrobat Pro Where to access the report What does the report look like How to perform an accessibility check using Adobe Acrobat Pro Follow the steps below: Go to Tools. Select Accessibility
Alternate Text Accessibility Criteria
To provide text alternatives for images By providing alternative texts for images, we can vocalize the text by using text-to-speech technology for the benefit of users with vision disabilities. It will also provide and alternative for "words in images" t
Anti-Patterns
What is an anti-pattern? An anti-pattern is “a common response to a recurring problem that is usually ineffective and risks being highly counterproductive” (Wikipedia https://en.wikipedia.org/wiki/Anti-pattern). In the context of accessibility, these are
AODA Compliance Public Facing Project
This is the home page for your documentation space within Confluence. Documentation spaces are great for keeping technical documentation organised and up to date. 1incompleteCustomise the home page - Click "Edit" to start editing your home page2incomplete
ARIA
HTML is, at its essence, a markup language and not a programming language. Accessible Rich Internet Applications (ARIA) provides a means to cover the gaps in semantic HTML. With ARIA, we can add roles, states, and properties to HTML content. For example,
Associated with Content
To ensure that alternate text is always an alternate representation for content on the page If an element has alternate text, but does not contain any page content, there is no way to determine which page it is on. If the Screen Reader Option in the Readi
Autocomplete / Autofill
The autocomplete attribute allows the purpose of certain input fields to be programmatically determined. User agents and assistive technologies can make use of this programmatic information in a variety of ways, most commonly to autofill forms with a user
|
||||||||||||||||||||||||||||||
BBookmarksTo make it possible for users to navigate using an outline of the content/bookmarks in long documents This is a conventional means of navigation that benefits all the users. It will also help users with cognitive disabilities to navigate through the docum
Buttons and Links
Links vs Buttons Links and buttons have differences in both appearance and behaviour. The purpose of this section is to help you better understand how links and buttons can be used in an accessible design. Behaviour Typically, links go somewhere while but
|
CCarouselsCarousels are generally not accessible. They are very difficult to develop and maintain to be accessible. We strongly discourage the use of carousels. Carousels, commonly also referred to as “slide shows” or “sliders”, display a series of content items on
Character Encoding
To ensure that user is presented with readable text How to fix Ensure that necessary fonts are installed on your system Use an OpenType font (preferably) in the original document / authoring platform and re-create the PDF Screenshot 2019-05-03 09.06.31 -
Checkboxes
Checkboxes allow a user to select a single value. In groups, checkboxes allow a user to select one or more values from the group. When to use checkboxes Use a single checkbox to allow a user to provide confirmation (e.g. “I have read the terms and conditi
City of Toronto Digital Accessibility Principles & Knowledge Base
The City of Toronto leads by example, ensuring that all our web-based services and information are accessible and usable by residents, businesses, visitors and City staff. Accessibility and usability are the combination of a number of factors, and not sim
Colour Contrast
To make contents accessible with high colour contrast so that users who are colour blind will be able to view the content without missing out on any visual cues How to fix Choose one of the following options: Option #1: Edit > Preferences > Accessibility
Contrast
Visual Contrast The purpose of this document is to help you better understand how colours and colour contrast can be used in an accessible design. Note WCAG 2.1 specifies multiple contrast ratios that apply to various contexts. For body text alone, WCAG h
|
||||||||||||||||||||||||||||||
DDocument Level Accessibility CriteriaIn this section Document Level Accessibility Criteria
Dropdowns, Popups, and Tooltips
Content that is revealed on focus and/or hover (such as custom tooltips, sub-menus, nonmodal popups that display on hover and focus - referred to on this page as "popups") can present a variety of challenges to different groups of users. People who have d
|
EEmailWhile the information provided in this page will assist email authors, the purpose of this page is to provide information on ensuring email generated by applications is accessible. Emails have several development issues because email clients have differen
|
||||||||||||||||||||||||||||||
FField DescriptionsTo ensure that all the form fields are tagged, so that assistive technologies like screen readers will be able to announce what the input fields are associated with. How to fix Tools > Prepare Form > Make sure that you're in the "Edit" mode > Right click
Figures Alternate Text
To ensure that images in the document either have alternate text or are marked as artifacts How to fix Option #1: Tools > Accessibility Checker panel > right click on the image and select "Set alternate text" Option #2: "Tags" panel > select the figure
File Download Links
All users should be informed when a link will open a document or download a file, such as a PDF file, rather than open an HTML page. For this reason file download links must indicate: The format of the file (e.g., PDF, Word, etc.). Whether the link also o
Focus
Focusable Elements If an element is interactive - i.e. if a mouse user can interact with it by hovering over it or clicking on it - those same interactions should be available using the keyboard alone. Each interactive element must first be able to receiv
Form Validation
Everyone makes mistakes. When completing a form, users need to know if they made a mistake, where it is, and how to fix it. The two most common places for error messages are at the top of the form (the “Global” error message) and inline with (beside or be
Forms
Forms have several unique issues that require careful attention. The information in this section is intended to provide support for some common issues that arise when developing accessible forms. If forms are designed using native semantic HTML, many spec
Forms Accessibility Criteria
In this section
|
G |
||||||||||||||||||||||||||||||
HHeadersTo ensure that all the tables contains a header How to verify and fix First, perform an accessibility check, Go to Tools > Accessibility > Full Check Then verify your table in under Tools > Accessibility > Reading Order > Select the table > click on Tabl
Headings
Headings have a purpose beyond their visual design as large bold text. They provide detailed information about a document's structure that can help users quickly understand the content of the page. Users of assistive technologies, such as screen readers,
Headings Accessibility Criteria
to indicate start of main content to mark up section headings within the main content area to demarcate different navigational sections, such as top or main navigation, left or secondary navigation, and footer navigation to mark up images (containing text
Hides Annotation
To ensure that there is no alternative text is present in an annotation nested under a parent element since screen readers do not read them How to fix Go to View > Show/Hide > Navigation Panes > Tags. Right-click a nested element in the Tags panel and cho
|
IImage-only PDFTo convert "images of text" to actual text so that: assistive technologies can read and extract the words users can select, edit, resize and re-flow text users can change the background colour users can manipulate the PDF for accessibility How to Fix Opti
Inline Styles
Avoid using inline styles.. Put styles in an external stylesheet or <style> block on the page. Inline CSS styles is styling coded inline with an element in HTML, e.g. <p style="border: 1px solid red">. Users may choose to disable CSS. Some users, particul
|
||||||||||||||||||||||||||||||
J |
KKnowledge BaseThis 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 exi
|
||||||||||||||||||||||||||||||
LLandmarksUse as few landmark regions as possible while still conveying the gist of the entire screen. ARIA landmark roles divide a page into sections with clear purposes. Landmarks provide quick access to the major sections of a page (e.g. banner, main, footer), a
Links that open in new window
Link text should always indicate to the user: where the link will go whether the link will open in a new window or tab (i.e. has target="_blank") Terminology Target: The target attribute identifies where the linked url will open. If no target attribute i
List items & Lbl and LBody
To check whether each List Item (LI) is a child of List (L). Lists must have the following structure: A List element must contain List Item Elements. And, List Item Elements can only contain Label Elements and List Item Body Elements. Some assistive techn
Lists
Using the correct semantic list elements for your content is important. It helps different users (e.g. screen reader users) to understand and navigate your page. While each type of list has a default visual style provided by the browser, each can be style
Live Regions
Live regions are used to ensure that dynamic changes to page content are announced to users who might not be able to visually see the content change. Certain ARIA roles (alert, log, or status) or the aria-live attribute are used to create live regions. Th
Logical Reading Order
To manually verify the reading order of the document How to verify Tools > Accessibility > Reading Order View > Show/Hide > Navigation Panes > Tags Use a screen reader to read the PDF. Listen to ensure that the information presented is properly structured
|
MModals / DialogsA modal dialog is a window overlaid on the screen. Modals interrupt a user's task to either notify them of critical information or to force them to make or confirm a decision. The user must interact with the modal before returning to the main window. Moda
|
||||||||||||||||||||||||||||||
NNavigation LinksTo ensure that links are accessible to screen readers To ensure that navigation links are not repetitive OR that there is a way to skip repetitive links How to verify Use the screen reader and "Tab" through your document, listening to ensure that your lin
Nested Alternate Text
To ensure that nested images do not contain alternative text as screen readers are unable to read them How to fix Remove the alternative text from the"Properties" dialog box Tag them as "Background Artifacts" if they do not provide any valuable informatio
|
OOther elements alternate textTo ensure than there are alternative text provided for content, other than figures, such as multimedia, annotation or 3D model. How to fix Go to View > Show/Hide > Navigation Panes > Tags Right-click on the element of error and select Properties from the
|
||||||||||||||||||||||||||||||
PPAC 2021How to perform an accessibility check using PAC 2021 Upload your PDF in the PAC 2021 checker and select "Select PDF File" on the left hand side. image-20231026-142509.png PAC 2021 will display its report. Click on "Results in Detail" to generate a detaile
Page Content Accessibility Criteria
In this section Page Content Accessibility Criteria
Page titles
Each web page must have a <title> element that describes the page's topic or purpose. Why are page titles necessary? <title> elements help users by: identifying a page within a set of browser tabs identifying the topic or purpose of a page immediately, wi
PDF Accessibility
How do we make a PDF accessible Tag your documents. Along with tagging your document, it is very important to combine your tags with other accessibility aspects as listed below: Primary Language of the document Meta Data Font Size Font Embedding Colour C
PDF Accessibility Criteria
In this section PDF Accessibility Criteria
Placeholder Text
Avoid using the placeholder attribute. The placeholder attribute has several usability and accessibility issues. It is never a replacement for a programmatically associated <label> element, and should not be used to convey information a user needs to be a
Primary Language
To check if the primary text language of the PDF is set so that screen readers can switch to the appropriate language How to Fix Choose one of the following: Option #1: Accessibility Checker > Primary Language > Right click and select "Fix" > Choose your
Principles: Supported WCAG Success Criteria
Guaranteeing best practices in web development, design and content, the Web Content Accessibility Guidelines (WCAG) form the backbone of the City’s Digital Accessibility Principles & Knowledge Base. The following WCAG success criteria make up the City's D
|
Q |
||||||||||||||||||||||||||||||
RRegularityTo check if the table contains the same number of columns in each row, and rows in each column, so that, assistive technologies like screen readers can detect and accordingly announce the total number of rows and columns. This is especially helpful for no
Repetitive Content for Screen Readers
Ensure the same content is not repeated multiple times by screen readers. Examples include misuse of aria leading to the same text being repeated twice. Ensuring content is usable by and for everyone means that care must be used when building both the vis
Resources for Tables
Creating Accessible Tables https://webaim.org/techniques/tables/data W3C Tables Tutorial https://www.w3.org/WAI/tutorials/tables/ WET Style Guide: Tables http://wet-boew.github.io/wet-boew-styleguide/v4/design/tables-en.html ARIA Presentation Table Error
Responsive Tables
To create an accessible responsive table, it is necessary to maintain the semantics of the table so that screen reader users can still navigate it in the same way. For information on how to create an accessible responsive table, see Tables, CSS Display Pr
Rows
To verify if each TR in a table is a child of Table, THead, TBody, or TFoot How to fix Use the Tags pane to ensure that TR is hierarchically placed in the document's structure Screenshot RowChildofTable.png
|
SScreen FlickerTo ensure that there is no flickering content, such as animations and scripts, as they can cause seizures for users who have photosensitive epilepsy and for those who uses a screen magnifier How to fix Remove or modify the script that causes screen flicke
Screen Reader Pronunciations
In general, don't intervene in how a screen reader will pronounce the content on your page. Exceptions include: Jargon and Branding. Screen readers can output content in a variety of ways. This page is concerned with screen reader content presented audito
Screen Readers
Screen readers can output content in speech and/or braille. Text-to-speech screen readers provide audio output using a voice synthesizer. Depending on the technology used, this synthesized voice can sound very robotic or nearly natural. Screen reader user
Selects
The <select> element is used to create a list of options often referred to as a drop-down list. Each option in the drop-down list is marked up as an <option> element nested within the <select>. Like other form controls, a <select> must have a programmatic
Single Page Applications
There are several important considerations to keep in mind for developers when they choose to create a single page application (SPA). This document aims to provide guidance on how to create an accessible single page application user experience - outlining
Skip links
A “skip link” is a visually-hidden anchor element used to skip over repetitive blocks. A webpage can have one or more skip links https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G124.html to move to specific parts of the page (e.g., skip to main cont
Structure
The information in this section is intended to provide support for some common issues in structuring content. Semantic HTML is a critical tool in the development of accessible structured web content. Non-visual users rely on the programmatic information p
Summary
To provide a summary of the table to improve accessibility. This is optional but nice to have if you have a complex table, summarizing the table will allow the user of assistive technology to quickly determine if the content is of any interest compared to
|
||||||||||||||||||||||||||||||
TTab OrderTo ensure the tab order is in conjunction with the document structure How to fix Page Thumbnails on the Navigation Pane > Page Properties > Tab order > Use document structure > OK > Repeat these steps for all the thumbnails in the document Screenshots Pag
Table Anti-Patterns
Layout Tables Tables are for data. Do not use tables for layout or styling. This is the purpose of CSS. However, there are some areas with exceptions: Email encoded in HTML need to use tables for layout because of different email client behaviour. Updatin
Table Notes and Footnotes
Where the data or other content in the table requires additional notes, these notes need to be semantically associated with the table. The tbody element defines the body content of a data table. A table can have more than one tbody. Table notes should app
Tables
In this page: A table is used to present data in tabular form. Do not use tables for layout. General This document provides information on appropriate ways to design tables. Code examples are provided where appropriate. Name Floors Year Built City Hall 27
Tables Accessibility Criteria
In this section
Tagged Annotations
To ensure that all the annotations such as comments and highlights are included as tags or marked as artifacts How to fix Option #1: "Content" pane View > Show/Hide > Navigation Panes > Content > right click on the contents that you want mark as an artif
Tagged Content
To ensure that all the content in the document is tagged or marked as an artifact How to fix Option #1: "Content" pane: View > Show/Hide > Navigation Panes > Content > right click on the contents that you want mark as an artifact and select "Create Artif
Tagged Form Fields
To ensure that all the form fields are tagged, so that assistive technologies like screen readers will be able to announce what the input fields are associated with. How to Fix Option #1: Tools > Accessibility > Autotag Form Fields Option #2: Tools > Prep
Tagged Multimedia
To ensure that all the multimedia are tagged or marked as an artifact How to fix Option #1: "Content" pane: View > Show/Hide > Navigation Panes > Content > right click on the contents that you want mark as an artifact and select "Create Artifact" Option
Tagged PDF
To check if the document is tagged How to fix Choose one of the following Option #1: Tag your document in the authoring platform and re-create the PDF. Option #2: Tools > Accessibility > Autotag Document Option #3: Tools > Accessibility > Reading Order Op
Testing Guide
This document describes the formal testing process of the ACPF Project. The City evaluates applications against WCAG 2.1 https://www.w3.org/TR/WCAG21/ Level AA, along with a set of established best best practices and WCAG 2.1 AAA criteria outlined in t
TH and TD
To ensure that in a table structure, TH and TD are children of TR How to fix Ensure that TH and TD are children of TR Screenshot RowChildofTable.png
Time Limits
What constitutes a time limit? Any process that happens without the user initiating it, after a set time or on a periodic basis. Examples include: logging user out after a set period of time time limit to complete a task time limit to read content before
Timed Responses
To ensure that timed responses are disabled so that users have enough time to read and use the content. This criteria checks for forms with JavaScript How to fix If your document has forms with JavaScript, disable those scripts that impose a timely user r
Title
To report if there is a title present in the application's title bar. Titles helps provide an idea of what the PDF/document consists of. How to fix File > Properties > Description > Enter your title in the "Title" input field Click "Initial View" and choo
Tools for Manual Review
In this section Colour Contrast Analyser NVDA Screen Reader JAWS Screen Reader Colour Contrast Analyser WCAG 2.0 Requirements: Level AA requires a contrast ratio of at least 4.5:1 for normal text 3:1 for large text at least 3:1 for graphics and user inte
Tooltips
The title attribute is not well supported by assistive technologies. This page provides information related to custom tooltips. Tooltips are small pop-up messages that contain supplemental helper information. They are often used to clarify information req
Types of Tags / Elements
In this section You will find the different types of tags and what they stand for, segregated according to the sections listed below: Container Tags What they stand for <Document> Document element. The root element of a document’s tag tree. <Part> Part el
|
UUse of ColourSome users cannot perceive colour, or have limited colour perception. Other users may be viewing your web site or application in monochrome. Some users will choose to view in grayscale to reduce distraction. For these users, information must not be convey
|
||||||||||||||||||||||||||||||
VVirtual Tour Apps - Accessibility ConsiderationsObjective: This document aims to capture the accessibility features required for applications that look like the Google Map Street View. This type of application allows users to view the environment of a remote location where they may not be able to acces
Visual Design
For many users, the visual design of an application or web page can have a significant impact on its usability and accessibility. The information in this section is intended to provide support for some common accessibility issues with visual design. In th
|
W |
||||||||||||||||||||||||||||||
X |
Y |
||||||||||||||||||||||||||||||
Z |
!@#$ |
||||||||||||||||||||||||||||||