Ostrzeżenia

Niepoprawne zagnieżdżanie na liście

Opis

Jedynym dozwolonym dzieckiem w <ul> i <ol> jest <li> - i odwrotnie jest również prawdziwe.

Bibliografia

Selektor

ul > :not(li),
ol > :not(li),
:not(ul, ol) > li

Test

Czuję się, jakbym się zgubił.

<ul>
  <p>Czuję się, jakbym się zgubił.</p>
</ul>

Niepoprawne rodzeństwo na liście definicji

Opis

Elementy <dt> i <dd> powinny być bezpośrednio sąsiadującym rodzeństwem. I nic więcej. Chociaż wiele <dd> może nastąpić za pojedynczym <dt>.

Bibliografia

Selektor

dt + :not(dd),
:not(dt, dd) + dd

Test

Potrzebna mi definicja, nie sądzisz?

<dl>
  <dt>Potrzebna mi definicja, nie sądzisz?</dt>
  <li>A ja jestem pozycją na liście…</li>
</dl>

Niepoprawne zagnieżdżanie na liście definicji

Opis

Elementy <div>, <dt> i <dd> powinny być bezpośrednimi dziećmi <dl>. Każda inna konstrukcja może być gdzieś naruszeniem.

Bibliografia

Selektor

:not(dl) > dt,
:not(dl) > dd,
dl > :not(dt, dd, div)

Test

Jestem pozycją na liście.

<dl>
  <li>Jestem pozycją na liście.</li>
</dl>

figcaption poza figure

Opis

Element <figcaption> poza <figure> nie ma sensu.

Bibliografia

Selektor

:not(figure) > figcaption

Test

Podpisuję coś pod czymś, czy nie?

<figcaption>Podpisuję coś pod czymś, czy nie?</figcaption>

figure bez roli ARIA group

Opis

Element <figure> potrzebuje atrybutu ARIA [role="group"] ze względu na dostępność.

Bibliografia

Selektor

figure:not([role="group"])

Test

<figure>
  <img src="./static/ffoodd.png" width="144" height="144" alt="Test figcaption"/>
  <figcaption>Jestem figcaption (podpis figure).</figcaption>
</figure>

Niepoprawne zagnieżdżanie

Opis

Niektóre zagnieżdżenia są zabronione i na razie nie mają swoich własnych przypadków testowych:

<main> zawarte w którymkolwiek z <nav>, <aside>, <footer>, <header> lub <article>;
<address> zawarte w którymkolwiek z <address>, <nav>, <aside>, <section>, <footer>, <header> lub <article> — ani w nagłówkach;
<option> i <optgroup> poza <select>;
<legend> poza <fieldset>;
<td> lub <th> poza <tr>;
bezpośrednie dzieci <table>;
<colgroup> zawierające cokolwiek innego niż <col>.

Może inne nieprawidłowe zagnieżdżenia do przetestowania. Bądź na bieżąco.

Bibliografia

Selektor

nav main,
aside main,
footer main,
header main,
article main,
:not(tr) > td,
:not(tr) > th,
colgroup *:not(col),
:not(colgroup) > col,
tr > :not(td, th),
optgroup > :not(option),
:not(select) > optgroup,
:not(fieldset) > legend,
select > :not(option, optgroup),
:not(select, optgroup) > option,
table > *:not(thead, tfoot, tbody, tr, colgroup, caption),
address h1,
address h2,
address h3,
address h4,
address h5,
address h6,
address nav,
address aside,
address header,
address footer,
address address,
address article,
address section

Test

Jestem legendą. Czyżby?

<legend>Jestem legendą. Czyżby?</legend>

Niewłaściwie umieszczony div

Opis

Czy wiesz, że nie powinieneś dodawać <div> wewnątrz jakiegokolwiek elementu liniowego? Zamiast tego możesz użyć <span>.

Bibliografia

https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L326

Selektor

b div,
i div,
q div,
em div,
abbr div,
cite div,
code div,
span div,
small div,
label div,
strong div

Test

Hej ha!

<b><div>Hej ha!</div></b>

Nieprawidłowo użyte znaczniki sekcyjne

Opis

<section>, <aside>, <article> to znaczniki sekcyjne. Nie wolno ich używać jako kontenerów (zamiast div)!

Bibliografia

Selektor

