The Zenika A11Y Component project provide a very basic and versatile design toolkit that can fit in any project. It put accessibility and usability first and is a perfect starting point to build up more complex design systems or to fit into existing ones.
At Zenika we have the opportunity to work on many different environments and we are often confront to the same requests and issues. When it comes to front-end development, the diversity of technical environments and functional requirements is extreme. Because of that, we have a unique perspective and some knowledge to share. Through this project we intent to centralize our knowledge by creating a simple design toolkit that contain all our best practices regarding web design and front-end development.
It is a simple way to make sure that the good work we are doing with a given framework or tool can be replicated with another one without reinventing the wheel each time. It's also a good way to normalize and document all our best practices regarding the development and the design of UI component. To some extend it's a form of a knowledge base dedicated to our future colleagues and the whole web community.
For all of our components we intent to :
- Document their functional and technical requirements.
- Design them in a way that allow to use them as a standalone design system or as a companionship to any existing design systems.
- Implement them for as many framework as possible.
- Ensure that their are fully compliant to WCAG 2.1 AA out of the box.
- Test them extensively (including real-life screen reader usage).
This design toolkit is a foundational work made to demonstrate Zenika exceptional skills regarding web design and front-end development.
- Headless UI
- Scott O'Hara's Accessible Components
- Inclusive Components
- BBC GEL
- Deque Code Library
- A11Y Style Guide
- eBay MIND Patterns
- Building an Accessibility Library, by Stephanie Hagadorn.
- Design Systems Trends and Best Practices, by Adam Zielonko.
- Translating Design Wireframes Into Accessible HTML/CSS, by Harris Schneiderman,
- Weaving Web Accessibility With Usability, by Uri Paz
- Good, Better, Best: Untangling The Complex World Of Accessible Patterns, by Carie Fisher
- Designing for Screen Reader Compatibility, by WebAIM
- Getting Started with Web Accessibility in Vue, by Emily Mears
- Apple Human Interface Guidelines
- Google's Material (and their accessibility guidelines)
- Salesforce's Lightning (and their accessibility guidelines)
- GitHub's Primer (and their accessibility guidelines)
- Ant Design
- Clarity
- Atlassian Design (and their accessibility guidelines)
- Microsoft's Fluent UI
- IBM's Carbon (and their accessibility guidelines)
- Auth0's Cosmos
- Shopify's Polaris (and their accessibility guidelines)
- UK Government Design System
- US Government Design System
- French Government Design System
- CSS tools and frameworks
- Bootstrap
- Pure.css
- Foundation
- Bulma
- Tailwind CSS
- Pré-processor: Sass, Stylus, LESS.
- Other tools: PostCSS, Styled Components, JSS
- JS libs and frameworks
- React and their accessibility guideline
- VueJS
- Angular and their accessibility guideline
- Svelte
- Ember and their accessibility guidelines
- ELM
- LitElement (Polymer)
- AMP
- A11Y Linter and testing tools
- Axe core (used by Lighthouse)
- WAVE
- ARC
- Codelyzer (TypeScript, Angular)
- HTML CodeSniffer
- eslint-plugin-jsx-a11y (JSX, React)
- eslint-plugin-lit-a11y (Web Components, Polymer, Lit-HTML)
- stylelint-a11y
- @storybook/addon-a11y (StoryBook)
- HTML linter has accessibility rules in SonarQube
- Asqatasun previously known as Tanaguru
- Github integrated tools (blog): axe-linter, lighthouse-ci github app