Web Accessibility 101
At Genuine, when we say we are user-first, we mean all users. We’re passionate about accessibility, and helping our clients achieve it. Are you struggling with accessibility? We can help you understand what it is, how to apply it, and what it means for your site.
are you ready for an audit?
If you’re ready for an accessibility audit, or a site redesign, we’re ready to help. Contact us to learn more about our services and expertise.
What is Accessibility?
Web accessibility refers to the ability of all users, regardless of visual, auditory, or physical disabilities, to access all content and functionality available on websites.
The World Wide Web Consortium (W3C) developed the Web Content Accessibility Guidelines (WCAG), which defines how to make web content more accessible to people with disabilities, including but not limited to visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities (and temporary). WCAG 2.1 was developed with a goal of providing a shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.
Types of Disability
Accessibility isn’t just about serving those with marked disabilities, it’s about the language learner, the kid who broke an arm and can’t scroll, the colorblind. It’s not a population that can be ignored.
Memory loss, Seizure disorder
Broken arm/hand, Temporary vision loss, Temporary hearing loss
Dyslexia, ADHD
Colorblindness, Limited vision (glaucoma, etc.), Blindness
Hearing impaired, Situational issues (can’t play video out loud), Auditory sensitivity
Hand tremors, Paralysis, Speech disorders (voice controlled sites)
Why you should care
It’s tempting to say that your user base is “not disabled.” After all, blindness and deafness are relatively rare conditions. But the rate of documented disability might surprise you: approximately 1 in 4 American adults lives with a disability. When websites adapt for the needs of all users, they expand the reach of their content by reaching and adapting to a quarter of their user base. By not meeting their needs for access, site owners risk alienating that same large group of users.
Meeting accessibility standards improves search engine optimization (SEO) rankings, which can help increase organic traffic and the overall pool of potential users.
1 in 4 americans
live with a disability
Accessibility is also quickly becoming a legal standard. Websites are considered to be part of Title III of the Americans with Disabilities Act, meaning that they qualify as public spaces, and therefore must comply with accessibility standards or risk legal action. In 2019, over 10,000 lawsuits were filed against businesses not adhering to these standards.
Globally, other countries are also beginning to mandate accessibility compliance. The EU Web Accessibility Directive, for example, states that all public sector websites and applications in EU member states must implement, enforce, and maintain a uniform set of accessibility standards.
10,000 Lawsuits
filed in 2019
Categories
WCAG 2.0 and 2.1 are stable, referenceable technical documents that are organized into four major categories: perceivable, operable, understandable, and robust.
perceivable
Perceivable indicates that information and user interface components must be recognizable by all types of users. This category deals with visual and auditory disabilities, like color contrast issues or hearing loss. If a user can’t see, or perceive, the content on your site, because, to them, your colors and texts blend together or can’t be seen at all, they won’t be able to access information readily. Similarly, a user with hearing loss may not be able to perceive a video without captions.
Make text legible with adequate contrasting.
Use coded text to provide a screen reader with the correct hierarchy of information.
Provide alternative text for images.
You might think color contrast issues are limited, but there’s many different types! The same three colors might show up differently for different user groups.
Full Color
~92% of population
Protanomaly Vision
~0.6% of population
Protanopia Vision
~0.6% of population
Deuteranopia Vision
~0.6% of population
Achromatopsia Vision
~0.0001% of population
operable
Operable refers to the ability to operate a website in a way that suits an individual’s unique needs. If a user is unable to control a mouse, they may use assistive technology like keyboard controls. Any action that can be completed through conventional means (mouse movement, hover states, etc.) should also be completed through assistive technology or other functions.
Operable also includes hidden functions that may pause timers or other site functions that could be detrimental to the user and their needs.
Check the flow of your site with a keyboard to ensure that all buttons, tabs, fields, pages, and elements can be selected without a mouse.
Use hover-only functions without a focus state workaround. If a keyboard user can’t find it, it’s not findable! Hover-only functions are also challenging for mobile users, who can only tap.
Understandable
Understandable means that all users must be able to comprehend information consistently throughout a web experience and be able to use and work with interface operations. This includes consistent and clear labels, instructions, and adequate error messaging or prevention. For example, a navigational structure that changes from page to page may be frustrating or confusing for a sighted user, but it can be even more restrictive and challenging for a non-sighted user. They may believe that they’ve navigated to an entirely different site or channel.
Provide in-line error messages to alert users to the field or fields that have incorrect information.
Create generic error messages or place them in vague positions that don’t help users determine errors quickly.
Robust
Robust means that the content and solutions should be clear enough to be interpreted reliably by a wide variety of user accessibility tools & mediums, including any major assistive technologies. Using appropriate HTML markups and the use of aria labels can help achieve this. Check the site’s usability with multiple technologies and screen reader programs. Don’t assume that the site works because it works for some. We check websites on all types of browsers; the same philosophy applies to assistive technologies.
NVDA
JAWS
Android Accessibility Suite
Conformance Standards
There are also three different levels of conformance: A, AA, and AAA. Each level builds on the other levels, meaning that AA covers A criteria and AA criteria, and AAA covers A, AA, and AAA criteria. Color contrast rules make it easier to read content, even for users with full color vision.
There are 30 criteria within WCAG 2.1 Level A, and 20 criteria within Level AA, meaning that we track 50 success criteria within an accessibility audit.
Roles & Responsibilities
For a project to be successful and accessible, all team members must be actively involved, engaged, and knowledgeable. Easier said than done! It’s important to consider accessibility in a website or app from start to finish, because many of the decisions can’t be reversed or altered late into the game. Think of the challenge of integrating established brand guidelines into a new site build; if the colors are inaccessible when combined, designers will need to be cognizant of that early on, and find solutions that meet the brand. Otherwise, the brand will have to start over and re-create brand guidelines.
Many of the guidelines live in the realm of development, especially those that cover HTML markup, backend implementation, and CSS guardrails. However, accessibility is a practice that should be considered at all phases of web design, from user experience and information architecture to visual design and color styles.
46% development/user experience criteria
criteria adherence is dependant on many areas, from information hierarchy and proper labelling to indications for hover states
40% development only criteria
criteria adherence is dependant on HTML markups, alternative text elements, etc.
4% design only criteria
criteria adherence is dependant on adequate color contrasting and text spacing.
10% user experience only criteria
criteria adherence is dependant on consistent navigation, overrall structure, etc.
Process
It’s tempting to assume that a site, once meeting accessibility standards, is good to go. But each new design update, feature rollout, and piece of content should be evaluated through the lens of accessibility. Just as accessibility is a full-team practice when implementing it, it’s also a full-team practice to maintain.
- An infographic, for example, might be better as a set of components, copy elements, and accessible graphs, rather than a large image with overwhelming alternate text.
- A new tutorial overlay may not be keyboard accessible when first implemented.
- Any new pages, templates, or branding guidelines should be analyzed to ensure consistency and adherence to WCAG.
It’s also worth noting that WCAG is not a static document. There is currently a plan in place to launch WCAG 2.2, which includes 5 new success criteria for level A, and 4 new success criteria for level AA. It will also include a fifth area of focus entitled Conformance, which lays out guidelines for adherence levels. WCAG 2.2 is scheduled to launch in late 2020.
As WCAG evolves, websites need to follow suit. Ten or fifteen years ago, we may not have needed specific guidelines around touch targets’ CSS pixel sizing, since the mobile user base was relatively small. Now, in our mobile-first landscape, WCAG 2.2 will provide specific minimums. As more technology is created, more issues will be discovered, and more processes will need to be enhanced.
Are Your Digital Properties Accessible?
We design all of our clients’ sites to be accessible with nationally recognized standards and consistently run audits to identify problems and solutions, both short- and long-term. We also help clients implement changes to an existing site, or work to ensure a redesign or new launch meets all standards. While Genuine cannot provide certifications, additional conversations will be identified at the start of a project where certifications are required. If you’re ready for an accessibility audit, or a site redesign, we’re ready to help. Contact us to learn more about our services and expertise.
Want more? We’ve compiled some helpful resources that can help you explore further and even find accessibility errors on sites.
Designed to help you automate page checks
and uncover code errors quickly.