aside > aside:first-child,
article > aside:first-child,
aside > article:first-child,
aside > section:first-child,
section > section:first-child,
article > section:first-child,
article > article:first-child

Test

<aside>
  <section>Jestem opakowany, wiesz.</section>
</aside>

legend w fieldset musi być :first-child

Opis

<legend> w elemencie <fieldset> musi być pierwszym dzieckiem :first-child. Zawsze.

Bibliografia

Selektor

fieldset > *:not(legend):first-child,
fieldset > legend:not(:first-child)

Test

Nie jestem legendą

<fieldset>
  <label>Nie jestem legendą</label>
</fieldset>

summary w details musi być :first-child

Opis

<summary> w elemencie <details> musi być pierwszym dzieckiem (:first-child). Zawsze.

Bibliografia

Selektor

details > *:not(summary):first-child,
details > summary:not(:first-child)

Test

Nie jestem elementem summary

<details>
  <legend>Nie jestem elementem summary</legend>
</details>

abbr powinien mieć [title]

Opis

Każdy skrót powinien zawierać wyjaśnienie jego znaczenia, przynajmniej przy pierwszym wystąpieniu.

Bibliografia

Selektor

abbr:not([title]),
abbr[title=" "],
abbr[title=""]

Test

Co wiesz o W3C?

<p>Co wiesz o <abbr>W3C</abbr>?</p>

[alt] może być pusty, ale wymaga sprawdzenia

Opis

Wartość [alt] może być pusta, jeśli obraz jest tylko dekoracyjny. W każdym innym przypadku tekst [alt] musi być zdefiniowany. Sprawdź to dwa razy.

Bibliografia

Selektor

img[alt=""],
area[alt=""],
input[type="image"][alt=""],
embed[type="image"][alt=""],
object[type="image"][alt=""]

Test

†

<img alt="" src="./static/ffoodd.png" width="144" height="144" /><span>†</span>

[alt] zawiera nazwę pliku

Opis

Nazwa pliku w [alt] jest prawdopodobnie błędem automatyzacji… i nigdy nie pomoże żadnemu użytkownikowi.

Bibliografia

Selektor

img[alt$=".pdf"],
area[alt$=".pdf"],
input[type="image"][alt$=".pdf"],
img[alt$=".doc"],
area[alt$=".doc"],
input[type="image"][alt$=".doc"],
img[alt$=".png"],
area[alt$=".png"],
input[type="image"][alt$=".png"],
img[alt$=".jpg"],
area[alt$=".jpg"],
input[type="image"][alt$=".jpg"],
img[alt$=".gif"],
area[alt$=".gif"],
input[type="image"][alt$=".gif"],
img[alt$=".mp3"],
area[alt$=".mp3"],
input[type="image"][alt$=".mp3"],
img[alt$=".mp4"],
area[alt$=".mp4"],
input[type="image"][alt$=".mp4"],
img[alt$=".mov"],
area[alt$=".mov"],
input[type="image"][alt$=".mov"],
img[alt$=".ogg"],
area[alt$=".ogg"],
input[type="image"][alt$=".ogg"],
img[alt$=".xls"],
area[alt$=".xls"],
input[type="image"][alt$=".xls"],
img[alt$=".txt"],
area[alt$=".txt"],
input[type="image"][alt$=".txt"],
img[alt$=".zip"],
area[alt$=".zip"],
input[type="image"][alt$=".zip"],
img[alt$=".rar"],
area[alt$=".rar"],
input[type="image"][alt$=".rar"],
img[alt$=".docx"],
area[alt$=".docx"],
input[type="image"][alt$=".docx"],
img[alt$=".webp"],
area[alt$=".webp"],
input[type="image"][alt$=".webp"],
img[alt$=".apng"],
area[alt$=".apng"],
input[type="image"][alt$=".apng"],
img[alt$=".svg"],
area[alt$=".svg"],
input[type="image"][alt$=".svg"],
img[alt$=".svgz"],
area[alt$=".svgz"],
input[type="image"][alt$=".svgz"],
embed[type="image"][alt$=".pdf"],
object[type="image"][alt$=".pdf"],
embed[type="image"][alt$=".doc"],
object[type="image"][alt$=".doc"],
embed[type="image"][alt$=".png"],
object[type="image"][alt$=".png"],
embed[type="image"][alt$=".jpg"],
object[type="image"][alt$=".jpg"],
embed[type="image"][alt$=".gif"],
object[type="image"][alt$=".gif"],
embed[type="image"][alt$=".mp3"],
object[type="image"][alt$=".mp3"],
embed[type="image"][alt$=".mp4"],
object[type="image"][alt$=".mp4"],
embed[type="image"][alt$=".mov"],
object[type="image"][alt$=".mov"],
embed[type="image"][alt$=".ogg"],
object[type="image"][alt$=".ogg"],
embed[type="image"][alt$=".xls"],
object[type="image"][alt$=".xls"],
embed[type="image"][alt$=".txt"],
object[type="image"][alt$=".txt"],
embed[type="image"][alt$=".zip"],
object[type="image"][alt$=".zip"],
embed[type="image"][alt$=".rar"],
object[type="image"][alt$=".rar"],
embed[type="image"][alt$=".docx"],
object[type="image"][alt$=".docx"],
embed[type="image"][alt$=".webp"],
object[type="image"][alt$=".webp"],
embed[type="image"][alt$=".apng"],
object[type="image"][alt$=".apng"],
embed[type="image"][alt$=".svg"],
object[type="image"][alt$=".svg"],
embed[type="image"][alt$=".svgz"],
object[type="image"][alt$=".svgz"]

