====================================================================
BRIGHTPATH COMMUNITY SERVICES — ACCESSIBILITY TRAINING DEMO SITE
Answer Key (planted issues and how to fix them)
====================================================================

WHAT THIS IS
------------
A small, fictional four-page website built with DELIBERATE, common
accessibility problems. Use it to practice auditing, to demonstrate issues
on video, to capture before/after visuals, and to test screen readers,
automated scanners, and your own review process.

Everything here is fictional (Brightpath Community Services, brightpath.example.org)
and self-contained — no external files, no tracking, no real data.

HOW TO USE IT
-------------
- Open index.html in a browser to start. Pages: Home, About, Services, Contact.
- Try to find the issues yourself first (keyboard-only, screen reader, a
  scanner like axe/WAVE, contrast checker), then check your findings here.
- Keep this answer key private — don't publish it alongside the live demo,
  or you'll give away the exercise.

A NOTE ON COUNTS
----------------
There are ~20 planted issues across the site, mapped to common WCAG 2.1/2.2
Level A and AA success criteria — the same kinds of findings that show up in
a real VPAT/ACR. Some issues appear on multiple pages (e.g. no skip link,
removed focus outline, low contrast) because real sites repeat their mistakes.

--------------------------------------------------------------------
SITE-WIDE (in styles.css — affects every page)
--------------------------------------------------------------------
1. Focus outline removed globally (`outline: none`).
   WCAG 2.4.7 Focus Visible (AA).
   FIX: remove the outline:none rule; provide a clear visible focus style
   (e.g. a 2px solid high-contrast outline on :focus / :focus-visible).

2. Low color contrast — navigation links (light blue on navy),
   hero subtext (light gray on light background), and the primary button
   (teal text on pale green) all fall below 4.5:1.
   WCAG 1.4.3 Contrast (Minimum) (AA); the button also implicates
   1.4.11 Non-text Contrast (AA).
   FIX: darken text / lighten or darken backgrounds until text meets 4.5:1
   (3:1 for large text and UI components).

3. Links styled with color only — no underline, and a color close to the
   surrounding text.
   WCAG 1.4.1 Use of Color (A).
   FIX: underline links in body text, or otherwise distinguish them by more
   than color.

--------------------------------------------------------------------
HOME  (index.html)
--------------------------------------------------------------------
4. The <html> element has no lang attribute.
   WCAG 3.1.1 Language of Page (A).
   FIX: add lang="en" to <html>.  (See about.html for the correct version.)

5. Non-descriptive page title: <title>Home</title>.
   WCAG 2.4.2 Page Titled (A).
   FIX: "Home | Brightpath Community Services".

6. No "skip to main content" link (also missing on every page).
   WCAG 2.4.1 Bypass Blocks (A).
   FIX: add a skip link as the first focusable element, targeting <main>.

7. Logo image has no alt attribute.
   WCAG 1.1.1 Non-text Content (A).
   FIX: add alt="Brightpath Community Services" (or alt="" if decorative,
   since the name is already in text next to it).

8. Hero banner is an IMAGE OF TEXT ("Welcome to Brightpath") with no alt.
   WCAG 1.4.5 Images of Text (AA) and 1.1.1 Non-text Content (A).
   FIX: use real text styled with CSS instead of an image; if an image is
   truly required, give it alt text matching the words shown.

9. Section headings are styled <div>s ("How we help", "Upcoming events",
   "Get involved"), not real heading elements.
   WCAG 1.3.1 Info and Relationships (A); also weakens 2.4.6 Headings and
   Labels (AA).
   FIX: use <h2> elements.

10. Vague link text — multiple "Read more" links that don't describe their
    destination.
    WCAG 2.4.4 Link Purpose (In Context) (A).
    FIX: "Read more about our programs", "Read more about the Resource Fair", etc.

--------------------------------------------------------------------
ABOUT  (about.html)
--------------------------------------------------------------------
11. Heading levels skip from <h1> straight to <h3> (no <h2>).
    WCAG 1.3.1 Info and Relationships (A).
    FIX: use a logical order — H1, then H2 for each section.

12. Meaningful content image has no alt text.
    WCAG 1.1.1 Non-text Content (A).
    FIX: describe the image, e.g. alt="Brightpath staff and volunteers at a
    community event" (or alt="" if purely decorative).

13. Embedded video frame has an empty title and provides no captions or
    text alternative.
    WCAG 1.2.2 Captions (Prerecorded) (A); the empty <iframe title=""> also
    implicates 4.1.2 Name, Role, Value (A).
    FIX: give the iframe a descriptive title, and provide captions plus a
    transcript for the video.

    (Note: about.html DOES have lang="en" set correctly — a good contrast
    with the Home page for demonstrating the difference.)

--------------------------------------------------------------------
SERVICES  (services.html)
--------------------------------------------------------------------
14. Service "cards" are clickable <div>s (onclick) — not keyboard focusable
    and exposing no role or accessible name.
    WCAG 2.1.1 Keyboard (A) and 4.1.2 Name, Role, Value (A).
    FIX: make each card a real <a> (or <button>) so it's focusable, operable
    by keyboard, and announced as a link/button.

15. Icon glyphs (emoji) carry meaning with no text alternative.
    WCAG 1.1.1 Non-text Content (A).
    FIX: the visible heading text already names each service; mark the emoji
    as decorative (e.g. aria-hidden="true") so it isn't announced oddly.

16. Program-schedule data table uses only <td> cells — no <th> header cells.
    WCAG 1.3.1 Info and Relationships (A).
    FIX: make the first row <th scope="col"> header cells so screen readers
    associate each value with its column.

--------------------------------------------------------------------
CONTACT  (contact.html) — most issues are in the form
--------------------------------------------------------------------
17. "Required" status shown only by a red asterisk (color), with no text
    explanation tied to each field.
    WCAG 1.4.1 Use of Color (A) and 3.3.2 Labels or Instructions (A).
    FIX: mark required fields in text (e.g. "(required)") and/or use the
    required attribute with a visible, programmatic indication.

18. Form fields (name, email, select, message) have NO <label> — the
    placeholder is used as the only label.
    WCAG 1.3.1 (A), 3.3.2 Labels or Instructions (A), 4.1.2 Name, Role, Value (A).
    FIX: add a real <label for="..."> for every field; keep placeholders as
    optional hints only, not as labels.

19. Error message ("Please enter a valid email") is red text only and is not
    programmatically associated with its field.
    WCAG 3.3.1 Error Identification (A) and 1.4.1 Use of Color (A).
    FIX: associate the message with the input (aria-describedby), convey the
    error in text (not color alone), and move focus/announce it.

20. Radio-button group ("Preferred contact method") has no <fieldset> and
    <legend> grouping.
    WCAG 1.3.1 Info and Relationships (A).
    FIX: wrap the radios in <fieldset> with a <legend>, and give each radio
    its own <label>.

21. The "Send message" control is a clickable <div>, not a <button> — not
    keyboard operable and exposes no role/name.
    WCAG 2.1.1 Keyboard (A) and 4.1.2 Name, Role, Value (A).
    FIX: use a real <button type="submit">.

====================================================================
SUGGESTED USES
====================================================================
- Record a screen-reader walkthrough showing where a user gets stuck.
- Do the keyboard-only test on camera (Tab through — note the missing focus ring).
- Run an automated scanner and show what it catches vs. what it misses.
- Build the "after" (fixed) version to demonstrate the before/after contrast.
- Capture stills for your social tips and the educational guide.

A fictional demo for training only. Not affiliated with any real organization.
© Rohn Direct LLC / WCAG Compliance Services.