Accessibility patterns · fictional local demo

What an automated scan cannot tell you

This small example shows two details that need a person to compare the experience with what assistive technology receives.

Two manual-review gaps

Valid markup can still carry the wrong meaning

An SVG name can be valid but inaccurate

The before map has a valid programmatic name and description. They say the shuttle runs the opposite way on weekends, while the visible diagram shows an eastbound weekday service. axe-core can check naming structure; it cannot decide whether those words match the route.

Compare the inaccurate alternative Read the corrected title, description, and text

A visible update may have no announced status

The before form paints an error or success message after interaction, but does not connect the error to its field, move focus to the problem, or expose updates through a live status. The after form adds those connections. Run the scan before and after interacting to see why a static scan is only one part of review.

Try the before form Try the after form

What to check by hand

Compare the SVG’s spoken title and description with the route direction and timetable drawn in it.
Activate the check with an empty value, then correct the field; check its error relationship, focus, and status message.
Use a screen reader to confirm what is actually spoken. This demo does not record screen-reader output.

The scan reports only axe-core rules for the stated scope and tags. Its results are not a conformance claim.

Local source and license

Inspect the files

Local teaching example only. It is not an audit of a real site, an eligibility decision, or a statement of WCAG conformance.