Working prototype by Stoa. A concept for the Great Lakes Bay STEM Career Exposure Resource Hub, built for the Bay-Arenac ISD RFP. Not the official Bay-Arenac ISD website. All resources shown are clearly labeled sample content.
Great Lakes Bay Region STEM Career Hub Explore. Connect. Build a future.

Accessible by default

Accessibility commitment

Accessibility is not a finishing step on this hub. It is an acceptance gate. The Bay-Arenac ISD RFP is explicit: every page, digital resource, template, and graphic must meet ADA and Section 508 standards to be accepted as final. This prototype is built to that bar from the first line of markup.

This is a prototype page. The standards and practices below describe how the production hub would be built and maintained. They are demonstrated live throughout this prototype.

The standard we build to

Every page targets WCAG 2.1 Level AA and Section 508, verified with automated testing (axe-core) and manual keyboard and screen-reader passes before anything ships.

  • Semantic structure. Each page uses real landmarks: a banner, navigation, a single main region, and a footer, with exactly one h1 and a logical heading order.
  • Keyboard first. Every link, button, filter, and the search work with a keyboard alone, with a visible focus indicator on every interactive element.
  • Color contrast. Every text and background pair meets or exceeds the AA contrast ratio, including chips, buttons, and the dark spotlight bands.
  • Labelled controls. Search fields, checkboxes, and the resource filters carry programmatic labels, not just visual ones.
  • Meaningful images. Photographs that carry meaning have descriptive alternative text; purely decorative images are hidden from assistive technology.
  • Comfortable targets. Interactive controls are at least 24 by 24 pixels, and most are larger, so they are easy to tap on a phone.
  • Reflow without loss. The layout is mobile-first and reflows to a single column with no horizontal scrolling down to 320 pixels wide.
  • Respect for motion. Animations and smooth scrolling are reduced automatically for visitors who ask their device for less motion.

How accessibility stays true after launch

A hub is only accessible if it stays that way as staff add resources. The production plan includes:

  • An authoring workflow that requires alternative text and a descriptive title before a resource can be published.
  • Templates in the communications toolkit that are pre-built to AA contrast and structure, so a flyer or newsletter starts accessible.
  • Training and a short admin guide for Bay-Arenac ISD staff on keeping new content compliant.
  • Periodic automated scans so regressions are caught early.

Tell us about a barrier

In production, this page would carry a direct contact for reporting an accessibility barrier and requesting content in an alternate format. Bay-Arenac ISD can be reached at (989) 686-4410, Educational Service Center, 4228 Two Mile Road, Bay City, MI 48706.

Explore the resource library →

Open by default

Photography credits

Every photograph in this prototype is open-license and treated with a brand-color duotone in CSS. Sources, authors, and licenses:

  • STEM students hero, U.S. Space Force (2nd Lt. Scarlett Trujillo), public domain.
  • Robotics workshop, Robolab Technologies, CC BY-SA 4.0.
  • Community STEM event, U.S. Air Force (A1C David S. Calcote), public domain.
  • Automotive assembly, General Motors, CC BY 3.0.
  • Students coding, Nayakyashraj, CC BY-SA 4.0.
  • Engineering department, Dow Chemical Company (via DPLA), no known restrictions.
  • Laboratory science, Wellcome Collection, CC BY 4.0.
  • Saginaw River Rear Range Light, U.S. Government, public domain.

All images sourced from Wikimedia Commons. Photographs are representative open-license stand-ins used for demonstration and do not depict Bay-Arenac ISD facilities, staff, or named partners.