The goal of this project is to introduce accessibility to frontend developers and designers.
- React
- Typescript
- Playwright
- HTML
- CSS
Please note that this is not a finished product, and certain accessibility aspects are still in development. Aceessibility goals: WCAG 2.2 AA
My TO DO list:
-
Nav toggle (screen reader announces the entire content of mobile menu, and then again with each tab)
-
Missing anchor from TOC to section heading (also test with Playwright)
-
Add role=text to article h1 spans (see https://dequeuniversity.com/rules/axe/4.8/aria-text?application=playwright&lang=en)
-
Make <aside> a direct child of the body (also: check out support for <aside>)
-
Remove max height on accordions (and check against 1.4.12)
-
Missing breadcrumb in mobile view
-
Max 2 lines of centered text
-
Check SR issues with <br> tags
-
On pages with Breadcrumbs focus goes to Breadcrumb not to the Skip Link
-
Add Dark mode
-
Add SITE MAP
-
Add BUG REPORT button in Footer
-
Add BACK TO TOP button for all screen sizes
-
Remove as many accordions as possible
-
LIKE icon
-
Contact form
-
Smooth scrolling
- Replace <div> with <pre> for code examples
- Legal aspect of inaccessibility
- Intro to WCAG
- Testing for A11y
- Your users
- Automating a11y tests with Playwright
- Accessible contact form
- Pixels or rem
- Size of clickable area
- Add more examples!!!