If you are having difficulties, please contact the Student Learning Support’s Academic Accommodation Support by phone at 416.598.5978, by TDD/TTY at 416.979.5274, or by fax at 416.979.5094. You can also contact Academic Accommodation Support by email, at email@example.com, or in person at the Student Learning Centre (4th floor, 341 Yonge Street).
The Chang School Website Accessibility Enhancements
A variety of accessibility enhancements have been added to the Chang School website to make it easier to use for people accessing the site with assistive technologies. This is an interim solution to improve the accessibility while we develop our new website. Many of the potential barriers that were present before the addition of these enhancements have been resolved, but there are still areas where accessibility could be further improved.
Although different assistive technologies have varying support for the accessibility features described here, most will provide support in one way or another. Many of the features make use of WAI ARIA – an emerging standard designed to help developers create interactivity for people accessing their site with assistive technology such as screen readers. We recognize that some features may not yet be supported universally; however, if you are using current browser and assistive technologies, most of what is described below should be accessible to you.
This video provides a multimedia alternative demonstration of the accessibility features described below. It shows navigation through the Chang School website using the ChromeVox screen reader.
Within Page Navigation
Users of assistive technology can navigate the Chang School website a number of ways.
Landmarks are key points in the interface. Use your assistive technology’s list landmarks feature to navigate through the landmarks described below. Selecting a landmark positions your cursor at that point, from which the assistive technology will begin reading.
The Homepage Has Six Landmarks
- Main navigation
- Left side navigation
- Main content region
- Complementary right side menu
- Footer area content info
Internal Pages Have Five Landmarks
- Main navigation
- Left side navigation
- Shopping cart/main content region
- Footer area content info
Jump to Content Bypass Link
- On internal pages, a “Skip to Main Content” link at the start of the page (accesskey “c”) takes the cursor to the top of the content area, skipping over the navigation elements at the top and left of the page. The accesskey can be pressed at any time to jump to the link. Pressing the Enter key takes the user back to the start of the content area, also known as the main content region. Some browsers may jump directly to the content area without needing to press the Enter key.
- Most assistive technologies provide a feature that will list all the headings on a page. From the heading list it is possible to select a heading and jump directly to its location on the page, from which the assistive technology will continue reading.
The homepage carousel presents a series of banner images as a slideshow representing current information about programs and activities at The Chang School. These images rotate every eight seconds. Accessibility features include:
- Carousel bypass: Just before the carousel is a hidden bypass link. When followed, it takes the cursor past the carousel to the start of the main navigation bar that follows it. Skipping past the carousel may be desirable, as it may contain many rotating panels that are time-consuming to navigate through.
- Carousel controls: At the start of the carousel, immediately following the carousel bypass link, is a series of buttons to control the behaviour of the rotating images. The Previous button rotates back through images, the Play/Pause toggle button starts and stops the rotation, and the Next button rotates forward through the images. Following these buttons is a series of numbers, one for each image in the carousel. Clicking a number brings up that image in the sequence.
- ARIA live region: When the images of the carousel begin rotating, the text associated with each image is automatically read aloud by screen readers that support live regions.
- Play/Pause accesskey: The rotation of the carousel can be stopped or started by pressing the “p” accesskey. Depending on the browser, this may include pressing the Alt or Ctrl keys, or both, along with the accesskey to bring focus to the button. Some browsers will activate the button, while others will require pressing the Enter key to activate it.
The main navigation bar, which appears below the carousel on the homepage and at the top of internal pages, can be controlled using just a keyboard.
- Tab key: The Tab key moves the cursor in and out of the main navigation bar. Press the Tab key to enter the menu and press it again to skip over the menu to the element that immediately follows.
- Right and Left Arrow keys: Once in the menu, use the Right Arrow key to move through the primary menu items. Use the Left Arrow key to move back through these menu items.
- Down and Up Arrow keys: While on a primary menu item, press the Down Arrow key to open its submenu, then press the Down or Up Arrow keys repeatedly to move through the items in that submenu.
- Right Arrow key: While in a submenu, if a child submenu is announced, use the Right Arrow key to move into that submenu.
- Left Arrow key: While in a submenu or a child of a submenu, use the Left Arrow key to move from the child to its parent menu, then again to move from that submenu directly back to the primary menu items. Menus will not be more than two levels deep.
YouTube HTML5 Player
The experimental YouTube HTML5 player has replaced the original Flash-based video player. All the elements in the player interface can be controlled using only a keyboard.
- 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.
- 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).
- 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.
To enable captioning for videos on the Chang School website, navigate to the video player’s controls and select the Subtitles/CC button.
Some Issues to Note about the YouTube HTML5 Player
When navigating through the homepage using the headings list in JAWS, pressing the Tab key to move between the YouTube video heading and the heading that follows in the right menu (described below), the player will grab the cursor’s focus and pull it to the Play button.
JAWS works reasonably well with the HTML5 player, with the ability to navigate and operate the player without too much effort. However, there are cases when the focus on the player is lost when a control is pressed and the user must navigate back to the player from the start of the page. In such cases, use your assistive technology’s list landmarks feature to find your way back to the player at the start of the main content region and resume.
ChromeVox users will be able to navigate and operate the main features in the player (Start/Stop) but will not be able to use many of the secondary features. Though accessible by keyboard, many of the secondary features are not announced by ChromeVox when they are encountered.
Homepage Right Menu Accordion
At the right side of the homepage, following the main content area, is a series of boxes arranged in a column that contain various quick links and current information. By default the first box (News and Events) is opened when the page loads. Clicking on a heading in the menu opens or closes an associated box below. Only one box displays at a time. If a box is opened and another heading is clicked, the previously opened box will close.
- Tab key: Use the Tab key to navigate into the menu, to move between headings, and to exit the menu after the last heading. The Tab key can also be used to move between elements within boxes that open below headings.
- Enter key: Use the Enter key while a menu heading is active to toggle its box open and closed.
Internal Page Left Menu Accordion
While on pages other than the homepage, a navigation menu often appears down the left side of the page. This menu may include submenus. Typically the first submenu is opened and the ones that follow are closed, similar to the way the right menu accordion displays on the homepage, described above. The keyboard can be used to navigate and operate the left side menu.
- Tab key: Use the Tab key to move from item to item in the left side menu.
- Enter key: Use the Enter key to open and close submenus and to follow links to the associated page on the site.
Some Issues to Note about the Left Side Menu
When a link is followed in the left menu, the page will reload and the cursor will be repositioned at the start of the newly opened page. Assistive technology users can either use the Tab key to navigate into the just loaded page, and follow the “Skip to Main Content” link, or use the list landmarks feature and jump to the pages main content region to begin reading the content associated with the link followed.
Program Areas Tab Panels
When navigating through the main content region of Areas of Interest and Professional Competencies Development in the Courses and Programs section of the site, page content is organized using a series of tab panels. These panels consist of a number of tabs across the top of the main content region, each of which has an associated tab panel that opens below when clicked. Only one tab panel displays at a time. You can navigate through the tabs and tab panels using only your keyboard.
- Tab key: Once you have accessed the first tab, use the Tab key to move to the next tab, and Shift-Tab to move back.
- Enter key: When a tab is active, press the Enter key to open its associated tab panel below.
- Arrow keys: After a tab panel has been opened, use the Down Arrow key to move into the panel and through the elements contained within it, such as links or form fields. Use the Up Arrow key to move back through items in the panel and to return to the tab that opened the panel. From there use the Tab key to move to another tab and press Enter to open its associated panel.
Some Issues to Note about the Tab Panels
JAWS users may not be able to use the Down Arrow key to move into an open tab panel. They can still get to the panel by pressing the Tab key repeatedly to navigate through the adjacent tabs until they reach the panel. To return to the tabs after reading the content of a panel, either use the accesskey “c” to find the “Skip to Main Content” link or use your assistive technology’s list landmarks function and choose the main content region to return to the top of the page. Then press the Tab key to reenter the tab list. ChromeVox users should be able to navigate between tabs and panels using the Arrow keys, as described.
Program Areas Courses Accordion
Within the tab panels, the courses panel contains a list of all the courses in that program area, organized by category. Categories are arranged in an accordion menu similar to the right menu of the homepage and the left menu of internal pages. Clicking a category heading opens a box below that displays a list of available courses. Navigating through the categories by keyboard is similar to navigating through the other accordion menus.
- Down Arrow key: After the course tab is clicked, opening a panel with a list of courses and categories, press the Down Arrow key to move from the tab into the panel.
- Tab key: Once the panel is accessed, use the Tab key to move between each of the category headings listed on the panel. Also use the Tab key to navigate between links in each of the categories when they open.
- Enter key: Use the Enter key to open and close the categories.
Other Accessibility Features
- Visible tab focus when navigating with a keyboard
- Meaningful link text
- Text alternatives for all images
- Captions for all videos
- Contrast ratio of 4.5:1 or greater between text and background colours
- Consistent navigation
- Properly nested headings
- Explicitly labelled forms
Known Accessibility Issues
- Shopping cart (third party)
- Some videos still use the YouTube Flash player
- Links to external sites that may not be accessible
- Some features are not sized using relative measure