accessibility updates

[sscott710]

Accessibility changes to bring the site within WCAG 2.1 AA standards. These include:

1. Skip Navigation Link
   Files: baseof.html, list.html, single.html, blog/single.html, maps/list.html, maps/single.html, narratives/list.html, narratives/single.html, app.scss
   Change: Added a "Skip to main content" link at the top of every page layout, visually hidden until focused. Added corresponding

   landmark wrapping page content.
   WCAG: 2.4.1 Bypass Blocks (Level A)

2. Heading Hierarchy
   Files: single.html, blog/single.html, index.html, maps/list.html, maps/single.html, narratives/list.html, narratives/single.html, header.html
   Change: Page titles changed from <h2>/<h3>/<h4> to <h1>. The site title in the header changed from <h1> to <span> so each page has a single, correct <h1>. Section headings on the homepage changed from <h4> to <h2>.
   WCAG: 1.3.1 Info and Relationships (Level A), 2.4.6 Headings and Labels (Level AA)

3. Image Alt Text
   Files: footer.html, index.html, maps/list.html, narratives/list.html, all narrative index.md files, blog/2022-03-30-launching-mtu.md, figure.html shortcode
   Change: Added descriptive alt attributes to images that previously had missing, empty, or generic alt text (e.g., footer logos, homepage images, narrative/map thumbnail cards, and all figure shortcode usages across narratives). Removed duplicate images with spaces in filenames. For the blog posts, a blank alt="" was added to be filled in later.
   WCAG: 1.1.1 Non-text Content (Level A)

4. Color Contrast
   Files: app.scss
   Change: Link colors changed from text-sky-600 / text-sky-400 (hover) to text-sky-700 / text-sky-800 (hover) for better contrast against white backgrounds.
   WCAG: 1.4.3 Contrast (Minimum) (Level AA)

5. Keyboard Accessibility — Interactive Map Notations
   Files: viz/common/main.js, viz/gmu-lorraine-brown/main.js, viz/mallory-house/main.js, viz/odu-site/main.js, viz/slave-sales/main.js, app.scss
   Change: .notation spans (inline map markers in narrative text) received tabindex="0", role="button", and keydown listeners for Enter/Space. Added :focus-visible outline styling.
   WCAG: 2.1.1 Keyboard (Level A), 2.4.7 Focus Visible (Level AA)

6. Keyboard Accessibility — Lightbox
   Files: index.js, figure.html shortcode, app.scss
   Change: Lightbox images changed from CSS background-image to elements. Added Escape key to close, focus management (focus moves into lightbox on open, returns to thumbnail on close), aria-label on open/close links, and :focus-visible outline on the lightbox itself.
   WCAG: 2.1.1 Keyboard (Level A), 2.4.3 Focus Order (Level A), 2.4.7 Focus Visible (Level AA), 1.1.1 Non-text Content (Level A)

7. Responsive Mobile Navigation
   Files: header.html, index.js
   Change: Added a hamburger menu button with aria-expanded, aria-controls, and screen-reader-only label for mobile viewports. Navigation links collapse into a togglable menu on small screens.
   WCAG: 4.1.2 Name, Role, Value (Level A), 2.4.7 Focus Visible (Level AA)

8. Focus Indicator Improvements
   Files: maps/gmu-footprints/index.md, maps/odu-footprints/index.md, narratives/single.html
   Change: Map Play/Reset buttons and narrative Reset View button changed from outline-none focus:outline-none to focus-visible:ring-2 styles. Radio buttons for basemap selection received aria-label attributes.
   WCAG: 2.4.7 Focus Visible (Level AA), 4.1.2 Name, Role, Value (Level A)

9. External Link Indicators
   Files: footer.html, footer-viz.html
   Change: External links received target="_blank" with rel="noopener noreferrer" and screen-reader-only "(opens in new tab)" text.
   WCAG: 3.2.5 Change on Request (Level AAA) / best practice per G201

10. Semantic HTML
    Files: maps/list.html, narratives/list.html, index.html
    Change: <card> elements (non-standard) replaced with <article>. Misspelled < figcaption> corrected to <figcaption> on the homepage.
    WCAG: 1.3.1 Info and Relationships (Level A), 4.1.1 Parsing (Level A)

11. Navigation Landmark
    Files: header.html
    Change: Added aria-label="Main navigation" to the <nav> element.
    WCAG: 1.3.1 Info and Relationships (Level A)

12. Map Visualization ARIA
    Files: narratives/single.html
    Change: The map <div id="visualization"> received role="application" and a dynamic aria-label.
    WCAG: 4.1.2 Name, Role, Value (Level A)

13. Slider (Range Input) Usability
    Files: app.scss, maps/gmu-footprints/main.js, maps/odu-footprints/main.js
    Change: Custom styled slider thumb and track. Thumb turns blue on active/click state. Track fills with blue to indicate progress (completed years). Border added to track for visibility.
    WCAG: 1.4.11 Non-text Contrast (Level AA), 1.4.1 Use of Color (Level A)

14. Footer Readability / Spacing
    Files: footer.html
    Change: Footer text split into two spans in a flex row with increased gap (sm:gap-8) so the funding statement and accessibility link don't visually run together at full width.
    WCAG: 1.4.8 Visual Presentation (Level AAA) / readability best practice

15. Meta / Social Sharing
    Files: twitter-card.html, config.yaml
    Change: Added Open Graph meta tags alongside Twitter cards, added a site-wide description param, and consolidated duplicated Twitter card logic. Not strictly WCAG, but improves content accessibility when shared on social platforms.

Sustainability changes include:

• add Savannah's name to about page
• update GMU logo
• add email? chnm@gmu.edu
• add accessibility link to footer