Planning and designing for accessible experiences

Planning and designing for accessible experiences
May 6, 2020
39 MIN. READ
In recent years, there has been a growing need for companies to design digital experiences that are accessible and inclusive for all audiences. Join ICF Next Partners Anne Catherine Feeney and Jane Motz Hayes for pro advice on how to exceed project expectations while navigating accessibility from the very start. After this discussion, you will be able to:
 
1. Understand accessibility and inclusivity.
2. Navigate guidelines.
3. Design content.
4. Develop and test effectively.
 
 

Transcript:

Fred Faulkner: Good morning and afternoon, everyone, thank you for joining us today. We are excited to talk to you today about an important topic—accessibility—and how to plan and design for accessible experiences. My name is Fred Faulkner, and I will be your moderator today.

A few housekeeping items before we get started, please note that we will have all your lines muted during today's discussion. If you have any questions, please submit them in the questions box; we will gather those and answer as many as we can at the end of the webinar. Don't worry if you miss anything—we are recording today's session and plan on sharing the recording and artifacts with you via email afterwards. We would appreciate if you could fill out our survey at the end of today to let us know how we did; your feedback is very important to us.

All right, if you're not familiar with us, ICF Next is a consulting agency where we believe that participation is greater than experience. In a world where everyone expects great experiences, we work with brands and organizations to connect with their community—be it their customers, their colleagues, or citizens—to create active participation. Participation is earned, it's reciprocal, it's shared, it's relevant, it's inclusive, and when done right delivers meaningful outcomes. We combine the creativity of an agency with the depth and expertise of a consultancy. Our global team has 1,700 change-makers, our mix of mission-driven strategists, designers, marketers, technologists, and data scientists harnessing their insights, creativity, and technology to move people. That's what we call accelerated change beautifully delivered.

It's my pleasure today to introduce our presenters. Anne Catherine Feeney is a partner, client engagement, at ICF Next. AC has over 17 years of agency experience driving growth through digital and brand experiences for industries such as healthcare, CPG, and fast-casual dining. AC has focused on digital transformation from strategy to implementations, integrated communications, innovation, and technology. AC has been at ICF Next for over two years and leads one of our most strategic healthcare accounts.

Jane Motz Hayes is a partner, strategy and experienced design, at ICF Next. Jane has 15+ years of experience in design, content strategy, user experience, and information architecture. Jane has created products for multiple industries and has produced award-winning content for leading brands in finance, media, automotive, fitness, and healthcare. Jane has been with ICF Next just under a year and leads a team of strategists, data scientists, and UX and UI designers to create high business value, world-class digital experiences. AC and Jane, thank you very much for being with us today. Jane, why don't you share with the audience what you plan on covering today?

Jane Motz Hayes: Great, thanks, Fred. Today's takeaways are simple, and we've numbered them here. After this session you will know how to plan for accessibility and, more specifically, a compliant website by understanding accessibility or A11Y—a little bit more about that later—navigating the guidelines, designing content, developing and testing, and finally planning for success.

"We know that no one designs a website to intentionally leave people out".

— Jane Motz Hayes
In our opinion, great experiences require accessibility, and at ICF Next we work to bring human-centered, experience-led capabilities to every stakeholder engagement. We know that no one designs a website to intentionally leave people out—it usually goes against what most organizations stand for, to be inclusive and provide their customers and their stakeholders with meaningful experience. We believe that these goals are met when all users are considered, and our view is that delivering great experience begins with accessibility. Through experience-led transformation, all stakeholders achieve active participation.
"Designing for accessibility has us go through what users want and need to be successful when using our websites."
— Jane Motz Hayes

Participation is where expertise meets expectation

