Lost, forgotten, and unfamiliar HTML

This title could be clearer and more informative.Try out Clickbait Shieldfor free (5 uses left this month).

Running HTML-validate, Axe core, and a Claude prompt against a new website surfaced a range of overlooked HTML and accessibility issues. Key findings include: data attributes must be lowercase, HTML5 id rules are more permissive than HTML4, wrapping inputs inside labels makes the for attribute redundant, extra whitespace in textareas can bypass required validation, iFrames need unique titles and their internal landmarks must be unique across the whole page, scrollable overflow regions need a focusable element for keyboard access in Safari, inline SVGs require explicit aria-hidden or role/title/aria-labelledby treatment, asterisks denoting required fields need an explanatory legend, pagination punctuation needs aria-labels, and table header cells benefit from scope attributes.

6m read timeFrom thoughtbot.com
Post cover image
Table of contents
Data attributes should be lowercaseInvalid id attributesRedundant for attributesExtra whitespace in a textareaFalse positive: aria-label misuseiFrames with unique namesColor contrast issuesKeyboard-accessible overflow scrollingForgotten SVGsExplain your asterisksPunctuation as labelsTable header cell scopesIf you enjoyed this post, you might also like:
2 Comments

Sort: