• Share via Twitter (opens in a new tab)
• Share via LinkedIn (opens in a new tab)
• Share via Facebook (opens in a new tab)
• Share via Email (opens in a new tab)

Silktide are proud to announce the launch of our free Silktide Accessibility Checker, to commemorate Global Accessibility Awareness Day (GAAD).

This free Chrome and Edge extension transforms how easily developers, content creators, and website owners can test for web accessibility.

The Silktide Accessibility Checker can perform comprehensive audits against more than 200 web accessibility checks, simplifying the process of making websites compliant with the latest WCAG 2.2 guidelines.

What can it do?

• Automated checks: Tests web pages against WCAG 2.0, 2.1, and 2.2 guidelines
• Designed for everybody: clear, actionable reports that make resolving issues straightforward
• Mobile and tablet simulations: Test across devices including desktop, tablet, and mobile
• Comprehensive help: Detailed guides and videos to help users understand and rectify issues quickly
• Screen reader simulator: Experience a screen reader without having to install one
• Color contrast checker: Test if your color contrast is sufficient
• Innovative simulations: Various disability simulators to enhance empathy and understanding

Why should I use an accessibility checker?

Web accessibility helps make sure your website is usable by as many people as possible, regardless of their ability. In becoming accessible, you open your web content to as many people as possible.

Increasingly this is becoming a fundamental human right. There are many accessibility laws globally that mandate a minimum level of accessibility.

Regular accessibility auditing is key, but it can be quite a challenging topic to learn. That’s why we created this easy-to-understand free tool – to help you understand the fundamentals of web accessibility.

How is this better than other accessibility checkers?

There are plenty of accessibility checkers, but we’ve been consistently frustrated by how difficult they are to use. Most are designed by developers, for developers.

We decided we could do better.

Our checker purposely is built on the best features we’ve found from others, with a focus on ease of use.

We also decided to make one of the most elusive aspects of web accessibility more available to non-experts. Our Accessibility Checker includes a screen reader simulator, which allows users to test for a screen reader experience without the pain of having to pay for, install, and learn one.

How to install

Visit the Chrome store to install the browser extension. It’s compatible with Chrome and Edge browsers.

Overview

About Silktide

Silktide is the web intelligence company helping businesses and organizations make their websites better.

We’re committed to enhancing the accessibility of the web. Our tools are designed to help people create a more inclusive digital space, ensuring that everyone, regardless of ability, can enjoy all that the web has to offer.

• Share via Twitter (opens in a new tab)
• Share via LinkedIn (opens in a new tab)
• Share via Facebook (opens in a new tab)
• Share via Email (opens in a new tab)

No, really. You can make a start with web accessibility by using free accessibility tools.

We’ll show you how you can check a page on your site for web accessibility problems for free, and explain some fundamental concepts that you might not know.

What you’ll need to follow along:

• the Silktide accessibility checker, a free Chrome extension
• an example web page to check, we’ll use our testing website fake-university.com

What this article will help you check:

• Over 200 individual WCAG accessibility checks
• Color contrast checker
• Alt text
• Headings
• Screen reader simulator
• Focus order
• Landmarks
• Impaired vision simulator
• Color blindness simulator
• Dyslexia simulator

Prefer this blog in video form? Here’s the video from YouTube.

What is web accessibility?

Good web accessibility makes your website as easy to use as possible for everybody. This includes people with visual impairments, who might rely on assistive technologies like a screen reader to read the page contents.

People with a motor impairment might use a keyboard instead of a mouse to navigate a website.

Other people might prefer to use a mobile device for all their web browsing, so your websites should be responsive and compatible.

Some people might be in a situation that makes it harder to see their device, like bright sunlight.

The solutions to these problems (ensuring keyboard compatibility, mobile responsiveness, and readability through sufficient text contrast) benefit everybody.

Ultimately, web accessibility means web usability. So the more usable your website is, the more people can use it and get the information they need, or make the purchase they need.

By checking your web accessibility, you’ll find and fix these usability barriers that prevent people from completing the tasks they need to on your site. This reduces your support burden and increases your conversion rates. All public sector bodies and, depending on your location and industry, most private sector bodies are subject to web accessibility legislation.

Let’s look at how you can check your web accessibility for free.

Step by step: check web accessibility for free with Silktide’s accessibility checker

Now that we have some background, let’s dig into some practicalities of checking your web page’s accessibility.

1) Install the Silktide accessibility checker

Navigate to the Silktide Accessibility Checker on the Chrome web store and click the “Add to Chrome’ button.

Next, click the jigsaw in the Chrome extensions bar and pin Silktide so you can easily access it.

2) Run the accessibility check

Choose a page you want to test for accessibility problems and open it in your browser. We’ll choose our testing website, fake-university.com.

Click the Silktide Chrome extension icon, and the accessibility checker tool panel will open.

There’s a range of free accessibility tools available that help you check different aspects of your web page. The Silktide free accessibility checker contains over 200 WCAG (Web Content Accessibility Guidelines – video) tests in an easy-to-understand format. You can work through each and we’d recommend starting with the Accessibility checker.

• Accessibility checker
• Color contrast checker
• Alt text
• Screen reader simulator
• Focus order
• Landmarks
• Impaired vision simulator
• Color blindness simulator
• Dyslexia simulator

3) Work through each section in the accessibility checker

The accessibility checker gives you over 200 free accessibility checks. After a brief scan of your web page, you’ll see the panel populate with a list of problems in order of severity.

Before we delve into each issue, take a look at what’s included here. At the top of the panel, you’ll see a dropdown menu with the option to preview the web page on desktop, tablet, or mobile devices. This gives you a quick overview of how your site displays on different devices.

Below this are the filters for the types of check and the WCAG standard.

• Automated: Checks which Silktide carries out with a distinct pass/fail
• Assisted: Checks which Silktide can alert you to check manually, but does not give a definitive pass/fail

For now, we’ll leave everything as it is and choose one of the checks to look at. Each issue type can be expanded with a click, and you’ll see the problem highlighted on the page

In our case, we’ll look at the list of color contrast failures.

An example: Color contrast check

For our test website, all the links in the footer fail color contrast requirements, with a much too light gray color on the light grey background.

So the accessibility checker highlights each of these on the page for you and explains:

• what the problem is
• why it’s a problem
• how to fix it.

The left-hand panel gives you the explanations and the guidance you need. We’ve made a big effort to make everything easy to understand because WCAG is a tough subject.

In this case, the suggestion is to darken the footer link text.

This is important because people with moderate visual impairments, or those looking at their screen in bright sunlight, won’t be able to read the links.

Another example – “Read more” links

