WCAG standards for indoor mapping

At Mappedin, we understand that issues in accessibility entail much more than checking off boxes. Understanding these issues through an empathetic lens is essential to providing real solutions that can create monumental impacts on those living with disabilities.

The World Wide Web Consortium (W3C) is the main international standards organization for the world wide web. Web Content Accessibility Guidelines (WCAG) standards were developed through W3C’s processes and defined by four guiding principles, perceivable, operable, understandable, and robust.

This document outlines the accessibility solutions Mappedin has implemented in 2022 to improve and comply with W3C’s web standards evaluated based on WCAG 2.1 Conformance Level A and AA.

A third-party auditor, Hey Nova, has evaluated Mappedin’s Web App V2 to determine improvements that can be made to comply with a greater standard of accessibility. Mappedin strives for accessibility across all of its products and solutions. We have taken several steps in 2022 to improve our WCAG standards for indoor mapping, and will continue to make improvements in the future. Here are some of the accessibility solutions that we have implemented:

Improvements

Perceivable

Issue: Over-reliance on color for indicating open status

Impact: Someone that is color blind will not be able to see the color, meaning that they rely on other content to convey that the store is open.

Solution: Add copy such as "Currently Open" or a box around the "Open" to highlight this better.

Issue: Map text does not resize

Impact: People with limited vision often need to increase the font size or zoom in to read the text and use their devices.

Solution: Allow map labels to scale in size.

Issue: Insufficient contrast specifications

Impact: There are an estimated 300 million people in the world that have some form of color blindness.

Solution: Add a 2px border to focusable elements in a bright blue or other defining colors that have a color contrast ratio of at least 3:1 to background colors.

Issue: Line height inconsistencies

Impact: Users with dyslexia or low vision often need to increase the line height to make the text easier to read.

Solution:

• Option 1: Add a line height of 1.5 to all text, as there is no need for users to edit the text in this way.
• Option 2: Don't use a specific pixel amount for line height, use something that will have the ability to scale.

Operable

Issue: Redundant and dead-end focus elements

Impact: It can confuse or disorient users when assistive technology reads content that is not available to interact with.

Solution: This is happening because the section has been hidden in CSS using opacity: 0, therefore is only hidden from view and not to assistive technology. In addition, the elements inside the hidden container have a tabindex="0" and role="button", meaning they are forcing focus. If these are items that are sometimes visible than you want to hide them with CSS using display:none; unless visually open.

Issue: Confusing tabbing and focus order

Impact: It can confuse or disorient users when assistive technology reads the content in an unexpected order. In addition, people use tabbing and screen readers for various reasons, including mobility issues, blindness, dyslexia and more.

Solution: There is currently a tab-index="-1" on the floor selectors and nothing on the location box. Add a tab-index="0" to the location box so it is the first priority and read the details of the current progress item and change next and remove tab-index="-1" from floor selector and zoom buttons.

Issue: Weak differentiation of hover focus states

Impact: If there is no outline on focus you don’t know which element you have selected. It makes your site significantly less accessible to any keyboard-only user, not only those with reduced vision. Make sure to always give your interactive elements a visible indication of focus.

Solution: Add a 2px border to your focusable elements in a bright blue or other defining color that has a color contrast ratio of at least 3:1 to background colors.

Issue: Inability to tab through complete direction

Impact: Users with mobility issues will have an easier identifying their way through the directions if they can be selected.

Solution: Add tabindex="0" to the div that has the aria-label attribute. Adding it here will ensure that the screen reader reads the correct information as well, solving two issues.

Issue: Gestures requiring physical dexterity

Impact: For those with mobility issues, such as cerebral palsy or even any form of a wrist injury, pinching and dragging can be difficult.

Solution: Add the zoom in and out buttons that are available on the desktop to the mobile view. This may require some additional wireframing to determine the best layout.

Issue: Transparent shape animation

Impact: This can cause issues for people with vestibular disorders for instance, who experience symptoms like motion sickness, balance problems, chronic dizziness, headaches, and nausea when looking at motion on the screen.

Solution: Alternatively, design the animations to stop automatically after no more than five seconds of play.

Compatible

Issue: Missing language attribute

Impact: Identifying the language of the page or page elements allows screen readers to read the content in the appropriate language.

Solution: Identify the document language using the <html lang> attribute with a valid value (e.g., <html lang="en">).

Issue: Disorienting input and notification behaviour

Impact: If a change to the website happens upon interaction with a button but is too fast to register, the user can get confused and won't know what happened.

Solution: Changing the button to say copied” permanently once clicked or adding a note below saying that the share link has been added to their clipboard.

Issue: Getting direction issues with screen reader

Impact: An estimated 500,000 Canadians are blind or partially sighted. 5.59 million more have an eye disease that could cause sight loss. The majority of these people rely exclusively on audio, however, if a screen reader can not parse through a site properly, this will lead to extreme confusion.

Solution: Significant HTML/XHTML validation and parsing errors are avoided.

Robust

Issue: Aria-label attribute does not have enough time for the screen-reader on the share button

Impact: In this case, the blind user will have no way of knowing that the button was effective and that the share link was copied.

Solution: We recommend having the aria-label attribute permanently changed to "copied" and the visual text remaining changed to match. This way both blind and visual users will not miss this action.

Issue: Missing aria-label attributes to explain purpose of elements

Impact: Aria-label attributes are used to explain elements of the website to a screen reader so that blind users understand what they are interacting with and where they are on the website

Solution: Add an aria-label attribute to the location box container such as "Search box for Mall amenities and locations".

Issue: Incorrect or missing roles on certain elements

Impact: Roles are used to define the purpose of an element. When you state that an element is role="button" you are telling the screen reader that this should be an interactive element.

Solution: Add role="presentation" to all these elements in both issues in order to hide them from the screen reader.

Moving forward

The ever changing landscape of accessibility will continue to push for more possibilities of how digital products can become accessible. At Mappedin, we are striving to become compliant to WCAG AA standards across our products and will continue to make improvements in the future. Contact us today to learn more.