Accessibility Kiwi
In 2021, my perspective on design underwent a profound shift after meeting individuals who rely on accessible digital products. This experience deepened my commitment to accessibility, leading to the creation of Accessibility Kiwi, a reformatted and explanatory WCAG 2.2 guide to provide the right information at the right time throughout the design process.
Digital products should
be usable by everyone,
no exception.
As the author, designer and developer of this guide, I have been gratified by the positive feedback Accessibility Kiwi has received. This documentation will take you through the background, knowledge acquisition, analysis of content and functions, research, goals and the design process. It also covers the backend concept and the final conclusion.
Certificates & Publications
- W3C Certificate: Introduction to Web Accessibility (2021)
- Publications: Medium (2023–now), @access.kiwi (2023–now)
- Mentions: Kirbysites (2023)
Background
We are living in the 21st century – and electronic devices have become integral to our daily lives. Our world is filled with unique people with different needs in different situations. Imagine sitting in the sun and effortlessly reading this text due to optimal color contrast, or resizing it with ease. You might even be doing one of these right now. Practical, isn’t it?
By embedding accessibility into design and development, we contribute to a more inclusive web. Or – if we need to convince our businesses to invest – we increase sales (and much more). However, accessibility is not just a short workshop; it is an ongoing commitment. Accessibility Kiwi was born from this understanding, aiming to make the Web Content Accessiblity Guidelines (WCAG) – authored by the people who rely on them – an inherent part of the design process.
Knowledge
Meeting people with disabilities “irl” was the catalyst for my deep dive into accessibility. The W3C’s “Introduction to Accessibility” course provided profound insights into the daily challenges.
But this was just the beginning. For truly grasping the impact on design decisions, every single criterion of the WCAG was analysed.
The vast scope of knowledge, from WCAG updates to legal regulations, is constantly evolving. Conferences and workplace surveys help maintain a fresh perspective.
Conclusion
This journey from basic knowledge to in-depth expertise has revealed the vast amount of information that is constantly being refined. Staying updated and having this information at hand at the right moment during the design process is crucial.
Analysis
The large number of criteria contains a variety of information. Some are simple, some are complex; some are relevant for designers, some for other areas. Analysis revealed the most important variables:
- name for identifying the topic
- level (A, AA, AAA) for indicating its importance
- number for official communication
- link to WCAG for easy access to official documents
- brief comment for explaining the impact on the design
- tags for revealing the topics and filtering
- explanation of the relation to design
- explanation of the relation to development (optional)
- original description to clarify uncertainty
Conclusion
Defining these essential variables for designers provided a structured approach for the next steps.
Research
Existing accessibility guides and articles often only scratch the surface, lacking the depth crucial for thorough implementation. They typically address specific cases or single criteria rather than providing a comprehensive guide for the design process. My previous project, lokalein.kaufen [localshop.ping], emphasized simplicity, but the extensive amount of information needed for this guide demanded a new approach.
Several interesting functions were discovered:
- show and hide a large amount of content for quick insights
- single pages for sharing and bookmarking specific criteria
- open search across the entire content for finding individual keywords
- filter for authored navigation
Conclusion
The wealth of necessary information was not reflected in existing resources as needed for efficient implementation in the design process. While handy functions were discovered, a restructured and authored guide was necessary.
Goals
The primary goal of Accessibility Kiwi is to integrate the WCAG seamlessly into the design process, ensuring no critical aspects are overlooked. A secondary goal is to raise awareness, encouraging other designers to adopt these standards at the right stages of their work.
Authoring
- Each criterion is easy to understand.
- Descriptions are brief and focused on the design process.
- Examples are ideas, no prefabricated solutions.
- Content is based on the current WCAG 2.2.
Design
- Relevant criteria are easy to find.
- Each criterion is easy to understand at first glance.
- Details are easy to locate.
Design
Designing Accessibility Kiwi required careful consideration of how each criterion should be presented for easy understanding and how the large number of criteria should be organized for efficient navigation.
Throughout the project, ideas had popped up. They were carefully collected, refined and combined with new insights as the project evolved. The final idea was the vertical alignment of the criteria, making the design of the criterion the most essential part.
Headline
Level and number needed to be easily scannable in relation to the name.
- First approach: Positioned level and number at the top-right corner of the card for easy visibility.
- Problems: Limited space on responsive screens and issues with longer names.
- Solution: Straight alignment at the second position in reading order, supported by distinct typographic styles.
- Conclusion: Tiles had to be flexible to accommodate varying amounts of content.
Accordion
Details needed to be shown and hidden without interrupting the filtering and scrolling process.
- First approach: Used a strong background in the accordion design to make details stand out.
- Problem: While effective for a single criterion, it was distracting when applied to a large collection.
- Solution: More subtle design with underline and icon to clarify the function.
- Conclusion: Scanning a lot of content is easier with less dominant highlighting.
Keyboard Navigation
Accessibility requires keyboard navigation.
- Problem: Accordion could not be opened or closed.
- Solution: Fixed the VanillaJS code with ChatGPT.
- Conclusion: A lot of accessibility depends on the development.
Grid
The large number of criteria required careful consideration of how they should be sorted to make them easy to find.
- Alignment: Criteria are sorted vertically by number to ensure nothing is overlooked and to align with standard WCAG sorting for international collaboration.
- Width: Even though the amount of content can be quite large, the width of the content was adjusted for better readability.
- One page: All criteria are displayed without pagination, because it distracts from the reading and searching process. To keep the page fast, lazyload for media was integrated.
Search and Filter
The functions from the analysis were incorporated at the top for supporting the initial navigation.
- First approach: Search was positioned sticky at the top of the page.
- Problem: Space and distraction were too much during the reading process.
- Solution: Integrated the search function above the static filter.
- Conclusion: Testing for potential distractions should be conducted before finalizing development.
Enhancements
During the testing of the site, several enhancements for the readers were integrated. For example:
- Sticky title: Scrolling through the details of the criteria is supported by a sticky title to maintain orientation.
- Hover tooltip: Hovering the cursor over external links reveals a tooltip with its destination, improving usability even if limited to cursor-based interactions.
Conclusion
The design of Accessibility Kiwi was a methodical, iterative process that focused on clarity and ease of navigation. Each challenge presented an opportunity for refinement, resulting in a flexible and comprehensive tool that enables designers to efficiently access and apply essential accessibility information.
Backend
The backend was designed for efficiency in content authoring and note-taking. The simple, minimal hierarchy structure was developed with Kirby, a CMS that allows for easy customization. Key features include:
- Criteria pages: Each criterion is hosted on its own dedicated pag, divided into sections for basics, design description and optional development description.
- Dashboard: The basic table provides an overview of essential variables, accompanied by a text field for free-form notes.
Project Conclusion
Accessibility Kiwi serves as a structured and intuitive guide that makes the WCAG 2.2 more approachable and integrable for designers. It addresses the critical need for seamlessly incorporating accessibility into the design process and intensifying an ongoing commitment to inclusivity. Its well-organized structure ensures that relevant information is available at the right time.
Learnings
- I have been deepening my skills in accessible design. As an author, I have been learning a lot about accessibility, realizing that many others are still starting with the basics and initial reasons for the importance of accessibility, rather than delving into details or keeping up with new trends. I will continue learning and expanding my knowledge.
- Publishing is important. Simply putting content online and “waiting” is – obviously – not enough. Active promotion is necessary to raise awareness and encourage other designers. And it works: articles are receiving positive resonance and increase the page views. I plan to publish more content and spread the word even more to increase awareness and knowledge.
- I understand the project management perspective. Striving for perfection can be counterproductive, and a project does not have to be perfect to be very good. Even though this project is not primarily focused on business results, I have learned that sometimes products need to be launched. After that, further improvements can be made (but not ignored). I will keep this perspective in mind for my future projects and recognize the importance of finding a balance between perfectionism and economy.
Next Steps
My next steps include continuing to contribute to a more inclusive web and ensuring that digital products are accessible to everyone, without exception.