Parker McLean is a freelance digital strategist and creative director based in Vancouver. His work makes accessibility a focal point in an effort to build a more inclusive Web. McLean spoke at Practivism in 2016.
Playwrights Theatre Centre (PTC) provides an accessible, inclusive space for playwrights to hone their craft. Parker worked closely with PTC to build a new site that cultivates a wide demographic of existing and prospective community members, and appeals to potential donors and grant writers. Technology and best practices for both design and accessibility have advanced since PTC’s previous site was created; the design team leveraged these new tools in an inclusive process that engaged both the PTC and its members.
Building an inclusive site means being attuned to the many needs and contexts of diverse visitors — not just of your "average user" but also edge cases or stress cases (more on that in a minute). "Users who are alienated by an inaccessible site are, too often, silent," explains McLean, noting the challenges of measuring accessibility of websites and other digital tools. McLean's solution was to centre their process on opportunities for input from PTC's community: one-on-one interviews, extensive prototype testing (including testing the accessibility of these prototypes), and countless qualitative research sessions with the client. This process allowed the community to be directly involved in the ideation process, instead of designing solely from assumptions and testing afterward. Edge cases were also intentionally embraced and prioritized, which requires thinking beyond the average user's needs and designing for presumably less common needs and contexts. For more on this, we recommend reading our article "Design for All" and the books Design for Real Life and Accessibility for Everyone.
Early in the process, McLean made an effort to deeply understand PTC as a living, breathing organization. "Understanding the passions of the people who propel PTC forward was just as important as understanding the more logistical aspects of the organization," he says.
Accessible design principles
One benefit of accessible design — a design approach for user interfaces, sidewalks or products alike — is that it makes experiences better for everyone. McLean's team considered accessibility from the beginning, rather than an afterthought, which led to interesting results.
In designing the site's navigation, they considered screen magnifiers, which display only part of the screen at a time. The resulting design displays the navigation in a tidy, elegant, easily-scanned grid.
It's common to use icons in place of words to save space, especially in a mobile-first approach. McLean, however, sought ways to use icons to enhance meaning instead; one example is the use of a glasses icon next to accessibility controls in the site's header.
The team even considered accessible copy, explaining that for people using assistive technology, call-to-action (CTA) text often lacks context. "As a result, it was important to craft CTA text that is descriptive, active, and clearly directive is key," says McLean. (Example: "Get involved in PTC".)
The PTC website redesign earned the organization a 20% increase in overall web traffic, compared to the previous year, resulting in increased memberships and donations. It created a platform for playwrights to access resources required to take their craft to the next level, regardless of physical or cognitive ability. And it's easier for members to access grant money and sponsor support thanks to the greater visibility of programming information on the website.
We encourage GDC members to play an active role in advancing accessibility, whether on-screen or in physical environments, by incorporating best practices into your projects and keeping up to date with new tools and techniques. Stay up to date with our resources on accessible and sustainable design and connect with us on Twitter.
Try out these tools and resources today:
- Check your website’s accessibility with the Web Accessibility Evaluation (WAVE) tool
- Try out the contrast checker for text on screen
- Take the pledge for sustainable communication