By Belinda Bruce

 

What is inclusive design? What does an accessible website look like? Or more accurately, what does it look, sound and feel like?

These questions arose while we were building the new PTC website this year.

We decided to create an accessible website for several reasons: to meet the requirements under the WC3 Web Accessibility Initiative, which aims to enable people with a lived experience of disability to participate equally on the Web; to do our part for British Columbia’s Accessibility 2024 plan; and to confirm our commitment to making PTC accessible to a wide variety of lived experiences. The project also aligned with PTC’s fresh vision to “reimagine theatre” with everyone.  The new site would allow us to roll out our new expansive and inclusive identity in more ways than one.

The site design was planned as part of the ACK Lab project, a PTC initiative with our partners – expert experience designer Jan Derbyshire and the Inclusive Design Research Centre (IDRC) at OCAD University in Toronto – which aims to provide resources and space for inclusive collaboration within the theatre community.

Website dramaturgy

Like the plays we collaborate on, our website would grow from research, asking the right questions, challenging our assumptions and balancing creativity and practicality.

We started with consultations on methodologies and practices in accessibility and inclusion, and continued with the site plan, content creation, UI design, user testing, and then – poof! – the public website.

The design process was in-depth. It began with a consult with Jan Derbyshire to outline resources and goals for the accessibility of the site.

Note 1: Inclusive design and accessible design are different things.

Accessible design involves more than just having some tools to increase the font size and contrast on web pages. Accessibility means creating web pages designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. That means a website that is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability, and to people from different cultures, non-digital natives, older people with changing abilities due to aging, even people with a slow Internet connection. Our aim was to create a site that everyone can perceive, understand, navigate and interact with.

Designs should be built to make websites accessible to people using adaptive strategies and assistive technology. Adaptive strategies include increasing text size, reducing mouse speed, and turning on captions. Assistive technology includes screen readers that read aloud web pages for people who cannot read text, screen magnifiers for people with some types of low vision, and text-to-speech voice recognition software and selection switches for people who cannot use a keyboard or mouse.

There are a few online tools to check the accessibility of your website. We used the Wave website accessibility evaluation tool (Give it a go!). We soon learned that most sites do not meet accessibility standards. Our old site contained lots of errors and red flags, including missing alternative text and structural issues.

Inclusive design, according to the IDRC, “keeps the diversity and uniqueness of each individual in mind”. The process includes consultations with individuals who have a multiplicity of lived experiences.  This respects the edict “nothing about us without us”  to avoid relegating people with disabilities to the role of subjects of research or token participants in design exercises.  Naturally, design consultants should be compensated just like everyone else involved in the project.

Before dreaming up any design ideas, we began educating ourselves about inclusive and accessibility protocols, beginning with: language. We started to restock our semantic toolbox. For example, rather than saying “people with disabilities”, we say “people with a lived experience of disability” to reflect the social model of disability. We quickly realized that there is a real variety of practice around language, and that we need to be prepared to learn and change as we encounter different perspectives and analysis. Accessibility is a process, not a destination.

We chose Vancouver digital branding agency In the Rye Creative as our design partners for the new site. We were swayed not only by the stellar recommendations we received from others, but by principal designer Parker McLean’s talk for the Design and Content Conference 2015 about his experience with creating accessible user experiences on the web and his own lived experience with vision impairment.

Site construction would be on the open source platform WordPress, which has some built-in core accessibility features in its source code. And WP has an Accessibility Handbook with Questions to Ask to assess your site’s accessibility. The four main principles of what a website should be: perceivable, operable, understandable and robust.

Jan advised us that an inclusive website design process meant consulting with a curated group of eccentric users, People of Design (POD), at the beginning of the process – the wireframe stage (if you’re not familiar with wireframes, think of it basic underlying structure of the site, like the frame of a house). This would ensure that we challenged and opened up our assumptions about structure before we start conceptualizing, or we’d be ‘adapting’ things after the fact. We planned to have two POD sessions, one for the wireframe stage and another once the user interface (UI) was created.

Note 2: adjust expectations. We didn’t achieve a high level of inclusive design, because we didn’t understand what the time investment would need to be from the outset. We also (due to a lower level of funding than when the project was originally planned) had limited resources to solve that problem of lack of time financially. We chose to do a smaller sample size and engage the community we had created through our 2015 inclusive-design Writers’ Colony.

Structure, Story & Image

