07/23/2021 | Press release | Distributed by Public on 07/23/2021 13:40
About 56 million people in the U.S. have a disability that may result in them being barred by technology that does not serve them. As a result they are less likely to have full access, according to Pew Research. For business and society, this is a huge lost opportunity when you consider this audience's combined purchasing and brain power - not to mention dignity for all. The web offers those with disabilities an unprecedented opportunity to communicate and access information that other media does not. And individuals, businesses, and society benefit when everyone can use the web fully.
As the world becomes more digital, those with auditory, visual, cognitive, or physical differences encounter increased difficulty if apps and websites don't consider accessibility for them. Understanding the practices of web accessibility, and knowing what it is to be in compliance with Americans with Disabilities Act (ADA) accessibility standards, can widen opportunities for your business to bring in more global prospects.
Take our Getting Started With Web Accessibility training on Trailhead, our free online learning tool.
Contactless shopping was once a first-world convenience; the pandemic made it a necessity. Then there's food delivery. Users of smartphone apps such as Uber Eats and DoorDash jumped 25% in 2020, according to eMarketer. But issues of accessibility to these digital experiences are coming to a head. A recent U.S. Supreme Court case centered around web-only pizza coupons that could not be used with a screen reader. Web accessibility is potentially about far more than pizza; it's about the right of everyone to access information and communicate.
'The laws aren't black-and-white on this, but clearly courts are starting to lean in,' said Fred LeBlanc, a product manager in marketing technology at Salesforce. What businesses can be sure about is the need to continually run audits and apply fixes where necessary. The World Wide Web Consortium (WC3) - a global community that develops principles to ensure the highest quality web standards - offers tools and other resources to complete such an assessment.
So how can developers of new digital experiences ensure their apps and websites are ADA (Americans with Disabilities Act) compliant? Below, a primer:
The Americans with Disabilities Act states that all public spaces must provide equal access to all. When drafted 30 years ago, the internet as a 'public space' didn't exist, but several court cases later, virtual spaces also need to be open and welcoming to all. Web accessibility is sometimes abbreviated with the numeronym 'a11y' - there are 11 characters between 'a' and 'y'. It means that all users, regardless of their limitations on sight, hearing, mobility, or cognitive abilities, can use a website or app for its intended purpose.
An accessible digital property does not create a separate pathway for users with disabilities, and it is constructed to work with common assistive technologies that people use to browse, read, and shop. In practice this means that a blind user can use an app with a screen reader; a deaf user could rely on captions on a video; a user with a cognitive disability may benefit from reduced animations to prevent distractions.
Below, we'll guide you through how to fix a few of these; you'll find complete guidance at the Web Accessibility Initiative. We'll walk you through remediation for the most ADA compliant practices for:
Infographics, product carousels, strobing visuals, and animated gifs are notoriously tricky, if not impossible, to design in an accessible way.
Ironically, the early web was largely accessible because it was simple HTML - an equalizer for those with disabilities.
Access to the web can be affected for those with auditory, cognitive, neurological, physical, speech, and visual differences. But in truth, accessibility features are a huge benefit to the population beyond those with nontypical abilities.
Much as curb cuts on city streets have made movement easier for people pushing strollers or delivery carts as well as users of wheelchairs, web accessibility improves usability for many others without a disability, including:
If you're over 45 years old, or ever plan to be, you're probably grateful that web browsers allow you to configure font sizes. That's just one example of the many accessibility features, or universal design elements, in broad use.
If you're a site manager, business owner, or a11y curious, the most important thing you can do to advance web accessibility is simple - start today.Here's how:
'It's like day one of a diet where you have to step on the scale,' says LeBlanc. Use a tool like SiteImprove to quickly identify all of the areas of your web pages or apps that need improvement. There are other tools - over 150 more - so find one that works best for your use case. It only matters that you use one regularly.
List all the issues in a spreadsheet; include columns to track the status, and add notes. Make sure the list includes everything you've documented.
Next, schedule time on your calendar - start with 15-30 minutes - and make sure you can sustain this every day for a period of a month or longer. Then start to fix the smallest issues. This could be as simple as adding alternative text to an image or logo. Don't forget to retest your site for compliance before you republish it by using your tool of choice again. Repeat this as many times as you can in the allotted time.
Develop the habit of making incremental updates and you'll make progress. Full disclosure: it's a good idea to finish these small items like image alt tags before focusing on the larger, more complex issues like site structure. Remediation for the larger issues may require third-party developers.
Stop making your site accessibility issues worse today. With that goal in mind, here are some (relatively) easy things you can do.
Large bold font does not make for an accessible heading on its own. Proper heading markup helps to organize and structure content for those who use screen readers and other assistive technologies. Observe this guidance as you markup headings:
For example, this articleuses both H2 and H3 to organize content. The H2s function as the main subhead topics, and the H3s function as subcategories. Each subcategory supports the level above: H2s support the H1; H3s support or elaborate on the H2s. Here's an example from our site:
Both the first eyebrow text blocks and the second headline text are marked as H1 in this example.
While the site where you're reading this doesn't meet every accessibility requirement (we're working on this!) the article pages employ proper HTML markup language for eyebrow and heading.
Provide alternative (alt) text for all images that are informative or functional. Images that function as buttons or links require alt text, too.
In many Content Management Systems (CMSs), images that are decorative receive no alt text, or if they do, they receive a null value of 'alt=''. Other CMSs and site managers may require alt text for all images.
A useful rule of thumb for writing alt text is to ask how you would describe an image to someone sitting next to you.
While that sounds easy enough, in practice there are several nuances authors will need to address:
If it's not exactly clear what a decorative image is, that's because it is ultimately up to the author to determine if the image relays information or links to another page. W3.org guidance on decorative images notes they are 'eye candy' and can be illustrative of the page content, but provide no additional information.
Do this and you'll accomplish two things: help users and augment Search Engine Optimization (SEO). Screen reader users are able to skip from link to link, so we should label links for understanding out of context. In practice this means 'learn more' and 'read more' won't be helpful to these users.
That said, there are several things website authors can do to ensure links are meaningful to all users:
Full disclosure: the Salesforce website grapples with consistent and useful text on buttons and links before carets. We use the assistive label to provide clarity.
Video players are ubiquitous, but - if video players do not include user controls, transcripts, and captions - they can be a Trojan horse of accessibility issues.
Accessible video players include all of these elements:
If an author has to choose between full accessibility and not having video, forgo the video.
This is the level of contrast between the background and the font on the page. Color contrast affects a wide user base - including those with low vision and color blindness.
Full disclosure: Our site up to October 2020 had insufficient color contrast in the header. See the example below.
In this case the large, thin font and color contrast of the headline does not have a proper contrast ratio against the light blue background. A redesign restructured the header and eliminates this contrast issue:
The remedy is straightforward - although it can be complicated to fix and apply to all historic pages - to ensure all text has the minimum required contrast against the background. While there are a number of tools to help you to calculate ratios, it's helpful to know the minimums:
Use these color contrast ratios for all graphics, PDFs, and page elements. For a fix like the page headers, which may require developer support, it's best to itemize and prioritize with other dev work.
While web accessibility can be cryptic, and compliance can require a significant resource investment, making any of this guidance standard practice is far better than doing nothing.In a digital-first world, ADA compliance and web accessibility may mean the difference between more or fewer customers.
Take our Getting Started With Web Accessibility training on Trailhead, our free online learning tool.