+ Key Takeaways
- Web accessibility means websites, tools, and technologies are designed and built, so that people with ALL abilities can use them.
- A larger segment of your audience may be impacted than you think. 26% of adults in the US are living with some type of disability. It's a 1 billion+ market of people (with an annual disposable income of $1.2 trillion).
- Plus, it's the law - and accessibility lawsuits continue to rise.
- Most importantly, common accessibility issues impact EVERYONE'S user experience. Improving web accessibility makes the digital experience more effective and less frustrating for all users - to get it right, you need to be reviewing accessibility regularly.
A Whereoware Team Member Will:
- Audit your site's digital experience
- Measure accessibility scores
- Blueprint challenges and opportunities for improvement
Contact us for a professional accessibility audit and remediation plan.
Web Accessibility 101 Webinar Transcript
Hello, everyone. Thank you for joining us today for our webinar on Website Accessibility 101: How to Design User Friendly Web Experiences for everyone.
My name is Nate Ginesi, I'm the Director of User Experience at Whereoware, and I'm proud to be here with Alyssa Pine, one of our senior UI designers. Between the two of us, we have over 20 years of experience building websites, web apps, and digital platforms with accessibility in mind.
Before we kick this off, I want to acknowledge the irony of a presentation on accessibility not being closed-captioned. Unfortunately, our webinar technology situation does not support it at the moment. However, we will provide a transcript with the recording when we post it to our website, and we will be sending out this recording to all of you via e-mail tomorrow.
If you have any questions, please feel free to add them to the comment box, and we will get to as many as we have time for at the end. If we don't get to your question today, please, don't worry. We'll do our best to reach out to you directly when we finish up here.
So, today, we're going to talk about what accessibility is and why it's important. We're going to talk about it in the context of an actual person, and we're going to call them Charlie. We're going to show you ways that disability can impact the browsing experience.
We'll cover some tests and tools to ensure your sites are accessible, and finally, show you some real-world examples of the positive impacts of accessibility in-action.
First, let me tell you a little bit about Whereoware. For those unfamiliar - Whereoware is a digital experience agency driving smart growth for clients through strategy and activation.
What that means is we partner with our clients to do things like design, build, and optimize their websites and online experiences. We improve Salesforce CRM to increase productivity or drive adoption, and help our clients develop and execute multi-channel digital campaigns across our owned and earned channels.
Whatever your goal, basically, we've got a team in-house that can help you combine technology and digital solutions to achieve them.
We work with a wide depth and bread thof clients across a variety of industries, from home goods to homebuilders,f rom teachers to tech companies. We've covered a lot of ground and worked with a lot of people. I'm sure some of you will recognize at least a few of the names on this slide.
So, let's get into the reason we're here, and that's to talk a little bit about web accessibility. And to kick that off, I'm going to hand things over to Alyssa.
Thank you, Nate.
So, before we dive in, let's first go into what we mean by web accessibility. Web accessibility means that websites, tools, and technologies are designed and developed, so that people with all abilities can use them.
More specifically, it means that people can perceive, understand, navigate, and interact with the web, as well as contribute to the web.
So, you may be thinking that people with disabilities are edge cases that you don't need to tailor your whole website for, but let's take a look at some of the numbers.
In the US alone, about 26% of adults are living with some type of disability or limitation that could hinder them from using your website.
So, the visual aid on the right depicts that 26% in blue have disabilities or limitations, all the gray represents people with no limitations, and as you can see, that's a lot of blue.
So, this chart is demonstrating web accessibility, as it pertains to disabilities, but let's think a little bit more broadly and consider how creating accessible online experiences can benefit everyone.
So, designing a web experience for everyone means considering a variety of disabilities and limitations that mayhave varying levels of severity, or even just temporary like the examples on the right here.
Some of these disabilities can include hearing impairments, which may vary from partial to full deafness, cognitive impairments, which encompasses dyslexia, learning disabilities, trouble concentrating, and even anxiety, neurological limitations, like brain injuries or proneness to seizures.
We have speech impairments such as dyslexia and slurred speech, vision impairments, including color blindness, as well as partial blindness in one eye, or full blindness, and then physical impairments, whether because of an arm injury or hand injury, or a more serious Degenerative Disease. It's important to note that these disabilities are not mutually exclusive. So, users can experience any combination of these impairments at any time.
And, like I mentioned, before, accessible practices also benefit situational or temporary limitations, such as people with temporary disabilities, like a broken arm or older people with changing abilities due to aging.
So, to give you a sense of how certain disabilities like this can affect users on your website, let's meet Charlie
So, Charlie has early onset Parkinson's disease, which causes shaky hands and reduced mobility.
Charlie also has an occasional vision impairment known as Tunnel Vision, or the loss of peripheral vision, and often has trouble concentrating, which is a common cognitive challenge.
So, we're going to demonstrate what it looks like for Charlie to use the web with these conditions, for these examples, we’re using a website we're all familiar with weather.com
Using a simulator tool to show what each of these challenges looks like in terms of web usability.
We'll also discuss some of the ways we can empower users like Charlie.
So, this first example demonstrates what it's like for Charlie with their shaky hands and reduced mobility to use a mouse.
It might be a bit small here, but you may have noticed the double cursor.
which indicates where Charlie is trying to move their mouse and where he ends up instead, due to their condition.
So, an accessible practice that would immensely help Charlie navigate here is keyboard compatibility - ensuring that users can control our website functions with their keyboard.
So, these functions can include the ability to tab between links, as well as the ability to clearly see which link you are currently tabbing to.
The ability to hit Enter to select a particular link, and then the ability to use the up and down arrows or scroll up and down the page.
Moving on to our next example, this demonstrates Charlie’s Tunnel Vision as they tried to use the weather.com website.
As you can see, only a small portion of the whole page is viewable at a time and unfortunately, in this case, most of the page is taken up with ads.
So, what would ultimately help Charlie, in this case, would be to follow web best practices for positioning key elements and content, differentiating between your content and ads to the extent possible, and then maintaining brand consistency to reduce confusion.
On our last example, we are demonstrating what it could be like on a website when you are distracted or unable to concentrate. So, you can see Charlie's thoughts pop up on the screen. Then, there’s movement of objects on the screen suggesting the inability to discern information on the screen.
I'm sure we can all relate to this example of trying to perform a task while our minds are elsewhere.
Everything just kind of gets jumbled up, and you can't differentiate information.
So, what ultimately helps in instances like this, is to follow the layout best practices.
So, using simple layouts, and leveraging white space to help their content stand out better.
Leveraging content headings, and clear concise language to reduce cognitive load, then using a Z or an F-shaped pattern for content to help readability - those are patterns that are based on how users read and their eye paths.
Next, we have a few other examples of what this website could look like for other users. So, this demonstrates what even a situational limitation like being out in bright sunlight looks like.
But, even without any of these disabilities or limitations, I think we can all relate to Charlie and think of a time when we are frustrated by, or even unable to use, a website because of inaccessible practices.
To that point, we shouldn't think about creating accessible websites as being only for people with disabilities, ultimately, a more accessible website creates better experiences for everyone.
So, not only from a user experience perspective, but if we look at the numbers, you can see that improving your overall digital experience can increase conversions by as much as 60%, which is a huge impact. And, if that's not enough reason to create better experiences, there's an enormous market of users with disabilities who you would be excluding with an inaccessible websites.
So, not only is building an accessible website the right thing to do, it's also financially responsible, and can also prevent you from getting into legal trouble, as we'll see in the next slide.
So, there's a misnomer that creating an accessible website needs to be expensive or time consuming, which is not the case. Even if it was, it's not nearly as costly as the price of remediation and the potential lawsuits that can occur if you are sued for having an inaccessible site. You can see some of the stats here that represent that these kinds of lawsuits are on the rise, and it's best to get ahead of them and build an accessible site from the start.
So, one way to do that is to consider all of your users needs and keep accessibility in mind throughout the entire project - from wireframes to development. Alyssa's going to talk a little bit about some of the ways that you can do that, and keep accessibility for everyone at the forefront of your projects.
Keeping in mind that the 26% of your users will have specific accessibility needs, let's think about different ways we can support those needs.
First, we don't want to assume that you can pinpoint someone's disability just by looking at them.
Different disabilities require different considerations and solutions.
Let’s take a closer look at potential disabilities and ways to ensure that your site is still a good experience for everyone.
First, we're going to go into motor function issues. These issues can include any weakness or limitation of muscular control, limitations of sensation, pain that impedes movement and potentially missing limbs.
Due to these potential impairments, some of your users may prefer to use keyboard navigation,instead of a mouse or touch screen.
So, again, it's important to ensure that your website can be used with a keyboard.
Other users might only have the ability to use mobile devices and touchscreens.
It's important to make sure that your website is responsive and is not limited to one orientation, like portrait mode.
Lastly, as a general rule of thumb, for good user experience, it's important to have easy to hit buttons. So, each button should have sufficient space around it, and should be placed in locations that are both easy to find and touch.
Our next grouping is cognitive disabilities. So, this may affect any part of the nervous system and impact how well, people hear, move, see, speak, and understand information.
It does not necessarily impact intelligence, but it can impact cognitive load and can also cause susceptibility to seizures.
So, with the susceptibility to seizures in mind, it's important to avoid any flashing or jarring animations on your website.
That's not to say that you can't use animations. I know they typically increase engagement and convert attention on a screen.
They should just remain very subtle and smooth at all times.
Similarly, large movements, or unexpected audio can be distracting, annoying, and even triggering for users.
For this reason, we strongly recommend no autoplay of video or audio content.
So instead, just start with everything paused and muted by default and allow users to click the Play button themselves when they want to engage with that content.
Next up, we have hearing impairments and deafness.
Hearing impairments range from mild or moderate hearing loss in one ear, to substantial or full hearing loss in both ears.
With this range of users in mind, it's important to provide captions.
The irony again, that our video content today can’t have captions, but we will provide transcripts for audio content after today’s webinar.
And, I know myself and a lot of other non-hearing-impaired folks personally prefer to watch shows and movies with captions on, especially in louder environments. So, there's an example for you of benefiting from an accessible practice.
Lastly, we have visual impairments and blindness. These impairments range from mild or moderate vision loss in one eye to substantial or complete vision loss in both eyes.
And, this also includes color blindness.
One quick and easy way to make sure that your site is more accessible for visual impairments is by checking color contrast.
That is the contrast of text content on a background.
And, it's also important to make sure that users can zoom in and out on content.
Let's make sure that this setting is not disabled.
If you remember Charlie, some users like them might see best in the center of their visual field, so they might prefer to zoom in and scroll as needed.
Other users, especially those with more serious visual impairments, might need to rely on assistive technologies, such as a screen reader to interact with your website.
Screen readers simply render the text and image content into speech or braille output, so that users who have vision difficulties can access your website's information just in a different way.
So, in order to make sure the screen reader is offering the best possible rendition of your site, it's essential that you add Alt Text for images.
That's the written explanation of an image, and that's what the screen reader will provide to users who cannot see that imagery.
Alt text has also been proven to help boost your SEO, so there's an added bonus.
As we've mentioned before, it's important to make sure that your website is keyboard compatible, because that's how users operate a screen reader.
So, overall, these are the main considerations you should keep in mind, to make sure that you're providing an accessible experience across the board.
That being said, you may not know where you are falling short on your website, and how to measure its accessibility.
Before we go into measuring accessibility, it's important to first note that it is not a checkbox that you can just check and be done with, just like SEO and performance.
It's an ongoing process that requires continuous improvement, and how those improvements get measured is through a set of criteria known as the Web Content Accessibility Guidelines, or WCAG.
There have been multiple versions of these guidelines that have been updated over the years.
Section 508 requires that Federal Government, websites, and applications be accessible for people with disabilities.
WCAG guidelines have three levels of compliance that vary in terms of stringency – A, AA, and AAA - the levels are cumulative, so they build off of each other
We typically aim for AA compliance which benefits the largest population of users without having to put in significant effort.
Sometimes AAA can be near impossible to attain, so it is generally not required, unless a specific situation demands it.
If you're ever uncertain about which level of compliance you should strive for, Whereoware can help you assess your website or perform an audit to provide a recommendation for you.
Taking a look at one of these criteria in action, we have an example for you here, geared towards low-vision or colorblind users. So, this ensures that your color contrast meets the minimum requirement.
We have three levels here, or three examples here, with varying levels of success.
So, on the left here, we have an example that will always fail, and that is because the combination of that text color on the background color, no matter the text size, will always fail and never meet the minimum.
The example in the middle is a pass, because that button text is larger, meaning it's at least 18 pixels.
So, with that combination, you meet the contrast minimum.
The example on the right is an ideal scenario, because that combination of text color in that background color, no matter what the text size, will always meet the contrast minimum.
To actually test this, let's take a look at one of our tools. So, this is a color contrast checker and that's what we would use to test the previous example.
So, you can see that we have white text on a blue background, with how small that text is.
This example is currently failing, tagged to 0.1 AA requirement, which, if you recall, is what we typically aim for.
We have a variety of other tools that we like to use throughout our design and development process to make accessibility improvements.
We have those listed out here. Folks on this call may want to check out the Google Lighthouse Automated Testing Tool.
This tool rates your websites, and individual pages, based on performance, accessibility, SEO, and best practice criteria, and then it provides you with a score.
So, it's more than just accessibility, but it plays a big role, and to provide a good user experience, sites should strive to have a score within the 90 to 100 range.
A score of 100 is extremely difficult to hit and is usually not expected, due to the level of effort it would take.
A caveat here is that your site score will change as you update page content.
And, again, it is page specific.
So, just a note, we have all of these links, so you'll be able to explore them when you receive the slide deck.
We've talked a lot about real-world examples of disabilities and tools to ensure your experiences are accessible, but let's see some examples of how, when implemented correctly, accessible websites bring about a better user experience for everyone.
So, many of you may recognize and use Cuisinart’s products. We manage Cuisinart’s Optimizely website on an ongoing basis, and part of that involves running continuous accessibility checks.
So, at the beginning of the engagement, we scan the site weekly to look for ways to improve the experience and accessibility. From an accessibility standpoint, we manage over 385,000 violations in just a little over a year.
We improve their site improve score to over five points above the industry benchmark, so because of these improvements, they are now spending less money on remediation and monitoring accessibility, which frees up more time for other user experience efforts.
So that's a demonstrable ROI, therefore, for Cuisinart.
Now, let’s see some work from a worldwide hotel chain to improve their call center technology.
The old system was built on several legacy and separate programs. The setup required users to jump between platforms, take physical notes, and navigate really non-intuitive older interfaces - think MS Dos for those of you old enough to know what that is.
We came in and performed a UX audit, shadowed their users in the call centers, and listened to their problems. We followed that up with detailed prototypes that we were able to validate and watch people use in their real environments with testing sessions.
Ultimately, we combined several old, clunky systems into a single Salesforce instance, creating a more accessible web-based experience. This experience implemented common web standards for tabbing and accessibility, and more closely mimics what we would consider a typical consumer-based booking system.
Because of this more accessible version, we watched an agent who was previously and consistently in the bottom 10% of performers every year, manage to virtually overnight, improve their performance to the top 3%! So, that was really rewarding and powerful thing to watch happen.
Along with that, because the website was easier to use for everyone, we ended up reducing the training time by 80%, which provided a significant ROI in an industry with a lot of turnover in call centers.
Next, the League of Women Voters is dedicated to bringing election information to the public to allow them to make more informed voting decisions. So, you can imagine, accessibility is an important aspect of ensuring everyone being able to use their website.
So, we kicked off this project with an accessibility-first approach to wireframing. We started by building pages with only the accessibility structure in mind, worrying less about the layout and more about how the content should be understood, which translates directly into how a screen reader would present the content to users.
By starting with Accessibility first, as opposed to design, we got the entire team focused on ensuring things were built accessibility with accessibility in mind from the beginning. So, from a code perspective, this helped the site stay accessible and violation free.
However, you still need to remain focused, obviously, on the overall user experience of the interface in the front end, because, in theory, you can have a zero testable violations, but still have a totally inaccessible experience for your users.
In terms of the benefits of this approach of Accessibility-first, the old platform had an average of three critical accessibility violations per screen.
The new platform has zero, that included improving their overall Lighthouse performance score from an 84 to 97.
Next, many of you may be familiar with the AIGA. We were tasked with redesigning their website, which involves not only a brand refresh, but also merging several digital entities into a single site on a new platform that was Drupal with Acquia Site Studio.
So, we performed an accessibility audit at the onset of the project to determine the severity of their current situation. As we built the new platform, we performed ongoing accessibility testing from sprint to sprint to address critical issues. We focused on critical and severe issues.
Then, we trained the AIGA staff on how to produce more accessible content, including things like paying attention to content hierarchy, using headings correctly, image Alt tagging, and then paying attention to the page structure among many other things.
Their team learned that maintaining accessible standards is an ongoing effort, and we were able to get them off on the right foot, so that they could maintain a really accessible website.
As a result, their overall Lighthouse performance score went up 30 points, from 58 to an 88.
So, if you take nothing else away from this webinar, keep in mind that everyone benefits from accessible practices, and that accessibility optimization is a continuous effort, just, like maintaining performance or SEO standards.
So, we thank everyone for being here. That concludes the presentation piece, and we're going to take a few questions from the chat if you want to stick around.
Looking through, we have a good one here from Katie. Katie asks, a really relevant and valid question - what is the best way to get started? The easy, kind of quick, low-effort way to start is to run Google Lighthouse on your site.
You can start with maybe the top five pages that get the most traffic to get a sense of your overall, average score, and see what types of issues you’re dealing with.
Certain violations are going to require a developer, but there's still plenty of things that you can do from a Content Administrator perspective, that you can start addressing without development efforts.
Like adding alt tags to images and making sure you're using proper headings, hierarchy, clear, concise language, jargon-free language, things that are easy to read, making sure that you're using the right reading level, and that the content is something that everybody can understand. So, those accessibility changes will have varying degrees of user impact, and we recommend focusing on the most severe issues first, and then kind of building a backlog for the rest.
As we mentioned, in one of the key takeaways, is that this is a process, so, you're not going to get everything done at once. It's not flipping a switch. It's not checking a box. So, you don't try to boil the ocean all at once. Try to focus on the things that have biggest impact and then move incrementally through the rest.
Next, I see a question here from Deanna that I think is really pertinent. Deanna - how do I go about fixing my accessibility problems?
First off, that all depends on what types of issues you're up against.
Like Nate said, some issues will require a developer, but a lot of the most common issues are within your website content. Those can be fixed now with some content administration.
That can include things like color contrast, adding labels to your form inputs, making links and button text meaningful, so that people have a clear understanding of where that button will take you, and then using proper headings markup, as another example.
Of course, an agency like Whereoware can be most helpful here, so we can audit your digital experience, help you understand the level of effort involved, and then prioritize and remediate the issues that have the biggest impact.
We're coming up on time here. We really thank everyone for being here and coming to spend your time with us today. We hope you learned something, and we want everyone to go forth and build better experiences, not only for those with disabilities, but for everyone.
If you want to talk about accessibility with anyone on our team, we’re available to chat with you. You can reach us and we'll get back to you shortly.
Again, any questions that we didn't get to answer, we'll try to get back to you today. With that, we're going to wrap up and say goodbye, and we hope to see everyone again soon, and we thank you for spending your time with us.