ADA Compliance on ITI DXP Widgets

Created by ITI Digital Support Digital, Modified on Tue, 25 Jul, 2023 at 1:15 PM by Aline Gill

At ITI Digital we recognize the importance of the Americans with Disabilities Act or ADA which calls for businesses and service providers, profit and nonprofit, to make their products and services accessible to people with disabilities. Throughout a series of HTML adjustments, we have addressed critical accessibility fixes in the ITI Digital DXP widgets structure, buttons, and overall navigation items.

Our development team has implemented the following steps (table) to ensure that our ImGoing widget is as much as possible compliant with the key standards of the Web Content Accessibility Guideline (WCAG 2.0 A, AA). However, we do not have control over user-generated content (such as event images, descriptions, Google Places images, Google Reviews, Google profile images, or Instagram UGC), as those elements are dynamically generated and populated via third-party sources. The compliance upgrades listed below apply to our software's main navigation and listing structure.

We will continue to strive for improved accessibility on our systems and to apply WCAG-specific updates to our widgets, as they become necessary.

Summary of ADA Compliance edits applied to our ITI DXP widgets (to date).

Accessibility Fixes - ITI DXP WIDGETS Structure & Navigation

Added image alt text for event/place list, details page, and trip planner

Added the alt text for images on the trip planner home page, mobile popup view, etc

Added the alt text for the images on the sidebar, map view, etc. However there are some image tags generated by Google map which have no alt tags, we cannot handle them

Created the alt tags for the rest components

Created the go buttons for search fields.

Created button for search fields, for event/place list, trip planner and mobile view, etc.

Updated HTML elements that would be used as buttons i.e. div, span, icons, role=button, aria-label, etc. We use a lot of these items in ImGoing and we updated them all.

Updated certain HTML elements which are the triggers of popup windows

Updated the icons which have no functionalities (only for displaying purposes), and have the aria-hidden attribute so that it will be invisible to the screen readers.

Changed the "div" tag in the ig-social-share component into "a" tag and adjusted the related styles.

Created the aria-expanded=“true|false” for accordions

Added the tab index to the accordion so that it can be focused by the keyboard tab, then press enter to open/close the accordion, and use tab to switch between the accordion items.

Updated the “div” to “button” of the content so that they can be triggered by pressing enter on the keyboard.

ADA Compliance on ITI DXP Widgets

Summary of ADA Compliance edits applied to our ITI DXP widgets (to date).

Video of Keyboard Navigation (using TAB) applied to events calendar:A few screenshots exemplifying the HTML edits applied to our widget codes:

Video of Keyboard Navigation (using TAB) applied to events calendar:

A few screenshots exemplifying the HTML edits applied to our widget codes: