This year, I had the incredible opportunity to participate in the Accessibility Internet Rally (AIR) competition. Alongside a group of amazing teammates, we built an accessible website for a nonprofit organization (NPO).
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.
Who Participates in AIR?
- Nonprofits and Community Organizations – The clients, who receive assistance in creating an accessible website.
- Web Professionals – Designers, developers, and accessibility specialists collaborate and learn from each other to build accessible websites for clients.
- Mentors – Experienced accessibility professionals who guide teams throughout the competition.
The Knowbility team provided all the resources necessary for success, including training, guidance, support, and tools.
Why AIR Was Special for Me
AIR was the perfect opportunity to apply what I had learned from courses, books, articles, and meetups in a practical and meaningful way. It was an incredibly valuable learning experience.
How We Worked Together
Our team’s task was to redesign a website for a dance organization. The challenges included meeting deadlines while working with a new team across different time zones (New Zealand, USA, UK, and Romania).
We had weekly meetings: client meetings, team meetings and dev meetings. We expanded our workflow at the beginning and made adjustments as needed to stay on track.
Team Roles:
- 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.
