Get your FREE 30-day trial.
Please complete all fields.
As the world moves to a more digital lifestyle, those with auditory, visual, cognitive, or physical differences encounter increased difficulty in daily life if apps and websites don’t consider accessibility for them.
Take the movement towards contactless shopping, which the pandemic is accelerating. What was once a first-world convenience is now a dire necessity. Then there’s food delivery. Users of smartphone apps such as Uber Eats and DoorDash will increase 25% this year, according to eMarketer.
The issue of accessibility to these digital experiences will come to a head. Case in point: 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 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.
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, and 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 laws aren't black-and-white on this, but clearly courts are starting to lean in,” relays 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 letters 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 people use to browse, read, and shop. In practice this means 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:
Headings, subheadings, and eyebrows
Image markups
Link text
Videos
Color Contrast
Almost everyone relies on some object — like headphones or reading glasses — that aids accessibility
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:
Smartphone users with small screens
Older individuals with changing abilities
Temporary disabilities, such as a broken arm or lost reading glasses
Situational limitations, such as bright light or background noise
Those with slow internet connections or limited bandwidth
If you’re over 45 years old, or ever plan to be, you’re probably grateful 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.
“It’s like day one of a diet where you have to step on the scale”
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:
Mark up the headings with the WYSIWYG toolbar or code with header tags like H1, H2, H3 in HTML
Ensure the headings reflect the content hierarchy and do not skip levels
Set eyebrow text to the same level as the headline (example below)
For example, this article uses 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:
Informative images: Describe only what’s in the image; omit terms like “image of” or “photo of” as screen readers will alert users it’s an image.
Functional images: These function as links, and the alt text should describe the destination of the link. This could be a logo in a page header, a social media icon, or an image used in a button.
Captions: May be used as on-page guidance to describe an image. When captions are at play, they should be close to the image to inform screen readers, and the image could receive a shorter than average alt text treatment.
Decorative images: These are images that provide no informative content on the page, and usually they don’t receive alt text, but it’s important they include the “alt="".”
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.
“Video players are ubiquitous, but — without user controls, transcripts, and captions — they can be a Trojan horse of accessibility issues”
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:
Use text that describes the destination to provide clarity for users. For example, rather than “Learn more,” a descriptive link for this article might say “Find out what the Becoming Retail series is all about.”
Use an assistive label, an invisible field just for screen readers, to balance needs like writing short text for responsive (mobile), and providing a description of the destination.
Use specific, non-generic terms that describe where the user will go if they click the link. For example, instead of “Watch Demo” use “Watch the Sales Cloud Demo.”
Use unique link text for each link on a page, else it’s confusing to screen reader users who will click and arrive at different destinations.
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 — without user controls, transcripts, and captions — they can be a Trojan horse of accessibility issues notes LeBlanc.
Accessible video players include all of these elements:
Captions that describe all the information conveyed by sound, such as dialog, speakers, and music
Transcripts for all meaningful audio content that details information conveyed by sound, such as dialog, speakers, and music
A pause button to give users control
A play button so users can activate/reactivate when ready; players should not be set to auto play
If an author has to choose between any of the above 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: The page you’re reading has insufficient color contrast in the header.
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:
Text of less than 24px/1.5em, or 19px/1.2em and bold, should have a ratio of at least 4.5:1 with its background
Text of at least 24px/1.5em, or 19px/1.2em and bold, should have a ratio of at least 3:1 with its background
Informative icons and charts should have a contrast ratio of at least 3:1 against their background
Functional icons and buttons should have a contrast ratio of at least 3:1 against their background
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 development 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.
Delight users with fully accessible websites and apps when you take the Getting Started With Web Accessibility on Trailhead. And, learn more about the brave new world of shopping.
