Why and How to Disable CSS to Make Your Website Accessible

Accessibility matters. Why? Because worldwide, approximately 2.2 billion people have some form of visual impairment, and 39 million are blind (WHO, 2021). These individuals, like you and me, browse the web and deserve a seamless experience. Yet, many websites rely too much on CSS for presenting critical information. The result? When styles break or are disabled, the user experience collapses.

Disabling CSS is a simple yet powerful way to see if your site is truly accessible. But it's more than just a test; it's a way to improve your website's structure and ensure usability for everyone, regardless of their physical or technical constraints. By following the WCAG (Web Content Accessibility Guidelines) (WCAG 2.1), you can make your website inclusive and compliant with global accessibility standards. Let's dive in!

Why Disable CSS?

Disabling CSS is like stripping the decorations off a house: it lets you see if the foundation is solid. It helps you verify that your content is logical, readable, and accessible, even without visual styling. Because if your site looks great but becomes unusable without CSS, you're alienating a significant part of your audience.

Many people rely on assistive technologies or browse in environments where CSS may not be fully supported. So, take a moment to consider their experience and ensure your website works as intended, even in the most basic conditions.

How to Disable CSS

1. Directly in Your Browser

• Firefox:

  1. Open the page you want to test.
  2. Press Alt to display the menu bar.
  3. Go to View > Page Style > No Style (documentation).

• Chrome/Edge:

  1. Install the Web Developer extension.
  2. Click on CSS > Disable All Styles.

• Safari:

  1. Enable the Develop menu in Safari > Preferences > Advanced.
  2. Select Disable Styles (guide).

2. Use Accessibility Testing Tools

• axe DevTools (premium but comprehensive)
• Wave Accessibility Tool (free and easy to use)

3. Disable CSS in Your Code

You can manually disable styles by adding the disabled attribute to your CSS tags:

<link rel="stylesheet" href="style.css" disabled />

⚠️ Important Note for Developers

Key Reminder: EVERY feature of your website should remain functional, even if CSS is disabled. For developers, this can be challenging, especially when using third-party libraries.

While working on accessibility improvements for the Refugees.info platform, I discovered that even Radix UI, a library renowned for its accessible components, struggles without CSS. For example, their dropdown menus stop working entirely when CSS is disabled, rendering them inaccessible to certain users.

To address this issue, I created a React hook that detects whether CSS is active and injects simplified components when it is not. While not a universal solution, it allowed me to enhance the platform's accessibility while adhering to the WCAG.

A React Hook to Test and Adapt Accessibility Without CSS

Hook Code

import { useEffect, useRef, useState } from "react";

const useStylesDisabled = (): boolean => {
  const [stylesDisabled, setStylesDisabled] = useState(false);
  const testElement = useRef<HTMLDivElement | null>(null);
  const resizeObserver = useRef<ResizeObserver | null>(null);

  useEffect(() => {
    const createTestElement = (): void => {
      if (!testElement.current) {
        const element = document.createElement("div");
        element.className = "test-styles-enabled";
        document.body.appendChild(element);
        testElement.current = element;
      }
    };

    const checkStyles = (): void => {
      if (testElement.current) {
        const computedColor = window.getComputedStyle(
          testElement.current
        ).color;
        const isDisabled = computedColor === "rgb(0, 0, 0)";
        setStylesDisabled(isDisabled);
      }
    };

    createTestElement();
    resizeObserver.current = new ResizeObserver(checkStyles);
    resizeObserver.current.observe(testElement.current!);
    checkStyles();

    return () => {
      resizeObserver.current?.disconnect();
      document.body.removeChild(testElement.current!);
    };
  }, []);

  return stylesDisabled;
};

Example Usage

import React from "react";
import useStylesDisabled from "./useStylesDisabled";

const MyComponent = () => {
  const stylesDisabled = useStylesDisabled();

  return (
    <div>
      {stylesDisabled ? (
        <p>
          CSS styles are disabled. Make sure your core functionality remains
          accessible.
        </p>
      ) : (
        <p>CSS styles are enabled. Enjoy the optimal user experience.</p>
      )}
    </div>
  );
};

export default MyComponent;

TL;DR

• Disabling CSS is a critical step for testing and improving your website's accessibility.
• Check for readability, keyboard navigation, and content organization.
• Use tools like Wave or axe DevTools, or implement a React hook to detect and adapt to CSS states.

Sources and Additional Resources

• WCAG 2.1 Guidelines
• WHO - Blindness and Visual Impairment Facts
• Mozilla - HTML and Accessibility Documentation
• W3C - Accessibility Tutorials
• Deque - axe DevTools

P.S: A big thank you to Anne-Sophie Tranchet and Erwan le Gall from the accessibility team at [@beta.gouv.fr](https://www.linkedin.com/company/betagouv