Images require thoughtful alternative text so that screen-reader users receive equivalent information. The "alt attribute decision tree" guides choices: a purely decorative image should have alt="" so assistive technology skips it; an image conveying information should have alt text describing it; a functional image (such as one acting as a link or button) should have alt describing the action rather than the picture itself; and a complex image may use a short alt plus a longer description elsewhere. Empty alt="" tells assistive technology to skip the image as decorative while it remains rendered visually.
For an icon inside a button, the recommended pattern is to give the button an aria-label such as "Close" and mark the icon span aria-hidden="true" so the icon is not double-announced. An `` containing only an `
Accessible tables rely on proper semantic structure: a real `
| `, and ` | ` cells. The scope attribute associates a header with all cells in its column or row. For multi-level or irregular tables, id and headers attributes explicitly associate data cells with their header cells. Data tables should not be used for layout; layout tables should use role="presentation" so their structure is not exposed as tabular data. Headings and labels guide screen-reader users who skim content by jumping from heading to heading. Headings should not skip levels when moving from h1 to h3 without an intervening h2, per WCAG 1.3.1 and 2.4.6. The "Headings and Labels" criterion requires that headings and labels describe the topic or purpose of their section or control; vague labels like "More" without context are insufficient. Similarly, every link's accessible name should make its destination clear out of context per WCAG 2.4.4; "click here" fails because the destination is unclear. All chaptersDrill itReading is not remembering. These come from the Accessibility Aria Patterns deck: Q What does the acronym "a11y" stand for in web development? "a11y" is a numeronym for "accessibility" — 'a' + 11 letters + 'y'. Q What is the difference between web accessibility (a11y) and usability? Accessibility means people with disabilities can perceive, understand, navigate, and interact with the web. Usability is the broader quality of a design being e... Q Which four disability categories does WCAG primarily address? Visual, auditory, physical/motor, and cognitive/neurological disabilities. Q Name the three conformance levels defined by WCAG 2.1. A (lowest), AA (mid), and AAA (highest). |
|---|