Screen reader users may skip through your website listening only to the links. If each link has the same text but points to a different destination, and also has non-descriptive text like ‘Read more’, this leads to a poor user experience.

In an example like the screenshot below, which lists multiple blog posts in a grid each with an identical ‘Read more’ link text, the screen reader will read out “‘Read more – Link’, ‘Read more – Link’, ‘Read more – Link'”.

Listening to that, you would have no idea where each link leads.

The problem is solved by using descriptive link text or context-giving ARIA labels, which are not visible but are read out by screen readers.

These are just two of many examples. Each check in the Silktide Accessibility Checker has a description of the problem and how to solve it, so you’ll be able to learn about these problems as you work through each page.

4) Check color contrast

High-contrast text is easier for people to read. WCAG gives some guidelines as to how contrasting it must be.

You can check any two colors by hex code.

You can type them in or use the color pickers to choose two colors from anywhere on your screen.

5) Review your image alt text

Alternative text (‘alt text’) is used by screen reader users to read out descriptive content of the contents of an image. It’s incredibly useful, and also necessary in some cases.

For example, let’s say you have a graph on the page, but no supporting text content. The image contains useful information (the graph data) that can’t be accessed by someone who can’t see it.

We’ve written a whole blog on when to use alt text, how to use it, and importantly, when not to use it.

The alt text tool in the Silktide Accessibility checker lets you easily see where the images are on the site, which ones have alt text and what it is, and also which ones are missing alt text entirely. It also alerts you to missing alt tags, which are required in HTML for images, even if the image is decorative.

Silktide helps you decide whether the alt text is decorative, useful, or irrelevant, with the support help content shown on the left menu. Because everything is laid out visually, it’s easy to see what’s happening on your page without looking at the code or in your CMS for each image.

6) Review the focus order for keyboard navigation

People can navigate through a website using their keyboard. A combination of TAB and SHIFT + TAB lets you move forward and back through the page.

Your website must be built so that when navigating with a keyboard, the order is logical.

The Focus Order check gives you a visual representation of how your website’s navigation order is laid out, without you having to manually tab through the whole page. You need it to be consistent and logical. Also, you must ensure nothing is missed out.

Our test website has some pretty egregious focus order errors, one of which is highlighted below. The image shows what looks like three images. However, there are actually 6 images, which you can tab through with a keyboard. The order of tabbing does not follow what’s on the page visually.

This is a direct copy of a real website we found in the wild. Don’t try this at home!

7) Review landmarks

Landmarks on a web page are like signs in a building that help everyone find their way around. Imagine if you walked into a library and there were no signs for the different sections. It would be tough to find the books you want, right? Well, landmarks do the same job but for websites. They help organize the website so that it’s easier for everyone to find what they’re looking for, especially for people who use special tools to read the screen because they can’t see it.

Just like how signs in a building are made for everyone to understand, landmarks on a web page need to be set up so computers can understand them too. This helps people who use keyboards to navigate through a website easily, jump over parts they’re not interested in, and find the sections they want.

Silktide highlights the landmarks on a page so you can quickly understand where they are.

7) Use the screen reader simulator

The screen reader simulator is designed to give you a basic understanding of how a screen reader might work. You already have a ‘real’ screen reader built into your phone.

Ours is not designed as a replacement, but simply a tool for beginners to understand how they work (and how they might work on your web page).

Start by opening the screen reader panel and navigating through your page using the left and right arrow keys.

You’ll hear each element being read out. It probably won’t be long before you hear something that doesn’t make sense, or even not hear something you were expecting to.

Now, consider the impact of missing buttons, poorly described alternative text, or missing context, and you’ll understand how important it is to make your website compatible with assistive technologies.

Open the ‘How to use a screen reader’ panel. You’ll see a range of additional keyboard shortcuts. These let you navigate each heading, element, landmark, link, and more.

We encourage you to try the screen reader on your site, especially if you’ve never used one before.

8) Use the impaired vision simulator

We’ve included several simulations of visual impairments, ranging from myopia to loss of peripheral vision.

To access these, click the ‘Impaired Vision’ tab and on any simulation. You can adjust the amount using the sliders.

This is important as it helps you understand how people with moderate to severe visual impairments might view your website.

9) Use the color blindness simulator to assess contrast issues

Color blindness affects 8% of all men and about 0.5% of women. It is a common condition that affects the way that people see colors. Globally, over 350 million people are affected by color blindness. We recommend that you test your website while simulating monochromatic vision to make sure it’s accessible to everyone.

To get started, open the Color Blindness Simulator panel.

From the list, choose the simulation you want to test. For example, the loss of green is the most common, but you might want to also check ‘color greatly reduced’ for a more extreme loss of all colors.

Remember, choosing to distinguish elements by color alone is a WCAG failure.

10) Use the dyslexia simulator to assess readability

Dyslexia is the most common learning disorder in the world, affecting 10% of the global population. It affects the way that people read and write.

The letters on a page may appear jumbled, and this causes a greater cognitive burden. Making your content more readable can help, so consider simplifying your text, writing shorter sentences, and using sans-serif fonts.

To use this check, open the Dyslexia Simulator tab. You can adjust the severity (the speed at which the letters on the page jumble) by using the slider.

Congratulations! You’ve got a more accessible web page for free.

If you’ve worked through every step of this guide and used the accompanying help content in the Silktide accessibility checker, you should be in a good position to make changes to your web page.

Of course, the accessibility checker is great for helping you manage a single page at a time, but Silktide also has a full suite of accessibility tools in a single platform, that monitors your entire site for ADA, WCAG, and accessibility compliance problems.

Check out more details about the full Silktide platform here.

If you want more free accessibility resources, we have a range of free accessibility books, a collection of educational videos on our YouTube channel, and an accessibility newsletter.

• Share via Twitter (opens in a new tab)
• Share via LinkedIn (opens in a new tab)
• Share via Facebook (opens in a new tab)
• Share via Email (opens in a new tab)

If you want to take website accessibility seriously, then manual accessibility auditing is a must.

Whenever I hear the word “manual” I sigh to myself. Mostly because I’m lazy and manual suggests hard work. 

But if my years of watching 5-minute craft videos have taught me anything, it’s that there’s always something that makes things easier (usually superglue and plastic bottles).

When it comes to your website’s accessibility testing you probably already use or have considered using an automated testing platform like Silktide. 

But if you are, does that mean you don’t need to do anything else? Does it mean that manual accessibility auditing can be ignored? We don’t think so. And here’s why.

Pssst. Don’t worry if you’ve not got the internal resources to do manual testing yourself. We give you some tips on how to do it at the end of the article .

Level up your dedication to accessibility

Manual accessibility testing is carried out by people. And that’s important. Because people have empathy. 

