Skip to Main Content
You are now in the main content area

Responsive Template Accessibility Features

The responsive templates have many accessibility enhancements to improve access for the widest possible audience, including people who are using assistive technologies. Due to assistive technologies having varying support, some features may not be universally supported. We recommend using a current browser and assistive technology for an optimal experience.

On this page

Text Size 

Due to the responsive design, text size can be increased over 200% without losing access to content or functionality, and without the need for horizontal (left to right) scrolling. Horizontal scrolling may be required on pages with large HTML tables.

In most browsers, you can adjust the text size by pressing the Ctrl (control) key or ⌘ (command) key in combination with the + or - keys.

Navigation 

Landmarks are used to differentiate sections of content as well to improve navigation using an assistive technology. Some landmarks have been labelled to improve the context or purpose, such as a “Global navigation” to denote this landmark is featured across all Toronto Metropolitan pages on the new website. Use your assistive technology’s list landmarks feature to navigate through the landmarks described below.

Skip to Main Content Bypass Link

All pages have a “Skip to Main Content” link at the start of the page that can be accessed by pressing the Tab key. Pressing Enter on this link will take the cursor to the top of the main content area, skipping over all navigation elements.

Landmarks

All pages may have up to 9 landmarks:

  • Global navigation
  • Search
  • Banner: The website title found in the banner region can be used to quickly navigate to the homepage of a website.
  • Primary Navigation
  • Main content region
  • Complementary sidebar
  • Secondary Navigation
  • Footer
  • Footer area content info

Heading Navigation

The responsive template facilitates properly nested heading structure. On the homepage of a website, the heading level 1 exists in the banner region. On all other internal pages, the heading level 1 begins at the start of the main content area. Most assistive technologies provide a feature that will list all the headings on a page. Use the heading shortcut key to navigate different headings within the page.

  • JAWS, NVDA & Windows-Eyes: Press the H key
  • VoiceOver: Press VO + H
  • ZoomText: CTRL + H

Navigation Menus

All navigation bars can be controlled using just a keyboard.

If you are on a Global Navigation menu:

  • Tab key: Use the Tab key to move the cursor in and out of the navigation menu. Use keyboard combination Tab + Shift key to go back. If a collapsed button menu is announced, press Enter to expand and access submenu.
  • Down and Up Arrow Keys: While on a expanded button menu, use the Tab or Down and Up arrow keys to move through the items. To exit navigation menu, press Tab key until you leave navigation landmark.

If you are on a Primary or Secondary Navigation menu:

  • Tab Key: Use Tab or keyboard combo Tab + Shift key to move through menu items.

Accordion Component

Some pages have an “Accordion” in the main content area, which is a series of boxes arranged in a column that contain various information and links. On some pages, the first box may be opened by default when the page loads. Clicking on a heading will open or close an associated box below. If a box is opened and another heading is clicked, the previously opened box will close. All accordions are keyboard friendly.

  • Tab key: Use the Tab key to navigate into and between headings, and to exit Accordion.
  • Shift + Tab combo: Use The Shift + Tab keyboard combo to go backwards.
  • Enter key: Use the Enter key while a menu heading is active to toggle its box open and closed.

Screen Reader Navigation and Accordions

A screen reader will announce the name of the accordion tab followed by its collapsed or expanded state, while the other tabs will remained “collapsed” until pressed opened.

JAWS:

  1. Use the Tab key or Shift + Tab combo, or alternatively use the Up and Down Arrow keys to move between tabs.
  2. To view content associated with tab, use the JAWS (Insert) key + Alt + M key. Then use the Up or Down Arrow keys to navigate the contents of the tabpanel.

NVDA:

  1. Use the Tab key or Shift + Tab combo, or alternatively use the Up and Down Arrow keys to move between accordion.
  2. To open or expand “tabpanel”, press Enter key and use Up and Down Arrow Keys to navigate content.

VoiceOver:

If the cursor is on an Accordion box, VoiceOver will announce the name of the heading followed by “expanded tab” or “collapsed tab”.

  1. To open associated box, press VO + Space key or Enter key. If the box is opened or if tab is expanded, the following element will repeat the heading name followed by “tabpanel”.
  2. To open “tabpanel”, press keyboard combo VO + Shift + Down Arrow. Then use VO + Left Arrow or VO + Right Arrow to read content line by line.

Tab Panel Component

Some pages have a “Tab Panel” in the main content area, which consists of a number of tabs in a list, each of which has an associated tab panel that opens below when clicked. The functionality of this component is similar to the Accordion, although is visually styled differently. Only one tab panel displays at a time. Tabpanels are keyboard friendly. By default the first tab panel is open.

  • Tab key: Press the Tab key or Shift + Tab combo to move between tabs.
  • Enter key: Press the Enter key on a tab to open its associated tab panel below.

Screen Reader Navigation and Tab Panels

A screen reader will announce the name of the tab followed by “expanded tab” while the other tabs will remained “collapsed” until pressed opened.

JAWS:

  1. Use the Tab key or Shift + Tab combo, or alternatively use the Up and Down Arrow keys to move between tabs.
  2. To view content associated with tab, use the JAWS (Insert) key and Alt + M key. Alternately use the Up or Down Arrow keys to navigate to the tabpanel.