How can we ensure great experiences drive towards participation? Well, participation is where expertise meets expectation. Designing for accessibility has us go through what users want and need to be successful when using our websites. The common characteristics that are at the very core of usability practices are the very same that ensure that we're designing for an inclusive internet. If organizations have these goals and wants for their product, we know that they can be met with accessible design methods. It's our belief that brands that are differentiated will go beyond experience design to experience-driven transformation. Tactically this will take shape through usability, accessibility, designing for loyalty, and creating advocacy.

Who benefits from website accessibility? In our belief a lot of people do—it's a really big tent. It's never the case that companies want to leave people out, but it may be the case that some people fail to see the risks associated with noncompliance legal fees, brand reputational harm, lost revenue from abandoned shopping carts, or even losing out to a customer who is offering a superior user experience. We know that according to the [U.S.] Centers [for] Disease Control [and Prevention] about 25% of U.S. adults, or approximately 61 million people, identify as having visual impairment, blindness, shape line, low vision. They use mobile limitations or are reliant on mobile support. They may have cognitive disabilities, hearing challenges, deafness, partial deafness, or have epilepsy or seizures.

One interesting thing about this is that barrier-free accessible designs that take these focus areas into account also benefit senior citizens and the elderly. Digital products often fail this growing and wealthy demographic, and current interaction designs often feature illegible text, tiny targets, startling sounds, and other features that make the online world unfriendly to older adults.

Understanding accessibility: Definition and history

How can we do better by making, responsible for making products that are universally accessible? A good place for us to start is by examining the problems faced and understanding accessibility. Accessibility is a big tent of considerations of many product types for many user groups. For this presentation we're going to focus on web accessibility as it relates to human-centered design that benefits all people of all abilities.

"When we build an accessible, inclusive internet and website for our customers, we are being a good ally to everybody who is using them."
— Jane Motz Hoyes
You might be asking yourself, what is web accessibility? Sometimes you see it described as A11Y, and A11Y is the abbreviated term. It stands for, as you can see here, the 11 characters between the first level of accessibility and the last letter. If you look at it, it looks like the word ally. When we build an accessible, inclusive internet and website for our customers, we are being a good ally to everybody who is using them.

Generally accessibility is about making your product and service available for everybody, regardless of their ability, but we also consider it an aspect of usability that defines a way a person can use a website to achieve their goal, and this can be any person and any goal. It's also the practice of making a website usable for as many types of users as possible by paying close attention to the groups in the focus areas of disability. I've already mentioned visual, motor, and auditory areas, but we also pay attention to cognitive or learning, social inequality, and cultural differences—all areas that are equally important, and that list is not exhaustive.

If we look at web accessibility over time, many companies have learned about accessibility the hard way through costly lawsuits, reputational damage, and investments in rework. Companies like Winn-Dixie; Beyonce, Inc.; TD Ameritrade; Netflix; Domino’s; Target—many other websites have been subject to lawsuits for their lack of accessibility according to the American Disabilities Act or the ADA, and we know that there is potentially more to come. This is partly because of the complexity of the accessibility space, both compliance-based and noncompliance-based industries. They often lack the understanding around the ADA itself and what it means for their business.
"This set of website content accessibility guidelines, sometimes shortened as WCAG, continued to evolve over the decades and became an ISO worldwide standard."
— Jane Motz Hayes
You can see on this timeline that the ADA came of age about the same time the internet did in the ’90s, and by 1999 the World Wide Web Consortium, or the W3C, had developed a series of guidelines to really assist developers and designers in creating digital products like websites and mobile apps and making it easier for people with disabilities to use or operate. This set of website content accessibility guidelines, sometimes shortened as WCAG, continued to evolve over the decades and became an ISO worldwide standard. WCAG is often being involved constantly by software developers, accessibility experts, product designers around the world, and it's currently in its version 2.1. There are levels within the guidelines that have specific requirements—you'll often see them demonstrated as A, AA, AAA.

