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?
Element z [role=img] powinien mieć albo [aria-label] albo [aria-labelledby].
Jeśli obraz jest dekoracyjny, użyj [role=presentation] zamiast [role=img].
<imgalt="I tylko mi src brak"width="144"height="144"/>
Etykieta z pustym atrybutem [for]
Opis
Znacznik <label> z atrybutem [for] powinien oczywiście etykietować coś z atrybutem [id]. W atrybucie [for] musi być wartość [id] etykietowanego elementu. Oczywiście.
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].
Przycisk <button> powinien mieć albo zawartość albo atrybut [aria-label], [aria-labelledby] lub [title]. Atrybuty te, jeśli istnieją, nie mogą być puste.
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"].
<formaction="/"><labelfor="optgroup-test">Oh, hej</label><selectid="optgroup-test"><optgrouplabel="Jestem grupą"><optionvalue="1">Jestem opcją</option><optionvalue="2">Jestem kolejną opcją</option></optgroup><optgroup><optionvalue="3">Jestem opcją, ale z następnej grupy</option><optionvalue="4">Ja też jestem inną opcją, ale z następnej grupy</option></optgroup></select></form>
iframe bez [title]
Opis
<iframe> potrzebuje [title], aby powiedzieć użytkownikowi, czego może się spodziewać w ramce.
<form><labelfor="input">Zgadnij, co zrobimy z Twoimi danymi?</label><inputid="input"type="text"/><inputtype="submit"value="Nie mam pojęcia, co?"/></form>
Język określony nieprawidłowo
Opis
<html> musi wskazywać programom użytkownika naturalny język dokumentu.
Atrybuty zdarzeń Javascript (takie jak [onmouseover]) nie powinny być używane.
Preferuj albo pseudo-klasy CSS (:hover, :focus, :active, etc.) albo obserwatory zdarzeń JS.
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.
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…
Użytkownik powinien mieć możliwość powiększania lub pomniejszania strony, aby poprawić czytelność i wygodę; jest to zwykle dozwolone w <meta> viewport.
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ć.
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.
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”
<formaction="/"><p><labelfor="option-1">Opcja nr 1</label><inputtype="radio"id="option-1"name="options"><span>†</span></p><br><fieldset><legend>Próba w zestawie pól, nie powinna być dopasowana</legend><p><labelfor="option-2">Opcja nr 2</label><inputtype="radio"id="option-2"name="options"><span>†</span></p></fieldset></form>
[role=slider] - brak atrybutów
Opis
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.
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
Test
<ahref="https://lepszyweb.pl">
<button type=button">Chwila, co mam uruchomić?</button></a>