Web Accessibility Issues Example
I taught my blind sow to follow the tail of her piglet, and after I shot the tail off she followed the tail alone; the rest of this page offers less guidance.
The short answer
- What it is
- These issues are faults in a page that make it hard to use with assistive technology. Examples are no lang attribute, unlabeled inputs, empty links or buttons, skipped heading levels, and low contrast.
- Why it matters
- Some visitors cannot read or operate the page at all. Accessibility is also a legal duty in many places, and the same clean structure helps search engines parse the page.
- How a crawler should report it
- List each fault with the page URL, the element, and the rule it broke, such as missing lang or skipped heading level. Report serious and critical audit results with their severity.
- Live examples
/lab/accessibility-issues/missing-lang/(positive)/lab/wcag-issues/a/b/c/d/e/f/g/h/i/j/k/l/(positive)/lab/accessibility-issues/alt-filename/(positive)/lab/accessibility-issues/unlabeled-input/(positive)/lab/accessibility-issues/empty-button/(positive)/lab/accessibility-issues/near-miss/(near miss)/lab/wcag-issues/a/b/c/d/e/f/g/h/i/j/k/l/m/(near miss)
Markup Faults That Shut Out Screen Reader and Keyboard Users
Web accessibility issues often begin in shared templates, so one mistake can repeat across a whole site. A designer may choose pale gray text that looks elegant and is hard to read. A developer may build a button from an icon and give it no name. Forms can rely on placeholder text instead of real labels. Heading levels may be chosen for their size and not for the page outline.
Browsers build an accessibility tree from the HTML, and screen readers read that tree. With no lang attribute, a screen reader may use the wrong voice and pronunciation. An empty button may be announced with no name. A skipped heading level makes the page harder to scan by ear. WCAG 2 asks for a contrast ratio of at least 4.5 to 1 for normal text. Search engines do not grade pages on all of this, but clear markup helps them too.
Automated tests catch a useful part of these faults. Check the HTML for lang on the root element, labels on inputs, and text in each link and button. Audit the heading order. For contrast, the page needs real rendering, so use an engine such as axe in a browser. Automated checks cannot find every problem. Try the page with a keyboard alone, and then listen to it with a screen reader.
Most fixes are small. Add lang="en" or the right code to the html tag. Connect each input to a label element. Give icon buttons an aria-label, or an image inside with real alt text. Use one h1, then step down one level at a time. Darken text until it meets the contrast ratio. Fix shared templates first, because one change there will clear the same fault on many pages.