Niektóre atrybuty HTML nie powinny zawierać żadnych białych znaków - mianowicie [id], [lang] oraz map[name].
[id*=" "],
[lang*=" "],
map[name*=" "]
To jest mój piękny element z ID.
<p id="my id">To jest mój piękny element z ID.</p>
Atrybut [tabindex] nigdy nie powinien być większy niż 0.
[tabindex]:not([tabindex="0"]):not([tabindex^="-"])
<button tabindex="1" type="button">Dodatni tabindex jest zły!</button>
Atrybut [href], jeśli występuje, nie powinien być pusty. Łączy do czegoś, prawda?
a[href=""],
a[href=" "]
<a href=" ">Czym jestem? Do czego prowadzę?</a>
Puste łącze powinno mieć etykietę wewnątrz [title], [aria-label] lub wskazaną przez [aria-labelledby].
Przy okazji, po co miałbyś używać pustego łącza?
a:empty[title=""],
a:empty[aria-label=""],
a:empty[aria-labelledby=""],
a:empty:not([title]):not([aria-label]):not([aria-labelledby])
<img> musi mieć [alt]. Zawsze.
img[alt=" "],
area[alt=" "],
input[type="image"][alt=" "],
img:not([alt]),
area:not([alt]),
input[type="image"]:not([alt])
†
<img src="./static/ffoodd.png" width="144" height="144" /><span>†</span>
Element z [role=img] powinien mieć albo [aria-label] albo [aria-labelledby].
Jeśli obraz jest dekoracyjny, użyj [role=presentation] zamiast [role=img].
[role="img"]:not([aria-label]):not([aria-labelledby]),
svg[role="img"]:not([aria-label]):not([aria-labelledby])
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" role="img">
<rect x="400" y="100" width="400" height="200"
fill="forestgreen" stroke="darkgreen" stroke-width="10" />
</svg><span>†</span>
Element <img> musi mieć [src] lub [srcset]. I powinno być poprawne. Oczywiście.
img:not([src]):not([srcset]),
img[src=""],
img[src=" "],
img[src="#"],
img[src="/"],
img[srcset=""],
img[srcset=" "],
img[srcset="#"],
img[srcset="/"],
input[type="image"]:not([src]):not([srcset]),
input[type="image"][src=""],
input[type="image"][src=" "],
input[type="image"][src="#"],
input[type="image"][src="/"],
input[type="image"][srcset=""],
input[type="image"][srcset=" "],
input[type="image"][srcset="#"]
input[type="image"][srcset="/"]
<img alt="I tylko mi src brak" width="144" height="144"/>
Znacznik <label> z atrybutem [for] powinien oczywiście etykietować coś z atrybutem [id]. W atrybucie [for] musi być wartość [id] etykietowanego elementu. Oczywiście.
label[for=""],
label[for=" "]
<label for=" ">Zgadnij, co to?</label>
Jak oznaczyć pole? Masz kilka opcji do wyboru: [id], [title], [aria-label] oraz [aria-labelledby].
input:not([type="button"]):not([type="submit"]):not([type="hidden"]):not([type="reset"]):not([type="image"]):not([id]):not([aria-label]):not([title]):not([aria-labelledby]),
textarea:not([id]):not([aria-label]):not([aria-labelledby]),
select:not([id]):not([aria-label]):not([aria-labelledby])
<input type="text" /><span>†</span>
Jak oznaczyć etykietą pożądane dane wejściowe typu [reset], [submit] or [button]?
Zawsze masz kilka opcji do wyboru: [value], [title], [aria-label] oraz [aria-labelledby].
input[type="reset"]:not([value]):not([title]):not([aria-label]):not([aria-labelledby]),
input[type="submit"]:not([value]):not([title]):not([aria-label]):not([aria-labelledby]),
input[type="button"]:not([value]):not([title]):not([aria-label]):not([aria-labelledby])
<input type="submit" /><span>†</span>
Przycisk <button> powinien mieć albo zawartość albo atrybut [aria-label], [aria-labelledby] lub [title]. Atrybuty te, jeśli istnieją, nie mogą być puste.
button:empty:not([aria-label]):not([aria-labelledby]):not([title])
<button type="button"></button>
Atrybut [aria-label], [aria-labelledby] lub [title] w znaczniku <button> nie może być pusty.
button[title=""],
button[aria-label=""],
button[aria-labelledby=""]
<button title="" type="button">Test</button>
Kontrolka <button> ma domyślnie wartość [type] równą &quot;submit&quot;, aby wysłać <form>.
Jednak jeśli przycisk znajduje się poza <form>, jeśli ma on za zadanie wysłać formularz, powinien o tym wspomnieć za pomocą jednego z tych atrybutów: [form], [formaction], [formtarget].
Jeśli nie wysyła niczego, powinien mieć atrybut [type="button"].
button:not([type]):not([form]):not([formaction]):not([formtarget])
<button>Po prostu nie wiem, co ze sobą zrobić.</button>
Jeśli <button> ma wartość [type] albo "reset" albo "button", nie powinien używać następujacych atrybutów:
[formmethod];[formaction];[formtarget];[formenctype];[formnovalidate].button[type="reset"][formmethod],
button[type="reset"][formaction],
button[type="reset"][formtarget],
button[type="reset"][formenctype],
button[type="reset"][formnovalidate],
button[type="button"][formmethod],
button[type="button"][formaction],
button[type="button"][formtarget],
button[type="button"][formenctype],
button[type="button"][formnovalidate]
<button type="button" formmethod="GET">Mam metodę</button>
Przycisk <button> stylizowany na wyłączony powinien być faktycznie wyłączony.
Użyj [disabled] i [readonly].
button[class*="disabled"]:not([disabled], [readonly])
<button class="is-disabled" type="button">Być albo nie być (wyłączonym)?</button>
<input> potrzebuje [type], aby powiedzieć użytkownikowi, jaki rodzaj danych jest pożądany.
input:not([type]),
input[type=" "],
input[type=""]
<label for="No-type">Brak type</label>
<input value="Cokolwiek chcesz" id="No-type"/><span>†</span>
<optgroup> potrzebuje [label], aby wyjaśnić, co jest wewnątrz grupy.
optgroup:not([label])
<form action="/">
<label for="optgroup-test">Oh, hej</label>
<select id="optgroup-test">
<optgroup label="Jestem grupą">
<option value="1">Jestem opcją</option>
<option value="2">Jestem kolejną opcją</option>
</optgroup>
<optgroup>
<option value="3">Jestem opcją, ale z następnej grupy</option>
<option value="4">Ja też jestem inną opcją, ale z następnej grupy</option>
</optgroup>
</select>
</form>
<iframe> potrzebuje [title], aby powiedzieć użytkownikowi, czego może się spodziewać w ramce.
iframe:not([title]),
iframe[title=" "],
iframe[title=""]
<iframe srcdoc="<!DOCTYPE html><title>Brak [title]</title>"></iframe><span>†</span>
Przyznasz, że <form> powinien coś robić. Czyż nie? Właśnie, a [action] ma za zadanie określić, co.
form:not([action]),
form[action=" "],
form[action=""]
<form>
<label for="input">Zgadnij, co zrobimy z Twoimi danymi?</label>
<input id="input" type="text" />
<input type="submit" value="Nie mam pojęcia, co?"/>
</form>
<html> musi wskazywać programom użytkownika naturalny język dokumentu.
html:not([lang]),
html[lang*=" "],
html[lang=""]
<iframe title="Przykład nieokreślonego języka" srcdoc="<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Je ne parle pas Français</title>
<style>html{font:.75rem sans-serif}</style>
<link rel='stylesheet' type='text/css' href='https://ffoodd.github.io/a11y.css/css/a11y-en_errors-only.css'>
</head>
<body>
<ul>
<li>Speak French?</li>
<li>Habla usted francés?</li>
<li>Sprechen Sie Französisch?</li>
</ul>">
</iframe>
Element <table> może być użyty do układu, jeśli dodana jest [role="presentation"].
Nie wolno jednak używać znaczników semantyki oraz atrybutów mających na celu uporządkowanie danych. Oto ich lista:
<th>;<thead>;<tfoot>;<caption>;[axis];[scope];[headers];[colgroup].table[role="presentation"] th,
table[role="presentation"] thead,
table[role="presentation"] tfoot,
table[role="presentation"] caption,
table[role="presentation"] colgroup,
table[role="presentation"] [axis],
table[role="presentation"] [scope],
table[role="presentation"] [headers]
| To działa |
<table role="presentation">
<caption>Ja nic nie znaczę! Nie powinno mnie tu być!</caption>
<tbody>
<tr>
<td colspan="2">To działa</td>
</tr>
</tbody>
</table>
[width] i [height] są informacjami o prezentacji (o wyglądzie).
Dlatego nie powinny być używane w znacznikach, poza <img>.
Zamiast tego używaj CSS.
:not(img):not(object):not(embed):not(svg):not(canvas)[width],
:not(img):not(object):not(embed):not(svg):not(canvas)[height]
Cholera! Źle się czuję :(
<p width="20">Cholera! Źle się czuję :(</p>
Atrybuty zdarzeń Javascript (takie jak [onmouseover]) nie powinny być używane.
Preferuj albo pseudo-klasy CSS (:hover, :focus, :active, etc.) albo obserwatory zdarzeń JS.
[onafterprint], [onbeforeprint], [onbeforeunload],
[onerror], [onhaschange], [onload], [onmessage],
[onoffline], [ononline], [onpagehide], [onpageshow],
[onpopstate], [onredo], [onresize], [onstorage],
[onundo], [onunload],
[onblur], [onchage], [oncontextmenu], [onfocus],
[onformchange], [onforminput], [oninput], [oninvalid],
[onreset], [onselect], [onsubmit],
[onkeydown], [onkeypress], [onkeyup],
[onclick], [ondblclick], [ondrag], [ondragend],
[ondragenter], [ondragleave], [ondragover],
[ondragstart], [ondrop], [onmousedown], [onmousemove],
[onmouseout], [onmouseover], [onmouseup], [onmousewheel],
[onscroll],
[onabort], [oncanplay], [oncanplaythrough],
[ondurationchange], [onemptied], [onended], [onerror],
[onloadeddata], [onloadedmetadata], [onloadstart],
[onpause], [onplay], [onplaying], [onprogress],
[onratechange], [onreadystatechange], [onseeked],
[onseeking], [onstalled], [onsuspend], [ontimeupdate],
[onvolumechange], [onwaiting]
<span onclick="alert('Kliknięte!');">Kliknij kliknij kliknij</span>
Czy wiesz, że niektórych znaków należy unikać jako pierwszych znaków w nazwach klas i identyfikatorach CSS? Tak - cyfry, dwóch myślników lub myślnika, po którym następuje cyfra.
[id^="1"],
[id^="2"],
[id^="3"],
[id^="4"],
[id^="5"],
[id^="6"],
[id^="7"],
[id^="8"],
[id^="9"],
[id^="0"],
[id^="--"],
[id^="-1"],
[id^="-2"],
[id^="-3"],
[id^="-4"],
[id^="-5"],
[id^="-6"],
[id^="-7"],
[id^="-8"],
[id^="-9"],
[id^="-0"],
[class^="1"],
[class^="2"],
[class^="3"],
[class^="4"],
[class^="5"],
[class^="6"],
[class^="7"],
[class^="8"],
[class^="9"],
[class^="0"],
[class^="--"],
[class^="-1"],
[class^="-2"],
[class^="-3"],
[class^="-4"],
[class^="-5"],
[class^="-6"],
[class^="-7"],
[class^="-8"],
[class^="-9"],
[class^="-0"]
<div id="2">Witam! Moje ID to 2.</div>
Znacznik <title> jest pierwszą rzeczą czytaną na głos przez czytniki ekranu - aby ogłosić… tytuł strony - a także pierwszą rzeczą wyświetlaną na stronach wyników wyszukiwarek.
Moglibyśmy użyć pseudoklasy :blank, ale w tym momencie jej obsługa jest bardzo słaba. Moglibyśmy również użyć pseudoklasy :-moz-only-whitespace, ale jej obsługa jest ograniczona do Firefoksa, co mogłoby spowodować niepoprawność naszego stosu selektorów…
title:empty
<title></title>
Użytkownik powinien mieć możliwość powiększania lub pomniejszania strony, aby poprawić czytelność i wygodę; jest to zwykle dozwolone w <meta> viewport.
meta[name="viewport"][content*="maximum-scale"],
meta[name="viewport"][content*="minimum-scale"],
meta[name="viewport"][content*="user-scalable=no"]
<iframe title="Przykład złej instrukcji viewport" srcdoc="<!DOCTYPE html>
<html lang='pl'>
<head>
<meta charset='utf-8'/>
<title>Przykład złej instrukcji viewport</title>
<meta name='viewport' content='user-scalable=no'/>
<style>html{font:.75rem sans-serif}</style>
<link rel='stylesheet' type='text/css' href='https://ffoodd.github.io/a11y.css/css/a11y-en_errors-only.css'>
</head>
<body>
<h1>Zła instrukcja <code>viewport</code></h1>">
</iframe>
Używanie kodowania znaków utf-8 jest zalecane przez samo W3C:
obsługuje wiele języków i może obsługiwać strony i formularze w dowolnej mieszance tych języków.
Ponadto pozwala uniknąć pewnych problemów związanych z bezpieczeństwem, wykorzystywanych przez inne zestawy znaków…
meta[charset]:not([charset="utf-8"]):not([charset="UTF-8"])
<meta charset="Windows-1252"/><link>†</link>
Jak wyjaśniono na Mozilla Developer Network:
Element
<meta>deklarujący kodowanie musi znajdować się wewnątrz elementu<head>i w obrębie pierwszych 1024 bajtów HTML, ponieważ niektóre przeglądarki patrzą tylko na te bajty przed wyborem kodowania.
Ma to również na celu zapobieżenie staremu eksploitowi bezpieczeństwa wykorzystującemu UTF-7. Zadeklarowanie zestawu znaków przed znacznikiem <title> jest najprostszym sposobem, aby to ukryć.
head :first-child:not([charset])
<iframe title="Spóźnione ustawienie strony kodowej" srcdoc="<!DOCTYPE html>
<html lang=en>
<head>
<title>Oups !</title>
<style>html{font:.75rem sans-serif}</style>
<link rel=stylesheet type=text/css href=https://ffoodd.github.io/a11y.css/css/a11y-en_errors-only.css>
</head>
<body>
<h1>Jak jestem zakodowany, kolego?</h1>">
</iframe>
Atrybut [dir] służący do określenia kierunku tekstu elementu - przyjmuje tylko trzy wartości: rtl, ltr oraz auto.
[dir]:not([dir="rtl"]):not([dir="ltr"]):not([dir="auto"])
Cóż, jestem trochę zdezorientowany…
<p dir="wtf">Cóż, jestem trochę zdezorientowany…</p>
Atrybut [accesskey] jest przeznaczony do implementacji skrótów klawiaturowych specyficznych dla danej witryny.
Jest to zazwyczaj zły pomysł, ponieważ skróty klawiaturowe mogą być już używane przez system operacyjny, przeglądarkę, rozszerzenie przeglądarki, a nawet ustawienia użytkownika…
To jest opinia: w idealnym świecie [accesskey] może być używany mądrze. Yup. Być może.
[accesskey]
<a id="key" name="key" accesskey="1">Przejdź do tego łącza, używając <kbd>1</kbd></a>
Pola typu radio lub checkbox są zwykle zgrupowane. Atrybut [name] służy do ich programowego powiązania, dlatego jest potrzebny.
[type="radio"]:not([name]),
[type="checkbox"]:not(:only-of-type):not([name])
<form action="/">
<fieldset>
<legend>Opcje</legend>
<p>
<label for="option-1">Opcja N<sup>o</sup>1</label>
<input type="radio" id="option-1"><span>†</span>
</p>
<p>
<label for="option-2">Opcja N<sup>o</sup>2</label>
<input type="radio" id="option-2" name="options">
</p>
</fieldset>
</form>
Pola typu radio powinny być zgrupowane przez nadrzędny <fieldset>, opisany przez jego <legend>.
Zauważ, że WCAG tego nie wymaga, ale zdecydowanie zaleca: „w przypadku, gdy indywidualna etykieta związana z każdą konkretną kontrolą zapewnia wystarczający opis, użycie elementów fieldset i legend nie jest wymagane”
Ten test może być ostrzeżeniem…
[type="radio"]
<form action="/">
<p>
<label for="option-1">Opcja nr 1</label>
<input type="radio" id="option-1" name="options"><span>†</span>
</p>
<br>
<fieldset>
<legend>Próba w zestawie pól, nie powinna być dopasowana</legend>
<p>
<label for="option-2">Opcja nr 2</label>
<input type="radio" id="option-2" name="options"><span>†</span>
</p>
</fieldset>
</form>
Element z [role="slider"] wymaga kilku atrybutów:
[aria-valuemin][aria-valuemax][aria-valuenow]Również [aria-valuetext] jest mile widziany, mimo że nie jest wymagany przez specyfikację ARIA.
[role="slider"]:not([aria-valuemin]),
[role="slider"]:not([aria-valuemax]),
[role="slider"]:not([aria-valuenow])
<label for="slider">Slider</label>
<input id="slider" role="slider" type="range" /><span>†</span>
Element z [role=spinbutton] wymaga kilku atrybutów::
[aria-valuemin][aria-valuemax][aria-valuenow][role="spinbutton"]:not([aria-valuemin]),
[role="spinbutton"]:not([aria-valuemax]),
[role="spinbutton"]:not([aria-valuenow])
<label for="spinbutton">Spinbutton</label>
<input id="spinbutton" role="spinbutton" type="range" /><span>†</span>
Element z [role="checkbox"] wymaga atrybutu stanu [aria-checked]
[role="checkbox"]:not([aria-checked])
<img src="./static/ffoodd.png" alt="Pole wyboru" role="checkbox" width="36" height="36"/><span>†</span>
Element z [role="combobox"] wymaga atrybutu stanu [aria-expanded].
[role="combobox"]:not([aria-expanded])
<input type="text" aria-label="Pole złożone" role="combobox" id="combobox"><span>†</span>
Niektóre właściwości muszą być zgodne z wzorcem projektowym [role="scrollbar"]:
[aria-controls][aria-valuemin][aria-valuemax][aria-valuenow][aria-orientation][role="scrollbar"]:not([aria-controls]),
[role="scrollbar"]:not([aria-valuemin]),
[role="scrollbar"]:not([aria-valuemax]),
[role="scrollbar"]:not([aria-valuenow]),
[role="scrollbar"]:not([aria-orientation])
<div role="scrollbar">↓</div>
Element interaktywny nie może być umieszczony w innym elemencie interaktywnym (np. <a> w <button>).
a a[href],
button a[href],
a audio[controls],
button audio[controls],
a video[controls],
button video[controls],
a button,
button button,
a details,
button details,
a embed,
button embed,
a iframe,
button iframe,
a img[usemap],
button img[usemap],
a label,
button label,
a select,
button select,
a textarea,
button textarea,
a input[type]:not([hidden]),
button input[type]:not([hidden]),
form form,
label label,
meter meter,
progress progress