====================================================================
BRIGHTPATH COMMUNITY SERVICES — ACCESSIBLE ("AFTER") VERSION
====================================================================

This is the remediated counterpart to the demo training site. It contains
the SAME content and nearly the same visual design as the "before" version,
but every planted accessibility issue has been fixed. Use the two side by
side to show a before/after — the single most compelling thing you can put
on video or in a tutorial.

PAGES
-----
index.html, about.html, services.html, contact.html + styles.css

WHAT WAS FIXED (maps to the ANSWER-KEY.md in the "before" site)
---------------------------------------------------------------
Site-wide (styles.css):
  - Visible focus indicator restored for all interactive elements.
  - Color contrast raised to meet 4.5:1 (nav, hero subtext, buttons).
  - Links distinguished by underline, not color alone.

Home:
  - <html lang="en"> added; descriptive <title>.
  - "Skip to main content" link added (first focusable element).
  - Logo marked decorative (alt=""), name is in text.
  - Hero is real text (<h1>), not an image of text.
  - Real <h2> headings instead of styled <div>s.
  - Descriptive link text ("Read more about our programs").

About:
  - Heading levels in order (H1 -> H2).
  - Meaningful image has descriptive alt text.
  - Video iframe has a descriptive title; captions noted and a full
    transcript provided in a <details> element.

Services:
  - Service cards are real links (keyboard-operable, announced as links).
  - Decorative emoji hidden with aria-hidden="true".
  - Data table uses <th scope="col"> header cells.

Contact:
  - Every field has a real <label>; required state stated in text.
  - Error message is in text ("Error: ..."), associated with its field
    via aria-describedby, and not conveyed by color alone.
  - Radio group wrapped in <fieldset> with a <legend>; each radio labeled.
  - Submit is a real <button type="submit">.

HOW TO USE
----------
- Host this alongside the "before" site (e.g. demo.wcagcs.com/before and
  /after), or swap between the two folders on camera.
- Re-run your screen reader, keyboard test, and automated scanner here to
  show the contrast with the "before" results.

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