Skip to content

Assess Viewer accessibility compliance #1980

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
chiaberry wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Assess Viewer accessibility compliance #1980

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7554d57
add an h1 heading for screen readers on map view
chiaberry Mar 5, 2026
651e304
remove nested clickable buttons
chiaberry Mar 5, 2026
c69ad5b
change the headers without content to spans
chiaberry Mar 5, 2026
9270aa5
this isnt doing anything
chiaberry Mar 5, 2026
836bef9
bring the map controls back into view
chiaberry Mar 6, 2026
104561b
put the h5 back for the other styling
chiaberry Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 13 additions & 17 deletions viewer/src/Components/Widgets/SummaryWidget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,23 +56,11 @@ const SummaryWidget = ({
bottom: 1px;
}

.widget-header-text > h3 {
.widget-header-text > span {
font-size: 1.2em;
}
`;

const renderIcon = () => (
<span className="fa-layers fa-3x fa-fw widget-icon">
<FontAwesomeIcon icon={faCircle} color={backgroundColor} />
<FontAwesomeIcon
icon={icon}
inverse
transform="shrink-6"
color={colors.white}
/>
</span>
);

const renderFooterBasedOnChange = (currentYearTotal, lastYearTotal) => {
const icon =
(currentYearTotal > lastYearTotal && faCaretUp) ||
Expand Down Expand Up @@ -111,12 +99,20 @@ const SummaryWidget = ({
</Col>
</Row>
<div className="text-left d-flex flex-row">
{renderIcon()}
<span className="fa-layers fa-3x fa-fw widget-icon">
<FontAwesomeIcon icon={faCircle} color={backgroundColor} />
<FontAwesomeIcon
icon={icon}
inverse
transform="shrink-6"
color={colors.white}
/>
</span>
<div className="d-flex flex-column widget-header-text">
<h3 className="h5 mb-0">
<span className="mb-0 h5">
{text} {infoPopover}
</h3>
<h3 className="h5 text-muted">{`in ${currentYear}`}</h3>
</span>
<span className="text-muted h5">{`in ${currentYear}`}</span>
</div>
</div>
</CardBody>
Expand Down
4 changes: 2 additions & 2 deletions viewer/src/views/map/MapControls.js
View file
Open in desktop
Copy link
Member Author

@chiaberry chiaberry Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@johnclary johnclary Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ const StyledMapNav = styled.div`
.nav-buttons {
position: absolute;
top: 0px;
right: 0px;
right: 30px;
padding: 10px;
}

.geolocate-button {
position: absolute;
top: 68px;
right: 0px;
right: 30px;
padding: 10px;
}
`;
Expand Down
5 changes: 2 additions & 3 deletions viewer/src/views/nav/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { A, usePath } from "hookrouter";

import { Container, Navbar, Button, Nav, NavItem, NavLink } from "reactstrap";
import styled from "styled-components";
import { navConfig, trackPageEvent } from "../../constants/nav";
import { navConfig } from "../../constants/nav";
import { responsive } from "../../constants/responsive";
import { colors } from "../../constants/colors";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
Expand Down Expand Up @@ -142,8 +142,7 @@ const Header = () => {
>
<Button
className={`nav-button inactive-nav-button mx-xs-0 mx-lg-2`}
onClick={() => trackPageEvent(config.eventKey)}
active={currentPath === config.url}
style={{ pointerEvents: "none" }}
Copy link
Member Author

@chiaberry chiaberry Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

@chiaberry chiaberry Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

@johnclary johnclary Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

>
{config.icon}
<span className="pl-2">{config.title}</span>
Expand Down
3 changes: 3 additions & 0 deletions viewer/src/views/nav/SideDrawerContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@ const SideDrawerContent = ({ type }) => {
return (
<div className="side-menu">
<StyledDrawerHeader>
<h1 className="sr-only">
Vision Zero Map -- Help Austin reach zero traffic deaths
</h1>
Comment on lines +38 to +40
Copy link
Member Author

@chiaberry chiaberry Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"

<img
className="vz-logo"
src={LOGO_URL}
Expand Down
4 changes: 2 additions & 2 deletions viewer/src/views/nav/SideMapControl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,10 +336,10 @@ const SideMapControl = ({ type }) => {

return (
<StyledCard>
<h3 className="h4 card-title">
<h2 className="h4 card-title">
Copy link
Member Author

@chiaberry chiaberry Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@johnclary johnclary Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Traffic Crashes{" "}
<InfoPopover config={popoverConfig.map.trafficCrashes} />
</h3>
</h2>
<Card className="p-3 card-body">
<Label className="section-title">
<h3 className="h5">Filters</h3>
Expand Down