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

† 
<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

[class=""],
[class=" "]

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

[id=""],
[id=" "]

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.
Potrzebny
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

Potrzebny
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

[href^="mailto"]

Test

Niespo-dzianka! 
<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

[href^="tel"]

Test

Do kogo zadzwonię? 
<a href="tel:012345678">Do kogo zadzwonię?</a>

[role=button] w łączu

Opis

Oczywiście, rola przycisku w znaczniku łącza nie jest chyba tak trudna do przeniesienia do autentycznego znacznika przycisku, prawda?

Bibliografia

Selektor

a[role="button"]

Test

Wyślij 
<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

[target$="blank"]

Test

Nowa karta 
<a href="/" target="_blank" rel="noopener noreferrer">Nowa karta</a>

Łącze do pliku

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

Chcesz złożyć wniosek? 
<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

† 
<input type="text" placeholder="Zobacz mamo, nie ma etykiety!" id="test"><span>†</span>

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

video,
audio

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

Jestem tekstem alternatywnym!† 
<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

time,
[datetime]

Test

<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

th[scope]

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

a:not([href])

Test

Kim jestem? Gdzie prowadzę? 
<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

Protokół mojego celu nie jest zabezpieczony 
<a href="http://www.ffoodd.fr/">Protokół mojego celu nie jest zabezpieczony</a>