Test

†

<img alt="/static/ffoodd.png" src="./static/ffoodd.png" width="144" height="144" /><span>†</span>

Obraz dekoracyjny nie powinien mieć dostępnej nazwy

Opis

Żaden ozdobny obraz - z [aria-hidden="true"] lub pustym [alt] — nie powinien mieć żadnego z tych elementów:

[title];
[aria-label];
[aria-labelledby];
[aria-describedby];
potomne <title>;
lub potomne <desc>.

Ten test obecnie nie może sprawdzić czy istnieje jakiekolwiek dziecko <title> lub <desc>, ponieważ <svg> jest elementem zastąpionym.

Zobacz Przypadki skrajne i znane problemy na wiki a11y.css'.

Bibliografia

Selektor

img[alt=""][title],
img[alt=""][aria-label],
img[alt=""][aria-labelledby],
img[alt=""][aria-describedby],
area:not([href])[alt]:not([alt=""]),
area:not([href])[alt=""][title],
area:not([href])[alt=""][aria-label],
area:not([href])[alt=""][aria-labelledby],
area:not([href])[alt=""][aria-describedby],
svg[aria-hidden="true"][title],
svg[aria-hidden="true"][aria-label],
svg[aria-hidden="true"][aria-labelledby],
svg[aria-hidden="true"][aria-describedby],
canvas[aria-hidden="true"][title],
canvas[aria-hidden="true"][aria-label],
canvas[aria-hidden="true"][aria-labelledby],
canvas[aria-hidden="true"][aria-describedby],
embed[type="image"][aria-hidden="true"][title],
embed[type="image"][aria-hidden="true"][aria-label],
embed[type="image"][aria-hidden="true"][aria-labelledby],
embed[type="image"][aria-hidden="true"][aria-describedby],
object[type="image"][aria-hidden="true"][title],
object[type="image"][aria-hidden="true"][aria-label],
object[type="image"][aria-hidden="true"][aria-labelledby],
object[type="image"][aria-hidden="true"][aria-describedby],

Test

†

<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg"
     aria-hidden="true" title="Ozdobny SVG, mistrz z ciebie!">
  <rect x="400" y="100" width="400" height="200"
        fill="forestgreen" stroke="darkgreen" stroke-width="10"  />
</svg><span>†</span>

[role=presentation] nie powinna być używana dla obrazu

Opis

Każdy obraz dekoracyjny powinien być oznaczony [aria-hidden="true"] (lub pustym [alt], jeśli to element<img>). [role=presentation] spowinno załatwić sprawę, ale w momencie pisania tego tekstu, jego wsparcie jest zbyt niskie w porównaniu do pustego [alt] lub [aria-hidden=true].

Bibliografia

Selektor

img[role="presentation"],
svg[role="presentation"],
area[role="presentation"],
embed[role="presentation"],
canvas[role="presentation"],
object[role="presentation"]

Test

†

<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg"
     role="presentation">
  <rect x="400" y="100" width="400" height="200"
        fill="forestgreen" stroke="darkgreen" stroke-width="10"  />
</svg><span>†</span>

Rola jest wymagana dla svg

Opis

