Porady
<select required> powinien zaczynać się od <option> z pustą [value]
Opis
Element <select required>
, który nie jest [multiple]
i którego [size]
nie jest większy niż 1
, powinien zaczynać się od pustej <option>
.
Biorąc to pod uwagę, możesz użyć zawartości placeholder dla tej opcji, ale musisz upewnić się, że używasz pustego atrybutu [value]
lub ustawić atrybut [size]
do <select>
,
którego wartość powinna być równa liczbie <option>
.
Bibliografia
Selektor
select[required]: not ( [multiple]) [size="1" ],
select[required]: not ( [multiple], [size])
Test
Ser
Salami
†
< select name = " slices" required >
< option value = " 1" > Ser</ option>
< option value = " 2" > Salami</ option>
</ select> < span> †</ span>
Pusty atrybut [class]
Opis
Atrybut [class]
nie powinien istnieć, jeśli jest pusty. Coś do poprawienia, prawda?
Selektor
Test
Czemu tu jest atrybut klasy?
< b class = " " > Czemu tu jest atrybut klasy?</ b>
Pusty atrybut [id]
Opis
[id]
nie powinien istnieć, jeśli jest pusty. Podziękujesz mi później.
Selektor
Test
Chwila. Dlaczego mój ID jest pusty?
< i id = " " > Chwila. Dlaczego mój ID jest pusty?</ i>
Drugi znacznik main
Opis
W danym momencie powinien być widoczny tylko jeden <main>
. Czy to nie jest oczywiste?
Bibliografia
Selektor
main ~ main : not ( [hidden])
Test
Ja jestem główną treścią!
Nie, to ja jestem!
< main> Ja jestem główną treścią!</ main>
< main> Nie, to ja jestem!</ main>
Drugi znacznik figcaption
Opis
Tylko jeden <figcaption>
powinien być wewnątrz swojego rodzica. Sprawdź specyfikację!
Bibliografia
Selektor
figcaption : not ( : first-of-type)
Test
Jestem podpisem.
Ja też jestem podpisem.
< figure role = " group" >
< figcaption> Jestem podpisem.</ figcaption>
< img src = " ./static/ffoodd.png" alt = " Potrzebny" width = " 144" height = " 144" />
< figcaption> Ja też jestem podpisem.</ figcaption>
</ figure>
Kolejność figcaption
Opis
Element <figcaption>
powinien być pierwszym lub ostatnim dzieckiem. Nie inaczej.
Bibliografia
Selektor
figcaption : not ( : first-child, : last-child)
Test
Jestem podpisem.
Jestem kimś innym. Oh, czekaj.
< figure role = " group" >
< img src = " ./static/ffoodd.png" alt = " Potrzebny" width = " 144" height = " 144" />
< figcaption> Jestem podpisem.</ figcaption>
< p> Jestem kimś innym. Oh, czekaj.</ p>
</ figure>
Łącze e-mail powinno być poprawne
Opis
Łącze <href="mailto:">
powinnno mieć poprawny adres e-mail.
W przeciwnym razie możesz zirytować swoich użytkowników.
Selektor
Test
< a href = " mailto:dosiebie" > Niespo-dzianka!</ a>
Łącze telefoniczne powinno dzwonić pod rzeczywisty numer
Opis
Łącze <href="tel:">
powinnno powinno zawierać prawidłowy numer telefonu.
W przeciwnym razie możesz zmusić użytkowników do dzwonienia do Berdyczowa.
Selektor
Test
< a href = " tel:012345678" > Do kogo zadzwonię?</ a>
Opis
Oczywiście, rola przycisku w znaczniku łącza nie jest chyba tak trudna do przeniesienia do autentycznego znacznika przycisku, prawda?
Bibliografia
Selektor
Test
< a href = " /" role = " button" > Wyślij</ a>
Łącze otwiera nową kartę
Opis
Łącze otwierające nową kartę lub okno powinno ostrzegać użytkownika o swoim zachowaniu.
Możesz użyć na przykład [title]
.
Bibliografia
Selektor
Test
< a href = " /" target = " _blank" rel = " noopener noreferrer" > Nowa karta</ a>
Opis
Łącze do pliku powinno wskazywać format pliku, rozmiar pliku oraz język pliku, jeśli jest inny niż w dokumencie głównym.
Bibliografia
Selektor
[download],
[href$=".pdf" ]: not ( link) ,
[href$=".doc" ]: not ( link) ,
[href$=".png" ]: not ( link) ,
[href$=".jpg" ]: not ( link) ,
[href$=".gif" ]: not ( link) ,
[href$=".mp3" ]: not ( link) ,
[href$=".mp4" ]: not ( link) ,
[href$=".mov" ]: not ( link) ,
[href$=".ogg" ]: not ( link) ,
[href$=".xls" ]: not ( link) ,
[href$=".txt" ]: not ( link) ,
[href$=".zip" ]: not ( link) ,
[href$=".rar" ]: not ( link) ,
[href$=".docx" ]: not ( link) ,
[href$=".webp" ]: not ( link) ,
[href$=".apng" ]: not ( link) ,
[href$=".svg" ]: not ( link) ,
[href$=".svgz" ]: not ( link)
Test
< a href = " /file.png" > Chcesz złożyć wniosek?</ a>
Powtórzona rola
Opis
Niektóre role ARIA powinny być unikalne: [main]
, [search]
, [banner]
, [contentinfo]
.
Bibliografia
Selektor
[role="main" ] ~ [role="main" ],
[role="search" ] ~ [role="search" ],
[role="banner" ] ~ [role="banner" ],
[role="contentinfo" ] ~ [role="contentinfo" ]
Test
< main role = " main" > < br /> </ main>
< div role = " main" > < br /> </ div>
Może pełni [role] search?
Opis
Elementy z [class]
lub [id]
zawierające search mogą mieć [role]
wyszukiwania.
Bibliografia
Selektor
[id*="search" ]: not ( [role="search" ]) ,
[class*="search" ]: not ( [role="search" ])
Test
< form class = " search" action = " " >
< label for = " field" > Szukaj</ label>
< input type = " search" id = " field" /> < span> †</ span>
</ form>
Czy to wygląda jak [required]?
Opis
Pole wymagane - [required]
lub [aria-required]
powinno być wskazane wizualnie.
Bibliografia
Selektor
[required],
[aria-required]
Test
< form action = " " >
< label for = " field" > Drobiazg</ label>
< textarea id = " field" required > </ textarea> < span> †</ span>
</ form>
Nie :puste [hidden] rzeczy
Opis
Użycie [hidden]
lub [aria-hidden]
może nie być dobrym pomysłem na ukrycie treści.
Bibliografia
Selektor
[hidden]: not ( : empty) ,
[aria-hidden="true" ]: not ( : empty)
Test
< a href = " /" aria-hidden = " true" > Ważna rzecz!</ a>
Placeholder nie może zastępować etykiety
Opis
Przecież [placeholder]
nie jest etykietą, prawda?
Selektor
[placeholder]: not ( [title]) : not ( [aria-label]) : not ( [aria-labelledby])
Test
Rzeczy dla video lub audio
Opis
Elementy <video>
lub <audio>
potrzebują kilku rzeczy, aby były dostępne, takich jak transkrypcja, napisy rozszerzone, kontrolki.
Bibliografia
Selektor
Test
†
< video src = " /" controls > </ video> < span> †</ span>
[title] powinnien być równy alt
Opis
[title]
każdej treści graficznej powinien być taki sam jak [aria-label]
lub [alt]
.
Bibliografia
Selektor
img[alt][title],
area[alt][title],
svg[aria-label][title]
Test
†
< img src = " ./static/ffoodd.png" alt = " Jestem tekstem alternatywnym!" title = " Jestem tytułem!" height = " 144" width = " 144" > < span> †</ span>
Data i godzina powinny być zrozumiałe
Opis
Zawartość <time>
lub [datetime]
powinna być zrozumiałą i dobrze sformułowaną datą.
Selektor
Test
Wczoraj
< time> Wczoraj</ time>
[scope] powinien być albo col albo row
Opis
Wartość [scope]
może być col
lub row
(i nic innego) i musi być istotna.
Bibliografia
Selektor
Test
Jestem podpisem
Pierwsza kolumna
Druga kolumna
Pierwsza komórka
Druga komórka
Pierwsza komórka
Druga komórka
< table>
< caption> Jestem podpisem</ caption>
< thead>
< tr>
< th scope = " col" > Pierwsza kolumna</ th>
< td> Druga kolumna</ td>
</ tr>
</ thead>
< tbody>
< tr>
< td> Pierwsza komórka</ td>
< td> Druga komórka</ td>
</ tr>
< tr>
< td> Pierwsza komórka</ td>
< td> Druga komórka</ td>
</ tr>
</ tbody>
</ table>
Użyto tabeli układu
Opis
Atrybut [role="presentation"]
jest dobrym pomysłem dla każdej <table>
używanej dla układu, ale złą rzeczą dla tabeli danych. Sprawdź to dwa razy!
Bibliografia
Selektor
table[role="presentation" ]
Test
Pierwsza komórka
Druga komórka
Pierwsza komórka
Druga komórka
< table role = " presentation" >
< tr>
< td> Pierwsza komórka</ td>
< td> Druga komórka</ td>
</ tr>
< tr>
< td> Pierwsza komórka</ td>
< td> Druga komórka</ td>
</ tr>
</ table>
Brak [href]
Opis
Czy poprawne jest pominięcie atrybutu [href]
w łączu? Prawdopodobnie lepiej to sprawdzić dwa razy, prawda?
Bibliografia
Selektor
Test
< a> Kim jestem? Gdzie prowadzę?</ a>
URL nie HTTPS
Opis
Gdy to możliwe, staraj się używać HTTPS.
Bibliografia
Selektor
[src^="http:" ],
[href^="http:" ]
Test
< a href = " http://www.ffoodd.fr/" > Protokół mojego celu nie jest zabezpieczony</ a>