NVDA:

  1. Use the Tab key or Shift + Tab combo, or alternatively use the Up and Down Arrow keys to move between tabs.
  2. Use Up and Down Arrow keys to navigate to tabpanel content area.

VoiceOver:

  1. Press Tab key to move between tabs. Then press VO + Space key or Enter key to open respective tab panel.
  2. To view content in associated tab panel, press Tab key until you hear the name of the tab followed by “tabpanel” and press keyboard combo VO + Shift + Down Arrow. Then use VO + Left Arrow or VO + Right Arrow to read content line by line.

Slideshow Component

The homepage and some internal pages may have a carousel that presents a series of images with a caption. Slideshows usually present current information, news, events or activities. These images rotate every 5 seconds by default. The slideshow contains a Previous, Next, and Pause button. Once keyboard focus has been placed in a slideshow area, both Left and Right arrow keys can be used to toggle slides.

Screen reader accessibility of Slideshow

The number of slides is announced when entering the slideshow area. It’s recommended to press the Pause button when navigating slides. The slideshow presents content in a loop, therefore you can traverse slides with just the “Previous” button exclusively. For efficient navigation, it is recommended to navigate backwards to the Previous button. Once Previous button is activated, navigate forward to the next line to access the contents of the new slide.

Search & Contacts Directory

The Search page can be used to search for internal webpages, faculty and staff. Search results are displayed in the Tab Panel component and may be paginated if there are multiple search results. The first Tab Panel displays website results, the second Tab Panel displays search results for people. The Search results are structured using properly nested headers for easy screen reader navigation. Search result titles are formatted as Heading Level 3’s, similar to Google’s search results page, and also indicate the file type.

The second Tab Panel labelled “People” contains search filters such as “Filter by Department” and “Filter by Surname”. If navigating towards the end of the search results, content may be paginated, otherwise screen reader users can access the secondary filters labelled as “Modify surname filter”, “Modify department filter” and “Modify search term”. Enabling a filter will bring automatic focus to the top of the search results.

Pagination

Pagination occurs when there is multiple results or items on a page. Pagination is a mechanism to condense or organize these results so only a few results are seen at a time to improve readability. Paginated content may be found in some components like news or event lists, and on the Search page.

Pagination contains the following accessibility features:

  • Descriptive text for screen reader users indicating what page you are on of paginated content. For example, “You are currently on page 2 of 12”.
  • When navigating to different pages, cursor automatically receives focus to top of paginated content.
  • Pagination mechanism contains an ARIA navigation landmark.
  • Pagination numbers contain extra padding to improve target size or ‘clickable’ area.

YouTube Player

If you are on a YouTube frame:

  • Tab key: Press the Tab key to move in and out of the player, and to move between controls in the interface of the player.
  • Enter key: After accessing a control with the Tab key, press the Enter key to turn on or turn off the control, such as starting and stopping a video or muting and unmuting audio.
  • Left and Right Arrow keys: Use the Left and Right Arrows keys to jump ahead or move back through a video while the volume control is active.
  • Up and Down Arrow keys: Use the Up and Down Arrow keys to raise or lower the volume when the volume control is active (announced as “up down slider” when navigating with JAWS or “slider” on VoiceOver).

To enable captioning for videos, navigate to the video player’s controls and select the Subtitles/CC button.

Other Responsive Template Features  

  • Contrast ratio of 4.5:1 or greater between text and background colours, as per WCAG 2.0 AA guidelines
  • Explicitly labelled forms
  • Visible tab focus when navigating with a keyboard
  • Meaningful link text
  • Consistent navigation
  • Text alternatives for images

reCAPTCHA V2 for Forms

The responsive template makes use of Google’s ReCAPTCHA V2 for security and the prevention of spam on all forms. ReCAPTCHA works with major screen readers such as ChromeVox, JAWS, NVDA and VoiceOver.

For help, please visit Google’s ReCAPTCHA accessibility section. (external link) 

Google Maps Widget

On your keyboard, press the Tab key to navigate to the map widget. To move around the map with a keyboard, use the arrows keys. To zoom in or out of the map, press + or -.

For help, please visit Google’s Accessibility in Google Maps section. (external link) 

Indication of File Type or Link Purpose

All hyperlinks containing links to external websites, PDFs, Word documents, Google Docs, and many more - are automatically marked with the appropriate icon based on the file type. The file type will also be announced within the hyperlink for screen reader users.

Image Component

Wherever an image is used to increase the clickable area of a hyperlink in combination with overlay text, the hyperlink anchor wraps around both the image and overlay text to ensure the destination of the URL is clear and purposeful.

Access Keys

In order to avoid any conflict with personal access keys you may have set up on your computer, we have chosen not to implement access keys.

Sitemap

Some websites feature a sitemap. A sitemap can be used as an alternative way to navigate a website. The link to the sitemap can usually be found in the footer area.

Website Accessibility Feedback & Help 

For website accessibility inquiries and help, please email accessibility@torontomu.ca

 

Go back to Table of Contents.