Każdy <svg> powinien mieć albo [aria-hidden="true"], jeśli ma charakter dekoracyjny, albo [role="img"], jeśli ma charakter informacyjny.

Bibliografia

Selektor

svg:not([aria-hidden="true"], [role="img"])

Test

†

<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg"
     aria-label="Ozdobny SVG, mistrz z ciebie!">
  <rect x="400" y="100" width="400" height="200"
        fill="forestgreen" stroke="darkgreen" stroke-width="10"  />
</svg><span>†</span>

[autoplay] raczej nie powinnno być użyte

Opis

Media oparte na czasie, takie jak <audio> lub <video> nie powinny być odtwarzane automatycznie , bo może to być dość zaskakujące dla użytkownika.

Bibliografia

Selektor

video[autoplay],
audio[autoplay]

Test

†

<video autoplay controls src=""></video><span>†</span>

[controls] byłoby pomocne

Opis

Medium oparte na czasie, takie jak <audio> lub <video> będzie łatwiejsze w użyciu, jeśli [controls] są aktywowane dla użytkownika.

Bibliografia

Selektor

video:not([controls]),
audio:not([controls])

Test

†

<video src=""></video><span>†</span>

Większość węzłów DOM nie może być :empty

Opis

Oczywiście elementy void są puste, tak samo jak <iframe> i <textarea> mogą być :empty (puste). Każdy inny znacznik :empty, który nie jest ukryty, jest prawdopodobnie bezużyteczny i powinien zostać usunięty.

Zauważ, że nie dotyczy to znaczników posiadających źródło wskazane w [src]. Jest to raczej opinia, ale ma na celu uniknięcie fałszywych alarmów w odniesieniu do takich znaczników jak <video> lub <audio>, które mogą być puste, jeśli mają co najmniej jedno źródło określone przez [src].

Uwagi

Ten test dotyczy tylko znaczników w <body>, ponieważ większość znaczników w head powinna być pusta.
<button> oraz <a> oraz również wyłączone, ponieważ button:empty oraz a:empty są objęte ich własnym błędem.

Moglibyśmy użyć pseudo-klasy :blank, ale w tym momencie jej wsparcie jest bardzo słabe. Moglibyśmy również użyć pseudoklasy :-moz-only-whitespace pseudo-class, ale jej wsparcie jest ograniczone do Firefoxa i w ten sposób moglibyśmy unieważnić nasz stos selektorów…

Bibliografia

Selektor

body *:empty:not([hidden], [aria-hidden], [src], button, a, iframe, textarea, area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr, title)

### Test

html

