City Tech OpenLab

Accessibility of the OpenLab

This page describes the accessibility features of the OpenLab. Visit the CUNY IT Accessibility site for resources and information on technology accessibility for students, faculty, and staff at The City University of New York (CUNY). For information about making your work on the OpenLab accessible to all, visit the Accessibility on the OpenLab section in Help or the City Tech Library’s Introduction to Accessibility module.

Accessibility means ensuring that people with disabilities can use, interact with, and contribute to websites, web tools, and the materials they contain. Making websites and materials accessible also often makes them easier for everyone to use and understand.

The OpenLab is built using WordPress and other software created by the WordPress community; see WordPress’s Accessibility Coding Standards for more information. In addition to ensuring that the OpenLab follows the latest accessibility guidelines, as described below, the OpenLab team reviews all plugins, themes, and other custom code installed on the OpenLab for compliance.

Our goal is to ensure that the OpenLab is accessible for all users by complying with WCAG 2.2 accessibility standard level AA. Below is a summary of the current features on the OpenLab for low vision users, keyboard navigation and screen reader navigation.

Low Vision and Color Blindness on the OpenLab – In general, low vision is defined as a condition in which a person’s vision cannot be fully corrected by glasses, thus interfering with daily activities such as reading and driving. Low vision is more common among the elderly, but it can occur in individuals of any age. (from Webaim.org)
1. Zoom
  1. The OpenLab functions well in an enlarged or “zoomed in” state. Zoom In options are found in the View menu item on any web browser. When zoom is maximized, the OpenLab switches to a mobile layout.
  2. The OpenLab can be zoomed in and out as needed without causing functionality issues from the transitions.
2. Color Contrast
  1. We seek to attain at least a contrast ratio of 4.5:1 for normal text and 3:1 for large text to correspond to the WCAG level AA recommendation for foreground and background colors.
  2. The OpenLab avoids using color as the sole method of conveying information.
3. Moving areas and animations
  1. The OpenLab does not contain videos or animations that autoplay. There is a slider on the homepage which includes autoplay, but it can be overridden using the “tab” key to view a static version. (The slider is the section near the middle-top of the homepage that includes rotating images and text.)
Keyboard Accessibility on the OpenLab – Keyboard accessibility is one of the most important aspects of web accessibility. Many users with motor disabilities rely on a keyboard. Blind users also typically use a keyboard for navigation. In addition to traditional keyboards, some users may use modified keyboards or other hardware that mimics the functionality of a keyboard. (from Webaim.org)
1. Skip Links
  1. The user can hit the “tab” key on any page to skip to the admin bar to log in or check messages.
  2. The user can hit the “tab” key on any page to skip to the main content on the page.
2. Tab navigation follows the visual order of the page
  1. The user can combine visual and keyboard navigation without jumping around the page unexpectedly.
  2. Outdated accessibility methods which forced users to take a particular path through the site (user flow) have been removed.
3. Javascript functions work with keyboard navigation.
  1. Search for a course/club/project can be used with a keyboard navigation.
  2. Admin bar can be used with keyboard navigation.
Screen Reader Accessibility on the OpenLab – Screen readers are audio interfaces. Rather than displaying web content visually for users in a “window” or screen on the monitor, screen readers convert text into synthesized speech so that users can listen to the content. (from Webaim.org)
1. The Homepage Slider can be advanced with the tab key so that the user does not have to listen to all of the slides to continue.
2. Buttons are labeled to make sense when read aloud.
3. Icons are hidden from screen readers so that the name of the icon is not read aloud.
4. If the action of a button or link is not clear from its label, additional information is included for screen readers.
5. Avatar Images (the image representing a person or group’s Profile) are labeled clearly for screen readers.
6. Hierarchy of headings on a page communicates information.
  1. There is only one H1 (the most important and largest heading) per page.
  2. H2 (the second heading in the hierarchy) and below correspond to the level of importance on the page.