Gumaverse

The Accessibility Internet Rally (AIR) is an 8-week online hackathon that grants the opportunity for all participants to learn more and apply accessibility principles in a hands-on project. Knowbility, the internet accessibility nonprofit organization based in Austin, Texas, hosts the hackathon every year to match interested web developers and accessibility experts with clients to create accessible websites.

For AIR 2024, I was matched with 5 other team members, including 1 other UX designer and 4 web developers, and T.J. Masters, a musician, filmmaker, and radio host in Austin, Texas. The hackathon began with a series of kickoff calls in which our group introduced ourselves and learned about T.J.’s vision for his Gumaverse website to replace his Linktree page. The main goal of the website was to have a simple, accessible portfolio website that felt informative and exploratory where T.J. is able to represent his different multimedia strengths and styles in a harmonious way.

T.J. provided us with some examples of websites with neutral colors that are easily navigable to help us with design ideation. Following his suggestions, I took the lead on the designs, presenting T.J. with more inspiration websites and creating multiple iterations of the home page. T.J. and our group aligned on a website design with a black/white color palette inspired by film noir that easily exceeded the WCAG color contrast criteria (SC 1.4.3). We also chose Battambang and Atkinson Hyperlegible as the heading and body typefaces for the website, a serif and sans-serif pairing with unambiguous, distinct characters that enhance legibility and comprehension especially for readers with low vision.

With the designs serving as a guide, the developers began taking on the challenge to develop an accessible Wordpress website. Throughout the process, we referenced the AIR judging form, which listed over 40 items that coincide with WCAG success criteria and that we would be graded by for the competition. One of the biggest challenges was implementing an accessible video player that can provide audio descriptions, support assistive technologies, and be controlled by a keyboard. From testing with a person who experiences low vision, we also identified less obvious accessibility considerations, including making sure that menus can be navigated with keyboards (SC 2.1), providing multiple ways to switch between pages (SC 2.4.5), adding back to top buttons, and optimizing layouts for different screen sizes.

The final result: a responsive portfolio website with a focus on accessibility that all visitors are able to easily browse through and contact T.J if they are interested in a collaboration, regardless of ability. Although it may seem intimidating, digital accessibility is essential to building a more inclusive future in which all people can thrive. Fortunately, as the AIR competition has shown, there is a vibrant community of accessibility experts and enthusiasts who are committed and always available to provide support so that both the journey and destination are accessible to everyone.