top of page

Accessible Web Design

Competition: Knowbility AIR

A team effort to build an accessible website for the National Women’s Theatre Festival(NWTF) under the Accessible Internet Rally(AIR) competition hosted by Knowbility

This project aims at

- Leadership efforts to manage a cross-geography team

- Implementation of accessibility as per WCAG2.1 guidelines
- Client engagements

Context

Accessibility Website Design Competition

  • Knowbility Hosts an 8-week-long Accessibility Internet Rally (AIR) annually, where design and development teams are connected to Non-Profits to create an accessible website.

  • The Client I worked with participated in the competition. We were a team of 6 spread across India, Egypt and the US. The NPO assigned to us was the National Women's Theatre Festival (NWTF). I was the Team leader and designer.

Competition logo that calls out- "AIR - Accessibility Internet Rally"

Engagement

About the event

Organizer: Knowbility

​

Knowbility is a nonprofit organization with the mission of creating an inclusive digital world for people with disabilities. This critical work improves technology access for millions of youth and adults with disabilities all over the world. Know more at www.knowbility.org

Competition: Accessibility Internet Rally (AIR)​

​

The Accessibility Internet Rally (AIR) aims to bring hands-on experience in how to design accessible websites in a practical, real-life setting. Participants are trained, supported and mentored. Clients (non-profits) are educated about the accessibility of websites.

Competition logo that calls out- "AIR - Accessibility Internet Rally"

Client: National Women's Theatre Festival (NWTF)​

​

National Women’s Theatre Festival (NWTF) is the Carolina-based client assigned to us. They are a non-profit that works in the space of gender parity in the theatre space since 2016. Started out as a revolution, and now it is an organised production house with events and activities all around the year

Logo of the group ' Women's Theatre Festival'

Role: Team lead and designer

8-week engagement

Team name: Allies of A11y

​

We were a team of six from Los Angeles, Mexico, California, Cairo and of course India. A mix of skill sets from development, designing, UX writing and product design were present in this team. I was the team leader, and I was the youngest.

 

Looking at the team’s experience I knew there was not a lot to offer uniquely in terms of design or development skills. Hence I took it as a learning opportunity and put my time on the table. I knew that was my strength and it would be difficult for others to pitch in time.

 

We had accessibility experts and UX writers on the team. Overall, it was a nice experience. There were differences among team members but it did not affect our timeline and we were able to deliver the website on time. 

Preparations

  • Signup process

  • Planning the first session

  • Checking on last year's entries

Week 1

  • Breaking the ice

  • Setting up platforms

  • Understanding work patterns

Week 2

  • Connecting to the client

  • Meeting & client interview

  • Design planning and requirement identification

Week 3

  • Finalising site architecture

  • Prioritising Pages

  • Finalising hosting platform

  • Developing a project plan

Week 4

  • Wireframes for homepage

  • Designing style guides (colours and typography)

  • Curating assets and content

Week 5

  • WordPress account creation

  • Feasibility study for plugins and integrations

  • Testing design style guides

Judge's list to grade the website
Snippets from figma of the final page designs of the website
Logo of Wordpress
World map with Pins of the location of all team members
Snapshot of a zoom meeting with the team and the client.
Snippet of time zone alignment and logos of third party platforms that were used. Platforms used were Miro, Figma, OneNote, Teams, Slack, Planner
Snippet of the finalized Information architecture for the website

Week 6

  • WordPress onboarding

  • Developing homepage

  • Wireframing other pages on the lines of the homepage

Snippet of the homepage wireframe
Snippet of the final design of the home page

Week 7

  • Developing other pages

  • Preliminary accessibility check and fixes

  • Plugins and integration

Week 8

  • Content filling

  • Site testing

  • Submission

  • Retrospection

Wrapping up

  • Documentation

  • Client handoff

  • Account transfer

  • Feedback session

View of the home page on a laptop screen and a tablet screen

Team engagement

Timeline estimates

Setting the team together​

The first step was planning for an icebreaker. I planned for intro cards so that members could voluntarily network as professionals on a platform outside the scope of the competition too.

Setting up logistics, and processes and understanding ways of working

We were a diverse team, so I decided to understand everyone's way of working and preferences of tools to make sure we have a common consensus of logging the work and reducing the time to learn a new tool.

Snippet of a card that was used for Ice breaking session

Engaging with the client

We understood our client's business and then set workshops to dig into the requirements. Over a week we had the requirements and expectations. By the third week, we had agreed upon the Information Architecture (IA).

Keep the wheel spinning

After setting the teams and processes, understanding client needs and setting expectations were next in line. This exercise helped in aligning for a mutually agreed goal.

Logos of third party platforms that were used- slack, Microsoft Teams, One note, Miro
Snippet of table that was used to align timezones in order to fix a meeting time

Planing deadlines and milestones​

We set up an estimate of the engagement with a week’s buffer at the end. The start was enthusiastic but the storm ‘Ian’ in October 2022 cost us a week of work. Thankfully the plan had accommodations for emergencies. With a minimal push, the team was back on track. I also had to take strict measures against a team member who was ghosting and not meeting the deadlines which created blockers.

Grid view of the timeline plan for building the website

Final website glimpses

Deliverable​

  • 6 pages

  • Platform: WordPress

  • Accessibility

  • Responsiveness

  • 3 third party integrations

    • Eventbrite(events)

    • NeonCRM(donations)

    • Sellfy(online sales)

Snapshots of the website pages on Laptop and mobile screens

Insights

WCAG​

​

Accessibility is not accommodating the marginalised but creating something which works for all. Accessibility guidelines are pretty mature and one can refer to WCAG for accessibility compliance. For general websites, AA compliance should be good. All govt. websites abide by WCAG. Non-compliance may have legal implications. 

Accessibility Checks 

​

For foundations, we established an accessible colour palette. Next, we targeted a type scale that has no mirror alphabets and legible formats. Lastly, a few design components need to have accessible use like media need to have media controls. Other design components may not be accessible. Eg: unintuitive Parallax implementation. mixing vertical and horizontal scrolls.

Tools and Extentions​

​

We used Figma for this project. Our go-to tool for accessibility checks was Stark - a free plugin for quite a few accessibility checks. To check accessibility issues for a published website, one can use the ACE extension for google chrome. For WordPress, the WP Accessibility plugin is just amazing. WordPress seemed generally a great platform that supports accessibility actively. 

bottom of page