Style Sheet

A style sheet is a CSS file that defines the visual appearance of a web page. In accessibility, three origins coexist: the browser's, the developer's, and the user's. The RGAA verifies that informative content remains readable when author styles are disabled.

When you write CSS, you produce an author style sheet. Your browser applies one before even reading yours. And the user can add a third to adapt the display to their needs. Three sources, one visual result: this is the CSS cascade.

#Three origins, one accessibility challenge

The CSS Cascade specification defines three origins:

• User agent: the browser's default styles. An <h1> is large and bold before you write a single line of CSS.
• Author: your .css files. They override the browser's styles through the cascade.
• User: the web user's personalized styles, such as enlarged font size or colors adapted to visual impairment.

RGAA criterion 10.2 asks a precise question: does informative content remain present if author style sheets are disabled? As Julie Moynat details, this is not about having a pleasant site without CSS. The criterion verifies that no information disappears.

#The trap of CSS-generated content

The most common failure case: injecting informative text via the content property.

/* This text disappears without CSS */
.required::after {
  content: " (required)";
  color: red;
}

Disable CSS, the word "required" disappears. The information exists only in the style sheet, not in the HTML. The W3C technique F87 qualified this as an automatic failure. It is now marked obsolete in WCAG 2.2: modern screen readers read CSS-generated content. The risk persists nonetheless for users who disable styles or navigate with custom style sheets, as Adrian Roselli documents.

Same logic for background-image: if the image carries meaning, it disappears with the style sheet.

#Adapting your styles to user preferences

Your style sheets can respond to the system's accessibility settings. Two media queries to know:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
  }
}
 
@media (prefers-contrast: more) {
  :root { --border-color: #000; }
}

These queries read the operating system's preferences. Failing to respect them means ignoring an explicit signal of need.

#In summary

A style sheet is not just a .css file. It is a link in a chain of three origins where the user has the final say. Verify that your content survives without your styles, and use accessibility media queries to respond to each visitor's preferences.