Where AI and automation tools see accessibility checks as a box-ticking exercise, a person can actually consider how users with disabilities use your website. 

Manual accessibility auditing combines human judgment, empathy, and a deep understanding of accessibility.

They go beyond surface-level assessments and cover your website’s key pages, templates, and forms. The result? Detailed and actionable reports that break down issues and step-by-step guidance for remediation.

You shouldn’t be working to make your website accessible to get another badge on your collar. You should be doing it to make your website a better place for people who use it.

Accessibility audits don’t have to be as boring as they sound

Hearing “accessibility audit” isn’t quite inspiring enough to get me out of bed in the morning. Often it can be pages and pages of spreadsheets and documents that blend into one as you develop a serious case of brain fuzz.

But that doesn’t have to be the case.

With manual accessibility auditing, you can ensure reports are built in a way that is actually beneficial. It’s what we do with our own manual audit reports (spoiler alert! We do manual testing).

Accessibility audits should have clear and concise explanations. Without that, they just aren’t… accessible. Ironic, right?

Protect yourself from legal risks

Legal risk can be scary. But with manual testing, you can accurately find places where your website doesn’t comply with accessibility regulations. That means you can take better protective measures to mitigate risk. 

Accessibility is hard. And learning it can take a long time. So using the expertise of a manual auditor with years of experience means you get it right first time.

If you want to find out more about accessibility legislation visit our Glossary, including articles covering the ADA, Section 508, EU Web Accessibility Directive, and more.

Dig deep into your website content

Manual accessibility auditing lets you dig through all your content. From web pages to templates, forms, PDFs, and videos – the benefit of manual audits is that they can look at it all. 

But it’s not just about finding where problems lie. Manual auditors give you a detailed breakdown of why the problem is a problem. Then they guide you step-by-step to fix them.

Accessibility testing on actual devices

The best way to test websites for accessibility is by actually using the devices and technology your visitors use. 

This includes the usual suspects, desktop, tablet, and mobile – all on different operating systems such as iOS, Windows, and Android. But that’s not all. 

They may also test using accessibility technology like screen readers like JAWS, NVDA, VoiceOver, and Talkback. 

All of this adds up to a lot of testing and in some cases, knowledge of how to use the technology. 

It’s something that would take years of training and experience to gain that sort of expertise in-house. So why not get someone in who already does?

Accessibility testing tips, as promised

At the start of this article, I promised you some tips on how to do some manual testing yourself. Be warned, it’s not easy.

• Learn accessibility
  If you want to find accessibility issues on your website then you’re going to need to be able to identify what is a problem. And it’s not going to be a quick Google to find out. Luckily enough you’re in the right place. We’ve got tons of blog articles about accessibility and a YouTube channel full of bite-sized explanations.
  
• Understand WCAG
  The Web Content Accessibility Guidelines (WCAG) is a set of guidelines most cited for what is considered “accessible”. There are different versions and different levels of WCAG compliance. Be warned, it’s not an easy read, but you’re going to want to know this stuff.
  
• Use multiple devices and accessibility technology
  Just because a page looks good on a desktop, doesn’t mean it’s going to be good on mobile too. And unfortunately, you can even find accessibility problems on one browser, that aren’t there on another. The best thing to do is to test your site using multiple browsers and multiple different devices. You should also try using a screen reader on your site. These can be quite hard to get used to though. Fortunately, we’ve got a handy beginner-friendly field guide that’ll help you get started.
  
• Keep at it
  There’s no “right time” to improve your website’s accessibility. Instead, it should be a constant effort. If you’re building or migrating your website, then it’s the perfect time. You can focus on accessibility right from the beginning and save a HUGE amount of time down the line.

By now, I’m sure you’re convinced. Manual accessibility auditing should be part of your workflow. And if you need a hand getting there, let’s talk and see how we can help.

• Share via Twitter (opens in a new tab)
• Share via LinkedIn (opens in a new tab)
• Share via Facebook (opens in a new tab)
• Share via Email (opens in a new tab)

TLDR; Accessibility overlays are literally the worst thing you can do for web accessibility.

Web accessibility in 2 lines of code?

An accessibility overlay (sometimes called an accessibility widget) is a piece of software that promises to make your website accessible without you lifting a finger. They let users change accessibility settings while on your website and customize the browsing experience.

All you need to do is add it to your website through a couple of lines of code and boom! Your website is accessible!

Isn’t it?

Everybody loves quick and easy solutions. But unfortunately, website accessibility isn’t that simple.

Accessibility overlays promise to make websites more accessible, but in truth, they masquerade as a silver bullet to prevent accessibility lawsuits. And they don’t even keep you safe from that.

But perhaps we’re being harsh. Maybe overlays do work?

Do accessibility overlays make my website legally compliant?

Legal requirements for website accessibility are different depending on a multitude of factors. These include where you are in the world, and whether you are in the public or private sector. But let’s make it simple. In the US, websites must adhere to the Americans with Disabilities Act (ADA) which requires websites to be accessible to users with disabilities. Yet the standard they need to reach to be considered accessible is unclear.

The Web Content Accessibility Guidelines (WCAG) is a series of guidelines for website accessibility, and generally, most of the world agrees WCAG is the universal standard to follow. Some laws specifically reference WCAG, and others do not. But even the Department of Justice references WCAG during ADA breach lawsuits.

Now for the kicker.

Despite what you may have heard, overlays do not comply with the ADA or most other accessibility laws across the world. They simply don’t meet WCAG standards.

There are countless criteria that overlays don’t address, such as mobile compatibility and PDF documents, but even the issues they do address are unreliable. Take, for example, the settings for reducing motion. Ideally, websites should apply the CSS media query ‘prefers-reduced-motion’ where needed.

Overlays don’t implement this. Instead, they attempt to pause everything themselves, which can produce more harmful results.

What all this means is that accessibility overlays do not and will not protect your website from accessibility lawsuits. Why? Because they don’t make your website accessible.

Automated content generation in accessibility overlays

Accessibility overlays can attempt to generate content such as headings and alternative text automatically. While a machine might be smart enough to identify the contents of an image, what it won’t provide is the context.

For example, an accessibility overlay might try to generate alt text for the image below as “Image: Men in a boat.”

But is that really helpful?

Instead, here’s some alt text we’ve written that includes the context accessibility overlays simply can’t generate.

“Image: Painting of George Washington crossing the Delaware river in 1766”

Do you see how that is more informative?

Compliance means making sure that users are not deprived of any information due to how they access the content. With overlays, you simply can’t guarantee they will do this. You can read our article on writing better alt text if you’d like to know more.

Do accessibility overlays actually help?