```

Możliwe użycie jednowierszowej tabeli układu

Opis

Samotny <tr> może być symptomem tabeli użytej do układu. Sprawdź to dwa razy!

Bibliografia

Selektor

table:not([role="presentation"]) > tr:only-child,
table:not([role="presentation"]) > tbody > tr:only-child

Test

Jestem podpisem :3
O rany…
Jestem biednym samotnym rzęęęędem tabeli!

<table>
  <caption>Jestem podpisem :3</caption>
  <thead>
    <tr>
      <th scope="col">O rany…</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jestem biednym samotnym rzęęęędem tabeli!</td>
    </tr>
  </tbody>
</table>

Zagnieżdżone tabele

Opis

Nie ma dobrego powodu, aby zagnieżdżać tabele danych: więc prawdopodobnie oznacza to, że mamy do czynienia z tabelą układu…

Bibliografia

Selektor

table table

Test

Jestem podpisem :3

O rany…

Jestem komórką tabeli!

Ja też jestem podpisem
O rany…
Jestem komórką tabeli!
Jestem komórką tabeli!

<table>
  <caption>Jestem podpisem :3</caption>
  <thead>
    <tr>
      <th scope="col">O rany…</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jestem komórką tabeli!</td>
    </tr>
    <tr>
      <td>
        <table>
          <caption>Ja też jestem podpisem</caption>
          <thead>
            <tr>
              <th scope="col">O rany…</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Jestem komórką tabeli!</td>
            </tr>
            <tr>
              <td>Jestem komórką tabeli!</td>
            </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Każda tabela danych musi mieć podpis

Opis

<caption> jest potrzebny dla <table> z danymi. I to musi być :first-child, tak przy okazji.

Bibliografia

Selektor

table:not([role="presentation"]) > caption:not(:first-child),
table:not([role="presentation"]) > *:first-child:not(caption)

Test

Jestem tabelą bez podpisu!	Jestem tabelą bez podpisu!
Jestem tabelą bez podpisu!
Jestem tabelą bez podpisu!

<table>
  <thead>
    <tr>
      <th id="th-one">Jestem tabelą bez podpisu!</th>
      <th id="th-two">Jestem tabelą bez podpisu!</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" headers="th-one th-two">Jestem tabelą bez podpisu!</td>
    </tr>
    <tr>
      <td colspan="2" headers="th-one th-two">Jestem tabelą bez podpisu!</td>
    </tr>
  </tbody>
</table>

Niepoprawna struktura tabeli

Opis

<thead>, <tfoot> oraz <tbody> muszą występować w tej kolejności.

Bibliografia

Selektor

table > tfoot ~ thead,
table > tbody ~ tfoot,
table > tbody ~ thead,
table > tfoot ~ colgroup,
table > tbody ~ colgroup,
table > tbody ~ colgroup

Test

Jestem podpisem
Gdzie jest moja stopka?
Jestem tabelą ze źle zrobioną stopką.	Jestem tabelą ze źle zrobioną stopką.
Jestem tabelą ze źle zrobioną stopką.	Jestem tabelą ze źle zrobioną stopką.
Jestem tabelą ze źle zrobioną stopką.	Jestem tabelą ze źle zrobioną stopką.

<table>
  <caption>Jestem podpisem</caption>
  <thead>
    <tr>
      <th scope="col">Gdzie jest moja stopka?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jestem tabelą ze źle zrobioną stopką.</td>
      <td>Jestem tabelą ze źle zrobioną stopką.</td>
    </tr>
    <tr>
      <td>Jestem tabelą ze źle zrobioną stopką.</td>
      <td>Jestem tabelą ze źle zrobioną stopką.</td>
    </tr>
  </tbody>
  <tfoot>
    <th id="th-1">Jestem tabelą ze źle zrobioną stopką.</th>
    <th id="th-2">Jestem tabelą ze źle zrobioną stopką.</th>
  </tfoot>
</table>

Brak nagłówka w tabeli danych

Opis

<thead> jest bardzo potrzebny, jeśli istnieje <tbody>.

Selektor

table:not([role="presentation"]) > caption + tbody,
table:not([role="presentation"]) > tbody:first-child

Test

Brakuje thead
Jestem tabelą bez thead.	Jestem tabelą bez thead.
Jestem tabelą bez thead.	Jestem tabelą bez thead.

<table>
  <caption>Brakuje thead</caption>
  <tbody>
    <tr>
      <td>Jestem tabelą bez thead.</td>
      <td>Jestem tabelą bez thead.</td>
    </tr>
    <tr>
      <td>Jestem tabelą bez thead.</td>
      <td>Jestem tabelą bez thead.</td>
    </tr>
  </tbody>
</table>

th bez [scope] lub [id]

Opis

<th> usilnie potrzebuje [id] lub [scope].

Bibliografia

Selektor

th:not([scope]):not([id])

Test

Potrzebne [scope] lub [id]
Jestem bez [scope] lub [id].	Jestem th ze [scope].
Jestem td i czegoś mi brakuje.	Jestem td i czegoś mi brakuje.
Jestem td i czuje się dobrze.	Jestem td i czuje się dobrze.

<table>
  <caption>Potrzebne [scope] lub [id]</caption>
  <thead>
    <tr>
      <th>Jestem bez [scope] lub [id].</th>
      <th scope="col">Jestem th ze [scope].</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jestem td i czegoś mi brakuje.</td>
      <td>Jestem td i czegoś mi brakuje.</td>
    </tr>
    <tr>
      <td>Jestem td i czuje się dobrze.</td>
      <td>Jestem td i czuje się dobrze.</td>
    </tr>
  </tbody>
</table>

Użyto spacer.gif

Opis

Uwierz mi, to jeszcze musi zostać przetestowane.

Bibliografia

https://www.la-grange.net/2015/03/11/visible

Selektor

img[src*="1px.gif"]:not([role="presentation"]),
img[src*="1x1.gif"]:not([role="presentation"]),
img[src*="clear.gif"]:not([role="presentation"]),
img[src*="spacer.gif"]:not([role="presentation"]),
img[src*="dotclear.gif"]:not([role="presentation"]),
img[src*="transparent.gif"]:not([role="presentation"]),
img[src*="pixel-1x1-clear.gif"]:not([role="presentation"])

Test

†

<img src="./static/spacer.gif" alt="Spacer.gif" width="100" height="100"/><span>†</span>

Zła wyliczona wartość

Opis

Nie śmiej się, to się zdarza.

Selektor

[id*="NaN"],
[id*="null"],
[class*="NaN"],
[class*="null"],
[id*="undefined"],
[class*="undefined"]

Test

Oops, coś poszło nie tak.

<p class="undefined">Oops, coś poszło nie tak.</p>

JS [href]

Opis

Atrybut [href] nie powinien zaczynać się od "javascript". Prawdopodobnie powinien to być <button> lub przynajmniej element z [role="button"], nie sądzisz? Jedynym wyjątkiem są skryptozakładki.

Bibliografia

https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L165

Selektor

a[href^="javascript"]:not([role="button"])

Test

Please use my bookmarklet ;)

<a href="javascript:(function(){a11ycss=document.createElement('LINK');a11ycss.href='https://rawgit.com/ffoodd/a11y.css/master/css/a11y-en.css';a11ycss.rel='stylesheet';a11ycss.media='all';document.body.appendChild(a11ycss);})();">Please use my bookmarklet ;)</a>

# [href]

Opis

Atrybut [href] zawiera tylko #. Prawdopodobnie powinien to być <button> lub przynajmniej [role="button"]. Co myślisz?

Bibliografia

https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L165

Selektor

a[href="#"]:not([role="button"])

Test

O rany, ja nic nie znaczę.

<a href="#">O rany, ja nic nie znaczę.</a>

Atrybut [style]

Opis

Twoje style powinny być sterowane przez plik CSS. To wszystko. I nie, JS nie powinien manipulować stylami: lepiej jest bawić się klasami.

Bibliografia

Selektor

[style]

Test

Jestem czerwony. Naprawdę czuję się brudny.

<div style="color: red;">Jestem czerwony. Naprawdę czuję się brudny.</div>

Niezabezpieczone [target=_blank]

Opis

Łącza [target="_blank"] mogą być wykorzystywane do wyłudzania informacji. Właściwie nie jest to problem związany z dostępnością, ale wszystko co pomaga użytkownikom jest mile widziane.

Bibliografia*

Selektor

[target$="blank"]:not([rel]),
[target$="blank"]:not([rel*="noopener"]),
[target$="blank"]:not([rel*="noreferrer"])

Test

Czuję się bezbronne...

<a href="/" target="_blank">Czuję się bezbronne...</a>

Brak [aria-level]

Opis

Chociaż [aria-level] nie jest wymagany przez specyfikację ARIA, w rzeczywistości lepiej jest go podać.

Bibliografia

Selektor

[role="heading"]:not([aria-level])

Test

Nagłówek z nieokreślonym poziomem

<strong role="heading">Nagłówek z nieokreślonym poziomem</strong>

label bez atrybutu [for]

Opis

Znacznik <label> coś etykietuje, w teorii. Chociaż domyślne etykietowanie kontrolek formularzy jest akceptowane, prawdopodobnie lepiej jest dwukrotnie sprawdzić, czy kontrolka formularza jest naprawdę zagnieżdżona w swojej <label>.

Bibliografia

Selektor

label:not([for])

Test

Zgadnij co to?

<label>Zgadnij co to?</label>

Niespójne [dir] i [lang]

Opis

Niektóre języki - jak arabski czy hebrajski - wymagają przełączenia kierunku tekstu za pomocą [dir="rtl"], ponieważ domyślnym kierunkiem tekstu jest od lewej do prawej. Wymaga to również sprawdzenia każdej zmiany języka strony (oznaczonej za pomocą [lang]) w arabskiej lub hebrajskiej treści, aby zdefiniować również [dir].

Bibliografia

Selektor

[lang="ar"]:not([dir="rtl"]),
[lang="he"]:not([dir="rtl"]),
[lang="ar"] [lang]:not([dir="ltr"]),
[lang="he"] [lang]:not([dir="ltr"]),
[dir="rtl"]:not([lang="ar"], [lang="he"])

Test

Mhhm, jestem trochę zdezorientowany…

<p dir="rtl" lang="en">Mhhm, jestem trochę zdezorientowany…</p>