Assess Viewer accessibility compliance by chiaberry · Pull Request #1980 · cityofaustin/vision-zero

chiaberry · 2026-03-05T22:51:16Z

Associated issues

I looked at addressing the AA level issues, that is the target goal we need to meet by late April.
The AAA issues do not seem too difficult to address, changing some color contrast and making buttons bigger.

I attempted a fix for "Interactive element does not meet minimum size nor spacing" and left comments about it in the code. The gist is we have nested interactive elements and I disabled the inner button, but that means we lost the mouseover hover effect. I can try another solution if we want that effect back.

There are a few issues on the map page ("Empty headings" and "Text not included in an ARIA landmark" plus one that I see using the chrome extension, but not on the siteimprove site) that are related to the links on the mapbox map in the lower right. I checked the map on our traffic cameras site, which is running a later version of the mapbox package, and those issues have been fixed. I did not try updating the mapbox package, but I can go down that road if we want.

Testing

URL to test:

https://deploy-preview-1980--atd-vzv-staging.netlify.app/viewer/

Steps to test:

Visit the deploy preview and compare the summary cards to whats in production. I changed them from h3s to spans

I installed the site improve chrome extension and ran it on the deploy preview:

Ship list

Check migrations for any conflicts with latest migrations in main branch
Confirm Hasura role permissions for necessary access
Code reviewed
Product manager approved

netlify · 2026-03-05T22:51:22Z

✅ Deploy Preview for atd-vze-staging ready!

Name	Link
🔨 Latest commit	`104561b`
🔍 Latest deploy log	https://app.netlify.com/projects/atd-vze-staging/deploys/69ab4f5af3c64000085634ad
😎 Deploy Preview	https://deploy-preview-1980--atd-vze-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

chiaberry · 2026-03-05T22:58:34Z

viewer/src/views/nav/Header.js

                          className={`nav-button inactive-nav-button mx-xs-0 mx-lg-2`}
-                          onClick={() => trackPageEvent(config.eventKey)}
                          active={currentPath === config.url}
+                          style={{ pointerEvents: "none" }}


this fixes "Issue: Interactive element does not meet minimum size nor spacing"

This Button is nested inside of a NavLink, the NavLink is what navigates to the map (or summary, depending on what page you are on). Siteimprove says the element doesnt meet the size or spacing, and the spacing it is references is both of the elements being on top of each other.

Setting the pointer events to none for the button fixes the elements being on top of each other. The onclick event is to send information to google analytics so I removed it too. I also removed the active prop because on line 136 the NavItem only renders if currentPath !== config.url

Reviewing again this morning, this might not be a good fix, because removing this pointerEvent means we lose the mouse over hover effect on the button.

Nice, thanks for removing the useless tracker. This one is pretty annoying, because we do want to keep those pointer events. Can we remove the button and make the NavLink look like a button by borrowing its css classes?

chiaberry · 2026-03-05T22:59:44Z

viewer/src/views/nav/SideDrawerContent.js

+        <h1 className="sr-only">
+          Vision Zero Map -- Help Austin reach zero traffic deaths
+        </h1>


this isnt one of the AA requirements, but was easy to address. We have it on the summary page, just not on the map page

"Page does not start with a level 1 heading"

chiaberry · 2026-03-05T23:08:26Z

viewer/src/Components/Widgets/SummaryWidget.js

+            <span className="mb-0">
              {text} {infoPopover}
-            </h3>
-            <h3 className="h5 text-muted">{`in ${currentYear}`}</h3>
+            </span>
+            <span className="text-muted">{`in ${currentYear}`}</span>


This is another best practices recommendation "Content missing after heading"

I was confused because they were h3 with the class h5 and the sizes weren't lining up -- but thats because the font size was actually being overridden by the style on line 59

for whatever reason this is adding some vertical spacing that is resolved by keeping the h5 class. can we keep that class? or fix the spacing in the .widget-header-text > span declaration you updated above?