Okay, so accessibility overlays are not compliant, but do they actually help people? Well, a survey from the accessibility group WebAIM found that only 2.4% of disabled users found overlays effective.

In fact, this sentiment is widespread across accessibility spaces. There’s even an open letter signed by accessibility advocates opposing the use of overlays.

And they’re not just targeting a single overlay. There are lots of overlays out there. Visiting a website is rolling the dice on which accessibility plugin you’ll encounter in the bottom corner of your screen. But that’s another problem. The user has to navigate to the overlay menu and apply their preferred settings. Every time.

If you’ve ever been annoyed with pop-ups, chat bubbles, and cookie banners littering your screen, you can imagine how difficult it can be to close them without using a mouse or being able to see the screen. This process is not only frustrating but exhausting.

More complexity means less accessibility.

Are accessibility overlays better than nothing?

You might be thinking “So overlays aren’t perfect. Surely they’re better than nothing?” Well, no. Ready for the big twist? Your operating system or web browser already has all of the options that you’ll see in accessibility overlays.

Zooming into the page? You can do that with your keyboard. Larger text? Every operating system lets you do this. Cursor size? Yes.

Here’s the thing. Users who depend on these features will already have them enabled, and overlays will try to overwrite them with their own settings. This means that accessibility overlays don’t make websites any more accessible, they only put barriers up to people who have their own accessibility configurations.

A practice like this may not be helpful, but it is performative. Websites wear accessibility overlays like a badge of honor, to show the world how much they care about accessibility. Overlay providers are aware of this, and will sometimes include it as part of their pitch.

Overlays don’t solve everything, and even what they claim to solve doesn’t always work. Even something simple like changing the text size can make the website unreadable since overlays don’t reformat the page.

Are accessibility overlays a good code-free solution?

This comes down to our final point. Accessibility overlays might call themselves a code-free solution, but their main selling point is why they don’t work. The underlying code is what makes or breaks a website. It makes it mobile-friendly. It makes it work with assistive technology. It makes it functional.

If overlays don’t change your website’s code, then how can they possibly fix any accessibility issues in your website’s code?

Overlays create problems and resell features that everyone already has. And they don’t make websites compliant with accessibility legislation. And it’s not just us who thinks they suck.

Do accessibility overlays actually work?

In short, no. But don’t just take it from us. People in the accessibility community strongly warn and advise against accessibility overlays.

Regardless of what they claim, overlays simply can’t bring a website into full ADA compliance or ensure that it meets all WCAG requirements.

Perkins Access

Beware of companies claiming to use AI solutions to make websites accessible

Haben Girma

Largest U.S. Blind Advocacy Group Bans Web Accessibility Overlay Giant From Its National Convention

Forbes

Accessibility groups and influencers have been outspoken about the accessibility overlay problem. More and more publications have shed light on the issue and yet websites still use them. While companies think they’re saving money and “doing the right thing” by supporting them, it’s the users who are paying the price.

You don’t need us to preach about the importance of website accessibility. We just need to agree on a solution that works for everyone, and that means listening to what the community is saying.

Basically, overlays are terrible. Don’t use them.

Web Accessibility Education

• Share via Twitter (opens in a new tab)
• Share via LinkedIn (opens in a new tab)
• Share via Facebook (opens in a new tab)
• Share via Email (opens in a new tab)

The new Silktide Index launches in January 2023. It includes enhanced accessibility testing and WCAG 2.2 support.

Over the past couple of years, Silktide’s website testing and scoring methodology has evolved. We now test for more issues and in some cases, test in different ways. We’ve upgraded some score weightings to reflect the importance of various accessibility issues. WCAG 2.2 accessibility testing is now included.

We’ve updated the Silktide Index to reflect these changes and advances in technologies.

What does this mean for you?

In short:

• Silktide Index now includes WCAG 2.2 checks
• Accessibility tests now match the Silktide platform
• Scores will change, some dramatically so

Why are the scores changing?

The approach for calculating scores is fundamentally different between the older version of the Silktide Index and the new one. You should not expect scores between the versions to match.

Think of it like how schools change their grading system each year. You can compare the grades of one child from 2010 with another in 2020, but they won’t (and can’t) be the same, as the criteria change.

There’s not a simple explanation for what has changed – there are new criteria, new concepts, and new approaches. For a technical explanation of the Index algorithm changes please visit this support article.

If you are a paid Silktide customer, you can expect the scores in the Index to differ from those in your account. Here’s an article that explains why Index scores differ from Silktide customer accounts.

Benefits

Broadly speaking, these changes:

• Improve scoring accuracy
• Bring some accessibility areas up-to-date
• Allow for more accurate identification of issues
• Add WCAG 2.2 success criteria
• Bring scoring between the Silktide Index and our customer’s reports more closely together

Things to consider

The following points have not changed since the previous Silktide Index but they are worth highlighting here:

• In most cases, we are testing a sample of up to 125 pages
• Those pages are unlikely to be the same each month
• Any ‘decisions’ made in your own report (if you are a customer) are not applied to the Index

What other changes are being made?

In order to expand the Index, we’re streamlining some categories during 2023. We’ll combine multiple similar categories together. A specific example is the combination of all UK NHS websites into a single category.

Later in 2023, we’ll expand Silktide Index to include non-accessibility checks.

What to do next?

In January, Silktide Index will be updated and websites in all categories are likely to see changes in scores and position. This is not something to be alarmed at, but we appreciate that this kind of thing can cause some concern.

Consider this. If your score does change dramatically, check your Silktide Index report to see if new accessibility issues are highlighted. It’s likely with the new and amended testing methodology that there are accessibility problems being found that could not be found before.

Also, the score weighting has changed. Some issues may have become more important, or less important, than in previous reports.

The biggest single change is the inclusion of WCAG 2.2 testing. It’s likely that accessibility issues will be found against the new Success Criteria, which will affect scores.

If you have any specific concerns, then do reach out to us at support@silktide.com and we’ll do our best to address them.

• Share via Twitter (opens in a new tab)
• Share via LinkedIn (opens in a new tab)
• Share via Facebook (opens in a new tab)
• Share via Email (opens in a new tab)

The Department of Justice is criticized for lacking clear web accessibility regulations. But that’s about to change.

All local and state governments across the United States including California will be required to meet new regulations or suffer legal action from the Department of Justice (DOJ) for violating the Americans with Disabilities Act (ADA).

New proposed rules will be released by the DOJ in April 2023 and are expected to detail what needs to be done in order for a website to be considered accessible under the ADA.

Why does this matter?

If the rate at which web accessibility lawsuits have increased over recent years tells us anything, it’s that the threat of legal action is very real. In 2020, 10,982 ADA Title III lawsuits were filed in federal court, a number that was barely slowed by the COVID-19 pandemic.

These trends continue to accelerate drastically. In January 2021, 1,108 cases were filed – the most ever in a single month (source).

When it comes to US local government, the DOJ is very attentive, filing hundreds of lawsuits for allegedly violating the ADA. And with DOJ introducing new regulations, it’s a big sign that they plan on scaling up the velocity of lawsuits against local government organizations.

Am I exempt?

The likely answer is no. All local and state governments, no matter their size or receipt of Federal funding are expected to comply with Title II of the ADA.

Is my website already accessible?

Many people ask “How do I know when my website is accessible?”, and unfortunately the law, and indeed the standards themselves, don’t explicitly state ‘Here is a pass and here is a failure’. We explain this in more detail here.

Some common accessibility issues you may encounter include those with:

• Keyboard navigation
• Insufficient color contrast
• Incorrect/missing alternative text on images
• Two-dimensional page scrolling on mobile devices
• Inaccessible PDFs

If you’ve not heard of these terms before, don’t panic. We have plenty of resources available to help you understand them.

What are the legal standards for accessibility?

The DOJ is widely expected to adopt the WCAG standard for accessibility, which is the same standard adopted by Section 508, and much of the rest of the world.

But what is WCAG? You may have heard the term. They’re the Web Content Accessibility Guidelines – the globally accepted standard against which accessibility is measured.

We put together the following short video about WCAG for beginners.

The DOJ has promised to clarify the exact standard in early 2023, but it’s almost certain to range between WCAG 2.0 (what Section 508 uses) and WCAG 2.2 (the latest version, currently in final draft).

If you’re new to web accessibility, or concerned that your website will be considered a breach of the ADA, getting a good understanding of WCAG 2.1 is a good place to start.

What can you do about it?

You should start by performing an audit of your websites. We’d generally recommend an approach that combines both automated and manual accessibility testing. You can read more about why here.

While there’s no quick and easy fix for web accessibility, Silktide will help you find and fix a large range of accessibility issues on your website.

Next steps

If this article has confused you, don’t panic. All you need to know is:

• You need to make your website accessible
• Silktide can help you make it a painless process

We work with organizations across the US to solve problems with web accessibility, content quality, user experience, privacy, SEO, and more.

We provide a user-friendly software platform that tests all your websites and shows you how to fix issues. See a live demo of how Silktide works here.

We’re happy to talk to you about your accessibility problems. Contact us on our live chat or request a demo of Silktide now.

• Share via Twitter (opens in a new tab)
• Share via LinkedIn (opens in a new tab)
• Share via Facebook (opens in a new tab)
• Share via Email (opens in a new tab)

The European Accessibility Act (EAA) is coming in 2025. Will we finally see improvements in private sector web accessibility?

For some years, the EU public sector has enjoyed the benefits of the EU Web Accessibility Directive – legislation that mandates publicly-funded websites in the EU to be accessible to WCAG 2.1 standards. It was implemented back in September 2020.

What’s been lacking is similar legislation aimed at EU privately-owned businesses. Until now, the private sector has avoided legislation with any teeth in terms of web accessibility. And unfortunately, it shows. We’ve already talked extensively about the disparity between web accessibility in the public and private sectors.

In short, the private sector has, on the whole, far less accessible websites than the public sector. In some sectors, shockingly so.

Two examples of the worst-performing sectors overall in the Silktide Index (our global league table for web accessibility) are grocery stores and fashion retail. This hasn’t exactly been ideal for people stuck at home for extended periods of time during a pandemic.

What is the EAA?

In summary, the European Accessibility Act aims to “harmonize accessibility requirements for certain products and services”. It aims to benefit businesses, the elderly, and people with disabilities. It also aims to clarify existing accessibility obligations in EU law.

From 28 June 2025, the following products and services will be covered by the Directive:

Products

• computers and operating systems
• payment terminals, ATMs, self-service ticket machines, and information terminals
• smartphones and other equipment for accessing telecommunications services
• TV equipment including digital television services
• e-readers

Services

• telephony services
• services to access audiovisual media services
• certain elements of air, bus, rail, and water transport services, such as websites, mobile services, electronic tickets, and information;
• consumer banking
• e-books
• e-commerce
• answering emergency calls to the “112” European emergency number

In terms of the web, the most relevant items here are e-commerce (although this is rather a broad term – more on that later) and specific references to ticketing systems and informational websites.

Importantly, the legislation will not apply to websites and other forms of archive material not updated or edited after 28 June 2025. Nor will it apply to pre-recorded videos published before that date.

The specific accessibility requirements for services include:

• providing information about the service, its accessibility features, and facilities
• making websites and mobile devices easily accessible
• applying practice and policies to address the needs of people with disabilities

What does this mean?

The specific wording of the legislation is available here but it’s a bit involved. I’ll try and summarize the relevant points as they refer to websites.

Audiovisual services

These include websites, web apps, smart TV apps, mobile apps, and related media players and connected TV services.

The Act specifically states that these examples must allow users with disabilities to access them using assistive technologies.

Travel

Real-time travel information must be accessible for rail, air, bus, and water transportation services. This includes information through websites, mobile services and interactive screens, and information terminals.

Important information including pre-journey information, timetables, cancellation and delay notifications, and the available products and services should all be accessible.

The Directive also includes the websites and mobile apps of operators in these sectors. The Index already includes rail operator websites. We’ll expand it in the future to cover other transportation sectors.

E-commerce websites of travel operators are already covered under the EU Web Accessibility Directive – specifically in the sale of tickets for such services online.

Finance

Online banking websites and apps need to be accessible under the EEA. However, there aren’t any specifics on exactly how yet. The wording is (emphasis mine) ‘this Directive should establish common accessibility requirements for certain banking and financial services provided to consumers’.

So while they should establish the requirements, it doesn’t look like they have yet.

Ecommerce

Ok, here’s the big one. When I was researching this post and read “e-commerce” my initial thoughts were, “I hope they don’t just limit this to the travel sector” – mainly because that wouldn’t go far enough.

But it turns out that “e-commerce” does indeed cover all online transactions in the EU. This is, frankly, huge news. Here’s the wording (emphasis mine):

“The e-commerce services accessibility obligations of this Directive should apply to the online sale of any product or service and should therefore also apply to the sale of a product or service covered in its own right under this Directive.”

So, my understanding of this (and I Am Not A Lawyer) is that all e-commerce transactions in the EU will be covered, along with those products and services covered in this Directive.

Now, there are some exclusions. SME’s and other small enterprises should be exempted based on ‘disproportional burden’ – that is, the cost to small businesses of implementing everything in the Directive should not be too high compared to their profitability.

In fact, SMEs and Microenterprises are protected under the Directive, which has adopted a “think small first” principle. You can read more about that in paragraph 64.

What are the accessibility requirements?

Annex I of the Directive contains a very long list of requirements for the products and services covered.

In summary, the products and services need to be designed with the four accessibility principles in mind (perceivable, operable, understandable, robust).

Information should be made available via more than one sensory channel. A good example of this would be something like adding audio descriptions to videos or adding alternative text to images.

Some of the wording is a little vague. For example, in reference to banking services and e-commerce respectively:

• “providing identification methods, electronic signatures, security, and payment services which are perceivable, operable, understandable and robust”
• “ensuring the accessibility of the functionality for identification, security, and payment when delivered as part of a service instead of a product by making it perceivable, operable, understandable and robust”

That said, examples of solutions to common problems are given in Annex II, which is useful. For example:

• “Making the identification dialogues on a screen readable by screen readers so that blind persons can use them.”
• “Making the payment service user interface available by voice so that blind persons can make online purchases independently.”

What about the Web Content Accessibility Guidelines (WCAG)?

WCAG isn’t mentioned anywhere in the Directive. If you don’t know what WCAG is, here’s a 30-second video that explains it.

Why’s that important? Well, WCAG (as you’ll now know if you watched the video) is a set of standards that aims to actually list out all the specific things you should do to make your website more accessible.

It’s a pretty good starting point for most websites, and in fact, the EU Web Accessibility Directive, aimed at the public sector, states that WCAG 2.1 Level AA is where you should aim.

Now, the EAA doesn’t mention this specifically for any of the products or services it covers, but it’s probably a wise idea to aim for the same standards while they decide.

If you want to, you can read through all the WCAG 2.1 guidelines here.

The first thing you’ll notice if you click that link is that WCAG is hard. Really hard. It’s not written in a particularly user-friendly way, and even the web developers who it’s aimed at have difficulty understanding its nuance.

What’s the solution to an inaccessible website?

There are two areas of responsibility when it comes to website accessibility.

• content – usually added by individual contributors across multiple teams, like the marketing and communications team
• the theme and underlying code – usually built and maintained by your developers

I wrote an article about who is responsible for web accessibility (spoiler alert – it’s everybody).

What are the next steps for EU business owners?

So, you have a couple of years before you have to do anything, right? Well, technically, yes. But the ROI of good web accessibility is real, and the sooner you start making your website better, the more income you’ll make and the better you’ll help people access your website.

Also, if you currently know nothing about accessibility (and this is way more common than you might think, so you’re not alone), you’ll need time to consider your options.

First, write an accessibility statement. This should outline your commitment to accessibility and list the areas that you need to improve, and also the steps you’re taking to improve.

Second, check your site for accessibility problems. Obviously, we can help you with that here at Silktide.

Third, consider downloading our free book on accessibility because it gives you a good introduction to what accessibility is and who it affects. It also includes real-world data outlining the top issues we find with our web accessibility testing platform.

It’s aimed at beginners, and you can download the free accessibility book here.

Finally, don’t be overwhelmed. The public sector got through this a couple of years ago, and in fact, they now excel in web accessibility. UK Local and Central Government, for example, rank at the top of all global websites for accessibility. The improvements made during 2020 running up to the EU Web Accessibility Directive deadline were phenomenal, and you can do it too.

• Share via Twitter (opens in a new tab)
• Share via LinkedIn (opens in a new tab)
• Share via Facebook (opens in a new tab)
• Share via Email (opens in a new tab)

Nike faces a class-action lawsuit for allegedly violating the Americans with Disabilities Act (ADA).

In our blog post covering news of the recent lawsuit against Etsy, we looked at the 250% increase of web accessibility lawsuits between 2017-2021. Following the latest guidance from the Department of Justice (DOJ) on web accessibility under the ADA, it seems like the sharp increase in cases isn’t slowing down.

If you’re unsure of the latest guidance from the DOJ, we’ve written a blog post about it, explaining things in plain English, because legal documents aren’t the most thrilling read. 

So what’s the deal with Nike’s website? The core claim appears to be that Nike’s online eCommerce store is allegedly inaccessible to people with a visual impairment who rely on a screen reader to navigate the web. 

Now, this includes a bunch of accessibility issues. Some can be easily identified and fixed, while others require a lot more work. So, let’s take a look at some of these accessibility issues that allegedly plague Nike’s website.

Text alternatives

The primary concern seems to be that the site allegedly fails to present text alternatives to visual elements. Visual elements like images, icons, and buttons required to navigate a site must have correct and informative alt-text or labels. 

Without the correct labeling, it’s practically impossible for a visually impaired user to access your site. Here are just some of the alleged labeling issues across Nike’s website:

• Search button is mislabeled
• Shopping cart is mislabeled
• Promotional images and associated links are mislabeled
• The wide fit option is not labeled
• Size options beyond the first choice are not labeled
• Product description and details are not labeled
• In the shopping cart, the total is not labeled

The key takeaway here is to always, always, have a text alternative to any elements of your website that are required for a user to interact with. From images to forms, radio buttons, collapsable menus, anything interactive elements need to have an alternative way of being able to be understood and interacted with without relying on vision.

You can read up more on the importance of text alternatives and the success criteria under WCAG here. And if you want to better understand labels here’s another handy guide. If you want to check your own website right now, use the Silktide Accessibility Checker extension for Chrome.

You can easily test your website for this too. Using a mac you can hit CMD + F5 to switch on VoiceOver which acts just like a screenreader. On Windows, you can use screen readers like NVDA. Once you’ve activated your screenreader, go to your website and hit Tab. Keep hitting tab to navigate through your site and pick up on any problem areas. Is your site easy to understand and navigate using the keyboard? 

To make things even easier, you can go ahead and download our free plugin for Google Chrome. You can use the screenreader simulator to experience how a user with visual impairments might experience your website.

Now the downside to the methods of testing above is that they take time. And if you have a large website – a lot of time. Unfortunately, that’s the nature of manual testing. However, if you want a tool that automates this and picks up on all the problem areas, then that’s where the Silktide platform comes in. I don’t mean for this to be a sales pitch, just an alternative solution.

Missing accessibility policy

Another issue that Nike’s website faces is that it allegedly doesn’t have an accessibility notice, statement, or policy where a disabled or impaired user could provide feedback and seek support. This is an easy one to fix but is so often overlooked. Make sure that you have a clear policy on accessibility with contact information.

Cookies

It’s no secret that we’re swiftly entering a world of cookie-less analytics. I could rant for a while on what a cookie-less web will look like, or the pretty nasty (and scary) stuff that some companies are doing to get around it.