Without delving too deeply into these for the purposes of this presentation, most companies want to be at 2.1. The main difference between 2.0 and 2.1 is mobile. Companies have been getting into trouble for not having accessible mobile, so the WCAG released a 2.1. In the United States, the ADA Title 3 Section 508 is often named—often shortened to Section 508—is often named when talking about accommodations for people with disabilities on the web. Some U.S. states are ahead of others when it comes to applying standards—some use WCAG, some use 508. The important thing is that despite the evidence of positive effects on revenue-generating areas for the business that come from accessibility, some may only view it and the investment in accessibility as a development or a compliance cost. It doesn't change the fact that this still—in many jurisdictions including the United States, Canada, and Europe—this is a legal requirement.

Making a case for accessibility: Benefits and risks

How do we think about the business case for accessibility? You're, of course, going to want to consider the risks and the benefits from the outset, and categorically the risks and benefits of accessible websites are here. I mentioned the threat of lawsuits and settlement costs, compliance costs down the road, and remediation can be very expensive. You also run the risk to your roadmap being unprotected as you focus on compliance or remediation and have to abandon key aspects of your roadmap. There's the brand reputation as it reflects poorly on your corporate social responsibility and also lost and unkept revenue by ignoring key groups, like seniors, like I mentioned before.

The benefits, however, are vast: You can improve your customer engagement, your usability, and your overall satisfaction score. You can reach a broader audience because you're differentiating your brand through superior user experience. Designing for the disabled, as I mentioned, is also similar to designing for seniors for a broader market, and it's our belief that beautiful and usable websites attract more traffic and also have an improved SEO benefit.

Anne Catherine Feeney: Yeah, this is a great list to look at, Jane, especially through the business-case lens. I think another thing that ICF frequently does when we're looking at these types of problems and solutions is to look at how companies can go from [INAUDIBLE], and evaluate their current state of their web experiences, and what that future state should look like, and where they want to push that to.

Navigating guidelines

Jane Motz Hayes: Yeah, I couldn't agree more. Oftentimes we think about people's ability to tackle those higher order accessibility items as part of the digital maturity model, but I'll talk more about that after. Now I just want to delve a little bit into navigating guidelines. Creating accessible websites can be confusing if you don't know the guidelines, and I'm going to say—spoiler alert for anybody who hasn't delved into the guidelines—they can be confusing, even in the simplest of spots it's hard to know where to look. Here's how to find your way and plan your project right.

"Websites need to provide effective communication, and the WCAG is the way to measure."
— Jane Motz Hayes
Some of the key questions you're going to ask yourself at the outset include how many countries? Websites need to provide effective communication, and the WCAG is the way to measure. The common practice is to use WCAG, as I mentioned, 2.1 AA guidelines, but different countries have different requirements, so it's important to check your local and state laws. You don't want to overdevelop, but you definitely don't want to under develop, so you also need to take a look at which platforms. For instance, do you need to develop guidelines for mobile or are you just looking at a desktop product? Then also you want to pay attention to how many types of assistive technologies are you targeting. Are you in a position where you can make a website that looks some way for sighted people and some way for non-sighted or partly sighted people? These are things that you have to take into consideration, and all of this can be wrapped up in knowing your user.
"Defining the success of your project will help you stay on track—and I can't say enough—test early, test often to avoid wasting time and rework."
— Jane Motz Hayes

A good approach is to secure buy-in first from everybody, all the stakeholders that you are working with. You will be more successful by establishing the right level of urgency and priority, and unlocking the right amount of budget, if every stakeholder that you're working with—be it your client, your internal, your customer—are aligned and engaged in the process. Knowing and understanding your full audience, researching their needs, performing a proper discovery—these are good UX practices, but they're also going to be great for accessibility. Defining the success of your project will help you stay on track—and I can't say enough—test early, test often to avoid wasting time and rework.

User-centered design

