Color, visual position, and visible labels must agree with programmatic structure and available interaction.
By the end: identify accessibility problems that a contrast ratio or attractive screenshot cannot detect.
Give status another channel
A red dot and a green dot can distinguish two states for some readers but leave others without usable information. Add words such as "Needs review" and "Approved," and use distinct symbols when helpful. A legend can supplement direct labels, but forcing every item to be decoded through a distant key adds another lookup.
The static comparison shows color-only marks next to explicitly labeled states. The labels are real text. This is not a simulation of a particular visual impairment. A grayscale view can expose some dependencies on color, but it does not reproduce every person's color perception or low vision.
Recover the state without decoding hue
Imagine reviewing two applications called Item A and Item B. The underlying facts are that A is pending and B is approved. A colored mark beside each name can indicate that a state exists, but it cannot teach an unfamiliar reader the assignment by itself. Even if the two colors are easy to distinguish, the reader still needs to know which means pending. This is a coding problem as well as a visibility problem. Strong contrast does not explain an unstated color convention.
In the first specimen, compare three presentations of those same two states. The unlabeled treatment leaves the state words unavailable. The keyed treatment supplies words but separates them from the items, so identifying A requires matching its mark to the key. The direct treatment puts Pending beside A and Approved beside B. Trace the lookup in each case and count which information you must remember between the item and the key. This count describes a constructed task, not measured effort or reading speed.
Compare a key with direct state words
No visible state names
● Item A
● Item B
State words in a separate key
● Item A
● Item B
● Pending
● Approved
State words at the item
● Item A: Pending
● Item B: Approved
Item A remains Pending and Item B remains Approved in all three treatments. The first omits visible state names. The key restores a mapping through a lookup; the direct version places that mapping beside each item. This is not measured task performance.
Direct wording also limits ambiguity about what a symbol means. A check mark might mean approved, selected, complete, or simply present. Adding Approved fixes the intended interpretation in this context. It does not guarantee that the approval itself is correct. Keep the word tied to the relevant item, because moving both state labels into an unrelated paragraph would restore a matching problem. The second specimen separates states from names in one treatment. Compare their pairings rather than their tidiness.
To test the pairing, cover the state words with your hand and ask whether the remaining colors carry all needed meaning. Then uncover the words but ignore the colors. The revised treatment should still tell you that A is pending and B is approved. This is a local reasoning exercise, not a simulation of a particular person's vision. Color-vision conditions and low vision do not reduce to grayscale. Remove dependence on hue for this distinction, while retaining useful supplementary color.
Keep each state with its item
Detached state words
Item A
Pending
Item B
Approved
Explicit local pairings
Item A: Pending
Item B: Approved
Both treatments contain Item A, Pending, Item B, and Approved in the same source order. The left treatment detaches each state from its name. The right uses local spacing and explicit punctuation. This combined relationship treatment is not a spacing-only experiment.
Suppose the list also says Needs review for a third state. Do not silently treat it as identical to Pending merely because both receive the same accent color. Pending could mean waiting for payment, while Needs review could mean that a human decision is required. The task determines whether these are distinct states. If they demand different actions, preserve that distinction in words or another reliable representation. A shorter palette is not a reason to collapse different meanings. Different labels for one state can also invent process distinctions.
This reasoning connects to WCAG 2.2 criterion 1.4.1, Use of Color. It concerns color as the only visual means of conveying information, indicating actions, prompting responses, or distinguishing elements. Programmatic access is a related but separate question. A status word drawn into an image may look adequate while not being available as ordinary text to assistive technology. These real-text specimens do not audit a page. Item identity and state must remain associated in the underlying structure.
Preserve structure and interaction
A visible heading must also have an appropriate semantic role. A form label must identify its control. A clickable-looking rectangle is not a working button unless it has the required behavior and input support. Keyboard users need a visible focus indicator and a meaningful navigation sequence; a pointer hover effect alone is insufficient.
Visual layout can differ from document order. Moving items with CSS does not necessarily move them in the order read by assistive technology or reached by keyboard. Keep a sensible underlying order and check it in the rendered interface. An accessible name should agree with what the visible label says.
Read the sequence underneath the arrangement
A page has an order in its source, the underlying sequence of elements, as well as an arrangement on the screen. CSS can place those elements in different grid positions without changing their source sequence. For a simple booking process, choosing a workshop should precede reviewing its conditions, which should precede confirming the booking. These dependencies make order meaningful. A screenshot hides a source sequence of choose, confirm, review when visual placement corrects it. The failure appears when another presentation follows the underlying sequence instead.
Follow the numbered positions in the order drawing. The top route shows where a sighted reader might read the displayed cards, but the lower row lists their source sequence. In the mismatched case, the second source item is Confirm even though Confirm is displayed in the third position. Moving that card visually has not changed which content comes second in the source. Repair the sequence first, then use layout for the intended arrangement. This schematic is neither a screen-reader transcript nor simulated focus movement.
Visual positions do not rewrite the source
Schematic, not a browser focus trace. The same three steps occupy the same visual slots. Their source sequences differ. In the mismatched case Confirm comes before Review in the source; the repaired case puts the dependency in both sequences.
Reading order and focus order should not be treated as synonyms. Ordinary paragraphs are read but do not usually become keyboard tab stops. Links and buttons normally participate in sequential keyboard navigation. A reading-order inspection asks whether the content sequence makes sense. A focus-order inspection asks whether the sequence of reachable controls supports meaningful operation. A page could have sensible paragraphs but jump unpredictably among actions. Orderly buttons cannot repair conditions presented after the decision they qualify.
Use the source-reading specimen as a paper exercise. Read its three steps in the stated source order without rearranging them mentally. At the moment you encounter Confirm booking, ask whether you have already encountered the cancellation condition. In the flawed sequence you have not. In the repaired sequence you have. This dependency does not imply one universally correct order for every page. Two independent notices can often exchange places without changing either one's meaning, provided their contents do not become interleaved.
Encounter the condition before the decision
Flawed source sequence
Choose workshop
Confirm booking
Review conditions
Cancellation closes Friday at 18:00.
Repaired source sequence
Choose workshop
Review conditions
Cancellation closes Friday at 18:00.
Confirm booking
Read these actual ordered lists top to bottom. Both retain the same steps and condition. Only the order changes. On the left the cancellation condition is encountered after Confirm; on the right it is encountered before Confirm. These are text specimens, not functioning booking controls.
Semantic structure supplies more than sequence. A real heading identifies a section to software; bold text alone merely changes its appearance. Likewise, a visible field name must be associated with its control, so the name remains available when the control is encountered independently. A nearby text label can look connected while lacking that programmatic association. The static lesson specimens do not add fields or booking controls. They isolate content relationships to preserve during implementation, without suggesting that decorative rectangles function as controls.
The relevant reading-sequence requirement is WCAG 2.2 criterion 1.3.2, Meaningful Sequence, when sequence affects meaning. It requires that a correct sequence can be programmatically determined, not that all independent content has one rigid order. Keyboard behavior and visible focus need their own checks in a working interface. On an actual page, compare the underlying sequence with keyboard navigation instead of assuming one proves the other. Responsive rearrangements can change composition while leaving source and navigation sequences unchanged.
Inspect the relationship
Keep the status when color is unavailable
Color-only reference
● Item A
● Item B
No visible state names.
Redundant state labels
? Item A: Pending
✓ Item B: Approved
Meaning survives without hue.
The left marks intentionally omit state words; the right repeats the same states with text and different symbols. This is a constructed failure example, not a color-vision simulation. Required meaning must survive without hue.
Keep the complete message when text grows
A default screenshot shows one combination of width, text size, and spacing. It cannot show whether a message survives changes to those conditions. Consider a booking condition inside a box whose height was chosen for two lines. If the text wraps onto four lines, the content needs more vertical room even though no words changed. A fixed height with hidden overflow can remove the last sentence. This containment failure cannot be repaired by darkening the surviving words.
Inspect the two condition specimens. Their wording, width, font size, and line spacing match. The bounded treatment deliberately shows only part of the text, while the content-sized treatment retains it all. Read the final sentence before deciding whether the apparent compactness is harmless. It states when cancellation is allowed, so losing it changes the information available at the decision. This demonstrates clipping risk, not tested user overrides. Actual HTML wrapping varies with platform fonts.
A short box can hide a consequential sentence
Fixed height, hidden overflow
Booking is required. Keep your confirmation. Cancel by Friday at 18:00 to release your place.
Content determines height
Booking is required. Keep your confirmation. Cancel by Friday at 18:00 to release your place.
Identical real text and typography, with width capped at 20ch in both treatments. The left intentionally clips at 58px; the right grows with content. Exact wrapping depends on the platform font. The cancellation sentence must not disappear merely to keep a box compact.
WCAG 2.2 criterion 1.4.12, Text Spacing, specifies a survival test for supported spacing properties. With 20 CSS px text, line height at 1.5 times the size means 30 px, and following-paragraph spacing at twice the size means 40 px. Letter spacing at 0.12 times the size means 2.4 px; word spacing at 0.16 times means 3.2 px. These are test settings, not mandatory defaults. Thirty pixels describes line-box height, not blank space between letter shapes.
The spacing specimen applies these values to ordinary flowing text without a fixed height. Compare where the words wrap, then inspect whether the complete condition remains available below the new line breaks. The altered text can occupy more space without implying that the facts changed. A surrounding layout would also have to accommodate that growth without overlapping an action or obscuring another message. An isolated paragraph cannot establish whole-page survival. Test the specified overrides together, rather than selecting the easiest change.
Extra spacing requires room rather than missing words
Authored comparison
Booking is required. Keep your confirmation.
Cancel by Friday at 18:00 to release your place.
Specified spacing overrides
Booking is required. Keep your confirmation.
Cancel by Friday at 18:00 to release your place.
Both blocks use 20 CSS px text and the same facts. The right applies line height 1.5, following-paragraph spacing 2em, letter spacing 0.12em, and word spacing 0.16em. Neither block has a fixed height. This local specimen does not establish survival of an entire surrounding page.
Width changes create another route to the same problem. At higher zoom, fewer effective CSS pixels may be available across the content, so lines wrap sooner. The reflow criterion, 1.4.10, generally checks vertically scrolling content at a width equivalent to 320 CSS px without information loss or two-dimensional scrolling, with exceptions for content needing two dimensions for use or meaning. Exceptions for maps or data tables do not permit clipping adjacent prose or text within individual cells.
Do not confuse this with the course's card-layout arithmetic. A rule such as two cards needing two minimum widths plus one gap establishes a geometric budget under assumed minimum widths. It does not test actual words, user spacing, focus visibility, or browser reflow. These readable specimens expose clipping. Investigating a real interface requires changing actual conditions and inspecting the whole message and neighboring content. No new width or zoom controls are provided in these specimens, and their displayed differences are fixed examples rather than a responsive conformance test.
Use several kinds of checks
Automated checks can find some missing names, contrast failures, and structural issues. They cannot certify whether an explanation makes sense or whether the task is realistically usable. Combine code inspection, keyboard use, enlargement and spacing tests, assistive technology where appropriate, and evaluation with users.
Do not call the whole library WCAG-conformant because this lesson explains a few criteria. The course's interactive controls use named native elements, but a full audit is separate work. A visual design can meet a numerical minimum and still be confusing, clipped, or misleading.
Trace one failure to the evidence it needs
Return to Item A, whose state is Pending. Suppose its visible word is easy to read, but the only explanation of what to do next appears when a pointer hovers over a dot. A screenshot of the explanation proves that this visible state exists. It does not prove that a keyboard user can reach it or that the same information is available without hover. Evidence must match the mechanism in question. Color calculations address pairs; interaction problems require examining information availability during use.
The information specimen puts a condition in two different places while keeping its wording unchanged. In one arrangement the state and its explanation are separated by unrelated content. In the other they form one local group. First find Item A, then explain what Pending means without inventing a process step. Local grouping makes this relationship explicit. It remains a design hypothesis, not measured evidence of faster task completion. If the underlying association remains wrong, tidier placement will not correct the data.
Attach the explanation to the state it explains
Explanation separated
Item A: Pending
The studio opens Saturday at 14:00.
Pending means a reviewer has not decided yet.
Explanation beside its state
Item A: Pending
Pending means a reviewer has not decided yet.
The studio opens Saturday at 14:00.
Both arrangements retain exactly the same three statements. Moving the explanation beside Pending changes grouping and source position together. The specimen suggests a relationship to investigate; it supplies no measured improvement and no hover interaction.
Now imagine revising a real queue by adding state words, moving explanations, and changing type weight at the same time. If readers then interpret the queue correctly, that result concerns the combined treatment. It does not isolate which change caused the difference. To investigate whether direct wording matters, keep the other relevant conditions fixed and compare versions that differ in that wording relationship. Even then, task familiarity and presentation order could affect performance. Interpret the actual comparison rather than declaring proof of a preferred visual rule.
A precise claim can remain useful without being universal. For example, inspecting markup can establish that two state words are present as text and occur in the same list items as their names. It cannot establish that an unfamiliar reader understands the organization's approval policy. Asking a reader to explain Pending examines that interpretation, but one successful explanation does not audit keyboard support. Separate evidence about these different failures so one successful check does not obscure another unresolved problem.
Use the final task specimen to practice that separation. Read the workshop name and cancellation condition, then identify which decision the condition qualifies. Next read the same facts in linear order, as if layout positions were unavailable. State where the relationship is explicit and where you had to infer it. Finally imagine increasing the paragraph's spacing while retaining all words. Reason about grouping and sequence here; only changed rendering could reveal overlap. Do not report an imagined outcome as an observed successful test.
Read the decision with its condition
Condition detached
Glass workshop
Decision: Confirm booking
West entrance
Cancel by Friday at 18:00.
Condition before decision
Glass workshop
Cancel by Friday at 18:00.
Decision: Confirm booking
West entrance
Both notices preserve the workshop, cancellation deadline, decision label, and entrance. The revised arrangement groups the condition before the decision in source and visual order. There is no active booking button. Enlarged spacing and working keyboard behavior would need separate checks in an implemented interface.
The resulting conclusion should name what remains unresolved for this task. You might know that the state is no longer conveyed by color alone and that the source sequence puts conditions before confirmation. You may still lack evidence about focus visibility, operation with assistive technology, or comprehension by intended readers. These specific limits identify the next uncertainty that could block the decision. Explaining several WCAG criteria and constructing readable examples does not certify this page or the wider library as conformant.
Exercises
Repair a status list
A review queue uses orange circles for pending and green circles for approved, with no text. Give a revision that preserves its compact layout.
Hint
Add meaning without asking the user to infer a color legend.
Worked answer
State
Redundant representation
Pending
? Pending
Approved
✓ Approved
Words preserve the distinction when hue does not.
Add "Pending" and "Approved" beside their markers, optionally with different symbols. Keep each state tied to its row and expose the text programmatically. Color may remain as a supplementary cue. Do not claim that a grayscale filter alone verifies every accessibility requirement.
Repair a visual-only reorder
A narrow layout visually shows steps 1, 2, 3, but the document order is 1, 3, 2. Why is the screenshot insufficient?
Hint
Different users can encounter a different sequence.
Worked answer
Incorrect source order
Choose a workshop
Confirm booking
Review conditions
Revised source order
Choose a workshop
Review conditions
Confirm booking
The underlying sequence must make sense without reconstructing the visual layout.
Presentation
Sequence
Screenshot
1, 2, 3
Underlying order
1, 3, 2
Repair
Use meaningful 1, 2, 3 source order
Visual placement and document order are different mechanisms.
Assistive technology or keyboard navigation may follow the underlying order. Put the steps in a meaningful source order and use layout that preserves the needed sequence. Check focus movement and reading order rather than assuming the visual arrangement changed both.
Sources and further reading
These optional references support the stated mechanisms and technical criteria. Selected relevant passages were reviewed. The notices, diagrams, and numerical examples are original teaching comparisons, not empirical usability results. Design hypotheses need tests with intended readers; technical checks do not establish aesthetic quality or whole-site conformance.