Like most sites, Nike uses cookies. Cookies can track user information such as IP address, browsing history, previously visited websites, and much more. Basically, every time you click the “Accept” button on a cookie popup, you’re giving a lot of personal data away. 

But that’s the point, you have to accept it. Otherwise, they are taking and saving your personal data without your consent.

The problem with Nike’s website from an accessibility point of view is that Nike allegedly adds these cookies without the user’s consent. Even with me just visiting the homepage, Nike added over 50 cookies to my browser – without telling me. Now couple this with a user who is unable to comprehend the site due to visual impairment – you have a site that has taken personal information without the user’s choice or knowledge.

You can understand why this is a problem. 

But with all browsers soon to be cookie-less, is this a moot point right now? Well, no. It means that some companies are instead implementing new ways to get the same (if not more) of your personal info.

Conclusion

So, what now? Well, I’m sure Nike will be keen to fix any of the alleged accessibility issues across their site. And that’s a positive thing. But if you’re worried about falling into the same trap, what do you do about it? Here’s my advice:

• Get to know the WCAG accessibility guidelines. Get into bed with them, take them out for dinner, and really understand them. Sure they may be a bit dull, but they are necessary.
• Understand why it’s important. Is it important that you don’t get sued? Or is it because making the web accessible to everyone is simply the way the internet should be?
• Get the team on board with accessibility too. From content editors to developers and managers – help them to understand the importance of web accessibility.
• Work smart, not hard. Use automated tools where you can. Accessibility will always require manual testing in tricky areas but if you automate what you can to identify and solve most issues then you’ll save yourself a lot of headaches.

Unfortunately, there’s no silver bullet to solving web accessibility across your site. It’ll certainly take time and resources. But by knowing the what, how, and the why of web accessibility you can better integrate it into your web management processes.
If you want to see how Silktide can help with all of these things across your web estate, you can book a demo with our team.

• Share via Twitter (opens in a new tab)
• Share via LinkedIn (opens in a new tab)
• Share via Facebook (opens in a new tab)
• Share via Email (opens in a new tab)

The DOJ has finally included websites in the ADA but failed miserably to define any actual accessibility standards to work towards. How does this affect you?

With lawsuits around web accessibility on the rise and some confusing new guidelines from the Department of Justice, it’s important to have a good understanding of the Americans with Disabilities Act so that you can be confident that you’re covered. In this article, we’ve stripped out the legal jargon and written things in plain English to make it easier.

I’m a complete layman when it comes to the intricate details of the law, particularly with all of the legal jargon, abbreviations, and terms that I’ve only ever heard in an episode of Suits. But when it comes to web accessibility, lawsuits across the US are on the rise.

Etsy has recently experienced a class action lawsuit for allegedly violating the Americans with Disabilities Act (ADA) and the number of lawsuits on accessibility has risen by over 250% over the last 5 years. 

But understanding the legal requirements for web accessibility can feel like a daunting task. So, I’ve brandished my gavel and translated all you need to know about the legal requirements for web accessibility in the US (generally).

A quick disclaimer: Laws can often change and while I’ll try to keep this article as up-to-date as possible, this article is for informational purposes and cannot be considered legal advice.

The Americans with Disabilities Act (ADA)

In case you’re unaware, the ADA protects the rights of people with disabilities to access stuff that should be accessible to everyone equally. This “stuff” includes;

• Access to employment
• Access to state and local government services
• Access to places of public accommodation
• Access to transportation

The main purpose of the ADA is to make it so that people with disabilities are not discriminated against and denied things that someone without a disability has easy access to. 

The ADA covers all sorts, not just website accessibility, so it’s not exactly a quick and easy read. Of course, I’d recommend you familiarize yourself with it anyway. The ADA is enforced by the Department of Justice (DOJ) and for years they’ve been working on new guidance around website accessibility since so many people rely on the web in today’s world.

But things can get a bit confusing. There’s a clear understanding of what should be considered a “disability” but when it comes to terms such as “public accommodation” it’s a little more unclear. Can some websites be considered public accommodation? Well, maybe.

Some courts have decided that for something to be considered public accommodation, it needs to include a physical place. However, most of these rulings were made before the boom of eCommerce, particularly following the global pandemic.

New guidance

However, the DOJ has released new guidance in March 2022 that changes this, and writes as follows: 

“In recent years, a multitude of services have moved online and people rely on websites like never before for all aspects of daily living.”

Hence, “the Department has … taken the position that the ADA’s requirements apply to all the goods, services, privileges, or activities offered by public accommodations, including those offered on the web.“

So what does this really mean? Well, it essentially means that anything accessible to the public such as goods and services should be equally accessible to anyone with disabilities regardless of whether the place of sale is physical or online.

So, just like you’d install a wheelchair ramp at your physical store, you need the digital equivalent for your eCommerce website.

So what aspects of web accessibility should you pay attention to?

In the new guidance, the DOJ does offer some examples of website accessibility issues that are problematic under the ADA. While this is useful, it’s not an exhaustive list. This means that you could still be violating the ADA even if you have paid close attention to the web accessibility examples offered by the DOJ. 

These examples include:

• Poor text color contrast can make it difficult for moderately-visually-impaired people to read
• Use of color alone to give information that color-blind people cannot read or ascertain 
• Lack of text alternatives (“alt text”) on images such that blind people cannot understand the content and purpose of pictures, illustrations, and charts.
• No captions on videos that people with hearing impairments may not be able to understand.
• Inaccessible online forms that do not convey clear instructions or error indicators telling the user a form field is missing or incorrect.

The muddled bit

For the most part, this might all be clear enough to you. But it gets a bit muddled. Unlike it has for other aspects of accessibility under the ADA, the DOJ has not set out any detailed standards for web accessibility. 

This means that organizations can’t be certain how they’ll ensure that the goods or services that they provide online will be accessible. While the DOJ does identify some existing technical accessibility standards such as the Web Content Accessibility Guidelines (WCAG), there’s no indication as to a definitive list of web accessibility standards that must be followed.

Recently, Democratic senators have been asking the DOJ to define clear and enforceable standards to reduce the risk of excluding people with disabilities from online and digital services. Although the DOJ has stated that the ADA applies to digital spaces, the argument here is that without “specific requirements or technical compliance standards” then it’s going to be slow to see meaningful change.

So is this a good thing?

I’m on the fence. Even among the Silktide team, there are disagreements on whether the lack of any clear standards provided by the DOJ is good or bad. On the one hand, I think that it forces a lot of organizations to do the research around accessibility and understand what they can put in place to make for a more accessible website. Otherwise, organizations may just focus on doing the bare minimum and box-ticking in order to avoid getting sued. 