Let's take a look at design. Beautiful and usable design are not mutually exclusive, and there's no trade-off between the two if the users are at the center of your design. When you're designing for users in mind, it means that you're focusing on providing an experience that does not do things like over-rely on only color, sound, interaction, or flash, things that move, or overly technical copy. When you're looking at beginning design, some of these things will be repetitive, but you'll see why it's important. Again, you want to invoke what level of criteria do you need to be at? Who is your audience? What level of functionality is needed?

I also would caution that design directors, creative directors, directors of UX also pay attention to how their staff is trained—and do they understand accessibility? Do they understand the brand's style guidelines and have they been tested for accessibility? You will risk a lot of rework and discord in your team if people don't understand what they're doing, the nature of the assignment, and whether or not the assets they may be getting from a creative agency or another company, or another partner, if they're not accessible. Get everybody on the same page.

As I mentioned, the best approaches are to get that alignment about guidelines and level of knowledge, check those brand guidelines. There's tons and tons of color-palette builders that designers can use online—they plug into common design tools like Sketch—so there's no excuses for not building out an accessible color palette. There's so much help online. Make sure that you have checkers installed and that things are also being analyzed by experts. It's great for your design team to have a base level of knowledge and be able to check their own work, but, again, they're going to be relying also upon experts in your organization to also help guide them. With respect to design pattern libraries and component libraries that developers use, they should all be tested for accessibility. Then test solutions with wider selections of users.

"Everybody has an unconscious bias; designers are not exempt, so please check each other's work, socialize your documents."
— Jane Motz Hayes
It's common knowledge that everybody has an unconscious bias; designers are not exempt, so please check each other's work, socialize your documents—and this comes from every aspect of design, the copy, the color, the image selection, the photography, the way interactions are positioned. Some of it can lack inclusion for people with cognitive impairments or learning disabilities, so it's really, really important to check everything, especially when it comes to copywriting.

Anne Catherine Feeney: Those are great points, Jane. One thing that stuck out to me, I think when we think about accessibility, we often think of the visual aesthetics that come along with that. Can you tell me a little bit more about what type of copywriting training one would need to have to write with accessibility in mind or leverage tools in the right way?

Jane Motz Hayes: Yeah, that's a great question. For us, on our staff we have UX writers and we also have copywriters. Copywriters will be paying attention to the level of language, like not using jargon, making sure that the general population can know and understand the copy that's being written. UX writing is also part of the mix—it's a different skill set, so that would be writing prompts, for instance, that are understandable and describe what the user should expect after they use the prompt, so not just having read more, have something that describes what happens when they click the button.

Then there's other things like providing informative, unique page titles and using headings and subheadings to convey the structure of what's in the document; having transcripts for closed captions and having it translated into more than one language if that's commonplace in your country of origin; providing clear instructions that don't use acronyms or internal-facing language. AC, you and I have both worked on a lot of different corporate websites, and you always have to make sure that the company understands that their internal language is not their external-facing language, so they can't use their corporate speak. Then keeping content clear and concise but also not over-relying on color and being culturally sensitive to color.

Anne Catherine Feeney: Great.
"You want to have your final product withstand compliance audits but also meet the user needs."
— Jane Motz Hayes

Development and testing

Jane Motz Hayes: Let's talk a little bit about development and testing. When you bring all of your efforts into realization using the proper code and testing it's really important, again, to test early and often. You want to have your final product withstand compliance audits but also meet the user needs. What do we consider? For developers and testers, the upfront and key questions are largely the same as designers, but there's some nuance in how you'll be using code and tools. We always begin with assessing the necessary level of compliance, the known issues, and level of prioritization. I also want to point out here that developers should be part of discovery activities that happen before we start. Developers are users too, and so they often have a lot of valuable input that they can bring into the strategy and design team. It's really, really helpful to have the whole team on the same page.
"It’s really, really important for people to understand that if they test early and often, they're going to save money down the road."
— Jane Motz Hayes

