netlify: https://the-reading-room-accesibility-project.netlify.app/
Requirements:
#Keyboard Navigation Test
- The student navigates their webpage using only the keyboard, demonstrating that all interactive elements (buttons, links, form fields) are accessible.
- Tool: Manual keyboard navigation (Tab, Enter, Spacebar, Arrow Keys).
#Color Contrast Check
- The student verifies their text has sufficient contrast using WebAIM’s Contrast Checker (or another tool).
- Tool: Lighthouse or WebAIM’s Contrast Checker.
#HTML & ARIA Validation
- The student runs the WAVE tool to check for errors and describes how they fixed any issues.
- Tool: WAVE Web Accessibility Tool or Lighthouse.
Your website must include:
- Semantic HTML – Proper use of , , , etc.
- Minimum two pages - A homepage and atleast one more page
- One form - Atleast one form with two inputs and three radio buttons
- Keyboard Navigation – All elements should be accessible via Tab, Enter, and Arrow Keys.
- Screen Reader Compatibility – Use ARIA roles, labels, and live regions.
- Color Contrast & Readability – Follow WCAG AA contrast ratio (4.5:1 for text).
- Instant Feedback – Display correct/incorrect answers without page reload.
- Logical Focus Management – Ensure a clear tab order and focus indicators.
All Grade G requirements plus the implementation of a minimum of 1 stretch goals:
Stretch Goal Options:
Implement modal with trapped focus and close on escape functionality Implement “Reduced motion support” and add toggle to turn it on or off Implement “High contrast mode” with toggle to turn it on and off Implement “Text customization” with settings to change font size and line height Implement loading indicators with ARIA attributes
Structure Header & Navigation A
with a meaningful(e.g., "Web Accessibility Homepage"). A with links to:🔹 #Home – Homepage🔹 #about – Short introduction to the team A "Skip to Content" link to let keyboard users jump straight to the quiz.
Todo:
-
find content for our site (ex. unsplash or google)
-
start working on the html when agnes can join us, mob programming
-
divide work into branches
-
connect all the buttons and nav links when we have made the other pages
-
change the "learn more" buttons to more accessable, ex. "learn more about us"
-
add a "skip to content" link for screen readers
-
"Use :focus-visible for clear focus indicators."
-
trap on hamburger menu, and fix so it doesn't read the stuff on the main page before the ham menu is closed
figma design: https://www.figma.com/design/VlIardtfAHonAj548mu02m/Accessibility-Project-Team-6?node-id=1-69&t=SscyLpzIZVLcaj5J-0 password: 1234
text content:
-
hero: Welcome to The Reading Room, your cozy escape into the world of books! We’re a community of passionate readers who dive into captivating stories, exchange thoughtful insights, and celebrate the magic of reading together. There’s always a new adventure waiting on the next page!
-
"our books" section: Flexibility meets storytelling. Explore a wide range of titles you can read or listen to online, anytime and on any device. Discover a smarter, simpler way to enjoy great books.
Carolina ideas: add a hamburger menu, look at accessibility tools, divide styling into diffrent files ex. "header styling", julia can do "footer styling", also "homepage styling"(for the rest of the styling on the main page)
//Kittens pictures: Photo by Edgar on Unsplash Photo by Sergey Semin on Unsplash Photo by Anton Kraev on Unsplash Photo by Matthew Larkin on Unsplash