On the website, are style sheets used to control the presentation of information?
A user who enforces their own stylesheet to enlarge text or invert colors cannot override HTML presentation attributes. <font color="red"> or align="center" are applied directly by the browser, outside the CSS cascade. Their customization is ignored, and the layout they configured for better readability becomes inoperative.
This criterion covers three types of violations. First: obsolete HTML elements with purely decorative purpose — <font>, <center>, <big>, <marquee>, <blink>, <basefont>, <s>, <strike>, <tt>. Second: presentation attributes written directly into HTML — align, bgcolor, color, border, cellpadding, cellspacing, valign and a dozen others. Third: spacing characters used as a layout tool (manually spaced letters, columns simulated by tabs, tables made of multiple spaces).
HTML carries structure. CSS carries presentation. This principle is thirty years old and remains the foundation of everything CSS allows to override, adapt, and personalize.
3 tests to check the proper use of stylesheets
Absence of obsolete presentation tags
- Open your browser's inspector or the page's source code.
- Search for the following tags:
<basefont>,<big>,<blink>,<center>,<font>,<marquee>,<s>,<strike>,<tt>. - If the page is not declared as HTML5 (absent DOCTYPE, or HTML 4 / XHTML), also search for the
<u>tag. - If none of these tags are present, the test is validated. A single occurrence fails the test.
Absence of HTML presentation attributes
- Inspect the rendered HTML of the page (rendered DOM, not the source template).
- Check for the absence of these attributes on all elements:
align,alink,background,bgcolor,border,cellpadding,cellspacing,char,charoff,clear,color,compact,frameborder,hspace,link,marginheight,marginwidth,text,valign,vlink,vspace. - Check for the absence of
size, except on<select>elements (exception granted). - Check for the absence of
widthandheight, except on<img>,<object>,<embed>,<canvas>and<svg>(exception granted). - If none of these attributes are present outside the listed exceptions, the test is validated.
Absence of formatting spaces
- Disable the page's stylesheets. In Firefox: View menu > Page Style > No Style. With the Web Developer extension: CSS > Disable All Styles.
- Examine the text content rendered without CSS.
- Check for the absence of spaces inserted manually between the letters of the same word (e.g.:
W e l c o m e). - Check for the absence of spaces or tabs used to create margins, indentation, or visual alignment.
- Check for the absence of columns or tabular structures simulated by multiple spaces or filler characters.
- If none of these practices are detected, the test is validated.
Examples
❌ Non-compliant : Formatting via HTML attributes and obsolete tags
<table border="1" cellpadding="8" cellspacing="0">
<tr bgcolor="#003366">
<th><font color="#ffffff" size="4">Product</font></th>
<th><font color="#ffffff" size="4">Price</font></th>
</tr>
<tr>
<td align="center">Monthly subscription</td>
<td align="center">€9.90</td>
</tr>
</table>The attributes border, cellpadding, cellspacing, bgcolor and align, as well as the <font> tags with color and size, are presentation attributes and elements. A user who enforces their own stylesheet cannot override them. A simplified reading tool will ignore them, potentially leaving the page without readable formatting.
✅ Compliant : Same table with presentation delegated to CSS
<table class="pricing-table">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monthly subscription</td>
<td>€9.90</td>
</tr>
</tbody>
</table>
<style>
.pricing-table { border-collapse: collapse; }
.pricing-table th { background-color: #003366; color: #fff; font-size: 1.25rem; padding: 8px; text-align: center; }
.pricing-table td { text-align: center; padding: 8px; border: 1px solid #ccc; }
</style>All presentation is delegated to CSS via a class. A user can disable or override these styles as needed. The semantic structure of the table (<thead>, <th>, <td>) is preserved and remains readable even without CSS.
❌ Non-compliant : Spaces to simulate alignment (test 10.1.3)
<p>Name : Smith</p>
<p>First name : John</p>
<p>Email : [email protected]</p>Non-breaking spaces are used to visually align the colons. With CSS active, the alignment appears correct. Without CSS, a screen reader will announce these spaces inconsistently or ignore them. Layout must come from CSS (display: grid, or a definition list <dl> / <dt> / <dd>).
Tips and pitfalls
⚠️ <s> has no HTML5 exception in RGAA
Unlike <u> (acceptable in HTML5 because redefined with precise semantics), <s> is forbidden by test 10.1.1 without exception, even in HTML5. This is the most frequent error among developers who know the HTML4 / HTML5 distinction: they expect a symmetric exception, it does not exist. Use <del> if content has been editorially removed, or apply strikethrough formatting via text-decoration: line-through in CSS if it is purely visual.
⚠️ width and height on <img> are allowed
The width and height attributes on <img>, <object>, <embed>, <canvas> and <svg> are explicitly excluded from test 10.1.2. These attributes reserve space before the image loads and prevent layout shift: this is a technical function, not styling. Similarly, size on <select> is tolerated because it controls the number of visible rows in the dropdown list, a feature of the element.
⚠️ WYSIWYG editors are the primary source of violations
In audits, the majority of occurrences of <font>, align or bgcolor come from content entered via a poorly configured rich editor (TinyMCE, CKEditor, Quill): copy-paste from Word, generation of obsolete formatting tags. Configure your editor to forbid these attributes and elements in output, or clean HTML on the server side before persistence.
💡 Check the rendered DOM, not the source template
Test 10.1.2 specifies "generated source code". If your CMS injects presentation attributes at render time, the test fails even if your template is clean. From the browser console, the command document.querySelectorAll('[align], [bgcolor], [color], [cellpadding], [cellspacing]') lists all occurrences in a single pass.
⚠️ Test 10.1.3 is invisible without actual style disabling
Auditing spacing formatting without actually disabling CSS is impossible: with styles active, a letter-spaced word can appear visually innocuous. Use the Web Developer extension (Firefox or Chrome) or the Firefox View > Page Style > No Style menu. The developer inspector alone does not reveal this type of violation.
Frequently asked questions
Why do the <b> and <i> tags pose a problem for RGAA criterion 10.1?
They don't. These two elements are not on the test 10.1.1 list. In HTML5, <b> signals text meant to draw attention without special importance (keywords, product names) and <i> marks text in a different voice (technical terms, foreign words): they are no longer purely presentational. If you use them only for bold or italic without semantic intent, prefer CSS — good practice, not RGAA 10.1 requirement.
How does RGAA criterion 10.1 treat the use of the inline style attribute?
It doesn't violate it. The style attribute is part of CSS, even when written in HTML: it can be overridden with !important in a user stylesheet. What criterion 10.1 targets are HTML presentation attributes non-CSS (align, bgcolor, color…) and HTML elements dedicated to presentation. Inline styles are a maintainability concern, not a violation of this criterion.
How can I efficiently audit test RGAA 10.1.2 on a dense web page?
From your browser's JavaScript console, run document.querySelectorAll('[align], [bgcolor], [color], [cellpadding], [cellspacing], [valign], [border]'). This immediately returns all occurrences with their position in the DOM. For complete coverage of the RGAA list, adapt the selector to include [alink], [vlink], [hspace], [vspace], [marginheight], [marginwidth].
When does an HTML5 site still fail RGAA accessibility test 10.1.1 anyway?
Easily. In HTML5, <u> is accepted (explicit exception of the test), but <center>, <font>, <big>, <marquee>, <blink>, <basefont>, <s>, <strike> and <tt> remain forbidden. The browser continues to display them without visible error. A copy-paste from a Word document or an old site, or a poorly configured CMS, can introduce them silently.