With respect to approach, again, ensure the team is aware of accessibility guidelines and is up to date on their knowledge about global coding practices and standards, and even have them maybe participate in some user testing upfront before they begin their work. That's user testing on designs so that they can really empathize with the end-user. Collaborate early with the design team, allow people to have input, and provide setup and installation of testing software in a self-contained environment. I'm told virtual machines are the best so that it doesn't interfere with the main one that they're using to code. Test and implement accessibility of remediation as soon as possible and then go and test again. Again, this sounds repetitive, AC, but it’s really, really important for people to understand that if they test early and often, they're going to save money down the road, and it's just better for themselves, their customers, and really everybody.

Planning for success

Anne Catherine Feeney: For sure. Great, thanks, Jane. Let's pivot gears a little bit and think about how to apply a lot of these great tips that Jane has just walked us through as it relates to planning for success. If you're giving accessibility the attention that it truly deserves, and carefully baking it into projects upfront that can have huge payoffs in the end for both the agency, the client, partner, but more importantly the consumer—and it's really critical to always keep that end-user in mind throughout this journey.

Some key questions that you should be thinking about at the start of any project—first, it's always important to understand if we're talking about a net new experience, in which case you build with accessibility in mind, or if this is an existing property that you have to have the team go back in and offer up remediations to meet compliance standards. Another point is to truly understand who all the SMEs are from all parties involved—be it agencies, clients, any other third parties that will have input on the process. This could be people like designers, brand stewards, technologists—some organizations even have in-house accessibility experts, and all of these groups should be consulted at different stages throughout the process, and they might have varying degrees of influence over your project as well. At other times these folks also might even input on the validation process, so it's just important to understand the mix of roles and responsibilities that all contributing parties will bring to the table.

Next, it's important to think through how any added complexities with design, development, and testing could impact your budgets and timelines. If you have more resources or longer sprints where you need to be addressing any types of remediations or extra focus on accessibility, all of those things will obviously have an impact on your proposal.

Last, try to have a bigger understanding on the impact that accessibility can have. What are those both near- and long-term goals that can be helpful returns to your client or organization? That can help us lead into the approach that we would take with this as well. You should always start by having a clear understanding of goals and compliance requirements, and this will help remove some of the guesswork and really help you build your project schedule and estimates and everything according to those specifics.

"There's really no exceptions—nowadays you have to account for accessibility as part of an original project plan and budget, and it should really become table stakes for any type of digital experience."
— Anne Catherine Feeney
There's really no exceptions—nowadays you have to account for accessibility as part of an original project plan and budget, and it should really become table stakes for any type of digital experience. Make sure you're thinking through the impacts that it will have from budget and timing. I just mentioned roles and responsibilities for SMEs, so once you've identified them put them to work. I think it's really important not just to tap into them at the start of a project—they should be involved early and often throughout this whole process to make sure that your team is looking at designs, the development and code testing, and also how you're optimizing with accessibility in mind at every single stage.

Then the last thing I would say from approach is just make sure you're having conversations around acceptance criteria, so expectations are the same, and you just have a shared view of what success looks like. That can be sharing different tools, or processes, or when and where you're testing throughout the project, but the whole purpose of having that added communication is so that you're lessening the chance of subjectivity when you're going through those reviews.

Two different success examples that I want to share with you now—these are both accessible web experiences, but the process of how we got there was quite different, including the planning.

A net new build success story: California State Lottery

The first one I want to mention is the California State Lottery. A couple years ago, the state of California put out a mandate that all state web properties had to be compliant following WCAG 2.0 guidelines by 2019, and since the lottery is a state property that was no exception to that. ICF Next evaluated the current state of the site, and they really came to the conclusion that there were so many compliance issues that they all agreed to start a clean slate and move forward with a net new build on this rather than going back through and trying to remediate and update designs, and things like that.

