City of Monette — Internal Report
Accessibility Compliance Dashboard
WCAG 2.2 Level AA — Audit date:
Improvements Made
Added to every page via RootLayout. Appears on keyboard focus at the top of the page.
Added 3px visible focus outline (secondary gold) to all interactive elements via :focus-visible CSS.
Added Escape key support to close mobile menu and desktop dropdowns. Added keyboard event handlers to dropdown buttons.
Added aria-label to main nav, mobile nav, and footer nav. Added aria-current="page" to active nav links.
Added aria-expanded, aria-controls, and descriptive aria-label to mobile menu toggle button.
Hero video marked aria-hidden with role="presentation". Added sr-only text description. Play/pause button has descriptive aria-label.
Added --secondary-text CSS token (4.91:1 on white) for gold text on light backgrounds. All text now meets 4.5:1 minimum.
Added aria-required, autocomplete attributes, role="alert" on errors, and sr-only required field indicators to contact form.
Added prefers-reduced-motion media query to disable animations for users who prefer reduced motion.
Added minimum 44x44px touch target CSS for all interactive elements.
Created /accessibility page with commitment, technical standard, known limitations, and issue reporting.
Added aria-pressed to community calendar and library filter tab buttons.
Added aria-hidden="true" to decorative icons throughout the site.
Updated footer Accessibility link from /about#accessibility to /accessibility.
WCAG 2.2 AA Criteria Checklist
| Criterion | Title | Level | Status | Notes |
|---|---|---|---|---|
| 1.1.1 | Non-text Content | A | Pass | All meaningful images have descriptive alt text. Decorative images use alt="" and aria-hidden. Hero video is aria-hidden with sr-only description. |
| 1.2.1 | Audio-only and Video-only (Prerecorded) | A | Pass | Homepage flyover video is decorative background only — no informational content. Marked aria-hidden with text alternative. |
| 1.2.2 | Captions (Prerecorded) | A | Pass | No informational prerecorded video content. Background video is decorative. |
| 1.2.3 | Audio Description or Media Alternative | A | Pass | Background video has sr-only text description. No informational video content. |
| 1.2.4 | Captions (Live) | AA | Pass | No live audio or video content on the site. |
| 1.2.5 | Audio Description (Prerecorded) | AA | Pass | No informational prerecorded video. Background video is decorative. |
| 1.3.1 | Info and Relationships | A | Pass | Semantic HTML5 used throughout: header, nav, main, footer, section, article, figure, figcaption, time. Heading hierarchy H1→H2→H3 verified on all 33+ pages. |
| 1.3.2 | Meaningful Sequence | A | Pass | Content order in DOM matches visual reading order. No CSS-only reordering that changes meaning. |
| 1.3.3 | Sensory Characteristics | A | Pass | Instructions do not rely solely on shape, color, size, or position. |
| 1.3.4 | Orientation | AA | Pass | No CSS locks orientation. Site works in both portrait and landscape. |
| 1.3.5 | Identify Input Purpose | AA | Pass | Contact form fields use autocomplete attributes: name, email, tel. |
| 1.4.1 | Use of Color | A | Pass | Color is not the only means of conveying information. Active nav links use aria-current and visual underline. Required fields use both asterisk and "(required)" sr-only text. |
| 1.4.2 | Audio Control | A | Pass | No audio plays automatically. Background video is muted with no audio track. |
| 1.4.3 | Contrast (Minimum) | AA | Pass | Primary (#0A2A66) on white: 15.4:1. Accent (#8B1A1A) on white: 11.9:1. Gold text uses --secondary-text token (4.91:1 on white). Muted foreground on background: 6.87:1. |
| 1.4.4 | Resize Text | AA | Pass | Base font size 18px (112.5%). All sizing uses rem/em. Layout tested at 200% zoom. |
| 1.4.5 | Images of Text | AA | Pass | No images of text used for informational content. Logo uses image but is supplemented by text. |
| 1.4.10 | Reflow | AA | Pass | Responsive design. No horizontal scrolling at 320px width. All grids collapse to single column on mobile. |
| 1.4.11 | Non-text Contrast | AA | Pass | Focus indicators use 3px outline with secondary gold color. Form borders meet 3:1 contrast. |
| 1.4.12 | Text Spacing | AA | Pass | No CSS that prevents text spacing overrides. Line height, letter spacing, and word spacing can be adjusted. |
| 1.4.13 | Content on Hover or Focus | AA | Pass | Dropdown menus are dismissible (Escape key), hoverable, and persistent. |
| 2.1.1 | Keyboard | A | Pass | All interactive elements reachable by keyboard. Mobile menu, dropdowns, accordions, tabs, forms all keyboard-navigable. Escape key closes menus. |
| 2.1.2 | No Keyboard Trap | A | Pass | No keyboard traps. Escape key exits all menus and dropdowns. Tab order flows logically. |
| 2.1.4 | Character Key Shortcuts | A | Pass | No single-character keyboard shortcuts implemented. |
| 2.2.1 | Timing Adjustable | A | Pass | No time limits on any content or interactions. |
| 2.2.2 | Pause, Stop, Hide | A | Pass | Background video has play/pause control with aria-label. Video can be paused by user. |
| 2.3.1 | Three Flashes or Below Threshold | A | Pass | No flashing content on the site. |
| 2.4.1 | Bypass Blocks | A | Pass | Skip-to-main-content link implemented in RootLayout. Appears on focus at top of every page. |
| 2.4.2 | Page Titled | A | Pass | All 33+ pages have unique, descriptive <title> tags via react-helmet. |
| 2.4.3 | Focus Order | A | Pass | Logical tab order: skip link → header → nav → main content → footer. No tabIndex > 0 used. |
| 2.4.4 | Link Purpose (In Context) | A | Pass | All links have descriptive text. Icon-only buttons have aria-label. External links labeled with destination. |
| 2.4.5 | Multiple Ways | AA | Pass | Navigation menu, footer links, and in-page links provide multiple ways to reach content. |
| 2.4.6 | Headings and Labels | AA | Pass | All headings are descriptive. All form fields have visible labels. |
| 2.4.7 | Focus Visible | AA | Pass | 3px outline focus indicator on all interactive elements via :focus-visible CSS. |
| 2.4.11 | Focus Not Obscured (Minimum) | AA | Pass | Sticky header uses z-index:50. Focus indicators are not obscured by sticky elements. |
| 2.5.1 | Pointer Gestures | A | Pass | No multi-point or path-based gestures required. |
| 2.5.2 | Pointer Cancellation | A | Pass | All actions trigger on mouseup/click, not mousedown. |
| 2.5.3 | Label in Name | A | Pass | Accessible names include visible label text. |
| 2.5.4 | Motion Actuation | A | Pass | No motion-activated functionality. |
| 2.5.7 | Dragging Movements | AA | Pass | No dragging interactions required. |
| 2.5.8 | Target Size (Minimum) | AA | Pass | Minimum 44x44px touch targets enforced via CSS for buttons, links, and interactive elements. |
| 3.1.1 | Language of Page | A | Pass | lang="en" set on <html> element in index.html. |
| 3.1.2 | Language of Parts | AA | Pass | No foreign language content on the site. |
| 3.2.1 | On Focus | A | Pass | No context changes on focus. |
| 3.2.2 | On Input | A | Pass | No automatic context changes on input. Form submission requires explicit submit button. |
| 3.2.3 | Consistent Navigation | AA | Pass | Navigation is consistent across all pages via shared Header component. |
| 3.2.4 | Consistent Identification | AA | Pass | Components with the same function are identified consistently across pages. |
| 3.2.6 | Consistent Help | A | Pass | Contact City Hall link appears consistently in navigation and footer. |
| 3.3.1 | Error Identification | A | Pass | Form errors displayed with role="alert" and aria-live="assertive". |
| 3.3.2 | Labels or Instructions | A | Pass | All form fields have visible labels. Required fields marked with asterisk and sr-only "(required)" text. |
| 3.3.3 | Error Suggestion | AA | Pass | Error messages describe the problem and suggest corrections. |
| 3.3.4 | Error Prevention (Legal, Financial, Data) | AA | Pass | Contact form allows review before submission. No irreversible transactions on this site. |
| 3.3.7 | Redundant Entry | A | Pass | No redundant data entry required. |
| 3.3.8 | Accessible Authentication (Minimum) | AA | Pass | No authentication required on this public-facing site. |
| 4.1.1 | Parsing | A | Pass | React/TypeScript generates valid HTML. No duplicate IDs. Proper nesting throughout. |
| 4.1.2 | Name, Role, Value | A | Pass | All interactive elements have accessible names, roles, and states via ARIA attributes. |
| 4.1.3 | Status Messages | AA | Pass | Form success/error messages use role="alert" and aria-live. Copy-to-clipboard uses aria-live="polite". |
Items Requiring Manual Review
These items cannot be verified automatically and require human testing or professional assessment.
Full testing with NVDA/JAWS (Windows) and VoiceOver (macOS/iOS) has not been conducted. Recommend testing with at least two screen readers.
Third-party Facebook Page Plugin and feed embeds are outside City control. Recommend monitoring Facebook's accessibility updates.
Utility bill images and public notice PDFs should be reviewed for accessibility. Consider providing HTML alternatives.
A professional accessibility audit by a certified accessibility specialist (CPACC or WAS credential) is recommended before claiming full ADA compliance.
Testing with actual users who rely on assistive technology provides the most accurate accessibility assessment.
Report generated: — City of Monette, AR