Transform Education New Mexico logo: a student figure inside the outline of New Mexico Transform Education New Mexico

Equity includes accessAccessibility

A coalition working for the students the system underserves should never publish a website some of those families cannot use. Every page of this prototype is built to WCAG 2.1 AA and machine-checked with axe-core before publication.

The commitment

  • WCAG 2.1 AA conformance, verified by automated checks on every page and manual keyboard and screen-reader passes
  • Semantic landmarks, a skip link, and a single logical heading outline on every page
  • Color contrast at or above 4.5:1 for body text; the brand orange appears only at large display sizes where it meets the 3:1 large-text threshold
  • Every interactive control at least 24 pixels of hit area, labeled, and reachable by keyboard
  • All meaningful imagery as real <img> elements with descriptive alternative text

Report a barrier

info@transformeducationnm.org and describe the page and the barrier; fixes are prioritized like any other accountability issue." data-es-html="Si algo en el sitio de producción es difícil de usar con tecnología de asistencia, la coalición quiere saberlo. Envíe un correo electrónico a info@transformeducationnm.org y describa la página y la barrera; las correcciones se priorizan como cualquier otro problema de rendición de cuentas.">If anything on the production site is hard to use with assistive technology, the coalition wants to know. Email info@transformeducationnm.org and describe the page and the barrier; fixes are prioritized like any other accountability issue.

What the redesign fixesBefore and after

Five concrete findings from our review of the current transformeducationnm.org homepage, and how this prototype resolves each one.

  • Skip navigation

    Current siteNo skip-to-content link anywhere; keyboard users tab through the full menu on every page.
    This prototypeA skip link is the first focusable element on every page. Press Tab once on any page to see it.

  • Heading structure

    Current siteThe homepage opens with an h2, drops to h3s, and the only h1 appears mid-page, a backwards outline for screen-reader navigation.
    This prototypeExactly one h1 per page, at the top, with a logical h2/h3 outline beneath it.

  • Imagery screen readers can see

    Current siteNearly all photography is CSS background images, invisible to assistive technology; the rendered homepage exposes only two img elements.
    This prototypeMeaningful photos are semantic img elements with descriptive alt text and visible credits.

  • Brand orange as text

    Current siteThe brand orange (#d36227) is used as normal-size text on white at roughly 3.5:1, below the 4.5:1 WCAG AA threshold.
    This prototypeOrange is reserved for large display sizes and graphics; running text uses rust (#90390b) at AA contrast.

  • Dead third-party scripts

    Current sitePages still load AddThis sharing scripts; the service shut down in 2023, so every visit makes dead requests.
    This prototypeZero third-party runtime requests. Fonts, images, and scripts are all self-hosted.

Reaching rural and tribal New MexicoLow-bandwidth optimization

Families and educators across New Mexico's tribal lands and rural areas often face limited broadband. This prototype is built light:

  • Pages load fast on slow connections: all fonts and images are self-hosted and optimized; no tracking pixels, ads, or third-party scripts slow the site down.
  • Images use semantic <img> elements scaled for mobile, not heavy CSS backgrounds; photography is compressed without loss of detail.
  • Core content is text-first and works instantly; search and interactive features enhance but don't block reading.
  • The site works on older devices and browsers, not just modern ones.

One community, many languagesTranslation readiness

New Mexico is bilingual. This prototype is structured to support a future Spanish version and browser-based translation:

  • Correct character encoding (UTF-8) and semantic HTML markup allow browsers to translate pages accurately and screen readers to navigate translated content without errors.
  • Diacritics and Spanish punctuation are preserved through proper encoding, not approximated with images or special characters.
  • Color, images, and layout convey no meaning by themselves; all text can be translated without redesign.
  • Contrast and text sizing standards are met for both English and translated Spanish, so translated content remains accessible.