Knowledge and Tools Needed

1. You need to understand the basics of HTML and how there are h1, div, button, and other tags with attributes like aria-labeled or disabled.
2. To check the attributes for an element, select it and right-click. The element should open and show the tags and attributes that are there.
3. It would be useful to use a screen reader for some testing, such as text content (1.1.1). Here is a guide for using Voice Over on Mac and Non Visual Desktop Access (NVDA) on Windows.
4. Consider using an automated tool such as axe that can catch accessibility errors. Running an accessibility scan can help with many of the following issues, such as contrast requirements, but bear in mind that at most, only 70% of accessibility errors can be caught by automated tooling.
5. To utilize axe, install the extension through the Chrome web store and restart your browser. Navigate to the page to test, open up the dev tools and navigate to the axe DevTools tab. Press ‘Scan My Page’ to find a list of accessibility issues. Do this before going through the below criteria, as those results will help highlight many of the issues below.

Evaluation

1.1.1 Non-text Content (Level A)

Assessment

1. Identify all non-text content.
2. If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology (AT), (e.g. using aria-hidden=”true”).
3. If the non-text content is not intended as pure decoration, it has a text alternative.
4. If non-text content is a control or input, refer to the assessment of SC 4.1.2 Name, Role, Value for additional requirements.

Look for The Following

1. Do logos have alt-text in the “alt” attribute?
2. Do icons, like “open map in new window”, zoom in, zoom out, close, copyright, etc. have text labels or an “alt” attribute with text?
3. Are decorative images or text hidden from screen readers with aria-hidden?
4. Is the spatial information (landmark, route, and survey knowledge) available through text e.g., can you answer “What clockface direction is feature1 from feature2?”, “Where on the map has the highest density of items?”, “What is closer as the crow flies, feature 1 and feature 2, or feature 3 and feature 4?”, and most importantly, can you redraw the map with between 85-100% accuracy using the text and with no prior experience viewing the map (note automated accessibility tests will not catch this)? The distance, direction, shape, size, orientation, and general layout of all points, polygons, and lines need to be accessible through text at a minimum. For more information, read this article on spatial knowledge (opens a new tab).

1.3.1 Info and Relationships (Level A)

Assessment

1. Verify that information (such as a control’s state), structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Look for The Following

1. Is there a “disabled” attribute on the buttons that can be disabled e.g., zoom, or reset orientation?
2. Is there an aria-pressed attribute on the buttons that can be activated or deactivated e.g., locate me, and full screen?
3. Is the map wrapped in a labeled region landmark so screen readers and other assistive technology know what is in that area?
4. Are the Scale bars/rulers understandable non-visually, or are they hidden from the screen reader?

1.4.3 Contrast (Minimum) (Level AA)

Assessment

1. Verify that the visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
   1. Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
   2. Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement;
   3. Logotypes: Text that is part of a logo or brand name has no contrast requirement.

Look for The Following

1. Do buttons and links that control the map meet color contrast requirements?
2. Do important map labels within the map meet color contrast requirements?

2.1.1 Keyboard (Level A)

Assessment

1. Identify all functionality of the web map.
2. Ensure all functionality can be accessed using only a keyboard.

Look for The Following

• Is the map display pannable using the keyboard?
• Are map controls and information possible to access without using hover with the mouse?
• Can drag and drop controls be operated via the keyboard?

2.4.7 Focus Visible (Level AA)

Assessment

1. Sequentially navigate components using the tab key (and operate all controls).
2. Check that script is not used to remove focus and that each component is highlighted.

Look for The Following

1. Does every control have a visible focus outline, so when you tab to it, you can easily tell what is being focused?
2. Do the focus outlines meet the upcoming requirements for focus appearance with both contrast and enclosing the focused element?

2.5.5 Target Size (Level AAA)

Assessment

1. Identify targets for pointer inputs;
2. Verify that the size of each target is at least 44 by 44 CSS pixels except when:
   1. Equivalent: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;
   2. Inline: The target is in a sentence or block of text;
   3. User Agent Control: The size of the target is determined by the user agent and is not modified by the author;
   4. Essential: A particular presentation of the target is essential to the information being conveyed.

(Note: If you’re a web map tool author wanting to conform to this SC, Lighthouse will flag targets that are smaller than 48 by 48 in CSS pixels as inappropriately sized.)

Look for The Following

1. Is each target that meets the above criteria a minimum of 44 by 44 CSS pixels? Consider using this bookmarklet or axe in order to measure the target size.

3.1.2 Language of Parts (Level AA)

Assessment

1. Check if the lang attribute is set, and the specified language code matches the language of the content (which may change due to language negotiation, based on system settings).

Look for The Following

1. Is the correct lang attribute set for all content, including labels and controls? When you change the map language, is the lang attribute updated on all buttons and controls?
2. If the map is an embedded iFrame, does the iFrame have the correct lang attribute?

4.1.2 Name, Role, Value (Level A)

Assessment

For all user interface components:

1. The name and role can be programmatically determined;
   1. States, properties, and values that can be set by the user can be programmatically set;
2. and notification of changes to these items is available to user agents, including assistive technologies.

Look for The Following

1. Does the map itself have an accessible name? If the map is in an iFrame, is the title attribute set? Are the different areas of the map in a labeled region?
   1. Do sub controls, especially those using icons instead of visible labels, have an accessible name through either text in the HTML element or an aria-labeled attribute?
      1. Are all interactive elements using the proper HTML element or role, ie.g., buttons?