How to make your website accessible (and not use an accessibility overlay)

  1. Why I won’t install an accessibility overlay on your website
  2. How to make your website accessible (and not use an accessibility overlay)
  3. Low-vision and blind screen readers users do not use accessibility overlays

In my previous post I described what web accessibility is, what an overlay is, and the numerous reasons and evidence for why overlays don’t work. If you don’t read the first post, here’s the takeaway: There is no such thing as a cheap and easy “fix” to supporting and communicating with people with disabilities.

Since I do not believe in these tools and will not install them on a website, it’s important that I explain what do to instead. Here is how to actually make your website accessible.

Reminder: Accessibility is about inclusion

Website accessibility is a critical part of an organization’s work on inclusion. That’s why some folks suggest we replace DEI (Diversity, Equity, and Inclusion) with DEIA or IDEA (Inclusion, Diversity, Equity, and Accessibility).

Anyone who has done serious work in an organization—and on themselves—to be more inclusive and equitable knows that:

  • There are no easy fixes
  • Impacts and outcomes on people matter more than intent (“actions speak louder than words”)
  • You will make mistakes along the way
  • There is always more to do

If that makes sense to you, everything else in this post will be obvious once you read it.

Only you can make websites accessible. Don't use accessibility overlays. Graphic details: A pixelated pointer cursor highlights the word "You" which is much bigger and is highlighted in yellow rather than orange. Text is highly stylized in bold slab-serif, highlighted by bright neon orange and yellow atop a teal background with stylized website code icon.

Learn about accessibility

Right now, you are learning more about website accessibility by reading this post. Good job! Keep learning!

One of the first things you must do is gain a better understanding of the needs and abilities of your beautifully diverse website visitors and how to accommodate them. The depth of knowledge you need will vary depending on your role (more on that later), but some basic, high-level information is valuable no matter what. Here are a few good things to do:

  • Watch videos of people using assistive technology.
  • Learn about color contrast.
  • Know the very basic best practices for writing for the web. (If you write emails, you are writing for the web.)
  • Never forget that images, audio, and video need alternative text provided via the alt attributes, captions, captions, or transcripts.
  • Learn how to navigate a website with your keyboard. (It’s fun!) A well constructed website makes all actions possible solely using TAB (or SHIFT + TAB to move backwards), SPACE, ENTER, and the arrow keys. When doing this, the site visually shows where you are on the page with “focus styles”.

Integrate accessibility work into your practices

Even without knowing much about accessibility, you can make a huge difference by considering the needs of people with disabilities from the start of any project. This is the opposite of the overlay approach that attempts—and fails—to “bolt on” accessibility as an afterthought at the end of a project.

As a simple example, many people need to develop the habit of always writing alternative text when they upload a new photo to their website. This task usually adds 10-30 seconds per image, so it’s easily doable! But behavior change is hard, so do your best and find ways to hold yourself accountable. (One technique I like is to automatically blur, outline, or otherwise call attention to images missing alt text for any logged-in website editor.)

Integrating website accessibility into how you work takes ongoing time, effort, and attention. You may need to do research, take a course, or even hire a consultant. This is how to do the work because there is no magic wand to make something inclusive or accessible! Every time you start a project, ask “what do we need to do to ensure everyone has access?”

If this is sounding intimidating, hold that thought. I’m going to help you find ways to get started.

Your role in the website accessibility relay

Four happy smiling relay race teammates stand side-by-side on a track. They're arm in arm, giving thumbs ups and one holding a baton. Three of the four runners have a prosthetic leg and the fourth has two. They are wearing gold tanktops with red straps that say "Deustchland" across the chest.
Image credit: Najeebkhan2009 on Flickr. CC BY-NC-SA 2.0

Every single person reading this post has a role to play in making websites more accessible. No, I’m not exaggerating. Every. Single. Person.

Website accessibility is an infinite relay race. The only way to continue forward is to each run our laps. Sometimes we run multiple laps on a project and sometimes we only run one, but we must all learn, practice, and work together.

