Author: Freddie Kaplan, FEA22
- Introduction
- Accessibility on the Web
- Expected Results and Initial Acceptance Criteria
- Research
- Tech Stack
- Testing
- My Accessibility Checker of Choice
- Building the Project Site
- Writing Content
- WCAG References
- Examples
- Contents of the Project Site
- Conclusion
This project explores web accessibility with a focus on Swedish webpage requirements, aiming to develop a highly compliant website using modern frameworks. Despite the unavailability of specific 2025 laws, the project addresses common web accessibility issues, maintaining a developer-centric approach with ample code examples.
The project aligns with the Web Content Accessibility Guidelines (WCAG), emphasizing the principles of Perceivable, Operable, Understandable, and Robust, ensuring coverage of all aspects during example selection.
The project aims to deliver a highly accessible website, offering simplified accessibility information from a developer’s perspective. It comprises six pages, each focusing on a WCAG principle, tested externally to achieve a high acceptance rate (>90/100).
Extensive research involved exploring Swedish sources, linking to WCAG's official site. The project intended to use funka.com but prioritized WCAG principles, providing information and examples.
The tech stack includes React with Next.js, Typescript, and Tailwind for styling. Despite expectations, apart from ESLint the tools didn't help with accessibility.
During testing, Next.js' built-in alert box posed accessibility challenges during development, prompting consideration of alternative React frameworks.
While Tailwind streamlined styling, it did not actively contribute to accessibility.
ESLint, https://www.npmjs.com/package/eslint-plugin-jsx-a11y used with axe-core/react, served as a static checker for accessibility rules but provided limited assistance during development.
Accessibility testing involved browser-based inspections and online checkers, with WAVE being the preferred automatic testing tool for its speed, detail, and ability to show issues.
WAVE, accessible at https://wave.webaim.org, emerged as the preferred tool, offering speed, meticulous reporting, and practical demonstrations of issues.
Utilizing Next.js, the project followed a structured development process, integrating light and dark mode for improved accessibility.
The project successfully implemented light and dark mode, revealing considerations for text color and background contrast.
Content creation involved in-depth exploration of guidelines, resulting in detailed explanations and examples. Writing code snippets presented challenges, leading to the creation of a custom Code component.
The process of visualizing code on the site prompted the creation of a Code component, simplifying code representation with attributes for color and spacing.
References to WCAG principles were systematically organized, with a dedicated page summarizing all criteria and their compliance levels.
The project features examples addressing various accessibility challenges, including those intentionally demonstrating non-accessible scenarios.
Addressing non-accessible examples involved strategic content presentation, omitting CSS details in readable code snippets while ensuring the necessary accessibility in the developed examples.
Incorporated stock images from pexels.com provided visual breaks in the content, with credits to photographers and relevant links.
The project site comprises six pages, each focusing on a specific WCAG principle, accompanied by examples and references.
Introduces the site, highlights global accessibility standards, and acknowledges the project's school context.
Demonstrates alternative text usage, color information without reliance on color alone, and contrasts using light/dark mode.
Addresses clickable area size criteria and navigability using keyboard-only interactions.
Focuses on form label provision and error suggestion practices.
Highlights semantic HTML usage and the Name, Role, Value criterion using different form versions.
Summarizes all WCAG criteria used on the site, providing clarity on compliance levels (A, AA, AAA) with links to respective principle pages.
The project successfully met expectations, though adjustments were made, shifting focus from Swedish laws to the four WCAG principles. Despite minor deviations, the site achieved high accessibility scores.
The original acceptance criteria were fulfilled, with the site maintaining six pages, focusing on WCAG principles, and achieving a high accessibility acceptance rate.
Opportunities for improvement include incorporating a search function and expanding the Swedish angle by adding a mobile navigation page, a Swedish language version, and information about the new Swedish law when available.