The A11y project is dedicated to ensuring that applications are accessible to all users, including those with disabilities. This README provides a comprehensive summary of design principles, testing methods, best practices, and essential resources related to accessibility. Contributions from the community are welcome to enhance accessibility across all platforms.
- 👋 Introduction
- 🎨 Design Principles
- 🧪 Testing and Validation
- 💡 Best Practices
- 🔗 Resources
- 🛠️ Plugins and Tools
- 🤝 Contributing
Accessibility (A11y) focuses on designing and developing products that can be used by people of all abilities and disabilities. The goal is to create inclusive applications that provide a seamless experience for everyone.
Implementing the Atomic Design Pattern is key to integrating accessibility at every level of application design. By breaking down the user interface into smaller, reusable components (atoms, molecules, organisms), each element can be made accessible, ensuring consistency and usability across the application. This approach promotes the creation of robust, scalable, and maintainable designs that inherently support accessibility.
For more details on Atomic Design, refer to Atomic Design by Brad Frost.
1. Role and Label Clarity
- Roles: Define the purpose of each element (e.g., button, input, heading) to assist screen readers in understanding their functionality.
- Labels: Provide descriptive labels for all interactive elements (e.g., buttons, links) to convey their purpose and functionality to users with visual impairments.
2. Grouping for Context
- Grouping: Organize related elements into logical groups to improve navigation and comprehension.
- Labels for Groups: Assign clear labels to groups to provide context and aid in understanding their relationship to other elements.
3. Hints and Instructions
- Hints: Offer helpful hints to guide users through complex interactions or provide additional information.
- Instructions: Clearly communicate requirements and expectations for input fields to ensure accurate data entry.
For specific guidance on accessibility principles across different platforms, explore the following resources:
- Principles for accessible design (Material Design) Accessibility & Material Design
- Android: Accessibility Principles for Android Apps, Make Your Android App More Accessible, Testing Android App Accessibility, Android Developers Blog on Accessibility
- iOS: iOS Accessibility Programming Guide - Provides an overview of implementing and enhancing accessibility features in iOS applications.
- Web: Web Content Accessibility Guidelines (WCAG), WCAG 2.1 Checklist, Mobile Accessibility Guidelines by W3C, Understanding Cognitive Accessibility
Testing is crucial in verifying that applications meet accessibility standards. Utilize the following tools and methods:
- 🔧 Automated Tools: Use tools like Axe, Lighthouse, and Wave to identify common accessibility issues.
- 👨🏫 Manual Testing: Includes testing with keyboard-only navigation, screen readers, and evaluating color contrast ratios.
- 👥 User Testing: Engage users with disabilities to test the application and provide valuable feedback.
- Chrome Testing: https://developer.chrome.com/docs/lighthouse/overview?hl=de
For detailed testing guidelines and tools, explore the following resources:
Define and document specific test cases to validate the accessibility of applications.
To ensure applications are accessible across platforms, consider these best practices:
- Use Semantic Elements: Apply appropriate semantic elements or components that convey meaning and structure, such as headings, lists, and buttons.
- Keyboard and Touch Accessibility: Ensure all interactive elements can be navigated and activated using both keyboard (or equivalent) and touch input.
- Provide Alternative Text: Include descriptive alternative text for images, icons, and other non-text content.
- Accessible Colors and Contrast: Use color combinations with sufficient contrast to ensure readability for users with visual impairments.
- Consistent and Predictable Navigation: Design navigation patterns that are consistent and predictable across different screens and platforms.
- Support Screen Readers: Ensure that applications work well with screen readers by providing meaningful labels, hints, and roles.
- Focus Management: Implement proper focus management to ensure that focus is visible and intuitive when navigating through the interface.
- Avoid Relying on Color Alone: Do not rely solely on color to convey information; use text, icons, or patterns as additional indicators.
- Test Across Devices: Regularly test applications on various devices and operating systems to identify and resolve platform-specific accessibility issues.
- Use ARIA Wisely: On the web, apply ARIA (Accessible Rich Internet Applications) attributes only when necessary, ensuring they are used correctly to enhance accessibility.
For platform-specific guidelines, refer to:
- Android: Accessibility Principles for Android Apps
- iOS: iOS Accessibility Programming Guide
- Web: WCAG Accessibility Guidelines 2.2
Explore these valuable resources to learn more about accessibility:
- W3C Web Accessibility Initiative (WAI): W3C Web Accessibility Initiative
- WCAG 2.2 Guidelines: https://www.w3.org/WAI/standards-guidelines/wcag/
- WCAG Overview: https://www.w3.org/WAI/test-evaluate/
- WCAG Pattern Overview: A great overview for common patterns https://www.w3.org/WAI/ARIA/apg/patterns/
- W3C Accessibility Perspective Videos: W3C Accessibility Perspective Videos
- WCAG in Plain English, Making accessibility standards easy to understand.: https://aaardvarkaccessibility.com/wcag-plain-english/
- Understanding Cognitive Accessibility: Understanding Cognitive Accessibility
- Accessibility Testing Checklist: Accessibility Testing Checklist
- Are You Serving All Your Users?: Are You Serving All Your Users?
- All Platforms: Provides a comprehensive checklist for accessibility across all platforms. Accessibility Checklist - MagentaA11y
- Android: Make Your Android App More Accessible, Accessibility Principles for Android Apps, Testing Android App Accessibility, Android Developers Blog on Accessibility, Designing Accessible Mobile Apps
- iOS: iOS Accessibility Programming Guide
- Web: What is Accessibility? — IxDF
- Microsoft Inclusion: https://inclusive.microsoft.design/
- ScreenReader app: A free resource to learn and practice VoiceOver and TalkBack gestures and actions 📱👂🎧🖱️
Offical Organisation
- Swiss Organization ADIS (Allianz Digitale Inklusion Schweiz): https://www.adis.ch/de/
- EDI Behindertengleichstellungsgestz: https://www.edi.admin.ch/edi/de/home/fachstellen/ebgb/recht/schweiz/behindertengleichstellungsgesetz-behig.html
- European accessiblity act (EAA): https://web-directive.eu/#toc4 & https://www.youtube.com/live/AHxasDBBskE
For Designers
- Figma File from Daresay: https://www.figma.com/community/file/1304816081342838653
- A Designer's Guide: https://stephaniewalter.design/blog/a-designers-guide-to-documenting-accessibility-user-interactions/?utm_source=brevo&utm_campaign=5%20Accessibility%20Resources&utm_medium=email
- The A11Y Project: Easy to read & follow check list https://www.a11yproject.com/checklist/
- Web AIM Check List: Official wcag list https://webaim.org/standards/wcag/checklist
- Figma Anotation CVS Health https://www.figma.com/community/file/1311421011482282592/web-accessibility-annotation-kit
- Designing with Accessibility in Mind Workshop: Usefull links, AI prompts and presentation material https://github.com/mpaiva/a11y-workshop/tree/main
- Figma Plugin Include: Spec tool from ebay https://www.figma.com/community/plugin/1208180794570801545/includeaccessibility-annotations
- Figma Plugin WCAG Plugin: Creates a11y guidelines as cards https://www.figma.com/community/plugin/1373362852131056921/wcag-plugin
- Figma Plugin Stark and Chrome Plugin: Make everything accessible from the start. https://www.figma.com/community/plugin/732603254453395948/stark-contrast-accessibility-checker & https://chromewebstore.google.com/detail/stark-accessibility-check/fkfaapnmfippddbeemjjbclenphooipm
- Figma Plugin Axe: https://www.figma.com/community/plugin/1085612091163821851/axe-for-designers-a-free-accessibility-plugin
- Accessbility Posters in German: https://github.com/UKHomeOffice/posters/blob/master/accessibility/dos-donts/posters_de/accessibilty-posters-set-de.pdf
Contributions are encouraged to improve accessibility. Feel free to create MR with improvements to this README.