The Ultimate Guide to Accessible Web Design
- 1. The Benefits of Accessible Design
- 2. Accessibility Laws and Standards
- 3. Headings and Links
- 4. Layout and Typography
- 5. Image, Video, and Audio Accessibility
- 6. PDF and Document Accessibility
- 7. Color Contrast and Accessible Colors
- 8. Writing for Accessibility
- 9. Testing for Accessibility
- 10. Checklist for Accessible Design
"I don’t assume businesses ignore accessibility out of malice. It’s usually a matter of not knowing about it — or understanding how it affects people with disabilities."
Maxwell Ivey, AudioEye A11iance Advocate
INTRODUCTION
No web designer or developer sets out to create an inaccessible website or digital experience. But digital accessibility issues are everywhere — and many businesses aren’t even aware the problem exists.
That lack of awareness has contributed to a digital landscape where 97% of the internet is inaccessible to people with disabilities.
- For members of the disability community, accessibility issues can be a source of constant frustration — slowing them down or forcing them to seek other, more accessible websites.
- For businesses of all shapes and sizes, these issues can lead to missed revenue opportunities, negative brand perception, and even the risk of legal action.
So, how can businesses ensure they deliver an inclusive experience to everyone who comes across their content online, regardless of ability? We’re a little biased, but we think it starts by reading this guide and learning the fundamentals of accessible design: What it is, why it matters, and how to build an ongoing strategy for accessibility.
Who is this guide for?
We think accessibility is everyone’s responsibility. However, we wrote this guide to support a few key roles — from the designers and developers building new digital experiences to the business leaders responsible for making sure every customer interaction online is a positive one.
What you'll learn
With plenty of help from our team of internal experts and members of the disability community, we filled this guide with practical, tactical advice on all things accessible design (although we can ’t promise it will all rhyme):
- The Benefits of Accessible Design: What is web accessibility — and how can it support your business goals?
- Accessibility Laws and Standards: Get the inside scoop on the accessibility laws and standards you need to know.
- Headings and Links: Make site navigation a breeze with tips on accessible headers, links, and semantic HTML.
- Layout and Typography: Improve comprehension for all users with tips on accessible fonts and page layouts.
- Image, Video, and Audio Accessibility: Create multimedia experiences that work for every user, in any environment.
- PDF and Document Accessibility: Create PDFs and other digital documents that work with assistive technology.
- Color Contrast and Accessible Colors: Why color contrast matters — plus how to pick an accessible color scheme.
- Writing for Accessibility: Get tips on using inclusive language and creating content that everyone can understand.
- Testing for Accessibility: Tips on building an effective, scalable plan for finding and fixing accessibility issues.
- Checklist for Accessible Web Design: Get all of our accessibility best practices in one easy-to-use, shareable place.
1. THE BENEFITS OF ACCESSIBLE DESIGN
What is web accessibility?
Before we get into specific tips and best practices, it’s important to understand the connection between accessible web design and digital accessibility.
Accessible web design is the practice of designing websites and digital experiences in a way that people with disabilities can easily navigate, consume, and interact with the content.
“My new rubric for a design requires me to not only make something that looks beautiful and suits the intended purpose, but is as accessible as possible. If it isn’t accessible, I haven’t done my job.”
Sarah Ippen, Senior UI/UX Designer, AudioEye
According to the Web Content Accessibility Guidelines (WCAG), there are four key principles that lay the foundation for accessible web design. For a website to be accessible, it must be:
- Perceivable: Information and user interface (UI) components must be presentable and perceivable to all users.
- Operable: UI components and navigation must be operable by all users.
- Understandable: Website content and operation of the UI must be understandable to all users.
- Robust: Content must be robust enough for all users and assistive technologies to interpret it reliably.
What are the benefits of designing for accessibility?
When we talk to people about digital accessibility, the conversation often veers toward compliance with nondiscrimination laws like the Americans with Disabilities Act (ADA) — and for good reason.
Over the last few years, there has been a record number of digital accessibility lawsuits. More companies are receiving demand letters or being taken to court over alleged violations of the ADA and other nondiscrimination laws.
At the same time, the U.S. Department of Justice (DOJ) has consistently maintained that the ADA applies to both the physical and digital worlds — and continues to strengthen the link between the ADA and accessibility standards like the Web Content Accessibility Guidelines (WCAG).
Accessibility isn't just about reducing risk
However, thinking about web accessibility as simply a “compliance issue” fails to fully capture the opportunity it represents. Let’s take a closer look at four more reasons to prioritize accessibility and inclusion:
- Digital accessibility can help you reach more customers: One of the biggest misconceptions about digital accessibility is that it’s an edge case — and an inaccessible website won’t affect that many people. In reality, over 1.3 billion people globally live with some type of disability — making the disabled community one of the largest audience segments in the world.
- Digital accessibility is good for everyone: The primary goal of digital accessibility is ensuring equal access for all users, regardless of ability. But that doesn’t mean designers need to compromise on design. In fact, many of the best practices of digital accessibility are closely aligned with the basic tenets of UI/UX design, such as clear, consistent navigation, clearly defined information hierarchy, and giving users control over how they access content.
- Digital accessibility supports discoverability: There’s also a clear link between accessibility and search engine optimization (SEO). For example: Sites with clear, descriptive headings — which support navigation and comprehension for people with disabilities — are also easier for search engines like Google to crawl. In fact, Google Search Essentials (which outlines the best practices that help Google find, index, and rank websites) reads like accessibility guidelines — and often directly correlates with WCAG.
- Digital accessibility can improve brand reputation: More than ever, people want to be associated with companies that share the same values as them — especially when it comes to things like sustainability and inclusion. In fact, a recent study found that consumers are 6x more likely to protect a company’s image when a brand develops a strong perspective on social and environmental issues.
Who does accessible design support?
In the United States, one in four adults lives with some type of disability. These disabilities are typically grouped into four categories (although it’s important to note that people can have multiple disabilities):
Many of these disabilities can impact how people perceive, understand, navigate, and interact with websites and other digital content. For example:
- People with color vision deficiency (color blindness) may struggle to perceive content with low color contrast, like gray text on a white background.
- If an image doesn’t have descriptive image alt text, non-sighted users can be left wondering what the image depicts.
- If a video doesn’t have captions, it can be hard for people with hearing impairments to follow along.
- If a form or button cannot be manipulated with keyboard commands, keyboard-only users may struggle to navigate a site or take key actions.
The cheapest form of advertising is word of mouth, and people with disabilities can have some of the loudest voices when we find people willing to make the effort. Because it’s that sincere effort over time that really counts with us
Maxwell Ivey, AudioEye A11iance Advocate
Let’s make digital accessibility a priority, together
Want to learn how we can help you with your accessibility, from automated testing to custom fixes and education? Talk to an expert today.
2. ACCESSIBILITY LAWS AND STANDARDS
What are the Web Content Accessibility Guidelines?
The Web Content Accessibility Guidelines (WCAG) are technical standards on web accessibility developed by the World Wide Web Consortium (W3C). The latest version — WCAG 2.2 — was released in 2023 and includes 89 acceptance criteria, or guidelines.
Although WCAG isn’t an enforceable law, many governments have adopted the guidelines as their standard for web accessibility. WCAG is broken into three levels of conformance: Level A, Level AA, and Level AAA.
- Level A is the minimum level of conformance and covers basic web accessibility.
- Level AA includes all Level A and AA requirements and covers most accessibility issues people with disabilities encounter online.
- Level AAA is the highest level of conformance — to the degree that some types of content cannot conform with every AAA guideline.
WCAG Level AA is the benchmark for accessibility
Websites that follow all WCAG Level A and AA success criteria are considered reasonably accessible for people with disabilities, including screen reader users, people with low vision, hearing impairments, and cognitive impairments, and other.
WCAG Level AA conformance doesn’t mean your website is perfect, but it’s an excellent goal. Most accessibility laws reference Level AA as the standard for reasonable accessibility.
Web accessibility and the Americans with Disabilities Act
The Americans with Disabilities Act (ADA) is a landmark civil rights law that prohibits discrimination against people with disabilities.
Title III of the ADA prohibits discrimination in “places of public accommodation,” which the Department of Justice (DOJ) has repeatedly stated includes websites. Over the last 20 years, numerous lawsuits and DOJ settlements have supported this interpretation.
Although the ADA doesn’t have technical standards for web accessibility, the DOJ recommends that businesses use WCAG to evaluate the accessibility of their website(s) and digital content. Past rulings have set WCAG Level AA as the benchmark for accessibility.
The European Accessibility Act (EAA)
Similar to the ADA, the European Accessibility Act (EAA) was created to enhance the rights of individuals with disabilities by improving access to digital content. Under the EAA, technologies such as smartphones, mobile apps, televisions, and audio-visual media services must be accessible by persons with disabilities. To comply with the EAA, EU counties must follow the standards outlined in WCAG 2.1 Level AA.
The Accessibility for Ontarians with Disabilities Act (AODA)
Created in 2005, the Accessibility for Ontarians with Disabilities Act (AODA) is a non-discrimination law that protects individuals with disabilities from being discriminated against. The AODA applies to both government agencies and private organizations in Ontario and mandates these entities meet WCAG 2.1 Level AA standards.
Get started on the path to accessibility compliance
Following web accessibility standards like WCAG is an important first step towards compliance with international accessibility laws. However, businesses should also adopt the following best practices:
- Find and fix accessibility issues: Regularly testing your website and digital content can help you identify accessibility issues before they impact customers, lowering your risk of being sued.
- Leverage human and automated testing: Certain types of content — such as video, audio, and digital documents — cannot be reliably tested or fixed with automation. However, human-only testing is ill-equipped to keep pace with the constantly changing nature of most websites. Blending both approaches can help you find and fix more issues, delivering a more inclusive experience to your users.
- Provide an accessibility statement: An Accessibility Statement is a declaration of your commitment to accessibility that also provides information about your content, including known accessibility issues, the accessibility standard applied to your website (such as WCAG 2.2), and contact information in case users encounter accessibility issues.
3. HEADINGS AND LINKS
Make navigation easier with descriptive links and headers
Page headings allow screen reader users to understand the structure of your web pages and quickly navigate to the section(s) they’re interested in. These headings are categorized into hierarchical, numerical levels from <H1> to <H6> — with the highest level being <H1>.
Studies have shown that the majority of screen reader users begin web navigation by reading headings, so it’s important to use headings correctly to provide an accessible user experience.
Best practices for accessible headings
- If your website content is longer than three paragraphs, use headings to make your content scannable for all users.
- Plan the heading structure before building a webpage to ensure that you don’t skip heading ranks.
- Don’t skip headings or create empty ones. Screen readers will still read these headings aloud, causing confusion.
- Don’t use bolded text in the place of a heading, since screen readers will not read this as a heading.
Provide key context with semantic HTML
Semantic HTML (or semantic markup) is code that uses HTML tags to communicate the meaning or purpose of an element to both computers and people.
Whenever possible, use semantic HTML tags to provide additional context and meaning to screen reader users. For example: Web developers can either use the <button> tag and the <div> tag to create a button, but the <button> tag will be readily identified as a button by a screen reader and be focusable and clickable.
Structured, semantically correct HTML helps search engines and screen readers understand the type of content you’re presenting — as well as the context of this content.
Support easy navigation with descriptive links and CTAs
When it comes to hyperlinks, many organizations default to short, declarative phrases like “click here” or “learn more.”
Although this approach might be good enough for people who can take in all of the surrounding information at a glance, it does little for screen reader users or people with cognitive impairments.
In order to be accessible, hyperlinks should contain clear, descriptive text that tells users exactly what they’ll get — or where they’ll go — by clicking the link. In fact, the Web Content Accessibility Guidelines provide specific guidance on how to write descriptive, accessible link text:
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
WCAG 2.4.4: Link Purpose (In Context), WCAG 2.2
Best practices for descriptive links
- Use clear, concise language. For example: A link that reads “Click here to discover the latest best practices for writing alt text” can be shortened to “Discover the latest alt text best practices” — without losing meaning.
- Avoid using vague or generic terms, like “click here” or “learn more.”
- Make sure that all links to the same destination use the same link text.
- Avoid redundant ARIA roles, which can create confusion and frustration for users. For example: Adding “role=link” to a link tag will cause screen readers to announce the element twice, i.e., “Link Link.”
- Links — including clickable images — should always include a link description that can be read aloud by screen readers and other assistive technologies.
4. LAYOUT & TYPOGRAPHY
Readability starts with font choice
Typography can help you establish hierarchy and visual order on your website and digital content — but it’s also key to legibility and comprehension for people with a range of disabilities.
Here are a few common typography best practices:
- Font choice: Clear, legible fonts (or typefaces) make it easier for people to understand your content. Serif fonts work well for long blocks of text, while sans-serif fonts work well for mobile apps and user interfaces. Be careful about using decorative fonts (i.e., cursive or handwritten styles), which add plenty of style but can make it harder to read and navigate.
- Font styling: Avoid long sections of bold, italic, or uppercase text, which can impact readability.
- Font size and weight: As a rule of thumb, larger fonts with heavier font weights are more legible, even on low-contrast websites and digital experiences. The W3C recommends starting at 18-point regular-weight text or 14-point bold text.
- Text alignment: Text that is right-aligned, centered, or justified can be difficult for people to read. Whenever possible, use left-aligned text for large sections of copy, as this gives readers a consistent starting point for each line of text. Centered, right-aligned, or justified text can be used for headings or short sections of copy that don’t require repeated eye movements.
- Letter spacing: The space (or kerning) between each letter or character in a body of copy can be adjusted for readability. While this is usually defined by the font designer, certain circumstances — such as smaller text or small caps text — could benefit from more space between characters, while headings and larger text could benefit from less space.
- White space: For people with cognitive or learning disabilities, white space — the negative space around headings and bodies of text — has been shown to ease reading difficulties and improve comprehension.
Dyslexia and font accessibility
For people with dyslexia, picking the right font can help improve readability and comprehension. However, that doesn’t mean you must use a font designed for dyslexia, like OpenDyslexic.
These fonts, which are often characterized by heavy, bolder bottoms that give each letter a unique shape, are meant to prevent letter flipping — a common marker of dyslexia.
However, not all people with dyslexia experience this sensation — which is why it’s more important to focus on things like white space and adequate letter spacing. Plus, you can always enable users to adjust the visual presentation of a website with a tool like AudioEye’s Accessibility Help Desk, which includes options for fonts, increased letter spacing, guidelines, and more.
Remember to embrace white space
According to the World Wide Web Consortium’s (W3C) Supplemental Guidance to WCAG 2, putting white space around objects and text can help reduce clutter and draw focus to important content.
For people with cognitive or learning disabilities, white space has been shown to ease reading difficulties and improve comprehension. And like other accessibility best practices, it has the added benefit of making pages easier to navigate and read for everyone.
Here are three ways to use white space well:
- Break up paragraphs: Use images, diagrams, and graphics to help break up text. However, be sure to provide descriptive alt text for anyone who cannot perceive images visually.
- Avoid multiple columns: Left align text, without justification. This will help readers find the start and finish of each line — and ensure even spacing between words.
- Enable customization: Give users the ability to adjust white space around objects and text easily.
Understanding touch target size accessibility
Touch target size for accessibility aims to ensure targets — any place with a link, whether on a computer or mobile — is large enough to be clicked on or otherwise accessed by those with mobility, visual, or other disabilities.
The minimum touch target size for buttons and at least one of two adjacent links (or equivalent targets) must be at least 44x44 CSS pixels, per WCAG.
You should also have enough padding between your links to help ensure users don’t click or tap the wrong one by accident. Use empty space as padding, or regular text between linked words in a list.
Links within text, footnotes, and help icons don't need to meet the minimum pixel size, but it's still a best practice to have space between links. For instance, you shouldn't have an anchor link on one word and a different anchor link on the next word.
Although your in-text links don't need to be a minimum of 44x44 pixels, you do need to follow WCAG for font size. In general, 14-point text is the minimum acceptable font size, but you can use any font size within the 14 to 18-point range, or 18.5-24 pixels, respectively.
Best practices for accessible typography and layouts
- Use simple, readable typefaces
- Use a limited number of font variations
- Avoid complex characters or font styles
- Avoid fonts with character ambiguity, i.e., characters that closely resemble others
- Avoid large blocks of crowded text
- Avoid small font sizes
5. IMAGE, VIDEO, AND AUDIO ACCESSIBILITY
Create multimedia experiences everyone can enjoy
Odds are, your marketing and design teams invest a lot of time and money trying to create compelling visual content, from brand photography and product videos to display ads.
Unfortunately, many organizations neglect to make sure their multimedia content can be enjoyed by all users. Here’s how you can get ahead of the curve with accessible images, videos, and audio content.
For accessible images, start with alt text
There are plenty of guides on taking better product photos, from getting your lighting just right to setting up lifestyle shots that show your product in action. But what about making sure everyone understands what your images are supposed to convey — even if they can’t perceive them visually?
Alt text is a written description of an image that screen readers can read out loud for people with visual impairments, sensory processing disorders, or learning disorders.
Done right, alt text can help paint a fuller picture of your products and services for screen reader users. Unfortunately, many businesses forget to provide alt text. Or they write descriptions so generic — like an image of a clothing size chart with alt text that simply says “size chart” — they may as well not be there.
Struggling with your alt text? Imagine you're quickly describing an image over the phone to a friend. What information would you be sure to include? That should form the basis of your alt text description.
Sojin Rank, Senior Manager, Brand & Design @ AudioEye
So, what does good alt text look like? Remember: The goal of alt text is to provide an equal experience for people who cannot perceive images visually. That means describing images in a way that includes the most important information, in the order people need to know it.
Check out the examples below:
- BAD: “people.jpg”
- BETTER: “Two people looking at a phone.”
- BEST: “A young man and woman smile at something on the woman’s phone, in front of an accessibility symbol with a blue and green gradient background.”
As you can hopefully tell from the examples above, the best version of alt text is one that describes everything a user needs to know about an image. What that means for your images will vary, but as long as you capture the key details in your description, you’ll be on the right track.
COMMUNITY PERSPECTIVE
If someone was stuck on alt text, how would you help them get unstuck?
"For products and services, brainstorm two or three questions that potential buyers might have. If you’re selling a shoe, does it have laces or a buckle? Is it a slide-on? What kind of material is it?
All of those questions should be answered by your product images. And they should be answered by your alt text as well.”
Ana Jacob, AudioEye A11iance Advocate
Want more insights from the disability community? Learn how we work with people with disabilities to test customer sites.
A Quick Checklist for Better Alt Text
Alt text is subjective, but there are some do’s and don’ts that can help elevate your alt text descriptions:
- Don’t start with “Image of” or “Picture of”: Screen readers will know from the preceding HTML tag to announce the alt text as an image — so including these phrases in the alt text will only disrupt the user experience.
- Be descriptive: People using screen readers can ignore what you write, but they can’t ignore what isn’t there. Include key details and defining traits.
- Lead with the most important info: Try to put the most important information first, so people aren’t left wondering why you’re describing every minute detail of an image.
- Include readable text: If your images have text (for example: labels that explain product features or benefits), make sure they are either listed in the alt text or described nearby on the page.
Add captions and audio descriptions to all videos
If you’re selling online in 2024, video is probably a big part of your marketing strategy.
In 2021, Hubspot’s Not Another State of Marketing Report found that video was the top content type being produced by content marketing teams — passing blog posts for the first time.
Whether you use video for promotional campaigns, product demos, customer testimonials, or all of the above, it’s important to do it in a way that doesn’t exclude anyone. And often, that means adding captions and descriptions of videos that help everyone enjoy your videos.
Here are three tips to help you make sure your videos are accessible to all viewers — including people with vision, hearing, and motor impairments:
- Invest in high-quality audio: This feels like one of those tips that should apply to videos in general. Who doesn’t want audio that’s crisp, clear, and free of background noise?!
With that said, high-quality audio is critical to video accessibility. People with hearing loss tend to be able to hear better — whether they’re using hearing aids or not — when there is little or no background noise getting in the way of what they want to hear. As an added bonus, this will also help transcribers hear the audio better and write more accurate transcriptions. - Proof captions by hand: There are plenty of programs that will automate captions for your videos. Unfortunately, voice recognition isn’t perfect, and those “small” mistakes can confuse or frustrate people who rely on captions.
Proofing your captions with human eyes and ears can help catch those mistakes — and deliver a better viewing experience. - Provide audio descriptions: An audio description is a verbal explanation of visual content. It’s intended to provide crucial context for people with vision impairments — captions, on the other hand, are intended for people with hearing impairments or who choose to watch videos with the sound off.
Audio descriptions are only necessary when your multimedia contains important visual information that is not available through the audio track. If your video consists of a single person talking to the camera, you may not need an audio description. - Don’t use auto-play: There are several reasons to avoid using auto-play videos (beyond the fact that most people find this kind of content annoying and intrusive). Not only does auto-play not give assistive technology users time to set up their devices, but any video with flashing lights or animation can pose a danger to users who are susceptible to seizures.
Additionally, people who are hard of hearing often have the volume on their mobile devices turned up, which can be embarrassing if they're in public and a video starts playing loudly.
Closed captions are a requirement for accessibility.
The Web Content Accessibility Guidelines (WCAG), widely considered the international standard for web accessibility, require captions for live and pre-recorded videos:
- WCAG 1.2.3: Audio Description or Media Alternative (Prerecorded) (Level A): An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
- WCAG 1.2.5: Audio Description (Precorded) (Level AA): Audio description is provided for all prerecorded video content in synchronized media.
Best practices for accessible captions
- Synchronize captions: Make sure your captions and subtitles appear on screen as close as possible to when they are said in the video. Many people who are deaf have some hearing — and poor timing can be jarring.
- Check caption placement: Make sure your captions don’t interfere with important visual elements on the screen.
- Provide simple access: Make it easy for people to find the caption controls for your videos. Ensure the controls to toggle captions on/off are clearly labeled and easy to see.
6. PDF & DOCUMENT ACCESSIBILITY
Deliver PDFs and documents everyone can enjoy
Many businesses use PDFs and other web-based documents for essential purposes. If a piece of content is long or designed for print, PDFs might be preferable to a traditional web page.
However, it’s important to remember that all online content must be accessible to people of all abilities. Under Title III of the ADA, businesses that are open to the public must provide full and equal access to people with disabilities. The DOJ has consistently repeated its position that the ADA also applies to online content — and digital documents are no exception.
There are two technical frameworks for evaluating the accessibility of digital documents:
- The International Organization for Standardization (ISO) standard 14289-1, also known as PDF/UA-1, provides accessibility requirements for PDF documents.
- The Web Content Accessibility Guidelines (WCAG) include a number of pass-or-fail success criteria that can be applied to digital documents.
Testing the accessibility of your digital documents
In simple terms, PDFs are images of documents. If a PDF is not properly tagged for accessibility, screen readers perceive it as a single image instead of a document containing structured information.
Testing the accessibility of your PDFs and digital documents can be challenging if you don’t have the right team in place. At AudioEye, we rely on our team of certified accessibility experts — including native assistive technology users — to help us test our own documents. However, you can get started by evaluating your content against WCAG’s four core principles of web accessibility:
- Perceivable: All information and interactive elements (such as links, buttons, and input fields) should be presented in a way that all users can perceive with at least one of their senses. For example: All documents should meet minimum levels of contrast between the text and background, use accessible fonts, and leave plenty of white space to support readability.
- Operable: All users can easily navigate the document and take any required actions, such as filling out input fields. Clear, descriptive headings and labels allow non-sighted users to quickly skip between sections using a keyboard.
- Understandable: All information and interactive elements should be readily understood. For example: Provide clear, simple labels and/or instructions when user input is required. Use predictable formatting and give instructions for correcting any user input errors.
- Robust: All users, including those who rely on assistive technologies, should be able to understand the content.
Tagging your documents for accessibility
Add tags to the following components to make your PDFs and other digital documents accessible:
- Headings: Screen reader users often scan a document by tabbing between titles, just like sighted users scan a document to find the information they want to read. Adding clear, descriptive tags to your titles, subheadings, and chapters helps them quickly get a sense of what each section covers — and whether they want to read further.
- Images: All images (including graphics and charts) need a descriptive text alternative for non-sighted users and people who struggle to perceive images visually.
- Links: In order to be accessible for non-sighted users, links should contain clear, descriptive text that tells users exactly what will happen — or where they’ll be redirected — if they click the link. For sighted users, links should also be easy to distinguish from surrounding text, often by changing the color and adding an underline.
- Lists: Lists appear as random words if the list is not tagged. Tags should be clear and descriptive, like “Chapter 1 of 23.”
- Reading Order: Setting the reading order helps screen reader users follow the intended reading order of a document. For example: Many newsletters or printable posters are divided into columns or blocks. Without instructions, a screen reader may read content left to right, instead of flowing from the top to the bottom of each column.
- Tables: Tables may be the most complicated elements to make accessible in a PDF. Tagging involves labeling headers, showing reading order, and clarifying content. As a best practice, you should try to avoid using tables if another option is available — especially if there is a lot of information that would make it hard for users to follow.
Stuck on document accessibility?
At AudioEye, our team of certified accessibility experts evaluate content using PDF/UA-1 and the latest WCAG standards to find and fix issues that affect real users.
7. COLOR CONTRAST & ACCESSIBLE COLORS
Color contrast isn’t always black and white
Every designer knows that color can be a tricky subject — even without considering accessibility.
However, the colors we choose (and how they’re implemented) can make it hard for people with low vision or color blindness to fully perceive, navigate, or understand digital content.
Fortunately, the Web Content Accessibility Guidelines provide clear instructions on making accessible color choices — from minimum contrast ratios to the proper use of color as a way of communicating information. For example: One of the most common UX/UI design patterns is using red and green to indicate success and failure messages — visual cues that are imperceptible to non-sighted users and people with some types of color blindness.
What is color contrast?
In simple terms, color contrast is the difference in light between a foreground element (like text) and its background. Many users with visual impairments need a minimum level of contrast to be able to distinguish between two elements on a web page.
Color contrast is typically expressed as a ratio, where a higher number means a greater degree of contrast between the two colors. For example, black and white have a contrast ratio of 21 to 1 (the highest possible ratio), while red and white have a contrast ratio of just 3.9 to 1.
The visual presentation of text and images of text has a contrast ratio of at least 4.5 to 1, except for large text, incidental text or images, and logotypes.
WCAG Success Criterion 1.4.3: Contrast (Minimum), WCAG 2.2 (2023)
Although WCAG SC 1.4.3: Contrast (Minimum) requires a contrast ratio of at least 4.5 to 1, there are three exceptions to this rule:
- Large Text: Large-scale text (i.e., text that is at least 18-point font, or 14-point bold font) and images of large-scale text only need a color contrast ratio of at least 3 to 1.
- Incidental Text: Text or images of text that are part of an inactive user interface component (for example, a disabled input field), purely decorative, or part of a picture that contains significant other visual content do not have a contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no contrast requirement.
Why does color contrast matter?
For many people with visual impairments, color contrast can be the difference between a site that is easy to read and navigate, and one that is completely illegible. Many types of visual impairment — from myopia and hypermetropia to diabetic retinopathy and macular degeneration — can make it more difficult to read text when the color contrast is low.
Low contrast can also cause problems for people who are color blind, even if their eyesight is otherwise perfect. If two quite different colors have a near-identical luminance, they can be almost impossible to tell apart.
Color contrast also plays a significant role in the user experience for the aging population. Visual acuity typically starts declining by the time people turn 70, even if their eyes have always been healthy.
Among the most common visual problems older people experience is low contrast sensitivity, which can render your digital content unusable for a large percentage of your audience.
Don't rely on color alone to communicate information
One of the most common web design patterns today is using color to convey information. Think red to indicate an error or missing field, or green to indicate success.
Unfortunately, these color-based cues can be inaccessible for the 300 million people globally who have some form of color deficiency.
As a best practice, you should avoid using color as the only element that gets your users’ attention — or alerts them to key information. If you do use color to communicate information, be sure to combine it with another element (such as an error message or symbol) to help people with color deficiencies follow along.
Picking accessible color schemes
Want to ensure you build websites and other digital experiences with sufficient color contrast ratios? An accessible color contrast checker can help you check your colors against the latest WCAG requirements — and start creating color schemes that work for all users.
Start by focusing on your scheme’s primary, secondary, and neutral colors:
- Primary colors are the main hues on the color wheel: red, yellow, and blue. These will be the prominent colors used throughout your website or digital experience.
- Secondary colors are made by mixing two primary colors. For example: Red and yellow create orange, and red and blue create magenta. If your branding has two primary colors, adding some flares of secondary colors can work well.
- Neutral colors are considered hues without an “actual color.” These are the browns, tans, grays, blacks, and whites of the color spectrum — and tend to complement primary and secondary colors. You can use them as backgrounds or font hues to create a more grounded, neutral experience.
Do’s and don’ts of color accessibility
Make sure your website's colors are accessible to every user — and follow the latest WCAG guidelines on color — by following these best practices:
- DO aim for white space to improve readability and comprehension for people with cognitive or learning disabilities.
- DO use your primary brand color as the basis of any color schemes or brand palettes
- DON’T let a color combination get in the way of readability
- DON’T use low-contrast text, which can strain the eyes and make your website less accessible
- DON’T use digital black typeface or pure black on a pure white background — the stark contrast may cause eye strain.
8. WRITING FOR ACCESSIBILITY
Words matter — especially when it comes to accessibility
If you asked a group of marketers to share their golden rules of copywriting, they’d probably say something like:
- Keep it simple.
- Lead with the most important information.
- Don’t waste your readers’ time.
And if those sound a bit basic or obvious … well, that’s kind of the point! The best copywriting isn’t overly complicated or clever, but clear and direct.
That’s also true of accessible writing. If you’re writing for an audience that includes screen reader users and people with cognitive impairments (spoiler alert: You are, whether or not you realize it), you should aim for clarity and brevity.
With that in mind, here are three places where the best practices of copywriting and accessibility collide — and how to apply them to your website:
1. Make sure your site is scannable
Copywriters often have to work with character limits that can feel challenging — if not impossible. For an email subject line, a copywriter might get 50 characters. For the headline of a display ad, they might only get 25 characters.
Restrictions like this force copywriters to focus on the keywords and value props that pack the biggest punch — especially with how most people browse websites:
Fortunately, this shift toward simple, benefit-driven writing is especially helpful for people with disabilities. Many screen reader users will jump around a page the first time they visit it, using keyboard shortcuts to jump between HTML headers and get a sense of what each section covers.
If your keywords aren’t descriptive — or if you don’t use headers to separate ideas and break up large sections of text — it can be hard for a screen reader user to skim your page and decide if they want to read more.
2. Details matter, but focus on the right ones
For marketers, it can be tempting to try and stuff multiple value props into every headline or ad.
It takes a lot of restraint to only focus on what customers need to know about your products or services. But having that discipline is an important skill, whether you’re writing ad copy or alt text.
3. Clear, descriptive content is good for everyone
The World Wide Web Consortium’s (W3C) Supplemental Guidance to WCAG 2 includes best practices for clear and understandable content, such as:
- Use active rather than passive voice: Speaking directly to readers in an active voice can support comprehension, especially for people with dyslexia and other language impairments. For example: More people will understand “press the button” than “the button should be pressed.”
- Avoid double negatives or nested clauses: Clear, simple language can help people with dyslexia and other language impairments understand a page — and any key actions they should take. For example: “Time is limited” is clearer than “Time is not unlimited.”
- Be concise: Use short sentences with one idea per sentence. Try to insert the key takeaway or objective at the start of the paragraph. When possible, use bulleted or numbered lists.
How to refer to people with disabilities
- Remember: A disability is something that a person has. It is not who they are. Use “person with [a disability]” or “person who has [a disability].”
- Many people with disabilities prefer people-first language. However, there are also people with disabilities who prefer identity-first language (i.e., “blind person”), and it is important to respect this preference. Never correct someone who refers to themselves using identify-first language.
- Avoid any language that suggests pity of hopelessness, like “suffers” or “victim.” Avoid words like “brave” or “courageous,” as they can belittle or trivialize people with disabilities.
Best practices for inclusive language
- If you’re writing about disabilities, always check that any terms used are accurate and inclusive.
- Lead with people-first language rather than identity-first language, e.g., “people with disabilities” instead of “disabled people.”
- Don’t use a disability as a metaphor with negative connotations, e.g., “That’s so lame.” or “Uncover blind spots in your reporting.”
9. TESTING FOR ACCESSIBILITY
Web accessibility starts with regular testing
Web accessibility testing is a form of usability testing that focuses on ensuring websites and digital content are operable for all users — and work with screen readers and other assistive technologies.
Regularly testing the accessibility of your website and digital content is one of the first steps to delivering an accessible, inclusive experience to every customer, but there are multiple ways to do it.
Here’s how you can establish a robust, effective testing framework for your organization:
How does accessibility testing work?
Many organizations rely on either automated testing tools or expert audits to test the functionality of their websites and digital content. Unfortunately, neither option is sufficient by itself.
Automated accessibility testing is not able to check for every WCAG, which can let certain accessibility issues slip through the cracks — and expose your business to the risk of legal action.
Expert audits, on the other hand, are primarily focused on usability testing and things like color contrast and contrast ratio. However, these audits require testers to go through each line of CSS and HTML code on a web page — a slow, expensive process that is ill-equipped to keep pace with the dynamic nature of most websites.
I have to tell developers on a regular basis is accessibility is not a thing you do, and then it’s done. It’s part of UX. Every time you change the UI/UX, accessibility needs to be part of that conversation. Either before, preferably, or immediately after. Because you may have just broken accessibility again.
Chris Preiman, Accessibility Advocate
Creating an accessibility testing plan
Establishing an effective, scalable plan for testing the accessibility of your website and digital content involves several steps:
- Create a list of assets that require testing, from commonly used web page templates to any digital documents (such as ebooks or PDFs) available to your customers.
- Prioritize these assets based on a number of factors, such as usage, litigation risk, and current level of accessibility.
- Establish a regular testing schedule that includes both automated testing and human audits, which can uncover accessibility issues that automation alone cannot.
- Work with your designers and developers (or an accessibility provider) to implement any fixes that cannot be addressed via automated accessibility solutions.
10. CHECKLIST FOR ACCESSIBLE DESIGN
Level up your website's accessibility
Ready to apply our accessibility best practices to your website and digital content? Check out our quick start guide for accessibility — in one easy-to-view place.
Headings
- Write meaningful headings that give insight into the content.
- If your website content is longer than three paragraphs, use headings to make your content scannable for all users.
- Use headings in hierarchy order to outline document structure. Plan the heading structure before the webpage is built, to ensure correct order.
- Avoid using headings for their sizing alone. Decorative headers are confusing to screen reader users (it’s random emphasis).
- Don’t skip headings or create empty ones. Screen readers will still read these headings aloud, causing confusion.
- Don’t use bolded text in the place of a heading, since screen readers will not read this as a heading.
Links
- Avoid using vague or generic terms, like “click here” or “learn more.”
- Ensure that hyperlinked text makes sense out of context (i.e., doesn’t require the surrounding text to provide detail or clarity on what users will get from clicking the link).
- Ensure that all links to the same destination use the same link text.
- Avoid redundant ARIA roles, which will cause screen readers to announce the element twice, i.e., “Link Link”
- Include a link description for any clickable link that will be read aloud by screen readers, including clickable images.
Typography
- Use simple, readable typefaces with a limited number of font variations.
- Check your font size: 14-point text is the minimum acceptable font size according to the Web Content Accessibility Guidelines.
- Avoid complex characters or font styles
- Avoid large blocks of crowded text.
- Avoid small font sizes
Image Alt Text
- Don’t start with “Image of” or “Picture of,” which will already be announced to screen reader users via the preceding HTML tag.
- If you’re writing alt text for a product, be sure to include key information about style, design, material, or features.
- Include null alt text (alt=””) for images that are non-essential or used for layout purposes. This ensures they are hidden from assistive technologies.
- Avoid stuffing keywords into alt text, which does not support SEO efforts and can negatively impact the user experience for screen reader users.
- If your images have text (for example: labels that explain product features or benefits), make sure they are either listed in the alt text or described nearby on the page.
- Try to put the most important information first, so people aren’t left wondering why you’re describing every minute detail of an image.
Captions and Audio Descriptions
- Make sure your captions and subtitles appear on screen as close as possible to when they are said in the video.
- Ensure your captions don’t interfere with important visual elements on the screen.
- Ensure the controls to toggle captions on/off are clearly labeled and easy to see.
- Avoid using autoplay, as it doesn't give viewers time to set up assistive technology and could trigger a seizure if there are flashing elements.
- For audio descriptions, be sure to include: audio descriptions of important text on screen, speaker introductions, and descriptions of visuals or actions.
Document Accessibility
- Support easy navigation by adding clear, descriptive tags to your titles, subheadings, and chapters.
- Add descriptive alt text for each image, graphic, and chart.
- Add descriptive text for each link that tells users exactly what will happen — or where they’ll be redirected — if they click the link.
- Ensure links are easily distinguishable for sighted users by changing the color and adding an underline.
- Set the reading order of each page to ensure that screen readers and other assistive technologies read multi-column content correctly.
- For accessibility, avoid tables whenever possible. If you must use a table, be sure to use headers, set the reading order, and clarify all content inside the table.
Color Contrast and Accessible Colors
- Aim for a color contrast of at least 4.5 to 1 between foreground and background elements.
- For large-scale text (i.e., text that is at least 18-point font, or 14-point bold font), aim for a color contrast of at least 3 to 1 between foreground and background elements.
- Don’t use pure black font on a pure white background — the stark contrast may cause eye strain.
- Use plenty of white space to improve readability and comprehension for people with cognitive or learning disabilities.
- If you use color to communicate information, be sure to combine it with another element (such as an error message or a described icon) to help people with color blindness follow along.
Accessible Language
- Use short sentences with one idea per sentence.
- When possible, use bulleted or numbered lists.
- Use active voice rather than passive voice, i.e., “Press the button” instead of “The button should be pressed.”
- Avoid double negatives, i.e., “Time is not unlimited.”
- Use people-first language rather than identity-first language.
- Don’t use a disability as a metaphor with negative connotations, i.e., “Uncover blind spots in your reporting.”
Need help with your website's accessibility?
AudioEye is here to help. Learn how our automated tools and certified accessibility experts can help you find and fix more accessibility issues.
