Published on <a href="http://ift.tt/2quVZVN">| Prototyping: From UX to Front End &mdash; Medium</a> Justin Ramedia 
<h4>WCAG accessibility standards can help UX professionals design and develop true usability</h4>
<img alt="" src="http://ift.tt/2pzi6NG">
I’ve been promoting accessibility best-practices for the past several years now and I’ve realized more and more how much education is still needed around this topic.
Developers usually have a rudimentary understanding of <a href="http://ift.tt/201hiK4">WCAG standards</a>, but rarely are they front-of-mind for day-to-day work. Top-tier designers will generally consider contrast, color, and other factors important for disabled web visitors, but seldom is accessibility the first (or even second) thought in a new design.
Even among both of these highly competent groups, we see a huge discrepancy between what is required for amazing accessibility and what is actually practiced. My goal is to ensure that anyone who reads this article understands why accessibility is so important and how we can easily design, develop, and test for it.
<h3>Why does accessibility matter?</h3>
As designers, developers, writers and content-creators, it’s easy to forget that not everyone has access to the tools that we use every day. Technology has allowed those of us inclined toward it to make our lives efficient and simple, but we forget that not everyone has the same tools — and I don’t mean Adobe Creative Suite. Many users don’t have access to vision or hearing. Many users can’t operate a mouse and have to rely on their keyboards or even <a href="http://ift.tt/2lggLpu">their breath to navigate a website</a>.
To put things into perspective, consider conservative estimates that indicate that at least 8.5% of the population has a disability that would affect internet use. If you received 20,000 visitors last month, you turned away 1,700 of them from viewing your site or purchasing a product from you. Over the year, that translates to over 20,000 visitors — completely ignored.
Imagine if those disabled individuals were users on older browsers like IE9. Your executive team would never allow you to ignore 8.5% of your visitors, but that’s exactly what many of them do every day by ignoring accessibility.
Let’s put this into financial figures so you can really see how non-compliance to WCAG standards affects your company or website. From my example above, we learned that 20,000 visitors per year came to your site with some type of disability. Let’s posit that your conservative conversation rate on new visitors is 5% (based on average conversion rates in software, financial and business industries). Let’s also say that your fictional website sells products that cost $10 per month.
If disabled users can’t access or navigate your site, you’d be throwing away $120,000 every. single. year.
Let that number sink in. You are literally throwing that money away if your site does not consider accessibility at every touchpoint. Aside from doing the right thing, helping others, or enabling an underserved area of the population. You are being financially irresponsible if you continue to ignore that group.
<img alt="" src="http://ift.tt/2oXcLvL">
<h3>What is web accessibility?</h3>
The easy answer is that web accessibility is a way for any user to be able to interact effectively with all content across the internet.
The long answer is much more nuanced. Web accessibility is designing and developing experiences that can be consumed by anyone with an internet connection (however slow it may be) and with any disability, but we need to start long before we get to the code. When designing an experience to be accessible, we need to look at the following three categories:
<ul>
<li>Visual</li>
<li>Audio</li>
<li>Input</li>
</ul>
Each of these areas contains mountains of standards and guidelines set forth by the W3C who are <a href="http://ift.tt/1Q3MNQs">leading the charge</a> in web accessibility standardization.
<h4>Visual</h4>
This is the largest current area of focus in the design and UX industry. Within this category, we look for (among other things) color, contrast, visual cues, status indicators and closed captions — but we generally neglect anyone that isn’t looking at the screen.
<img alt="" src="http://ift.tt/2oXmHoS">Screen readers and Braille assistive technology are how blind users access your information
Consider someone that has to listen to the marketing copy that you tossed onto your website or app and ask yourself if it gets a user to where they are trying to go. If it doesn’t, maybe you need to scrap it. Antoine de Saint-Exupéry, the French poet UX-professionals quote most once said, “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”
After you’ve taken away all that can be taken, consider the following visual suggestions when designing or re-designing your experience or application:
<ul>
<li>Provide sufficient contrast between foreground and background</li>
<li>Don’t use color alone to convey information</li>
<li>Provide clear and consistent navigation options</li>
<li>Create designs for different viewport sizes</li>
<li>Use headings and spacing to group related content</li>
</ul>
<h4>Audio</h4>
For audio accessibility most people are generally talking about speech to text or video captions, especially in the fields of education and government. But if you glance over at your Google Home or Alexa device, you might start to see how interfaces will be navigated in not-so-distant future.
Voice might be the most exciting area of accessibility design. Those with disabilities will be able to navigate voice interfaces as well as or better than someone used to clicking with a mouse.
<img alt="" src="http://ift.tt/2pzmEUq">
Apple, for one, has built <a href="http://ift.tt/2oXfx48">all kinds of amazing features</a> for vision- and hearing-impaired users right inside the device that’s sitting in all our pockets. <a href="http://ift.tt/2oXfx48">Take a look</a> sometime at just how usable the smartphone-that-started-it-all can be.
Some key things to consider for audio accessibility are:
<ul>
<li>Including image and media alternatives in your designs</li>
<li>Providing controls for content that starts automatically — like those product intros or rotating hero sections</li>
</ul>
<h4>Input</h4>
Great looking forms are everywhere, but only if you can see them. Many web standards for inputs and and forms have been neglected in lieu of minimalist designs. Designers have taken so much away from the form that it becomes unusable in certain states — even for users that don’t have a disability. Labels have been replaced by placeholders lately, but when you’ve entered a value, you lose all indication of what the input is for. There are users that have visual processing disorders that may need to see labels for every input that they type into to process what they are doing.
With forms, we focus a lot on how well they convert. A larger and more important issue is ensuring that our websites, applications and experiences all utilize <a href="http://ift.tt/1WuQlR7">aria-attributes</a> that allow screen-readers and other assistive technology to correctly interpret and present information for vision-impaired or blind users. This is the number one, overlooked area of development in my experience. When building forms, look for the following:
<ul>
<li>Ensure that form elements include clearly associated labels</li>
<li>Provide easily identifiable feedback</li>
<li>Ensure that interactive elements are easy to identify</li>
</ul>
<h3>How do we test for accessibility?</h3>
The good news is that tools are becoming more readily-available and designers, developers and creators are starting to adopt them. To get started, though, all you really have to do is blindfold yourself or turn your volume off. You’ll realize immediately where improvements can be made.
Not only can we already test our websites and experiences by “turning off” our vision or hearing, but we can use assistive technologies. We all have unlimited and immediate access to the number-one, most widely-used assistive technology on the planet — our smartphone.
Setting your computer up for accessibility testing is easy too. Here is Apple’s accessibility support page: <a href="http://ift.tt/2oXg45W">http://ift.tt/2oXg45W</a>
For windows users, try this documentation: <a href="http://ift.tt/2pzvBNl">http://ift.tt/2pzvBNl</a>
Lastly, here are a few tools that I’ve found useful in my testing:
<ul>
<li><a href="http://ift.tt/RtjACE">Contrast Checker</a></li>
<li><a href="https://tenon.io/">Accessibility Analysis Tool</a></li>
<li><a href="http://ift.tt/1Mwwj5o">Accessibility Checklist</a></li>
<li><a href="http://ift.tt/209WUqj">Accessibility Checker</a> (free and licensed option)</li>
</ul>
Now that you know why and how to design, develop and test for accessibility, don’t let another project go by without improving the web and the ability for everyone to use it.
If you’re looking for some help getting your website up to WCAG standards, or need a UX consult, please reach out at <a href="http://ift.tt/2pzqjBI">justinramedia.com</a>.
<img src="http://ift.tt/2oX73tK" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2pzmpIK">How Discriminating User Experiences can Cost You Millions</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How Discriminating User Experiences can Cost You Millions

WCAG accessibility standards can help UX professionals design and develop true usability

Top Stories