This project was part of a global web accessibility competition - OpenAIR: the Accessibility Internet Rally 2018 organized by Knowbility to be completed in 5 weeks. As part of a team of 3 web developers, we competed against 13 teams in the Professional Developer category. In this competition, OpenAIR partnered teams with nonprofits to create accessible websites for these organizations that will serve all populations equally, including persons with disabilities. We were judged mainly on web accessibility criterias such as:
- Core Accessibility (use of alt text for images, semantic markup, color contrast, ARIA landmark roles, etc.,)
- Basic Accessibility, Usability and Rally Requirements (spelling, form controls, site map, search, etc.,)
- Overall Site Quality (visual aesthetics, site appropriateness, etc.)
- Advanced Accessibility (data tables, audio transcripts, responsive design, etc.,)
- Nonprofit Organization Satisfaction
Disclaimer: Site has been heavily altered since it was handed over to the client.
ClientAmerican Council of the Blind Nebraska
RoleTheming, Information Architecture, User Experience
- Drupal 8
- Design system
- BEM and ITCSS methodology
- Adobe XD
We were paired with the American Council of the Blind of Nebraska to help them overhaul their website. Their original website was built on Wordpress without any form of design/theming. Content was also not organized in an intuitive way.
For us, this was a great opportunity to introduce fresh UI redesign for both screen and print, content strategy and an intuitive information architecture, layout that enhances UX, a platform that allows for easy site maintenance, and of course an end product that is highly accessible to all end users. We also incorporated SEO improvements and Google Analytics.
With input from our client, we decided on Drupal 8 as the platform of choice due to its open-source and ease of maintenance among many other factors. This was our first time building a site in Drupal 8, but we all have had experience building websites in Drupal 7.
The Process Taken
- Site discovery and content inventory phase
Inventorized existing content, and made notes of areas of improvement.
- Content Migration and Site Creation
Major content editing and reorganization was performed to improve user experience. An intuitive information architecture was created as a result of careful content planning and strategy.
- Branding, design and prototyping phase
I picked colors and fonts that match the organization’s purpose. Color selection criteria also met the WCAG 2.0 AAA standard with a contrast ratio of 7:1. Mockups were created using Adobe XD.
- Implementation phase
After the Drupal 8 instance has been set up, I was responsible for sourcing the needed Drupal modules, installing, and configuring them. I also played a large role in setting up various content types and dynamic views to populate the site. Other features implemented:
- Used twig template files to create custom theme/design system with fluid typography
- CSS styles for print and media
- Support touch screens in the main navigation by using a button to expand/collapse drop down menus (rather than a link)
- Audio transcript
- WCAG 2.0 compatible
Throughout the entire process we sought constant input from the client who is visually impaired and a great subject for our user testing. We made every effort to communicate frequently and the rationale behind our design and development choices every step of the way.
Our dedication and hard work won us first place in the Professional Developer Team category and we achieved the best score in 20 years of the competition’s existence.
Seven Developer Teams Place While 153 Developers & 25 Nonprofits Win During The OpenAIR 2018 Website Accessibility Competition
Oh! My! Y'all were the best score we have had in 20 years of producing Accessibility Internet Rally (AIR) competitions. 'Brilliant' as the Brits say. *Thank you* for stellar effort.— Knowbility (@knowbility) May 20, 2018