However, without a clear understanding of what needs to be improved for a website to be considered accessible, or whether a website is required to comply with the ADA in the first place, there’s a good chance that a substantial public lawsuit could be unfairly filed against an organization.

Technology and the web are constantly changing. New tools, AI, and better development standards all mean that some new web features that are considered inaccessible could have huge ramifications for organizations of all sizes. Though, you could argue that any of these new features and ideas should be made and released with accessibility in mind in the first place.

My advice is the same as my Grandmother’s: “Better safe than sorry”. Cover your back and make accessibility a priority. Not only will you be happy to avoid any lawsuits, but you’ll simply be doing the right thing by not excluding disabled users from accessing your website.

If you need a hand with managing accessibility across your whole web estate, we can help. See Silktide’s platform in action.

• Share via Twitter (opens in a new tab)
• Share via LinkedIn (opens in a new tab)
• Share via Facebook (opens in a new tab)
• Share via Email (opens in a new tab)

I decided to learn JavaScript with the goal of building an accessibility overlay. I wanted to prove that a) it would be so easy even I could do it, and that b) it would be terrible. I achieved both.

One of the joys of working at Silktide is Silktime, where twice a year each member of our team is encouraged to take a week out of their normal duties to learn something new. Here’s what I learned (in the very loosest sense of the term).

What’s an accessibility overlay, and why build one?

An overlay is added to a website to give users control over things like font sizes, colors, and other functionality. They override the website’s default code, but they don’t help anybody improve accessibility.

This is because they break the standard functionality included in screen readers like JAWS, they don’t affect the underlying web code at all (and so do not solve any accessibility problems) and they won’t protect against lawsuits.

In fact, overlays don’t work at all.

I chose to build one because generally when learning to program, it’s good to set yourself the goal of building a specific project. It forces you to think about the requirements and the features you need to fulfill them.

I also wanted to show what a total scam they are, because if a marketer with barely any experience of coding can make one in a couple of days, that tells you everything you need to know about whether you should buy one or not.

To be very clear, Silktide does not provide an overlay, nor will we. You cannot automatically fix accessibility with AI and two lines of code – computers just aren’t that smart yet.

You can consider this blog post for informational purposes only.

Getting started

A while back I learned HTML and CSS and so I know my way around a web page, but I’d never really learned JavaScript.

The first thing I needed to do was plan out the functionality of my overlay. Here’s a list of the things I wanted it to do:

• Ability to turn the overlay on/off
• Readable font toggle
• Highlight headings toggle
• Highlight links toggle
• Adjust font size
• Adjust line-height
• Adjust letter spacing
• Align text center/left/right
• Dark/Light/Default contrast modes
• Toggle monochrome mode
• Highlight text under the mouse pointer
• Simulate blurred vision

For a complete beginner at JS, perhaps I was being a little ambitious with learning JS and getting all this done in 4 days. However, I’m pleased to say I managed it.

What is JavaScript?

JavaScript (JS) is the programming language web developers use to make a page dynamic. It works with HTML (the code that creates a web page) and CSS (the code that changes the page’s style) to make things move, add functionality, and submit information.

It gives dynamic functionality to otherwise static elements on a page, and basically powers most of the web.

Without JS, the web as we know it wouldn’t work.

You can use JS to find and manipulate all the things on a web page. You can take an element, or collection of elements, and perform an action. For example, you might find all the headings, extract their font size, and then make them bigger or smaller.

To get this to work, you can connect these functions to a button. This is what makes JS dynamic.

Building a test page

There were a few steps to take before actually getting started with the programming.

Step 1 – Create index.html

I needed a page with some test content. I took a copy of a Silktide blog post and created a local version. I wanted to include the following elements:

• headings (h1, h2, h3, etc.)
• paragraphs (p)
• lists (ol, ul, li)
• images (img)
• links (a)
• code (code)

Step 2 – Add basic styling

It didn’t need to be pretty, and as you can see in the image below, it wasn’t.

I started by importing some basic bootstrap and normalizing CSS, then made some basic styling on the font styles, colors, and sizes.

I also created styling CSS for the overlay widget which I built next.

Building the overlay

I created overlay.js, a JavaScript file that handled the creation of the overlay, all the elements within it, and its functionality. There are some examples of functions in the code blocks below. Don’t worry if it looks complicated – you don’t really need to understand what’s going on here.

This particular snippet makes the whole page grayscale by adding a CSS class monochrome to the page body. The monochrome class adds a grayscale filter across the whole page, which is a built-in CSS class for most browsers.

All of this is linked to a toggle button inside the overlay widget.

// turns a whole page grayscale filter on and off by adding or removing a CSS class to the body of the page

function monochromeMode() {
  if (document.body.className == "monochrome") {
    document.body.classList.remove("monochrome");
  } else {
    document.body.className = "monochrome";
  }
}

.monochrome {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

Adding the overlay to the web page

To get it running, I had to add the overlay.js script to the web page, so I did that by using the script tag. All this does is reference JavaScript files located elsewhere (that can be either on your computer, on your web server, or someone else’s web server.

    <script src="scripts/overlay.js" defer></script>

Finally, I imported all the different styles. These included CSS for:-

• the page itself
• the overlay and the override styles that the overlay uses to change the page

    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/overlay.css"/>

Getting it working!

To illustrate how terrible this all is, a video might be the best way.

This video shows a user clicking a button to turn on and off the overlay widget, which appears when you click it. Inside the overlay are a number of list items, each with a button next to them. Some (like the readable font toggle) have a simple on/off button, while others, like font size, have a plus and a minus button.

The video demonstrates some of the functionality as follows:

• Toggle the overlay to open
• Turn on readable font
• Make text bigger and smaller
• Turn on link highlighting

How accessible is it?

I tried to navigate to the overlay using the keyboard, and while it was possible, it wasn’t the best experience for the following reasons:

• It’s at the end of the page, so you have to tab through all links to get to it
• Once opened, you have to leave it and re-enter it with Shift-Tab to get to the options inside it
• It doesn’t make the page more accessible

In conclusion

This was a fun little project but I’d have to conclude the following three points:

• Marketers have no business trying to code anything
• Marketers have no business trying to design anything
• Overlays are still terrible

Accessibility overlays, or “fix all your accessibility problems automatically with a couple of lines of code software” don’t make your website accessible. In fact, they’re no defense against accessibility lawsuits under the ADA – if you’re in the US.

So, what’s the alternative?

There’s only one, really. You need to find and fix your accessibility issues at source, whether that’s in code or in content. It’s the only way to make a better experience for everyone, which, when you’re building a website, should be your primary goal.