If you’re wondering what to do, think about your relationship to a website:

  • Leaders – You must help build a culture that values accessibility and inclusion. That comes through structural changes like implementing policies that require accessibility, budgeting for that work, and building cultures and systems that maintain accountability for accessibility. Lead by example and advocate for accessibility.
  • Managers – You must prioritize accessibility as a criteria when making decisions about product selection, hiring staff, hiring vendors/consultants, and the prioritization of accessibility work when balanced against other needs. De-prioritizing accessibility means discounting the value of a group of humans. Advocate for accessibility even when colleagues don’t.
  • Designers – You must learn design-related accessibility standards (contrast, font sizing, visual requirements for interactive states, etc.) and also advocate for accessibility when colleagues don’t.
  • Developers – You must learn all technical accessibility standards—including the design ones—so your code is accessible and also advocate for accessibility when colleagues don’t.
  • Writers / Editors – You must learn writing best practices and standards for accessibility and comprehension. You must also learn how to format text and images—using headings, links, lists, and alternative text—in a way that fosters accessibility. You’ll benefit from understanding design-related accessibility requirements too. And, of course, advocate for accessibility when colleagues don’t.
  • Product vendors – You must value your customers (or customers’ users) who rely on assistive technology by building accessible products. You must do the learning and testing required to externally validate any claims that your products are accessible. If they are not, you should make plans to improve that and be open and honest with customers. If you actually do that work, accessibility can become a meaningful selling point and differentiator.
  • Website visitors – While we all are busy and have lives, we should speak up when we notice problems with websites, especially for organizations we care about. Send this blog post series or one of the linked resources on accessibility overlays to a website if you see them using and overlay. (I have done this, and it can make a difference, even if I’m the first of 10 people they need to hear from to act!) We can be the accountability some organizations need to take notice and act.

How to get started (hint: prioritize)

If this sounds like a lot, that’s because it is. You will not learn everything about accessibility in a day, week, month, or even year. You won’t instantly change every inaccessible habit or practice you have. You will forget about accessibility sometimes. We are all still learning and that will never stop. What matters is that you get started and always seek to improve.

But I have good news! Every accommodation and improvement is important, but each one has a different impact on people. Specifically for websites, there are a number of ways you can prioritize improvements so your work has the biggest impact as quickly as possible.

Here’s how I generally recommend people tackle website accessibility problems:

  • Assess: If you’re not sure about how accessible your site is, try testing it using one of the common accessibility testing tools (WAVE from WebAIM and Accessibility Insights are good free options) and start planning to hire someone to do an assessment.
  • Stop making things worse: It’s easier to make things accessible from the start rather than fix existing problems, so don’t let the list of issues keep growing. As soon as you learn about an accessibility technique like color contrast, headings, or alternative text, focus on making all new work accessible.
  • Prioritize for importance: Think about the absolutely critical tasks on your website and focus on making those “user flows” accessible. Focus especially on any information needed by folks with disabilities. Can someone find your email and phone number? Can someone fill out a program’s application form? Can someone understand the information for your major annual fundraiser? If it’s critical to your site visitors or your organization, you’ll see the most benefit by fixing the accessibility of process first.
  • Prioritize for traffic: When it comes to things like missing alt text and headings that can’t always be fixed site-wide with code changes, it’s not uncommon to have dozens, hundreds, or even thousands of things to potentially check and fix. After making sure you’ve taken care of the most “mission-critical” pages and user flows, take a look at analytics and improve the pages that have the most traffic. It’s not unusual for just a few pages to represent a majority of traffic. Fixing 20% of your pages may make 80% of your pages visits more accessible.

The ultimate goal: make structural change

As you raise these questions and start doing the work, do this in a way that will make the change last. That’s the difference between structural change and conditional permission that depends solely on the work and beliefs of a single person or small group of people who won’t be around forever. You must work hard to learn and change your own ways of working and thinking first, but you can make a much bigger long-term impact if you can make changes that outlast your time in a role or with an organization. Done right, this touches most parts of a project or organization:

  • Budgeting: Think about accessibility when budgeting so you can pay for education, accessible tools, and hire accessibility consultants
  • Policies: Examine policies and job descriptions. Update them so they include accessibility considerations as a part of every project and process. I strongly recommend writing and posting a public accessibility statement on your website.
  • Processes: Update project checklists and documentation to include accessibility as a priority and lead people through the steps to make it happen
  • Requirements: Include accessibility in contracts and technology procurement decisions. For websites, that usually means meeting the Web Content Accessibility Guidelines (WCAG) version 2.1 at Level AA.

Welcome to the team!

If you are reading this, then I am so excited to have you here with me. If we want to have an internet that welcomes each and every visitor, regardless of who they are, it will require us all working together. We won’t fix everything immediately. We will make mistakes. Yet we must hold each other accountable and keep moving forward.

So now, I hand you the relay baton… errrr, mouse or keyboard or preferred input device to you. Go fix something on your website and spread the word!

2 thoughts on “How to make your website accessible (and not use an accessibility overlay)”

  1. Hey, I really like your content. It helped me a lot of times. Thanks for your work ☺️

    I wanted to briefly point out to you that the link for “high contrast” in the section “Learn about accessibility” seems to be broken. I already know some tools like contrast checker, but would be interested in your tips to this topic.

    Thanks again 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.