WCAG 2.1 - Common Fixes - Title II of the Americans with Disabilities Act (ADA)
Hopefully? a super-thread on the common WCAG violations within Experience Builder Edition (ExB DE) and custom widgets. For those unfamiliar, local governments are required to implement Web Content Accessibility Guidelines (WCAG) 2.1 within the near future in order to comply with Title II of the Americans with Disability Act (ADA). Outside of small towns ( < 50000 ) and special districts, most local governments are required to enter into compliance (this is a bit squishy which we can talk about) at the end of next month.
| State and local government size | Compliance date |
| 0 to 49,999 persons | April 26, 2027 |
| Special district governments | April 26, 2027 |
| 50,000 or more persons | April 24, 2026 |
Let's start with the most valuable information first. This page is the most informative discussion on the topic from a GIS lens that I've seen so far. https://gis.colorado.gov/accessibility/
There are both automated and manual ways to find these issues, and unfortunately not really a one-stop-shop. So here's a list of Chrome extensions that may be helpful in identifying and/or resolving issues:
Accessibility Testing (things I actually know)
Axe Deque: https://chromewebstore.google.com/detail/lhdoppojpmngadmnindnejefpokejbdd
WAVE Evaluation Tool: https://chromewebstore.google.com/detail/accessible-color-picker/bgfhbflmeekopanooidljpnmnljdihld
Accessibility Testing (not familiar with, in Google Chrome extensions store)
search for
"web accessibility check"
"web accessibility scanner"
Specific Tools
search for
"color picker"
"color contrast"
"screen reader"
"color blind"
What we're doing
Our organization contracted with a company Deque (has an extension above, free and paid versions) to run a full accessibility audit on our publicly facing GIS applications. We had 100+ errors in our everything-and-the-kitchen-sink / all-in-one public application. We're currently running 1.18, so possibly some of this is solved in 1.19. Here's a scary pivot table:
| Row Labels | Count of Issue ID |
| 1.1 Text Alternatives | 3 |
| Alternative Text (Active Images) (1.1.1.a) | 1 |
| Text alternative does not include essential text in the active image | 1 |
| Alternative Text (Informative Images) (1.1.1.b) | 2 |
| <object> elements must have alternative text | 1 |
| Images must have alternative text | 1 |
| 1.3 Adaptable | 23 |
| Data Tables (1.3.1.b) | 2 |
| Layout table uses data table structural markup | 2 |
| Headings (1.3.1.e) | 8 |
| Visual heading text is not marked as heading | 8 |
| Identify Input Purpose (1.3.5.a) | 1 |
| Identify input purpose missing | 1 |
| Lists (1.3.1.f) | 2 |
| Visual list is not marked up as list | 2 |
| Reading Order (1.3.2.a) | 10 |
| Hidden content is readable with a screen reader | 9 |
| Reading order of static content changes meaning | 1 |
| 1.4 Distinguishable | 39 |
| Color as Information (1.4.1.a) | 1 |
| Color alone is used to visually convey the state of a control | 1 |
| Color Contrast (regular text) (1.4.3.a) | 7 |
| Text content lacks 4.5:1 contrast ratio | 7 |
| Non-Text Contrast - Active User Interface Components (1.4.11.a) | 2 |
| Active user interface component lacks 3 to 1 contrast ratio | 2 |
| Non-Text Contrast - Graphical Objects (1.4.11.c) | 4 |
| An icon lacks 3 to 1 contrast ratio | 2 |
| Graphical object lacks 3 to 1 contrast ratio | 2 |
| Non-Text Contrast - States of User Interface Components (1.4.11.b) | 15 |
| Reflow (1.4.10.a) | 3 |
| Info or functionality is lost due to overlapping content at 320px equivalent | 1 |
| Info or functionality is unavailable at 320px width equivalent | 2 |
| Resize (200%) (1.4.4.a) | 5 |
| Content is lost at 200% zoom | 1 |
| Functionality is lost at 200% zoom | 2 |
| Zooming and scaling must not be disabled | 2 |
| Text Spacing (1.4.12.a) | 2 |
| Text spacing content cut off | 1 |
| Text spacing content overlaps | 1 |
| 2.1 Keyboard Accessible | 7 |
| Keyboard Navigation (2.1.1.a) | 7 |
| Function cannot be performed by keyboard alone | 7 |
| 2.4 Navigable | 16 |
| Descriptive Labels (2.4.6.b) | 4 |
| Controls have same name but different actions | 1 |
| Programmatic label does not convey purpose of control | 3 |
| Focus Order (2.4.3.a) | 10 |
| Hidden or empty element receives focus | 7 |
| Keyboard focus order is not logical | 3 |
| Focus Visible (2.4.7.a) | 1 |
| Focus indicator is missing | 1 |
| Skip Navigation, Headings or Landmarks (2.4.1.a) | 1 |
| Page is missing skip link, headings or landmarks | 1 |
| 2.5 Pointer Accessible | 5 |
| Label in Name (2.5.3.a) | 5 |
| 4.1 Compatible | 35 |
| Custom Controls (4.1.2.b) | 8 |
| ARIA input fields must have an accessible name | 1 |
| Combobox: Combobox is missing appropriate roles and/or attributes | 1 |
| Role: The element's role is missing or incorrect | 1 |
| States/Properties: The element has missing or incorrect states or properties | 5 |
| Name, Role, Value (4.1.2.a) | 24 |
| Button: Button does not have a role | 1 |
| Button: Button is missing both a role and a name | 5 |
| Buttons must have discernible text | 5 |
| Checkbox: Custom checkbox does not have a role and/or state | 3 |
| Form field: Form field is missing an accessible name | 3 |
| State: Expand/collapse state of the element is missing or incorrect | 7 |
| Status Messages (4.1.3.a) | 3 |
| Status message not automatically announced | 3 |
| Grand Total | 128 |
And here's a horrible chart I made:
And a slightly better pivot table:
| Row Labels | Count of Issue ID |
| Alternative Text (Active Images) (1.1.1.a) | 1 |
| Color as Information (1.4.1.a) | 1 |
| Focus Visible (2.4.7.a) | 1 |
| Skip Navigation, Headings or Landmarks (2.4.1.a) | 1 |
| Identify Input Purpose (1.3.5.a) | 1 |
| Text Spacing (1.4.12.a) | 2 |
| Lists (1.3.1.f) | 2 |
| Non-Text Contrast - Active User Interface Components (1.4.11.a) | 2 |
| Data Tables (1.3.1.b) | 2 |
| Alternative Text (Informative Images) (1.1.1.b) | 2 |
| Status Messages (4.1.3.a) | 3 |
| Reflow (1.4.10.a) | 3 |
| Non-Text Contrast - Graphical Objects (1.4.11.c) | 4 |
| Descriptive Labels (2.4.6.b) | 4 |
| Label in Name (2.5.3.a) | 5 |
| Resize (200%) (1.4.4.a) | 5 |
| Keyboard Navigation (2.1.1.a) | 7 |
| Color Contrast (regular text) (1.4.3.a) | 7 |
| Headings (1.3.1.e) | 8 |
| Custom Controls (4.1.2.b) | 8 |
| Focus Order (2.4.3.a) | 10 |
| Reading Order (1.3.2.a) | 10 |
| Non-Text Contrast - States of User Interface Components (1.4.11.b) | 15 |
| Name, Role, Value (4.1.2.a) | 24 |
| Grand Total | 128 |
For us, the top hits include:
- Name, Role, Value (4.1.2.a)
- basically, this is talking about our table of contents for groups and layers ->
The button is missing both a role and an accessible name/label.
Element description:
- "Graham fire station" icon button.Description of the issue: The role and name information is missing for the above mentioned icon button.
Steps to reproduce:
1. Navigate to the “Public Safety” button and activate its expanded panel.
2. Navigate to the “Fire Stations” checkbox and select it; the "Graham fire station" icon button appears.
3. Notice that the button does not have role and name.Note: The same issue is observed for similar buttons present in the map section.
- Non-Text Contrast - States of User Interface Components (1.4.11.b)
- This is a manual test which is a bit subjective, pixel values are in a range, depending on where you're clicking in that range, the subject pixel might not get to the magic ratio-- --but elsewhere it does. These are the "x" and "-" buttons on a given widget.
Focus indicator lacks 3 to 1 contrast ratio.
Element description:
- "Expand/Collapse" button
- "X (Close)" buttonDescription of the issue: The keyboard focus outline indicator and its background color contrast ratio is less than 3.0:1.
Contrast Ratio:
Focus indicator color: #313131
Adjacent background color: #484848
Contrast ratio: 1.4:1
- Reading Order (1.3.2.a)
- The repeated violations involve widget text being accessible by a screen reader after is has been collapsed visually
Content that is intended to be hidden from all users is readable with a screen reader.
Element description:
- Hidden contentDescription of the issue:
Content that is visually hidden is still accessible to the screen reader. When the “Contact us” panel is collapsed, all content inside the panel remains readable by the screen reader, even though it is not visible to users.
- Focus Order (2.4.3.a)
- The way in which the screen reader would tab through our items was not logical; and includes the same flavor of violation about where minimized widgets are navigable via tab key.
Keyboard focus order is not logical in such a way that it affects the meaning or operability of the content.
Element description:
1 Get Coordinates button....all interactive elements in the main section.
2. Pierce Country logo link.Description of the issue: The focus order is incorrect for the above-mentioned elements. When navigating using the keyboard, focus moves through all elements in the main section first and then moves to the header section.
Suggested focus order:
1. "Pierce County logo" image link.
2. "Download Data" button.
3. "Help" button.
4. "Data" menu button.
5. "Background map" button.
6. "Theme Gallery" button.
7. "Legend" button.
8. "Contact us" button.
9. "Quick Tips" button.
10. "Search in" menu button.
11. "Search" edit field.
12. "Search" icon button.
13. "Zoom in" icon button.
- Custom Controls - we're doing stuff wrong with ARIA fields with "aria-pressed" state information
- Headings - our custom widget tool names look like headings but aren't stated that way in code, suggested to mark as <h2>
- More color contrast
- Keyboard Navigation - focus traps and the inability to get to certain areas
We're still working through our exploratory sprint to see what fixes to these classes of issues might look like in our codebase. And I would love to be able to see how others are implementing this on their end.
