Responsive and Accessibility Failure Lab

You now have enough shared design source to create failures that affect the whole site.

Good.

Let's use that to practice diagnosis.

Failure 1: horizontal overflow

Introduce one bounded fixed-width rule that makes a card or image overflow at narrow width.

Find:

• which generated element overflows;
• which CSS rule causes it;
• whether Jekyll output itself is structurally correct.

Repair and retest.

Failure 2: missing alternative text

Remove useful alt text from one meaningful image.

Use your audit/checking process to locate it.

Repair with a description of the useful visual information.

Failure 3: invisible focus

Make one link's focus state unclear.

Navigate keyboard-only.

Repair and verify.

Failure 4: broken asset URL

Create one path error.

Trace:

source asset
→ generated asset
→ generated HTML URL
→ browser request

Evidence table

Do not force every issue into one category. Some failures cross boundaries.

Checkpoint

Write the strongest diagnosis from the lab using:

The generated HTML __________, while the browser/CSS evidence __________, so I changed __________ rather than __________.