In wireframe consultations, we refined the site structure and hierarchy to make navigation as intuitive and easy as possible. Our main menu would feature those accessibility tools to change font size and contrast right at the top; they would be large without being obtrusive.

An important facet of accessibility is to have proper headings and navigation cues in the back end (the invisible part of the site), which provide textual and oral guides for people with lived experiences of disability, especially low-vision users and people using assistive technology. An example of a bad navigation cue is “see below”, which is not accessible for low-vision users. Headings add structure and meaning to pages by labelling each content part and indicating the relative importance of those parts. “Nesting” headings and not skipping levels as you step down through headings (eg. h1, h2, h3) keeps the site navigable. Parker meticulously created accessible headings and clean code within the site’s architecture.

Another accessibility feature is to provide distinct styles for interactive elements, such as links and buttons, to make them easy to identify. For example, change the appearance of links on mouse hover, keyboard focus, and touch-screen activation, and ensure that styles and naming for interactive elements are used consistently throughout the website. The majority of our links turn orange to meet this feature.

We kept the user in mind as we created content. What would they need and want to know? How would we tell our story and provide essential information in a useful, conversational and accessible manner? For starters: concrete and simplified wording, active voice, plenty of second-person and inclusive language. We folded in our new vision – “reimagine theatre”– into the language and character of the site. Then we fed our content through the Hemingway app, a great editing tool for paring text down to plain language. And on every page, we tried to reflect the reciprocity at the core of what we are – that our work is collaborative, and our relationships with theatre artists are paramount.

Picture Perfect

You know those snazzy slideshows (called carousels) that a lot of websites have at the top of their homepage? Well, they are not very accessible, so we nixed the idea of having any on our site. We loaded up our images in the back end with alt text – descriptive text for images that may not appear, and for people using screen reader technology – and we added captions and other alternatives for multimedia elements.

We were concerned about the site aesthetic. Could we implement contemporary design impulses? Can a visual language be translated aurally? How could we learn an accessible aesthetic? Most of the existing accessible websites we had seen were functional but visually unappealing. We wanted to represent the PTC culture in an aesthetically pleasing package, if possible. In the Rye assured us that with them in the costume department our site wouldn’t be dressed in a clown suit. They delivered a UI design that came very close to our hopes and dreams. They even understood our post-UI note that the site should be more fuzzy and crooked to align with the PTC vibe. In the Rye were a joy to work with – talented, adaptable, resourceful and efficient.

The main image on our homepage started out as a large photo of one theatre artist. To better reflect the diversity of artists involved with PTC, we decided to create a collage of people for the top image, plus an asymmetrical grid of current playwrights with a social media feed further down the page.

Test Audiences

Besides PTC staff, a few key individuals gave valuable feedback: playwright David Copelin (Block P 2015) at the wireframe stage; Parker McLean’s grandmother Daphne, who lives with partial cataracts; and Colony 2015 actor Art Jonker, who uses adaptive technology. We compensated David and Daphne for their insights; Art volunteered his feedback unsolicited.

Key issues: scrolling and menu access. Art doesn’t have a tracking ball on his mouse and during his test, he didn’t see a scroll bar on web pages (using Chrome). He also wanted easy access to the menu button no matter where he was on the page. We felt visitors should see as much information as possible in the main window before having to scroll down the page, especially if they have limited scrolling equipment. In the Rye did their research and referred us to the article Everybody Scrolls to assure us that 91% of people will scroll past an image that takes up the whole header, and 100% will scroll if there’s some sort of visual cue to do so. Nonetheless, they decreased white space on pages and positioned our news and blog content before the fold on the homepage. They also created a sticky menu that appears no matter where you are on a page.

We ran the site through the more general and anonymous UserTesting, where a remote user scrolls through your website, looking for ease of navigation, feel and flow, sense of what you do, functionality. You get a real-time video and transcript of the review. The reviewer found our site functional and easy to navigate. She got a general sense of what we’re about and what we offer. We also used the Wave tool again and our new site fared far better on the accessibility scale than our old site.

Live Performance

The site went live on May 3, 2016. We held a launch party at an accessible neighbourhood café, The Heatley – a fun evening with a diverse group of people in our community.

Note 3:  Access is a never-ending process. As we encounter new users, we will need to continue our modifications and learning.

We believe we have created an adaptive site that can morph or stretch to address the needs of individual users in the future, and we are in a good design partnership now to keep improving our online accessibility.  The more inclusive our community, the easier it is to create and enact change together.