chiaberry · 2026-03-05T23:15:42Z

viewer/src/views/nav/SideMapControl.js

  return (
    <StyledCard>
-      <h3 className="h4 card-title">
+      <h2 className="h4 card-title">


this fixes "headings are not structured" since heading below is an h3

for both this h2 and below h3—does it make sense to change them to h4 and h5 so that we can remove the header classes? or make them spans? it feels wrong to use a header element with a different header class.

chiaberry · 2026-03-06T17:20:15Z

viewer/src/views/map/MapControls.js

this is not related to the accessibility compliance, but i noticed these buttons are not fully visible on the map. This nudges them back into view

Thank youuu! yeesh. any idea what was causing them to overflow?

johnclary · 2026-03-06T17:50:01Z

viewer/src/Components/Widgets/SummaryWidget.js

+          </span>
          <div className="d-flex flex-column widget-header-text">
-            <h3 className="h5 mb-0">
+            <span className="mb-0">


for whatever reason this is adding some vertical spacing that is resolved by keeping the h5 class. can we keep that class? or fix the spacing in the .widget-header-text > span declaration you updated above?

johnclary · 2026-03-06T17:51:44Z

viewer/src/Components/Widgets/SummaryWidget.js

+            <span className="mb-0">
              {text} {infoPopover}
-            </h3>
-            <h3 className="h5 text-muted">{`in ${currentYear}`}</h3>
+            </span>
+            <span className="text-muted">{`in ${currentYear}`}</span>


for whatever reason this is adding some vertical spacing that is resolved by keeping the h5 class. can we keep that class? or fix the spacing in the .widget-header-text > span declaration you updated above?

johnclary · 2026-03-06T17:53:34Z

viewer/src/views/nav/SideMapControl.js

  return (
    <StyledCard>
-      <h3 className="h4 card-title">
+      <h2 className="h4 card-title">


for both this h2 and below h3—does it make sense to change them to h4 and h5 so that we can remove the header classes? or make them spans? it feels wrong to use a header element with a different header class.

johnclary · 2026-03-06T17:54:34Z

viewer/src/views/map/MapControls.js

Thank youuu! yeesh. any idea what was causing them to overflow?

johnclary · 2026-03-06T18:09:09Z

viewer/src/views/nav/Header.js

                          className={`nav-button inactive-nav-button mx-xs-0 mx-lg-2`}
-                          onClick={() => trackPageEvent(config.eventKey)}
                          active={currentPath === config.url}
+                          style={{ pointerEvents: "none" }}


Nice, thanks for removing the useless tracker. This one is pretty annoying, because we do want to keep those pointer events. Can we remove the button and make the NavLink look like a button by borrowing its css classes?

chiaberry added 2 commits March 5, 2026 10:53

add an h1 heading for screen readers on map view

7554d57

remove nested clickable buttons

651e304

change the headers without content to spans

c69ad5b

chiaberry commented Mar 5, 2026

View reviewed changes

this isnt doing anything

9270aa5

chiaberry commented Mar 5, 2026

View reviewed changes

chiaberry requested review from frankhereford, johnclary, mateoclarke, mddilley, roseeichelmann and tillyw March 6, 2026 17:12

bring the map controls back into view

836bef9

chiaberry commented Mar 6, 2026

View reviewed changes

johnclary reviewed Mar 6, 2026

View reviewed changes

chiaberry removed request for frankhereford, mateoclarke, mddilley, roseeichelmann and tillyw March 6, 2026 18:21

chiaberry added the WIP Work in progress label Mar 6, 2026

put the h5 back for the other styling

104561b

Conversation

chiaberry commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Associated issues

Testing

Ship list

Uh oh!

netlify bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for atd-vze-staging ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

chiaberry commented Mar 5, 2026 •

edited

Loading

netlify bot commented Mar 5, 2026 •

edited

Loading