This year, was my second year in a row participating in the Accessibility Internet Rally (AIR) competition. My experience at the 2024 edition can be found on this article
A Few Things About AIR
The Accessibility Internet Rally (AIR) is an annual competition organized by Knowbility to promote web accessibility. This program brings together diverse participants to design and develop accessible websites or applications for nonprofits, artists, and community organizations over the course of eight weeks.
Why AIR Was Special for Me
The first year was a great experience in learning and creating long-term relationships with the team and the client. So I decided I can’t miss this year’s opportunity to meet other like-minded people passionate about accessibility, to create something meaningful as part of a team and to learn new perspectives about creating accessible websites.
A new experience
Our team’s task was to redesign a website for a non-profit organization along 8 weeks. The challenge was to work asynchronously in different time zones. The team was larger than last year, and each one chose how they chose to contribute.
- Team captain: Gathered information from the client and was the contact point with the client and the AIR team.
- Project manager: coordinated the tasks and the meetings.
- Designer: created the style system and the design for Homepage and other pages’ tweaks.
- Developer: implemented the design with WordPress.
- Tester: tested the pages according to the Judges’ Form.
- content creation: provided Alt description for the images
- coach: helped the team in different stages along the way.
We had only a few meetings to get to know each other and to understand the different milestones, and most of the time we worked asynchronously with clear tasks assigned in the Basecamp.
My role
My role was to implement the mockup design into WordPress pages.
- My Role: Designing and developing the WordPress website. I used the Kadence theme & Kadence blocks.
- Front-end Developer: Handled CSS for plugin-related adjustments and other dev tasks along the way.
- Mobile Tester & Team Representative: Ensured the site worked on mobile devices and represented the team in Knowbility virtual events.
- Team Captain: Coordinated the team and gathered information from the client.
- Accessibility Testing Specialist: Focused on accessibility testing with automated testing and assistive technology user testing.
- Coach: We had the support of a mentor who guided us with valuable advice on accessibility experience and approaching different situations.
It was a great team effort, and everyone was involved with dedication and eagerness to do the best possible. Despite the difficulties of living in different time zones and working on a pro bono project, everyone approached it with passion and dedication and invested countless hours to ensure its success. I learned a lot from them, including accessibility testing, an efficient workflow, and how to approach this type of project with a client.
The Process:
We built the homepage and sent it for testing by blind and visually impaired users, as well as through automated tools. After addressing the feedback, we proceeded to build the remaining pages.
Watching video feedback from blind users interacting with the site was a deeply valuable experience. It helped us understand how they navigate websites and what improvements were needed.
Lessons Learned About Accessible Web Design
In addition to best practices I already knew from the courses and trainings, here are some key takeaways:
- Keep structures and pages simple: Avoid long pages and overly complex layouts.
- Focus on clarity and predictability: Make navigation intuitive and inform users about what to expect.
- Design for visual and functional appeal: Use strong contrasts, pleasant color combinations, and minimal but effective visuals.
- Understand screen reader navigation: Users navigate by headings, links, landmarks, or keyboard shortcuts, and excessive noise can hinder their experience.
- Use technical tools effectively: Classes like screen-reader-text and proper semantic HTML are essential.
Accessibility Fixes We Implemented
- Replaced a lightbox gallery with a simple image gallery.
- Added video descriptions for performance showcases.
- Used a search bar instead of popup search functionality.
- Styled links and buttons for clarity.
- Added ARIA labels for links.
- Incorporated call-to-action elements and contact info prominently on pages and in the footer.
- Ensured breadcrumb navigation and clear heading structures.
- Limited page length for easier navigation with assistive technology.
Final Outcome
The final feedback from testers was positive, rewarding our hard work: Overall, a very good and enjoyable experience.
The project was submitted, and we’re now eagerly awaiting the judges’ results, which will be announced in December.
Update January, 10th: The website was launched – dancewaterloo.org!