ICF was tapped in to manage the full end-to-end experience, which include design, development, the QA, and testing and validation as well. I think it is important to note that design was really a huge part of this process starting with the site map, and then everything else kind of followed in place, all having that accessibility-first mindset. Our agency used an accessibility SME every step of the way, this included—you want to involve a SME to look at things like user stories, defining what those accessibility requirements are, getting input on wireframes and design comps, and then ultimately for that testing and validation as well if that's how you are set up to work with the client, in which case California Lottery was. Then last year the California Lottery launched a beautiful and fully compliant new experience on both desktop and mobile. That kind of summarizes one path that you could take for a net new build.

A remediation success story: Medicare education site

Another example is a Medicare education site in the healthcare space where we had the same outcome of success in market but a very different process of getting there. This was an existing property that had been around for quite a while, and as accessibility became more and more in the spotlight, we knew that it had to be—rather than go back in and rebuild the site ground up, we determined that remediations would be a viable solution. Another aspect of this project that brought a little bit of a unique way of working to this group is that this particular client has an in-house team of accessibility experts, so there was an understanding that we had to collaborate with them throughout the process. This group ran initial audits and scans to help us identify where there were gaps in compliance, then ICF Next worked on what those solutions were, factoring in the level of effort, the timing, and budgets that it was going to take in order to implement those remediations.

Once we had alignment on what those fixes were, we prioritized them and started introducing solutions by tapping into designers, developers, and SMEs along the way and kept working and having releases that were updating and fixing a lot of the issues that had been flagged by the accessibility experts. We also faced another challenge last year where this particular web property was asked to introduce another new piece of technology on the site. The site was already compliant—they had to bring on this new piece of technology, which was a chatbot, and similar to our primary site experience, we had to design and build that chatbot factoring in the latest WCAG 2.1 standards and working through that collaborative process that I just outlined as well. The chatbot launched on top of the site experience last year and upheld that already inclusive mobile and desktop experiences. Again, just two different examples of how you can realize accessibility in market success.

Jane, I'm going to pass it back over to you to summarize and bring this all together.

Best practices for navigating guidelines

Jane Motz Hayes: Yeah, absolutely. Let's bring it all together. Some of the best practices when navigating the guidelines, I'll just go over the six that we have here. (1) With respect to country and state, know your state and national laws because each jurisdiction can be different. (2) Industry, again, your industry or your category might have different levels of compliance, and different levels of the guidelines might apply to you over someone else, so it's important for you to be clear. (3) Likewise with technology, you also want to know which technologies are assistive technologies your audience will be using, and (4) with respect to buy-in, you want to get early buy-in from stakeholders from right across your organization.

(5) Protect your work and make sure it's vetted till the end. (6) Lastly, reach out for help—there are lots of resources online, and we're going to provide some of them for you in a handout after this webinar. There's lots of places for you to go, but also your legal department and other experts will be able to guide you if you have questions.

Best practices for design

For design, we really can't recommend enough that (1) you know your brand and that you plan ahead. Check your brand colors, your photos, your images, your videos, make sure that (2) you have copy that is accessible, be deliberate with your content writing but also with your UX writing—again, those links and prompts, etc. Have transcripts ready for captioning and make sure that level of language is also descriptive and understandable. (3) As I've mentioned many times, check early, check the designs at the earliest possible stage, the wire frame, the mid-fidelity. (4) Look at color, don't always use color, check filters and text size, and build an accessible palette. No excuses on this one, designers. There's lots of tools available, so go out and find something that works with your Figma, your Sketch, or your Adobe XD.

"Make sure things are within compliance, but make sure that you're always going back to diverse audiences while you're testing as well."
— Jane Motz Hayes
(5) Test your libraries that you build out. Make sure things are within compliance, but make sure that you're always going back to diverse audiences while you're testing as well. (6) Watch for your bias, conscious or not, everyone's got a bias, so get feedback from other designers and other people in your organization. I like to run some of my work by AC once in a while, and she always gives me good feedback.

Best practices for development and testing