Designing for Accessibility: Applying WCAG Principles in a Google Form Project

To deepen my understanding of accessible design, I was challenged to create a fully usable and inclusive Google Form that aligned with the Web Content Accessibility Guidelines (WCAG). The goal was not just to build a form that functioned well, but to intentionally apply accessibility principles that would support a broad range of users. I chose to design a sign-up form for a community book club—an inviting, real-world scenario that required flexibility in how people participate, engage, and lead. Interested in exploring my form? Click the following link to open the fictional West Bay Community Book Club Sign-Up.

Initial Design Approach

My first step was to map out the structure and visual design of the form with accessibility in mind. I opened the form with a welcome message that introduced the purpose, estimated time to complete, number of sections, and included a “mailto:” link for contacting me directly. I also added a descriptive link to Google Forms help documentation for users navigating with assistive technology.

To enhance usability, I enabled the progress bar, providing visual orientation through each section. For readability, I increased the font size and selected Open Serif, a typeface with strong legibility across platforms. I established a clear visual hierarchy by bolding section headers and question prompts, leaving response options unbolded to reduce visual clutter. For color contrast, I chose two complementary blue tones with a contrast ratio of 7.73:1, surpassing WCAG AAA standards to ensure text remained easily perceivable. (When checking color contrast, I often use the online color contrast tool provided by WebAIM.)

Iterative Audits and Improvements

After completing the first draft, I began an audit process to refine and strengthen accessibility. I initially used the terms “virtual, in-person, and hybrid” to describe participation options, but revised them to “online, in-person, or both” to align with plain language principles and avoid confusion.

During a second round of testing, I navigated the form using only a keyboard in both Safari and Chrome. This revealed that the date field relied on users clicking a calendar icon—something inaccessible without a mouse. I updated this section by adding a clear format prompt (e.g., MM/DD/YYYY) to ensure users could enter the date manually without triggering errors.

In a final round of edits, I conducted a screen reader test using VoiceOver on my MacBook. Hearing the form aloud helped me identify areas of overly dense or unclear language. The introduction, in particular, sounded like a block of undifferentiated text. I simplified the language, broke it into bullet points, and made several small adjustments for clarity, improving the form’s usability for screen reader users.

Conclusion

This project was a practical opportunity to explore how accessibility standards can be thoughtfully applied within tools like Google Forms. By focusing on structure, navigation, readability, and inclusive language, I created a form that aligns with the four core WCAG principles: perceivable, operable, understandable, and robust. It also deepened my appreciation for the ways small design choices can reduce barriers and create more welcoming digital spaces. See things about my form that can be improved? Have a different perspective? Something I missed? Please leave a comment and let’s discuss!

Reference:

World Wide Web Consortium (W3C). (2018). Web Content Accessibility Guidelines (WCAG) 2.1. https://www.w3.org/TR/WCAG21/