# Why and How to Disable CSS to Make Your Website Accessible

> Discover why and how to disable CSS to test and improve your website's accessibility. A complete guide with tips, React examples, and WCAG best practices.

**Published:** 2024-11-01
**Author:** Jérémie Gisserot
**Language:** en
**Canonical URL:** https://jeremie-gisserot.net/en/accessibility-design-systems/accessibility-disable-css-guide

---

Accessibility matters. Why? Because worldwide, approximately **2.2 billion people** have some form of visual impairment, and **39 million are blind** ([WHO, 2021](https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment)). 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](https://www.w3.org/TR/WCAG21/)), 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](https://support.mozilla.org/en-US/kb/accessibility-features-firefox-make-firefox-and-we)).

- **Chrome/Edge**:

  1.  Install the [Web Developer extension](https://chrome.google.com/webstore/detail/web-developer/bebcpeohkfgjebfmgedcmkojhbgibohn).
  2.  Click on **CSS > Disable All Styles**.

- **Safari**:
  1.  Enable the Develop menu in **Safari > Preferences > Advanced**.
  2.  Select **Disable Styles** ([guide](https://support.apple.com/guide/safari/welcome/mac)).

### 2. Use Accessibility Testing Tools

- [axe DevTools](https://www.deque.com/axe/devtools/) (premium but comprehensive)
- [Wave Accessibility Tool](https://wave.webaim.org/) (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:

```html
<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](https://www.refugies.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

```typescript
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

```typescript
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](https://www.w3.org/TR/WCAG21/)
- [WHO - Blindness and Visual Impairment Facts](https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment)
- [Mozilla - HTML and Accessibility Documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
- [W3C - Accessibility Tutorials](https://www.w3.org/WAI/tutorials/)
- [Deque - axe DevTools](https://www.deque.com/axe/devtools/)

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

---

**Read more:**
- [Réfugiés.info: Improving Accessibility Without Ever Stopping](/en/accessibility-design-systems/refugies-info-dsfr-accessibility-case-study): the real-world case study where these techniques are applied daily