- Success Criterion 1.3.1
- Conformance level A
Quotation Shown Only Through Styling, Not Real Markup
1.3.1 — Info and Relationships
Scenario
Setting
A recipe site's ingredient list
What’s wrong
Quotations/citations conveyed only by styling where meaning depends on it.
Example
Here's what happens on a recipe site's ingredient list: quotations/citations conveyed only by styling where meaning depends on it.
Why it matters
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout. In this case (a recipe site's ingredient list), they lose track of what belongs to what.
How to test
Inspect a styled quotation (indented, italicized) in DevTools: check for blockquote/q/cite or an explicit textual attribution — style alone without markup fails.
How to fix
Mark up quotations with quotation code (blockquote/q/cite) (or state the attribution in text).
Outcome
Once corrected, a recipe site's ingredient list lets them navigate the content in a sensible order.
Who is affected
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Text Styled to Look Like a Heading Instead of Coded as One
- Text Columns Faked With Spaces Instead of Real Table Markup
- Table Layout Faked With Spaces Instead of Real Table Code
- Clickable Div Acting as a Link Button With No Real Role
- Structural HTML Tags Used Purely for Visual Styling
- Layout-Only Table Wrongly Coded With Real Header Cells