Dit is een gearchiveerde versie van www.webrichtlijnen.nl.

Verkorte titel
Fu2 Gescheiden: fout vanwege het gebruik van het style attribuut

Volledige titel van de gangbare fout

Fu2: Gangbare fout voor kwaliteitscriterium u.2.1 doordat in HTML het attribuut style wordt gebruikt

Toepasbaarheid

Alle (X)HTML pagina's.

Deze techniek is van toepassing op:

Beschrijving

Het style-attribuut maakt het mogelijk om aan een HTML-element stijlregels toe te voegen. Er is dan echter niet langer sprake van een scheiding tussen de presentatie van een element en (de content van) het element. Scheiding van content en presentatie zorgt er voor dat betekenis en presentatie van content niet met elkaar in conflict komen en dat bij (her)gebruik van content in een andere context complicaties worden vermeden.

Opmerking: De beoordeling van deze gangbare fout dient plaats te vinden op de door de webserver geserveerde HTML-code, niet de door de browser gegenereerde HTML-code.
Er zijn systemen, zoals sommige populaire JavaScript frameworks, die de in de browser aanwezige HTML dynamisch aanpassen door het toevoegen van style-attributen.
Het is in dergelijke gevallen niet uit te sluiten dat de betekenis en presentatie van content met elkaar in conflict komen. In gevallen waarbij dit leidt tot toegankelijkheidsproblemen voor mensen met een functiebeperking dient dit door de in WCAG 2.0 gefeinieerde technieken te worden afgevangen. Het is nadrukkelijk niet de bedoeling dat dat via de technieken en fouten die zijn gedocumenteerd onder het principe Universeel toegankelijkheidsproblemen worden opgelost voor mensen met een functiebeperking. Dat zou strijdig zijn met het uitgangspunt dat Webrichtlijnen versie 2 de toegankelijkheidsspecificatie WCAG 2.0 volledig dient te omvatten, maar deze niet mag vervormen.

Voorbeelden

Opmerking: Voorbeelden hebben uitsluitend een informatieve functie. Het is niet de bedoeling om een succescriterium te beoordelen enkel op basis van de hier gepresenteerde voorbeelden.

Voorbeeld 1

In dit voorbeeld wordt het style-attribuut gebruikt om de visuele presentatie van een heading te bepalen.

(Fout) Voorbeeldcode

<h1 style="font-weight: normal;">Regelgeving</h1>

Door de stijlregel in een apart bestand te plaatsen of bovenaan de inhoud in de broncode middels het style-element, wordt een scheiding tussen inhoud en presentatie gerealiseerd:

(Goed) Voorbeeldcode

...
  <style type="text/css">
    h1 { font-weight: normal; }
  </style>
</head>
<body>
  <h1>Regelgeving</h1>
...

Informatiebronnen

Opmerking: Informatiebronnen zijn uitsluitend informatief bedoeld. Ze maken geen deel uit van de Webrichtlijnen. Deze opsomming impliceert geen goedkeuring van de bronnen door de opstellers of toezichthouders van deze specificatie.

Beware of style Attributes!

The first rule of standards-friendly development (see "Rules of Standards-Friendly Development" on page 46) demands that you keep presentation details out of your markup, so avoid the style attribute however and whenever possible. In those (extremely) rare instances where it must be used (for example, Content Management Systems that lock out stylesheets), it should contain the desired series of valid property/value pairs, just as if those same pairs were being included in a stylesheet rule applying only to that element.

The style attribute is further discussed (and subjected to passionate abuse) in "The Awful Parts" on page 286.

Gerelateerde technieken

Toetsen

Procedure

  1. Controleer of het style-attribuut in de (X)HTML pagina wordt gebruikt.

Verwacht toetsresultaat

De fout is van toepassing - en er wordt dus niet aan het succescriterium voldaan - bij de volgende uitkomst: