Pracownia Dostępności Cyfrowej. LepszyWeb.pl ANDI

Przejdź do treści

Alerty ANDI

Na tej stronie znajdują się szczegółowe informacje na temat alarmów dostępności zgłaszanych przez ANDI.

Co to jest alert dostępności?

Po uruchomieniu ANDI automatycznie analizuje każdy element HTML znajdujący się obecnie na stronie w poszukiwaniu warunków, które powodują problemy z dostępnością. Po znalezieniu takiego warunku ANDI generuje alert, który pomaga użytkownikowi zidentyfikować potencjalne problemy z dostępnością.

Ta strona pomocy wyjaśnia warunki, które powodują wyświetlanie alertów, powód ich pojawienia się oraz sposób rozwiązania lub dalszego zbadania problemu.

Jakie są poziomy alertów?

Alerty są podzielone na trzy poziomy priorytetów:

1. danger icon Alerty „czerwone” - Zagrożenia: zawierające ikonę trójkąta z literą „x” oznaczają najwyższy poziom alertów
Alerty „czerwone” informują, że wady dostępności są niemal pewne. Należy je poprawić, aby zapewnić dostępność strony.
2. warning icon Alerty „pomarańczowe” - Ostrzeżenia: zawierające ikonę trójkąta z „!” oznaczają umiarkowany poziom
Alerty „pomarańczowe” mówią, że istnieje duże prawdopodobieństwo przekazania użytkownikom niespójnych informacji.
3. caution icon Alerty „żółte” - Uwagi: zawierające ikonę trójkąta z „?” oznaczają najniższy poziom alertu
Alerty „żółte” sygnalizują, że mogą istnieć problemy z dostępnością, ale wymagają dalszych badań.

Czy alert oznacza, że na pewno jest problem?

Nie zawsze. To człowiek musi ocenić wyniki ANDI i podjąć ostateczną decyzję, czy występuje problem z dostępnością. ANDI jest jedynie narzędziem kontrolnym wykorzystywanym do tego celu.

Alert: Brak dostępnej nazwy.

  • danger icon Element formularza nie ma dostępnej nazwy, powiązanej etykiety ani tytułu (title).
  • danger icon Element nie ma dostępnej nazwy, treści tekstowej, ani tytułu (title).
  • danger icon Obraz nie ma dostępnej nazwy - alt ani tytułu (title).
  • danger icon Tabela nie ma dostępnej nazwy, podpisu (caption) ani tytułu.
  • danger icon Rycina (Figure) nie ma dostępnej nazwy, opisu ani tytułu.
  • danger icon %%% element nie ma dostępnej nazwy.
  • danger icon Element iframe nie ma dostępnej nazwy ani [tytułu].

Dlaczego ANDI zgłasza to ostrzeżenie?

Wskazany element nie ma oznakowania HTML, które zapewniłoby mu dostępną nazwę. Jest to najczęstszy alert.

Dlaczego dotyczy to dostępności?

Czytnik ekranu albo nie poinformuje o istnieniu tego elementu, albo może próbować zgadnąć, co to jest i przekazać swój domysł.

Co należy zrobić?

Dodaj oznakowanie HTML, które przekaże nazwę elementu. Użyj odpowiedniego sposobu nazywania (identyfikacji), zależnie od rodzaju elementu:

  • Wszystkie elementy mogą korzystać z atrybutów aria-labelledby lub aria-label.
  • Elementy formularza mogą używać wyrażenia jawnego powiązania znacznika <label> za pomocą atrybutu for for wskazującego na id elementu formularza, lub może objąć elementem <label> element formularza.
  • Obrazy mogą korzystać z atrybutu alt.
  • Tabele mogą używać <caption>.
  • Ryciny (<figure>) mogą używać znacznika <figcaption>.
  • Kontenery typu <p>, <div>, <li>, itd. mogą zawierać tekst, który spełnia rolę ich nazwy.
  • Wszystkie elementy mogą korzystać z atrybutu title.
Dowiedz się więcej o dostępnej nazwie

Alert: Tekst pomocniczy, ale brak nazwy.

  • warning icon Podano tekst pomocniczy (placeholder), ale element nie ma dostępnej nazwy.

Dlaczego ANDI zgłasza ten alert?

Wskazane pole (<input>) lub obszar tekstowy formularza (<textarea>) nie posiada elementów, które zapewniłyby mu dostępną nazwę. Posiada tylko atrybut placeholder, który takiej nazwy nie zapewnia.

Dlaczego dotyczy to dostępności?

Czytnik ekranu może odczytać tekst atrybutu placeholder, ale tekst pomocniczy nie jest wykorzystywany do „obliczania” dostępnej nazwy. Gdy pole otrzymuje fokus, tekst pomocniczy znika.

Co należy zrobić?

Dodaj jeszcze określnik lub opis, który zapewni elementowi dostępną nazwę, używając atrybutów aria-labelledby, aria-label lub znacznika <label>.

Dowiedz się więcej o dostępnej nazwie

Alert: Zduplikowany identyfikator.

  • danger icon [%%%] odnosi się do zduplikowanego id [id=%%%]; Identyfikatory elementów muszą być unikalne.
  • danger icon Element posiada zduplikowany identyfikator, do którego odwołuje się <label[for]>; Identyfikatory elementów muszą być unikalne.

Dlaczego ANDI zgłasza ten alert?

Wskazany element posiada komponent dostępności, który odwołuje się do zduplikowanego (powtórzonego) id. Ponieważ id jest powtórzony, niejasne jest, do którego elementu faktycznie odnosi się odwołanie.

Dlaczego dotyczy to dostępności?

HTML wymaga, aby wartości atrybutów id były unikalne. Niektóre komponenty dostępności odwołują się do innych elementów za pomocą id. Jeśli id kilku elementów są takie same (zduplikowane, powtórzone), komponent dostępności może odwołać się do niewłaściwego elementu i w efekcie dane wyjściowe czytnika ekranu i innych technologii wspomagających mogą być niepoprawne.

Komponentami dostępności, które używają odwołań za pomocą id są: aria-labelledby, aria-describedby, komórki tabeli headers, atrybut for znacznika <label>, i wiele innych atrybutów aria-*.

Oprócz problemów z dostępnością, gdy id nie są unikalne, mogą także wystąpić problemy ze zdarzeniami JavaScript, ponieważ do duplikatów identyfikatorów odwołuje się popularna metoda JavaScript getElementById.

Skąd się bierze problem?

Problem często jest wynikiem kopiowania i wklejania elementów przez programistę, który potem zapomina zmienić id. Możliwe również, że programista może nie wiedzieć, iż zgodnie ze standardami W3C identyfikatory muszą być unikalne.

Co należy zrobić?

Popraw wartość każdego id na stronie, aby był niepowtarzalny.

Alert: Zduplikowane FOR.

  • danger icon Więcej niż jedna <label[for=%%%]> jest powiązana z elementem [id=%%%].

Dlaczego ANDI zgłasza ten alert?

Wskazany element jest powiązany z etykietą <label>, której wartość for odpowiada wartości atrybutu for innej etykiety.

Dlaczego dotyczy to dostępności?

Jeśli istnieje więcej niż jeden element formularza z etykietą z taką samą wartością atrybutu for, to gdy czytnik ekranu, próbując powiązać element formularza z etykietą, może odczytać etykietę, która nie była przeznaczona do skojarzenia z elementem. Specyfikacja W3C nie określa wprost, że nie można używać duplikatów atrybutów for, jednak czytniki ekranu nie obsługują poprawnie takiego użycia.

Skąd się bierze problem?

Problem często jest wynikiem kopiowania i wklejania elementów przez programistę, który potem zapomina zmienić wartość atrybutu for.

Co należy zrobić?

Upewnij się, że atrybuty for są unikalne i poprawnie wskazują identyfikator powiązanego elementu formularza.

Jeśli intencją jest połączenie tekstów wielu etykiet, użyj atrybutu aria-labelledby, którego wartością może być rozdzielona spacjami lista identyfikatorów wskazujących na wiele etykiet.

Dowiedz się więcej o label

Alert: Samotne ARIA-describedBy.

  • danger icon atrybut [aria-describedby] należy stosować w połączeniu z komponentem, który zapewnia dostępną nazwę.

Dlaczego ANDI zgłasza ten alert?

Jedyną informacją o dostępności znalezioną w znaczniku elementu jest atrybut aria-describedby, brakuje komponentu, zapewniającego dostępną nazwę.

Dlaczego dotyczy to dostępności?

Czytniki ekranu oczekują, że w przypadku korzystania z atrybutu aria-labelledby zostanie podana dostępny opis lub nazwa elementu. Jeśli nie ma nazwy, czytnik ekranu może zawieść i odczytać nieistotny tekst lub zgadywać.

Co należy zrobić?

Jedną z opcji jest po prostu użycie atrybutu aria-labelledby zamiast aria-describedby. Inną opcją jest zapewnienie wraz z aria-describedby dostępnej nazwy przez dodanie atrybutu aria-labelledby, aria-label lub innego komponentu „nazywającego”.

Uwaga: Atrybut aria-describedby wymaga podania opisu elementu w innym elemencie strony oznaczonym identyfikatorem wskazanym jako wartość atrybutu aria-describedby.

Dowiedz się więcej o aria-describedby

Alert: Samotny znacznik legend.

  • danger icon znacznik<legend> powinien być używany w połączeniu z innym komponentem zapewniającym dostępną nazwę.

Dlaczego ANDI zgłasza ten alert?

Typ wskazanego elementu może korzystać ze znacznika <legend>, ale w tym przypadku znacznik <legend> nie powinien być stosowany jako jedyny sposób nazywania lub opisywania elementu.

Dlaczego dotyczy to dostępności?

W przypadku żadnego elementów oprócz grupy pól (fieldset) znacznik <legend> technicznie nie podaje nazwy. Gdy występuje „samotnie” (nie w kontekście grupy pól), czytniki ekranu mogą nie odczytywać nazwy poprawnie lub mogą ogłaszać nazwę dwukrotnie.

Co należy zrobić?

Jeśli do opisu grupy elementów formularza używany jest znacznik <legend>, najlepszą praktyką nadawania nazw poszczególnym elementom formularza jest dodanie znacznika <label> powiązanego z elementem formularza <label for="id">) lub zawierającego element formularza w obrębie znacznika <label>.

Dowiedz się więcej o znaczniku legend

Alert: Błąd w nazwie atrybutu.

  • danger icon [aria-labeledby] jest błędnie napisane, użyj [aria-labelledby].

Dlaczego ANDI zgłasza ten alert?

Element zawiera atrybut aria-labelledby z literówką lub brakiem litery w nazwie atrybutu (powinny być dwie liter 'll'.

Dlaczego dotyczy to dostępności?

Większość czytników ekranu nie sprawdza błędów w pisowni atrybutów ani nie próbuje interpretować błędów składniowych. Dlatego błędnie zapisane atrybuty ARIA nie przekażą do technologii wspomagającej zamierzonych informacji o dostępności.

Co należy zrobić?

Błędy w pisowni należy poprawić, ponieważ programista wyraźnie próbował dodać dodatkowe informacje o dostępności i popełnił błąd w pisowni.

ANDI sprawdza następujące błędy ortograficzne:

  • aria-labeledby
  • arialabelledby
  • labelledby
  • ariadescribedby
  • describedby
  • arialabel

Alert: Niepoprawny atrybut ARIA-role.

  • danger icon [aria-role] nie jest prawidłowym atrybutem, zamiast tego użyj [role].

Dlaczego ANDI zgłasza ten alert?

Element zawiera atrybut aria-role, który nie istnieje.

Dlaczego dotyczy to dostępności?

Większość czytników ekranu nie sprawdza błędów w pisowni atrybutów ani nie próbuje interpretować błędów składniowych. W związku z tym atrybut nazwany niepoprawnie aria-role zamiast role nie zapewni zamierzonej informacji o dostępności.

Co należy zrobić?

Najprawdopodobniej zamierzeniem twórcy było użyć w tym elemencie atrybutu role. Popraw.

Alert: Niepoprawna wartość scope.

  • danger icon Wartość atrybutu scope [scope=%%%] jest nieprawidłowa.

Dlaczego ANDI zgłasza ten alert?

Tryb analizy tabeli ANDI jest ustawiony na „zakres” (scope) i element ten posiada atrybut scope, ale jego wartość jest niepoprawna.

Jeśli powiązania scope nie są odpowiednie dla projektu tej tabeli, zmień Tryb analizy tabeli na „headers/id”.
Jak wybrać odpowiedni tryb analizy tabeli

Dlaczego dotyczy to dostępności?

Czytnik ekranu nie dokona prawidłowych skojarzeń komórek, jeśli wartość scope jest nieprawidłowa.

Co należy zrobić?

Zmienić wartość atrybutu scope na col, row, colgroup lub rowgroup.

Alert: Headers tylko dla TH, TD.

  • danger iconAtrybut [headers] jest poprawny tylko dla <th> lub <td>.

Dlaczego ANDI zgłasza ten alert?

Tryb analizy tabeli ANDI jest ustawiony na „headers” i ten element ma atrybut headers, ale nie jest on przypisany ani do <td>, ani do <th>

Jeśli powiązania headers/id nie są odpowiednie dla projektu tej tabeli, zmień Tryb analizy tabeli na „scope”.
Jak wybrać odpowiedni tryb analizy tabeli

Dlaczego dotyczy to dostępności?

Czytnik ekranu nie dokona zamierzonych skojarzeń komórek.

Co należy zrobić?

Przesuń atrybut headers do komórki tabeli oznakowanej <td> lub <th> i upewnij się, że id wskazuje na poprawny <th>.

Alert: Tabela nie ma TH.

  • danger iconTabela nie ma komórki <th>.

Dlaczego ANDI zgłasza ten alert?

Ta tabela nie ma ani jednej komórki <th>.

Dlaczego dotyczy to dostępności?

Tabela danych powinna zawierać komórki <th>, aby czytnik ekranu mógł powiązać komórki nagłówka z komórkami danych.

Co należy zrobić?

Jeśli tabela jest tabelą „prezentacyjną” używaną do układu zamiast danych, dodaj role="presentation" do <table> i nie używaj znaczników <th>.

W przeciwnym razie, jeśli tabela ma dostarczać dane, użyj komórek <th>, aby utworzyć powiązania nagłówka. Ponadto, aby zapewnić dostępność nagłówki tabel muszą mieć dodatkowe oznakowanie, aby utworzyć powiązania: scope lub headers/id. Więcej informacji tutaj: Jak powiązać komórki tabeli danych.

Alert: Mieszanka scope i headers w tabeli.

  • danger iconTabela używa zarówno atrybutów [scope], jak i [headers], co może powodować problemy z czytnikiem ekranu.

Dlaczego ANDI zgłasza ten alert?

Ta tabela ma komórki wykorzystujące atrybuty scope i headers/id.

Dlaczego dotyczy to dostępności?

Czytnik ekranu może nieprawidłowo kojarzyć komórki, ponieważ musi uwzględniać zarówno scope, jak i headers/id. Jeśli w przyszłości zostaną wprowadzone zmiany do tej tabeli, powiązania mogą zostać zerwane i ucierpi na tym jej dostępność.

Co należy zrobić?

Jako najlepszą praktykę wybierz jedną metodę asocjacji komórek odpowiednią dla projektu tabeli: albo scope, albo headers/id. Więcej informacji tutaj: Jak powiązać komórki tabeli danych.

Alert: Tabela nie ma headers/id.

  • danger iconTabela nie ma powiązań [headers/id].

Dlaczego ANDI zgłasza ten alert?

Tryb analizy tabeli ANDI jest ustawiony na „headers/id”, a ta tabela nie ma powiązań headers/id.

Jeśli powiązania headers/id nie są odpowiednie dla projektu tej tabeli, zmień Tryb analizy tabeli na „scope”.
Jak wybrać odpowiedni tryb analizy tabeli

Dlaczego dotyczy to dostępności?

Czytnik ekranu może nieprawidłowo kojarzyć komórki nagłówka z komórkami danych.

Co należy zrobić?

Tabele danych muszą tworzyć powiązania komórek nagłówka albo za pomocą headers/id, albo scope. Jeśli dotyczy to tej tabeli, dodaj atrybuty id do komórek <th> oraz atrybuty headers do komórek <td>, które wskazują na powiązanie ich id z <th>. Więcej informacji tutaj: Jak powiązać komórki tabeli danych.

Alert: Przełącz tryb analizy tabeli.

  • danger iconTabela nie ma [scope], ale ma [headers], przełącz na 'tryb headers/id'.
  • danger iconTabela nie ma [headers/id], ale ma [scope], przełącz na 'tryb scope'.

Dlaczego ANDI zgłasza ten alert?

ANDI sugeruje, aby użytkownik przetestował tabelę w innym trybie analizy tabeli, ponieważ wykrył znaczniki dostępności dla drugiego trybu.

Co należy zrobić?

Zmień tryb analizy tabeli i określ, czy tabela jest dostępna. Więcej informacji tutaj: Jak wybrać odpowiedni tryb analizy tabeli

Alert: Brak scope na przecięciu TH.

  • warning iconPowiązanie 'scope' potrzebne na przecięciu <th>.

Dlaczego ANDI zgłasza ten alert?

Tabela ta zawiera przecinające się nagłówki kolumn lub wierszy (<th>). W jednym lub kilku nagłówkach <th> w pozycji „przecięcia” brakuje wymaganego atrybutu scope.

Dlaczego dotyczy to dostępności?

Gdy komórka <th> jest umieszczona na „przecięciu” nagłówków tabeli, czytnik ekranu może nie być w stanie poprawnie przyjąć kierunku, który wskazuje <th>.

Co należy zrobić?

Do wszystkich komórek <th> na przecięciach nagłówka tabeli dodaj atrybut scope o wartości określającej kierunek, który wskazuje komórka (scope="col" lub scope="row").

Alert: Problem ze strukturą ARIA tabela/siatka.

  • danger iconTabela ARIA nie ma komórek [role=cell].
  • danger iconSiatka ARIA nie ma komórek [role=gridcell].
  • danger iconTabela/Siatka ARIA nie ma komórek [role=columnheader] ani [role=rowheader].
  • danger iconTabela/Siatka ARIA nie ma wierszy [role=row].

Dlaczego ANDI zgłasza ten alert?

Ta strona ma strukturę tabelaryczną zbudowaną przy użyciu tabeli ARIA lub wzorca projektowego ARIA grid, ale istnieje problem z tą strukturą.

Dlaczego dotyczy to dostępności?

Użytkownik niedowidzący i polegający na czytniku ekranu nie będzie mógł w pełni poruszać się po tabeli ARIA lub siatce ARIA, gdy nie będzie miał odpowiedniej struktury.

Co należy zrobić?

Skoryguj konstrukcję tak, aby spełniała normy dla ARIA table lub ARIA grid.

Alert: Zbyt wiele poziomów scope.

  • caution icon Tabela ma więcej niż %%% wierszy/kolumn używających [scope].

Dlaczego ANDI zgłasza ten alert?

Tryb analizy tabeli ANDI jest ustawiony na „scope” i ta tabela posiada komórki wykorzystujące atrybut scope, ale istnieje więcej niż dwa „poziomy”.

Poniżej znajduje się przykład tabeli o zbyt wielu poziomach scope. Zauważ, że trzeci wiersz przekracza limit scope max. 2 poziomów.

<table>
<caption>Zbyt wiele poziomów scope w tabeli</caption>
<tr><th scope="col">dobrze</th><th scope="col">dobrze</th></tr>
<tr><th scope="col">dobrze</th><th scope="col">dobrze</th></tr>
<tr><th scope="col">dobrze</th><th scope="col">dobrze</th></tr>
<tr><th scope="col">źle </th><th scope="col">źle </th></tr>
<tr><td>data</td><td>data</td></tr>
</table>

Jeśli powiązania scope nie są odpowiednie dla projektu tej tabeli, zmień tryb analizy tabeli na „headers/id”.
Więcej informacji tutaj: Jak wybrać odpowiedni tryb analizy tabeli

Dlaczego dotyczy to dostępności?

Czytnik ekranu może nie kojarzyć wszystkich komórek nagłówka zgodnie z zamierzeniem autora.

Co należy zrobić?

Istnieje kilka opcji naprawczych:

  • Zreorganizuj tabelę, aby zminimalizować złożoność i głębokość komórek nagłówka.
  • Podziel tabelę na wiele tabel.
  • Usuń wszystkie atrybuty scope i ściśle stosuj headers/id.

Więcej informacji tutaj: Jak powiązać komórki tabeli danych

Alert: Oznakowanie tabeli prezentacyjnej.

  • warning icon Tabela prezentacyjna ma oznakowanie tabeli danych (%%%); Czy to jest tabela danych?

Dlaczego ANDI zgłasza ten alert?

Tabela oznakowana atrybutem role="presentation", posiada znacznik HTML zarezerwowany dla tabel danych.

Dlaczego dotyczy to dostępności?

Czytnik ekranu może zobaczyć znacznik tabeli danych i także tworzyć powiązania komórek lub dodawać zbędne informacje o elementach wewnątrz tabeli prezentacji.

Co należy zrobić?

W tabeli prezentacyjnej usuń znacznik HTML przeznaczony dla tabel danych.

  • <caption>: zastąp znacznikiem z nagłówkiem (h1, h2, h3...)
  • <th>: zastąp na <td>
  • scope: usuń ten atrybut
  • headers/id: usuń wszystkie atrybuty headers
  • summary: usuń ten atrybut

Alert: Tabela z nietypową rolą.

  • warning icon<table> z [role=%%%] nie jest rozpoznawana jako tabela danych.

Dlaczego ANDI zgłasza ten alert?

Ta tabela ma atrybut role z inną wartością niż presentation, none, table, grid lub treegrid.

Dlaczego dotyczy to dostępności?

Znaczenie elementu określone przez atrybut role jest nadrzędne w stosunku do semantyki znacznika. Oznacza to, że czytnik ekranu bierze pod uwagę tylko wartość atrybutu role i nie rozpoznaje, że nazwa znacznika elementu to <table>.

Co należy zrobić?

Jeśli element <table> wygląda jak tabela danych (zawiera komórki z danymi zorganizowanymi), to nie powinien mieć żadnego atrybutu role lub atrybut, który oznacza tabelę danych taki jak role="table".

Jeśli tabela jest wykorzystywana przede wszystkim do prezentacji/układu, wówczas rola powinna być następująca role="presentation".

W przeciwnym razie należy przetestować element w zależności od roli.

Alert: Nagłówek tabeli bez role.

  • warning icon<table[role=%%%]> ma komórki <th> z brakującym role=columnheader lub role=rowheader.

Dlaczego ANDI zgłasza ten alert?

Ta <table> ma role ARIA z wartością table|grid|treegrid i zawiera komórki <th>, które nie mają roli nagłówka kolumny (columnheader) lub wiersza (rowheader).

Dlaczego dotyczy to dostępności?

Czytnik ekranu może nie tworzyć właściwych skojarzeń między komórkami a nagłówkami, gdy natywna rola html jest pomieszana z rolą ARIA.

Co należy zrobić?

W tabeli ARIA, rola każdej komórki nagłówkowej powinna być wyraźnie określona. Upewnij się, że każda komórka nagłówka posiada atrybut role z wartością columnheader lub rowheader.

Ponadto każda komórka danych powinna posiadać atrybut role z wartością cell lub gridcell.

Alert: Komórki tabeli nie są w wierszu.

  • warning icon<table[role=%%%]> ma komórki nie zawarte w [role=row].

Dlaczego ANDI zgłasza ten alert?

Element z [role=table] lub [role=grid] posiada komórki z [role=cell] lub [role=gridcell], które nie są zawarte w elemencie z [role=row].

Dlaczego dotyczy to dostępności?

Użytkownik czytnika ekranu może pominąć te komórki podczas nawigacji po tej tabeli/siatce, ponieważ nie są one częścią programową tabeli.

Co należy zrobić?

Dostosuj strukturę tej tabeli lub siatki tak, aby każda komórka była zawarta w wierszu (elemencie z [role=row]).

Przykład:
<div role="table" aria-label="Inwentaryzacja owoców">
 <div role="row">
  <div role="cell"> Jabłka </div>
  <div role="cell"> Pomarańcze </div>
 </div>
...
</div>

Alert: W tabeli nie ma scope.

  • caution iconW tabeli nie ma powiązań [scope].

Dlaczego ANDI zgłasza ten alert?

Tryb analizy tabeli ANDI jest ustawiony na "scope", ale ta tabela nie ma atrybutów scope.

Jeśli powiązania scope nie są odpowiednie dla projektu tej tabeli, zmień tryb analizy tabeli na „headers/id”.
Jak wybrać odpowiedni tryb analizy tabeli

Dlaczego dotyczy to dostępności?

Czytnik ekranu może nie przyporządkowywać prawidłowo komórek nagłówkowych do komórek danych.

Co należy zrobić?

Tabele muszą tworzyć powiązania komórek nagłówkowych za pomocą dodatkowego oznakowania. Jeśli ma to zastosowanie dla projektu tej tabeli, dodaj atrybuty scope do komórek <th> za pomocą odpowiednich wartości: col, row, colgroup, or rowgroup. Więcej informacji tutaj: Jak powiązać komórki tabeli danych.

Alert: Wiele wartości accesskey.

  • danger icon wartość [accessKey] "%%%" ma więcej niż jeden znak.

Dlaczego ANDI zgłasza ten alert?

Dla tego elementu znaleziono accesskey z więcej niż jednym znakiem.

Dlaczego dotyczy to dostępności?

Wieloznakowe klawisze dostępu nie działają w żadnej przeglądarce. Niektóre przeglądarki obsługują wartości oddzielone spacją, ale takie użycie nie jest zalecaną praktyką.

Co należy zrobić?

Ustaw wartość accesskey, aby zawierała tylko jeden znak.

Dowiedz się więcej o accesskey

Alert: Duplikat Accesskey.

  • danger icon Znaleziono duplikat [accessKey=%%%].
  • caution icon Znaleziono duplikat AccessKey [value].

Dlaczego ANDI zgłasza ten alert?

Ten element posiada atrybut accesskey, który pasuje do accesskey innego elementu.

Dlaczego dotyczy to dostępności?

Klawisze dostępu mogą nie działać zgodnie z przeznaczeniem. Klawisze dostępu do przycisków i łączy muszą być unikalne. Niektóre przeglądarki pozwalają na "skok fokusa", gdy duplikaty klawiszy dostępu są dodane do elementów, które nie są łączami i przyciskami. Jednakże, gdy współdzielony klawisz dostępu jest dodany do wielu łączy lub przycisków, zwykle wybierany jest tylko pierwszy przycisk lub łącze.

Co należy zrobić?

Zgodnie z dobrą praktyką utwórz każdy accesskey tak, aby był niepowtarzalny. Jeśli kilka przycisków lub łączy udostępnia tę samą funkcję, należy umieścić klucz dostępu tylko na jednym z nich.

Dowiedz się więcej o accesskey

Alert: Nie znaleziono ID, do którego odnosi się ARIA.

  • warning icon nie znaleziono elementu, do którego odnosi się [%%%] z [id=%%%].

Dlaczego ANDI zgłasza ten alert?

Ten element ma aria-labelledby lub aria-describedby wskazującą na id, którego nie można znaleźć na stronie.

Dlaczego dotyczy to dostępności?

Może brakować ważnych informacji dotyczących dostępności. Czytniki ekranu nie powiadomią użytkownika, że nie można było znaleźć tego id.

Skąd się bierze problem?

Może to wynikać z jednego z tych powodów:

  • Być może autor strony internetowej używa niepoprawnie aria-labelledby/aria-describedby: Atrybuty te oczekują jednego lub więcej id; Wiele id powinno być oddzielone spacjami, a nie przecinkami.
  • Autor strony mógł zmienić id elementu, ale zapomniał zmienić odniesienie w aria-labelledby/aria-describedby.
  • Element, do którego odnosi się id zostanie ostatecznie wstrzyknięty na stronę za pomocą skryptów. Jest to powszechny problem walidacji formularzy/błędów, w takim przypadku nie jest to kwestia dostępności.

Co należy zrobić?

Potrzebne jest głębsze zbadanie kodu.

Atrybuty aria-labelledby i aria-describedby powinny zawierać jedynie odniesienia do id, a nie tekst bezpośrednio włączony do wartości atrybutu. Przykład:

  • DOBRZE: aria-labelledby="id1"
  • ŹLE: aria-labelledby="Jaki jest twój ulubiony kolor?"

Gdy użytych jest wiele id, wówczas powinny być oddzielone spacją, a nie przecinkiem. Przykład:

  • DOBRZE: aria-labelledby="id1 id2 id3"
  • ŹLE: aria-labelledby="id1,id2,id3"
  • ŹLE: aria-labelledby="id1, id2, id3"
Dowiedz się więcej o aria-labelledby | Dowiedz się więcej o aria-describedby

Alert: Możliwe niewłaściwe odwołanie w atrybutcie.

  • danger icon Możliwe nieprawidłowe użycie[aria-labelledby]: Nie znaleziono id "%%%", do których się odwołuje.
  • danger icon Możliwe nieprawidłowe użycie [aria-describedby]: Nie znaleziono id "%%%", do których się odwołuje.
  • danger icon Możliwe nieprawidłowe użycie[headers]: Nie znaleziono id "%%%", do których się odwołuje.

Dlaczego ANDI zgłasza ten alert?

Na stronie nie można znaleźć co najmniej jednego id do którego odwołuje się aria-labelledby, aria-describedby lub komórka z headers. ANDI że ten atrybut nie jest używany poprawnie.

Dlaczego dotyczy to dostępności?

Może brakować ważnych informacji dotyczących dostępności. Czytniki ekranu nie powiadomią użytkownika, że nie można było znaleźć id, do których istnieją odwołania.

Skąd się bierze problem?

Jest to zazwyczaj spowodowane tym, że programista nie rozumie, iż wartości nagłówków aria-labelledby, aria-describedby, headers mają zawierać odniesienia do id i dodają jako wartość atrybutu dosłowny tekst. Inną możliwością jest to, że deweloper mógł odnieść się do elementów, które zostały później usunięte lub ich wartości id zostały zmienione.

Co należy zrobić?

Upewnij się, że ten atrybut jest używany prawidłowo: Jedynie lista referencji id, a nie dosłowny tekst.

Dowiedz się więcej o aria-labelledby | Dowiedz się więcej o aria-describedby | Dowiedz się więcej o data table cell associations

Alert: Headers odnosi się nie do TH.

  • danger icon Element odwołujący się przez atrybut [headers] z [id=%%%] nie jest komórką <th>.

Dlaczego ANDI zgłasza ten alert?

Tryb analizy tabeli ANDI jest ustawiony na „headers/id”, a komórka ta odnosi się do elementu, który nie jest th <th>.

Jeśli powiązania headers nie są odpowiednie dla projektu tej tabeli, należy zmienić tryb analizy tabeli na "scope".
Jak wybrać odpowiedni tryb analizy tabeli

Dlaczego dotyczy to dostępności?

Czytnik ekranowy nie zapewni odpowiedniego powiązania z komórką.

Co należy zrobić?

Atrybut headers powinien odnosić się do id w <th>.

Alert: Nie znaleziono odniesienia do mapy obrazu.

  • danger icon Nie znaleziono odniesienia <img> do mapy obrazu %%%.

Dlaczego ANDI zgłasza ten alert?

ANDI znalazł mapę obrazu (<map>) odnoszącą się do (<img>), która nie istnieje na stronie.

Dlaczego dotyczy to dostępności?

Mapa obrazu nie będzie działać dla wszystkich użytkowników.

Co należy zrobić?

Upewnij się, że atrybut name w znaczniku <map> wskazuje na <img> który ma odpowiadającą mu usemap.

Alert: ARIA odwołuje się do legend.

  • warning icon [%%%] odwołuje się do legendy, co może powodować nadmierną gadatliwość czytnika.

Dlaczego ANDI zgłasza ten alert?

Ten element posiada atrybut aria-labelledby lub aria-describedby, który odnosi się do elementu <legend>.

Dlaczego dotyczy to dostępności?

Ten układ może powodować gadatliwość czytnika; tekst w elemencie <legend> może być odczytany przez czytnik ekranu więcej niż raz.

Co należy zrobić?

Albo usuń odniesienie do <legend> z aria-labelledby/aria-describedby albo zmień <legend> na ogólny znacznik, który nie zawiera żadnej semantyki, taki jak <strong>.

Alert: ARIA odwołuje się do ARIA.

  • warning icon Odwołanie [%%%] zawiera inne odwołanie [%%%], które nie będzie użyte dla tych danych wyjściowych.

Dlaczego ANDI zgłasza ten alert?

Ten element ma aria-labelledby|aria-describedby który odnosi się do elementu również z aria-labelledby|aria-describedby albo zawiera element, który ma aria-labelledby|aria-describedby.

Dlaczego dotyczy to dostępności?

Chociaż takie ustawienie nie powinno bezpośrednio powodować problemów z dostępnością, wyniki mogą nie być zgodne z oczekiwaniami. Podczas przechodzenia przez odniesienia aria-labelledby|aria-describedby kolejne aria-labelledby|aria-describedby nie będą śledzone, aby zapobiec możliwości wywołania nieskończonej pętli podczas próby obliczenia dostępnej nazwy/opisu.

Co należy zrobić?

Upewnij się, że wynik tego elementu jest zgodny z oczekiwaniami.

Alert: ARIA odwołuje się do id wiele razy

  • warning icon [%%%] bezpośrednio odwołuje się do [id=%%%] wiele razy, co może powodować gadatliwość czytnika.

Dlaczego ANDI zgłasza ten alert?

Ten element ma aria-labelledby lub aria-describedby, który odnosi się do tego samego elementu więcej niż jeden raz.

Dlaczego dotyczy to dostępności?

Spowoduje to bezpośrednio gadatliwość czytnika, ponieważ element referencyjny będzie czytany przy każdym odwołaniu.

Co należy zrobić?

Rzadko się zdarza, że wielokrotne podawanie tego samego id w odwołaniu ARIA jest celowe. Najprawdopodobniej jest to błąd kodowania kopiowania/wklejania. Upewnij się, że wyjście jest zgodne z oczekiwaniami i usuń wszelkie niezamierzenie zduplikowane odniesienia do id w elemencie z atrybutem aria-labelledby lub aria-describedby.

Alert: ARIA odnosi się bepośrednio i pośrednio

  • warning icon [%%%] jest bezpośrednim i pośrednim odniesieniem do [id=%%%], które może powodować gadatliwość.

Dlaczego ANDI zgłasza ten alert?

Ten element ma aria-labelledby lub aria-describedby, który odnosi się do elementu zarówno bezpośrednio, jak i pośrednio. Bezpośrednio, ponieważ identyfikator elementu, do którego istnieje odwołanie, znajduje się na liście referencji id. Pośrednio, ponieważ element jest zawarty w elemencie, do którego następuje bezpośrednie odwołanie.

Dlaczego dotyczy to dostępności?

Może to powodować gadatliwość czytnika, ponieważ element referencyjny będzie czytany więcej niż raz.

Co należy zrobić?

Upewnij się, że żaden element z odniesieniem nie jest zawarte w innym elemencie z odniesieniem.

Alert: Odwołania do nagłówków bez tekstu.

  • warning icon Odwołania do elementów [headers] nie zawierają tekstu powiązania.

Dlaczego ANDI zgłasza ten alert?

Tryb analizy tabeli ANDI jest ustawiony na „headers/id” i ta komórka używa atrybutu headers, ale elementy, do których się odwołuje, nie zapewniają tekstu powiązania komórki nagłówka.

Jeśli powiązania headers/id nie są odpowiednie dla projektu tej tabeli, zmień Tryb analizy tabeli na „scope”.
Jak wybrać odpowiedni tryb analizy tabeli

Dlaczego dotyczy to dostępności?

Czytnik ekranu nie będzie przekazywał informacji o zamierzonych powiązaniach komórek z nagłówkami.

Skąd się bierze problem?

Komórka referencyjna nie ma znaczników HTML, które zapewniałyby tekst taki jak 'innerHTML' (w znaczniku HTML).

Co należy zrobić?

Zmodyfikuj elementy, do których istnieją odniesienia, dodając treść tekstową lub wskaż w headers id innego elementu, który udostępnia tekst.

Alert: Nie znaleziono celu kotwicy

  • warning icon Na stronie nie znaleziono celu kotwicy z [id=%%%].

Dlaczego ANDI zgłasza ten alert?

Odnośnik tego linku wskazuje identyfikator elementu na stronie, którego nie można znaleźć. UWAGA: jeśli do tego łącza dołączony jest javascript ze zdarzeniem „click”, ANDI nie powinien generować tego alertu.

Dlaczego dotyczy to dostępności?

Jeśli to łacze ma być używany na stronie jako link pomijający lub prowadzić do treści wewnątrz artykułu, może nie działać zgodnie z przeznaczeniem.

Co należy zrobić?

Testerzy powinni kliknąć łącze, aby dowiedzieć się, czy działa ono na stronie jako skocz do/zakładka. Jeśli łącze nie ma żadnej funkcji, dodaj do elementu docelowego na stronie z id lub usuń łącze. Konieczna może być dalsza ocena lub dyskusja z autorem strony w celu ustalenia celu tego łącza.

Alert: Odniesieniem headers jest TD.

  • warning icon Atrybut [headers] attribute odnosi się do <td> z [id=%%%].

Dlaczego ANDI zgłasza ten alert?

Tryb analizy tabeli ANDI jest ustawiony na „headers”, a ta komórka odwołuje się do elementu, który jest <td>.

Jeśli powiązania headers nie są odpowiednie dla projektu tej tabeli, zmień Tryb analizy tabeli na „scope”.
Jak wybrać odpowiedni tryb analizy tabeli

Dlaczego dotyczy to dostępności?

Czytnik ekranu może nie utworzyć zamierzonego powiązania komórki.

Co należy zrobić?

Atrybut headers powinien odwoływać się do id id w znaczniku <th>. Autor stron internetowych może po prostu przekonwertować <td> na <th>

Alert: Headers odwołuje się do elementu zewnętrznego.

  • danger icon Atrybut [headers] odnosi się do elementu [id=%%%] zewnętrznego w stosunku do tabeli.

Dlaczego ANDI zgłasza ten alert?

Ta komórka tabeli ma atrybut headers odwołujący się do id, którego nie ma w tej samej tabeli.

Dlaczego dotyczy to dostępności?

Czytnik ekranu najprawdopodobniej nie skojarzy tego nagłówka, ponieważ atrybut headers powinien odwoływać się tylko do komórek <th> w tej samej tabeli.

Co należy zrobić?

Upewnij się, że wszystkie atrybuty headers odnoszą się do komórek <th> w tej samej tabeli.

Alert: Pusty znacznik tytułu strony.

  • danger icon Znacznik <title> nie może być pusty.

Dlaczego ANDI zgłasza ten alert?

W sekcji <head> kodu strony znaleziono znacznik <title>, ale jego zawartość jest pusta.

Dlaczego dotyczy to dostępności?

Czytnik ekranu nie przeczyta zwięzłego, logicznego tytułu strony, a zamiast tego przeczyta url.

Co należy zrobić?

Dodaj zawartość tekstową do znacznika <title> w sekcji <head>.

Alert: Brak tytułu strony.

  • danger icon Strona nie ma znacznika <title>.

Dlaczego ANDI zgłasza ten alert?

Nie można było znaleźć znacznika <title> w sekcji <head> strony, ani ustawionego skryptem document.title.

Dlaczego dotyczy to dostępności?

Czytnik ekranu nie przeczyta zwięzłego, logicznego tytułu strony, a zamiast tego przeczyta url.

Co należy zrobić?

Dodaj znacznik <title> w sekcji <head>.

Alert: Wiele tytułów strony.

  • warning icon Strona ma więcej niż jeden znacznik <title>.

Dlaczego ANDI zgłasza ten alert?

Więcej niż jeden znacznik <title> został znaleziony w sekcji <head>.

Dlaczego dotyczy to dostępności?

Czytnik ekranu nie odczyta treści obu znaczników <title>. Jeśli więc jakakolwiek ważna informacja znajduje się w innym <title>, może nie zostać wypowiedziana.

Co należy zrobić?

Aby zapobiec jakiemukolwiek prawdopodobieństwu wystąpienia problemu z dostępnością, upewnij się, że jest tylko jeden <title> i że znajduje się w <head>. Użyj w ANDI (Struktury) przycisku „tytuł strony”, aby wyświetlić rzeczywisty tytułu strony; określ, czy tytuł jest wystarczający.

Alert: Więcej legend niż fieldset.

  • danger icon Jest więcej znaczników legend (%%%) niż fieldset (%%%).

Dlaczego ANDI zgłasza ten alert?

Na stronie znaleziono więcej znaczników <legend> niż znaczników <fieldset>.

Skąd się bierze problem?

Znacznik <legend> mógł zostać umieszczony na stronie, ale nie wewnątrz <fieldset>. Inną możliwością jest to, że więcej niż jeden znacznik <legend> został umieszczony w <fieldset>.

Dlaczego dotyczy to dostępności?

Znaczniki <legend> nie służą żadnemu celowi semantycznemu poza <fieldset>. Co więcej, każdy <fieldset> powinien zawierać tylko jeden znacznik <legend>. Każdy z tych scenariuszy mógł oznaczać, że deweloper nie dodał właściwie znacznika do strony, a zatem dostępna nazwa i opisy elementów formularza mogą być nieprawidłowe semantycznie.

Co należy zrobić?

Upewnij się, że znaczniki <legend> na tej stronie są zawarte w <fieldset> i są w stosunku 1:1. Pamiętaj, że <legend> opisuje tylko grupę elementów formularza; każdy element formularza musi mieć wyraźną etykietę, aby zapewnić dostępną nazwę.

Dowiedz się więcej o legend

Alert: Więcej figcaption niż figure.

  • danger icon Jest więcej znaczników figcaption (%%%) niż figure (%%%).

Dlaczego ANDI zgłasza ten alert?

Na stronie znaleziono więcej znaczników <figcaption> niż znaczników <figure>.

Skąd się bierze problem?

Znacznik <figcaption> mógł zostać umieszczony na stronie, ale nie wewnątrz <figure>. Inną możliwością jest to, że więcej niż jeden znacznik <figcaption> został umieszczony w <figure>.

Dlaczego dotyczy to dostępności?

Znaczniki <figcaption> nie służą żadnemu celowi semantycznemu poza <figure>. Co więcej, każdy <figure> powinien zawierać tylko jeden znacznik <figcaption>. Każdy z tych scenariuszy mógł oznaczać, że programista nie dodał właściwie znacznika do strony, a zatem dostępna nazwa i opisy elementów mogą być nieprawidłowe semantycznie.

Co należy zrobić?

Upewnij się, że znaczniki <figcaption> na tej stronie są zawarte w <figure> i są w stosunku 1:1. Pamiętaj, że <figcaption> nazywa <figure> i domyślnie nie wymienia ani nie opisuje innych elementów zawartych w rysunku. Jeśli element wewnątrz ryciny powinien być nazwany lub opisany przez <figcaption> wskaż aria-labelledby lub aria-describedby w <figcaption>

Dowiedz się więcej o figcaption

Alert: Więcej captions niż table.

  • danger icon Jest więcej znaczników (%%%) niż tabel (%%%).

Dlaczego ANDI zgłasza ten alert?

Na stronie znaleziono więcej znaczników <caption> niż znaczników <table>.

Skąd się bierze problem?

Znacznik <caption> mógł zostać umieszczony na stronie, ale nie wewnątrz <table>. Inną możliwością jest to, że więcej niż jeden znacznik <caption> został umieszczony w <table>.

Dlaczego dotyczy to dostępności?

Znaczniki <caption> nie służą żadnemu celowi semantycznemu poza <table>. Co więcej, każdy <table> powinien zawierać tylko jeden znacznik <caption>. Każdy z tych scenariuszy mógł oznaczać, że programista nie dodał właściwie znacznika do strony, a zatem dostępna nazwa i opisy elementów mogą być nieprawidłowe semantycznie.

Co należy zrobić?

Upewnij się, że znaczniki <caption> na tej stronie są zawarte w <table> i są w stosunku 1:1.

Dowiedz się więcej o caption

Alert: Tabindex nie jest liczbą.

  • danger icon Wartość tabindex "%%%" nie jest liczbą.

Dlaczego ANDI zgłasza ten alert?

Na stronie znaleziono element z nienumeryczną wartością atrybutu tabindex.

Dlaczego dotyczy to dostępności?

W tym scenariuszu zachowanie przeglądarki jest niespójne. Niektóre przeglądarki zastąpią wartość ujemnym tabindex, inne nie zmienią tej wartości. Niezależnie od tego użytkownik klawiatury nie będzie mógł przenieść fokusa klawiatury na taki element.

Co należy zrobić?

Upewnij się, że wartością atrybutu tabindex jest liczbowa, dodatnia lub ujemna liczba całkowita. Pamiętaj, że tylko wartości dodatnie pozwalają na przeniesienie na element fokusa klawiatury za pomocą klawisza Tab. Wartości ujemne są przeznaczone do programowego kontrolowania fokusa za pomocą JavaScript.

Dowiedz się więcej o tabindex

Alert: Element listy poza kontenerem listy.

  • danger icon Element listy <li> jest poza kontenerem listy <ol> lub <ul>.

Dlaczego ANDI zgłasza ten alert?

Ten element listy (<li>) nie jest zawarty w znaczniku kontenera listy (<ol> albo <ul>).

Dlaczego dotyczy to dostępności?

Ponieważ znacznik elementu listy ma znaczenie semantyczne, powinien być zawarty w kontenerze listy.

Co należy zrobić?

Jeśli element listy (<li>) ma być częścią listy, należy zawrzeć go w znaczniku kontenera listy (<ol> lub <ul>). W przeciwnym razie, należy użyć innego znacznika do elementu, takiego jak <strong>, <em> lub <span>.

Alert: Element listy opisowej poza kontenerem listy.

  • danger icon Element listy opisowej jest poza kontenerem listy <dl>.

Dlaczego ANDI zgłasza ten alert?

Ten element listy opisowej (<dd> lub <dt>) nie jest zawarty w znaczniku kontenera listy (<dl>).

Dlaczego dotyczy to dostępności?

Ponieważ znaczniki pozycji listy opisowej mają znaczenie semantyczne, powinny być zawarte w kontenerze listy opisowej.

Co należy zrobić?

Jeśli element listy opisowej (<dd> lub <dt>) ma być częścią listy, należy zawrzeć go w znaczniku kontenera listy (<dl>). W przeciwnym razie, należy użyć innego znacznika do elementu, takiego jak <strong>, <em> lub <span>.

Alert: Nieaktualny atrybut.

  • warning icon W HTML5 znaleziono przzestarzały {attribute/tag}

Dlaczego ANDI zgłasza ten alert?

Typ dokumentu strony zdefiniowano jako HTML5, ale użyto nieaktualnego atrybutu lub znacznika. Nieaktualny atrybut lub znacznik oznacza, że ​​jest on stopniowo wycofywany i istnieją lepsze, bardziej elastyczne alternatywy.

ANDI wyśle ​​ten alert, gdy znajdzie:

  • A summary - atrybut znacznika table
  • A name - atrybut znacznika łącza a
  • A scope - atrybut znacznika komórki tabelitd

Dlaczego dotyczy to dostępności?

Czytniki ekranu mogą nie obsługiwać przestarzałego kodu HTML.

Co należy zrobić?

Przestrzegaj specyfikacji używanego doctype.

W HTML5,

  • Zamiast summary w znaczniku table, użyj aria-label lub <caption>
  • Zamiast name w znaczniku łącza a, użyj id
  • Zamiast scope w znaczniku td, użyj komórki th (nagłówek w tabeli)

Alert: Niepoprawna wartość scope.

  • warning icon Wartość [scope=%%%] jest niepoprawna; akceptowalne wartości to col, row, colgroup lub rowgroup.

Dlaczego ANDI zgłasza ten alert?

Ten element ma atrybut scope o niepoprawnej wartości.

Dlaczego dotyczy to dostępności?

Czytnik ekranu może nie utworzyć poprawnego powiązania nagłówka z komórką w tej tabeli danych.

Co należy zrobić?

Upewnij się, że wszystkie atrybuty scope mają prawidłowe wartości. Prawidłowe wartości atrybutu scope to:

  • scope="col"
  • scope="row"
  • scope="colgroup"
  • scope="rowgroup"

Pamiętaj, że scope="column" jest nieprawidłowy. Atrybut scope należy stosować tylko z elementami <th>.

Alert: Nieaktualny atrybut name w <a>.

  • caution icon Ten element <a> ma [name=%%%], który jest przestarzałym sposobem tworzenia kotwicy; użyj [id].

Dlaczego ANDI zgłasza ten alert?

Ten element <a> jest głównym celem łącza na stronie. Używa atrybutu name, który jest przestarzały, zamiast atrybutu id.

Dlaczego dotyczy to dostępności?

Ponieważ atrybut name jest przestarzały dla elementów <a> przyszłe przeglądarki mogą nie obsługiwać go jako prawidłowej techniki. Dlatego może mieć wpływ na dostępność tej strony w przyszłości, bo łącze na stronie kierowane na tę kotwicę nie będzie działało zgodnie z oczekiwaniami.

Co należy zrobić?

Zastąp atrybut name dla celu kotwicy na atrybut id.

Alert: Alt tylko dla obrazów.

  • warning iconAtrybut [alt] jest przeznaczony tylko dla <img>.

Dlaczego ANDI zgłasza ten alert?

Element posiada atrybut alt, ale nie jest obrazem osadzonym za pomocą: <img>, <input[type=image]> lub <area>.

Dlaczego dotyczy to dostępności?

Nie wszystkie czytniki ekranu podadzą treść atrybutu alt dla elementów innych niż obrazy. Dlatego niektóre informacje o dostępności, które zostały celowo dodane w wartości alt mogą nie zostać ogłoszone użytkownikom.

Co należy zrobić?

Nie używaj atrybutu alt dla elementów innych niż obrazy. Zamiast tego użyj globalnego atrybutu, aria-label aby podać dostępną nazwę lub title aby podać dostępny opis.

Więcej informacji o alt | Więcej informacji o aria-label | Więcej informacji o title

Alert: Jawna <label> dla elementów fomularza.

  • warning icon Jawna <label[for]> działa tylko z elementami formularza.

Dlaczego ANDI zgłasza ten alert?

Atrybut for w znaczniku <label> wskazuje na id elementu, który nie jest elementem formularza.

Dlaczego dotyczy to dostępności?

Niektóre czytniki ekranu nie ogłaszają jawnej etykiety nie będących elementami formularza. Dlatego powiązania <label> nie można odczytać jako części dostępnej nazwy tego elementu.

Co należy zrobić?

Ten element nie wywodzi swojej dostępnej nazwy z <label>. Rozważ użycie elementu aria-label lub aria-labelledby dla tego elementu.

Dowiedz się więcej o label

Alert: Jawna <label> nie dla przycisków.

  • warning icon Jawna <label[for]> nie może być używana w odniesieniu do przycisków.

Dlaczego ANDI zgłasza ten alert?

Atrybut for w znaczniku <label> wskazuje na id elementu, który jest przyciskiem.

Dlaczego dotyczy to dostępności?

Niektóre czytniki ekranu nie ogłaszają jawnej etykiety zdefiniowanej dla przycisków. Dlatego powiązania <label> nie można odczytać jako części dostępnej nazwy tego przycisku.

Co należy zrobić?

Ponieważ przyciski nie wywodzą swojej dostępnej nazwy z innych elementów <label>, zastosuj:

  • Dla elementów <button> lub role=button tekst wewnątrz znacznika (innerHTML).
  • Dla elementów <input type="submit"> or <input type="button"> użyj atrybutu value.
  • Dla elementów code><input type="image"> użyj atrybutu alt.
Dowiedz się więcej o label

Alert: Niepewne połączenie komponentów.

  • warning icon Połączenie %%% daje niespójne wyniki czytników ekranowych.

Dlaczego ANDI zgłasza ten alert?

Ten element zawiera wiele komponentów dostępności, co odradza metodologia ANDI „Jeden identyfikator, jeden deskryptor”.

Dlaczego dotyczy to dostępności?

Gdy elementy mają wiele nazw lub wiele opisów, priorytety czytników ekranu są bardzo różne. Aby zminimalizować te różnice i zapewnić spójny wynik czytnika ekranu, postępuj zgodnie z metodologią ANDI.

Co należy zrobić?

Jednocześnie należy używać tylko jednego identyfikatora. Jednocześnie należy używać tylko jednego deskryptora.

ANDI definiuje następujące komponenty jako identyfikatory (komponenty nazywające). Wybierz jeden:

  • aria-labelledby
  • aria-label
  • label (elementy formularzy)
  • alt (obrazy)
  • value (przyciski utworzone elementem input)
  • figcaption (ryciny)
  • caption (tabele)
  • tekst w (innerText) (kontenery)

ANDI definiuje następujące komponenty jako deskryptory. Wybierz jeden:

  • aria-describedby
  • legend (elementy formularzy i tylko z label)
  • title
Dowiedz się więcej o identyfikatorach | Dowiedz się więcej o deskryptorach

Alert: Znaleziono zdarzenie JavaScript.

  • caution icon Zdarzenie JavaScript %%% może powodować problemy z dostępnością klawiatury; zbadaj.

Dlaczego ANDI zgłasza ten alert?

Ten element ma zdarzenie JavaScript. ANDI skanuje zdarzenia typu: onBlur, onChange, onDblClick

Dlaczego dotyczy to dostępności?

Obecność zdarzeń JavaScript nie oznacza, że ​​istnieje wyraźny problem z dostępnością. Jednak w zależności od tego, do czego zostało zaprogramowane zdarzenie JavaScript, może istnieć problem z dostępnością. Przykłady:

  • Pole wyboru ma zdarzenie onChange. Użytkownik korzystający z klawiatury musi mieć możliwość dokonywania wyboru (za pomocą klawiszy strzałek) bez użycia myszy, bez konieczności przenoszenia fokusa z pola wyboru.
  • Pole tekstowe ma zdarzenie onBlur. Jeśli opuszczenie pola tekstowego powoduje, że coś się zmienia dynamicznie, niewidomy i niedowidzący użytkownik powinien być o tym fakcie powiadomiony.
  • Element ma zdarzenie onDblClick. Użytkownik klawiatury, który używa myszy, nie może wykonać podwójnego kliknięcia.

Co należy zrobić?

Przetestuj element, aby upewnić się, że zdarzenia JavaScript nie powodują problemów z dostępnością, takich jak utrata fokusa, pułapki na klawiaturę lub dynamiczne zmiany ekranu bez powiadomienia.

Alert: Obraz dekoracyjny w porządku tabulacji.

  • danger icon Obraz zdefiniowany jako dekoracyjny jest w porządku tabulacji.

Dlaczego ANDI zgłasza ten alert?

Ten obraz zawiera sprzeczność programową: został zdefiniowany jako dekoracyjny za pomocą role="presentation" lub alt="", ale ma nieujemną wartość tabindex, która umieszcza w porządku tabulacji.

Dlaczego dotyczy to dostępności?

Podczas tabulacji do tego obrazu dekoracyjnego czytnik ekranu nie przekaże żadnej informacji albo przekaże informacje.

Co należy zrobić?

Obrazy dekoracyjne nie powinny być w porządku tabulacji, dlatego usuń tabindex. Jeśli obraz nie jest dekoracyjny, dołącz opis tekstowy obrazu za pomocą atrybutu alt. Ogólnie rzecz biorąc, obrazy nie muszą być w porządku tabulacji.

Alert: Element z role poza porządkiem tabulacji.

  • warning icon Element z [role=%%%] jest poza porządkiem tabulacji.

Dlaczego ANDI zgłasza ten alert?

Ten element posiada atrybut roleo wartości, która mówi czytnikowi ekranu, że jest elementem interaktywnym (np.: role="link", role="button"), ale nie można do niego nawigować za pomocą klawiatury.

Dlaczego dotyczy to dostępności?

Osoba, która nie może używać myszy (użytkownik korzystający wyłącznie z klawiatury), używa klawisza Tab jako podstawowego sposobu poruszania się po stronie. Użytkownicy korzystający wyłącznie z klawiatury oczekują, że większość elementów interaktywnych (łącza, przyciski, elementy formularzy) będą w porządku tabulacji, ponieważ jest to standardowe zachowanie dla tego typu elementów. Gdy element HTML jest zdefiniowany jako interaktywny za pomocą atrybutu role, często musi być dodana dodatkowa obsługa, aby zapewnić, że element interaktywny jest dostępny dla użytkowników korzystających wyłącznie z klawiatury..

Co należy zrobić?

Jeśli ten element powinien być w kolejności tabulacji, dodaj mu tabindex="0". W przeciwnym razie, jeśli nawigacja do elementu jest obsługiwana w inny sposób (np. za pomocą klawiszy strzałek), należy sprawdzić, czy dostęp do elementu jest możliwy tylko za pomocą klawiatury. Ponadto łącza i przyciski powinny być aktywowane tylko za pomocą klawiatury (klawisz Enter dla łączy), (spacja i klawisz Enter dla przycisków).

Alternatywnie użyj semantycznych znaczników HTML (<a>,<button>) zamiast znaczników ogólnych z atrybutem roli (<div role="link">,<div role="button">), a przeglądarka automatycznie obsłuży większość wymagań dostępności klawiatury.

Alert: Element interaktywny poza porządkiem tabulacji.

  • caution icon Element interaktywny jest poza porządkiem tabulacji.

Dlaczego ANDI zgłasza ten alert?

Ten element ma ujemną wartość tabindex.

Dlaczego dotyczy to dostępności?

Elementy z ujemnymi wartościami tabindex nie mogą być nawigowane za pomocą klawisza Tab na klawiaturze. Można jednak umożliwić fokusowanie takich elementów programowo za pomocą JavaScript.

Co należy zrobić?

Sprawdź, czy ten element nie powinien znajdować się w porządku tabulacji. Upewnij się również, że powiązana funkcjonalność nie ogranicza się tylko do używania myszy. Jeśli element powinien znajdować się w porządku tabulacji, zmień wartość tabindex na zero (tabindex="0").

Dowiedz się więcej o tabindex

Alert: Element poza porządkiem tabulacji, bez nazwy.

  • caution icon Element interaktywny jest poza porządkiem tabulacji i nie ma dostępnej nazwy.

Dlaczego ANDI zgłasza ten alert?

Ten element ma ujemną wartość tabindex i nie ma dostępnej nazwy.

Dlaczego dotyczy to dostępności?

Elementy z ujemnymi wartościami tabindex nie mogą być nawigowane za pomocą klawisza Tab na klawiaturze. Można jednak umożliwić fokusowanie takich elementów programowo za pomocą JavaScript. Ponadto elementy muszą mieć dostępną nazwę.

Co należy zrobić?

Upewnij się, że niemożność nawigacji do elementu jest akceptowalna, a powiązana funkcjonalność nie ogranicza się tylko do używania myszy. Upewnij się również, że gdy fokus zostanie przesunięty na element, zapewniona jest odpowiednia dostępna nazwa.

Dowiedz się więcej o tabindex | Dowiedz się więcej o dostępnej nazwie

Alert: Treść iframe poza porządkiem tabulacji.

  • warning icon Treść iframe nie jest w porządku tabulacji iframe ma ujemny tabindex.

Dlaczego ANDI zgłasza ten alert?

Ten element iframe ma ujemną wartość tabindex (np. tabindex="-1"), a zawiera elementy, na których można ustawić fokus.

Dlaczego dotyczy to dostępności?

Ponieważ ta iframe ma ujemny tabindex, treść w iframe może nie być dostępna za pomocą klawiatury. Oznacza to, że użytkownicy, którzy nie mogą korzystać z myszy i polegają w nawigacji na klawiaturze, nie będą mogli wchodzić w interakcje z elementami wewnątrz iframe.

Co należy zrobić?

Usuń atrybut tabindex z iframe lub ustaw tabindex na zero (tabindex="0").

Alert: Znaleziono wyłączone elementy.

  • caution icon Strona ma %%% wyłaczone elementy niewidoczne dla czytnika ekranu.

Dlaczego ANDI zgłasza ten alert?

Na stronie zostały znalezione elementy wyłączone za pomocą disabled="disabled".

Dlaczego dotyczy to dostępności?

Elementy wyłączone za pomocą atrybutu disabled znajdują się poza porządkiem tabulacji. Dlatego osoba niedowidząca i używająca klawiatury do nawigacji sekwencyjnej po stronie może nie wiedzieć, że pole jest wyłączone.

Co należy zrobić?

Zapewnij dostępną alternatywę, aby wszyscy użytkownicy wiedzieli, które pola są wyłączone. Można to zrobić na kilka sposobów:

  • Podaj opis tekstowy na stronie, że pola są wyłączone.
  • Użyj atrybutów readonly, aria-readonly="true" lubaria-disabled="true" w połączeniu z CSS, aby sygnalizować wyglądem, że element jest wyłączony (szary).
  • Zamiast używać natywnego znacznika semantycznego (<input>, <button>, <a>) użyj znacznika ogólnego <div>, <p>, <span> z tabindex="0", aby przedstawić nieedytowalne / niezmienne informacje.
  • Całkowicie usuń element, jeśli nie jest konieczny.
  • Zamiast wyłączać przyciski/łącza, pozwól użytkownikowi na naciśnięcie przycisku/łącza w normalny sposób i przekaż użytkownikowi komunikat, że funkcja jest niedozwolona z jakiegoś powodu.

Alert: Canvas bez aktywowalnej treści zastępczej

  • warning icon Jeżeli element <canvas> wchodzi w interakcje z myszą, nie jest dostępny z klawiatury, ponieważ nie ma aktywowalnej treści zastępczej.

Dlaczego ANDI zgłasza ten alert?

Znaleziono element <canvas> bez elementów, które można aktywować za pomocą klawiatury, bo nie ma aktywowalnej treści zastępczej.

Dlaczego dotyczy to dostępności?

Element <canvas> domyślnie nie jest dostępny z klawiatury. Gdy <canvas> jest interaktywny, do kontrolowania najazdów kursora i kliknięć myszą służy javascript. Użytkownicy, którzy podczas nawigacji polegają przede wszystkim na klawiaturze, nie mogą wchodzić w interakcje z elementem <canvas>, chyba że wdrożone zostaną elementy dostępne z klawiatury i obsługa zdarzeń klawiatury.

Co należy zrobić?

Pełne udostępnienie <canvas> wymaga wysokiego poziomu umiejętności obsługi javascript.

Jeśli <canvas> może wchodzić w interakcje za pomocą myszy, to powinien zawierać elementy sterowane klawiaturą (tabulowane) w treści „rezerwowej”, zastępczej, która zapewni użytkownikom klawiatury funkcjonalność równoważną z tym, co jest dostępne dla użytkowników myszy.

Na przykład, jeśli <canvas> ma kilka „obszarów trafienia” lub „obszarów klikalnych”, w obszarze zastępczym obszaru roboczego mogą znajdować się przyciski, które będą pełniły podobną funkcję jak obszary trafienia. (Jak zawsze wszelkie takie formanty powinny być odpowiednio nazwane i opisane).

Aby zapewnić wizualne wskazanie fokusa, gdy sterowanie rezerwowe otrzymuje fokus, do sterowania rezerwowego należy dodać zdarzenia fokusa, które wyróżnia obszar trafienia, z którym jest on powiązany.

Dopuszczalne jest, jeśli funkcjonalność klawiatury naśladująca funkcjonalność myszy istnieje poza elementem <canvas> lub nawet poza tą stroną. Jednak użytkownicy powinni być informowani o wszelkich alternatywach.

Alert: Canvas ma aktywowalną treść zastępczą

  • caution icon Element <canvas> ma aktywowalną treść zastępczą; Sprawdź, czy klawiaturą można wykonać funkcje myszy.

Dlaczego ANDI zgłasza ten alert?

Znaleziono element <canvas> z elementami, które można aktywować za pomocą klawiatury, w ramach „rezerwowej” treści zastępczej. Potrzebne są dodatkowe, ręczne testy.

, który ma elementy z możliwością zmiany w ramach zawartości rezerwowej.

Dlaczego dotyczy to dostępności?

Element <canvas> domyślnie nie jest dostępny z klawiatury. Gdy <canvas> jest interaktywny, do kontrolowania najazdów kursora i kliknięć myszą służy javascript. Użytkownicy, którzy podczas nawigacji polegają przede wszystkim na klawiaturze, nie mogą wchodzić w interakcje z elementem <canvas>, chyba że wdrożone zostaną elementy dostępne z klawiatury i obsługa zdarzeń klawiatury.

Co należy zrobić?

Ta konkretna kanwa (płótno) ma pewną „rezerwową” treść zastępczą, co jest dobre. Jednak należy wykonać pewne testy ręczne, aby ustalić, czy wszelka ważna funkcjonalność dostępna dla myszy ma alternatywę dostępną z klawiatury.

Jeśli <canvas> może wchodzić w interakcje za pomocą myszy, to powinien zawierać elementy sterowane klawiaturą (tabulowane) w treści „rezerwowej”, zastępczej, która zapewni użytkownikom klawiatury funkcjonalność równoważną z tym, co jest dostępne dla użytkowników myszy.

Na przykład, jeśli <canvas> ma kilka „obszarów trafienia” lub „obszarów klikalnych”, w obszarze zastępczym obszaru roboczego mogą znajdować się przyciski, które będą pełniły podobną funkcję jak obszary trafienia. (Jak zawsze wszelkie takie formanty powinny być odpowiednio nazwane i opisane).

Aby zapewnić wizualne wskazanie fokusa, gdy sterowanie rezerwowe otrzymuje fokus, do sterowania rezerwowego należy dodać zdarzenia fokusa, które wyróżnia obszar trafienia, z którym jest on powiązany.

Dopuszczalne jest, jeśli funkcjonalność klawiatury naśladująca funkcjonalność myszy istnieje poza elementem <canvas> lub nawet poza tą stroną. Jednak użytkownicy powinni być informowani o wszelkich alternatywach.

Alert: Pusta komórka <th>.

  • caution iconPusta komórka <th>.

Dlaczego ANDI zgłasza ten alert?

Ta komórka jest nagłówkiem <th> i jest pusta (nie ma nazwy).

Dlaczego dotyczy to dostępności?

Czytnik ekranu nie odczyta niczego dla tego nagłówka, ponieważ jest on pusty.

Co należy zrobić?

Dodaj tekst, aby określić przeznaczenie kolumny lub wiersza. Komórki nagłówka tabeli nie powinny być puste.

Wyjątki

W przypadku niektórych projektów tabel dopuszczalne jest, aby komórka nagłówka była pusta. Na przykład, gdy znajduje się na przecięciu rzędu nagłówków i kolumny nagłówków. Ten alert nie będzie generowany dla komórek nagłówka w lewym górnym rogu tabeli.

Alert: Pusty żywy region.

  • caution icon Żywy region nie posiada treści tekstowej.

Dlaczego ANDI zgłasza ten alert?

Ten element został oznaczony jako żywy region, ale jego zawartość jest pusta (brak tekstu między znacznikiem początkowym i końcowym elementu HTML).

Dlaczego dotyczy to dostępności?

Ponieważ czytniki ekranu monitorują zawartość żywego regionu aktywnego tylko pod kątem zmian, czytnik ekranu nie ogłosi niczego dla tego żywego regionu.

Co należy zrobić?

Może to nie być problemem, jeśli żywy region ma być w danym momencie pusty. Gdy żywy region zostanie dynamicznie zaktualizowany (zmieni się jego zawartość), odśwież ANDI i sprawdź dane wyjściowe. Jeśli dane wyjściowe nadal zawierają ten alert, prawdopodobne jest, że żywy region nie jest właściwie zastosowany. Czytniki ekranu nie monitorują atrybutów HTML żywego regionu pod kątem zmian. Na przykład, jeśli wartość aria-label żywego regionu zmienia się dynamicznie, czytnik ekranu automatycznie ogłasza zmienioną treść. Upewnij się, że dynamiczne zmiany treści w żywym regionie zachodzą w obrębie wewnętrznego HTML (innerHTML) - znacznika początkowego i końcowego elementu tworzącego żywy region.

Alert: Nieużyteczny alt obrazu.

  • caution icon Obraz jest prezentacyjny; jego [alt] nie zostanie przekazany.

Dlaczego ANDI zgłasza ten alert?

Ten obraz został zadeklarowany jako prezentacyjny/dekoracyjny za pomocą role=presentation lub role=none, ale ma niepusty atrybut alt.

Dlaczego dotyczy to dostępności?

Czytnik ekranu nie odczyta tekstu alt, ponieważ widzi obraz jako prezentacyjny lub dekoracyjny.

Co należy zrobić?

Jeśli obraz jest naprawdę dekoracyjny (nieistotny), upewnij się, że czytnik ogłasza informacje związane z tym obrazem zgodnie z oczekiwaniami.

Alert: Długość atrybutu przekracza limit znaków.

  • warning icon Długość atrybutu [%%%] przekracza 250 znaków; rozważ skrócenie.

Dlaczego ANDI zgłasza ten alert?

Wartość atrybutu title, alt lub aria-label ma długość przekraczającą 250 znaków.

Dlaczego dotyczy to dostępności?

Dostępna nazwa powinna być zwięzłym identyfikatorem elementu. Dostępna nazwa powinna być zwięzłym identyfikatorem elementu. Czytnik ekranu nie ma możliwości przeskakiwania przez długie sekcje dostępnych nazw. Skrócenie dostępnej nazwy pomoże w sprawnej nawigacji strony za pomocą czytnika ekranu.

Co należy zrobić?

Jeśli potrzebna jest duża ilość tekstu, skróć dostępną nazwę i użyj atrybutu aria-describedby. Atrybut aria-describedby zapewnia użytkownikowi czytnika ekranu sposób, aby zdecydować, czy chce usłyszeć więcej informacji o elemencie.

Dowiedz się więcej o aria-describedby

Alert: Możliwe niedostępne łącze.

  • warning icon Możliwe niedostępne łącze: element <a> nie ma [href], [id], ani [tabindex].

  • caution icon Możliwe niedostępne łącze: element <a> nie ma [href], ani [tabindex].

Dlaczego ANDI zgłasza ten alert?

Zastosowanie znacznika <a> dla tego elementu jest niejasne. Ten element <a> nie znajduje się w porządku tabulacji (brak href lub tabindex). Może mieć atrybut id lub przestarzały atrybut name (co wskazywałoby, że jest to cel kotwicy). ANDI nie wykrył też zdarzenia javascript click.

Dlaczego dotyczy to dostępności?

W tym elemencie brakuje niektórych ważnych komponentów, które umożliwiłyby do niego dostęp użytkownikom używających do nawigacji klawiatury.

Co należy zrobić?

Ten element jest podejrzany w kontekście dostępności. Użyj myszki, aby kliknąć łącze i zaobserwować jego funkcje. Każda funkcja powinna być możliwa do wykonania tylko przy użyciu klawiatury.

Generalnie łącza używające znacznika<a> powinny mieć href lub tabindex="0" albo role="link".

Jeśli ten element <a>jako cel zakotwiczenia dla innego łącza lub elementu sterującego, użyj atrybutu id.

Użyj ANDI, aby przetestować dane wyjściowe łącza lub kotwicy. Zamknij ANDI i upewnij się, że do elementu można przenieść fokus, a po ustawieniu fokusa pojawi się wskaźnik wizualny fokusa.

Jeśli ten element nie działa jako element docelowy łącza lub kotwicy, nie należy używać znacznika<a> dla tego elementu; użyj innego znacznika.

Alert: Jest celem kotwicy.

  • caution icon Element <a> jest celem kotwicy; o ile kliknięcie wywołuje funkcję, to nie jest on dostępny z klawiatury.

Dlaczego ANDI zgłasza ten alert?

Ten element<a> jest celem innego href innego łącza oraz nie ma href ani tabindex.

Dlaczego dotyczy to dostępności?

Będzie to problem związany z dostępnością tylko wtedy, gdy kliknięcie tego łącza spełni jakąś funkcję.

Co należy zrobić?

Zamknij ANDI i kliknij myszą element. Obserwuj, czy pełni jakąś funkcję. Spróbuj, używając tylko klawiatury, uzyskać dostęp do elementu i wykonać funkcję.

Jeśli kliknięcie nie wykonuje żadnej funkcji, element nie ma problemów z dostępnością klawiatury. W przeciwnym razie, aby zapewnić dostępność elementu z klawiatury dodaj href lub tabindex="0" oraz role="link".

Alert: Znaleziono marquee.

  • danger icon Znaleziono element <marquee>, nie używaj go.

Dlaczego ANDI zgłasza ten alert?

Ten element to <marquee>.

Dlaczego dotyczy to dostępności?

Ten element może powodować u niektórych osób napady padaczki, gdy zawartość jest duża. Ponadto stale poruszający się tekst w elemencie <marquee> może być trudny do odczytania dla osób niedowidzących lub z zaburzeniami poznawczymi, takimi jak dysleksja.

Co należy zrobić?

Nie używaj znacznika <marquee> i nie pozwalaj, aby tekst ciągle się przesuwał lub przewijał na stronie.

Alert: Mapa obrazów po stronie serwera.

  • danger icon Znaleziono mapę obrazów po stronie serwera.

Dlaczego ANDI zgłasza ten alert?

Ten element zawiera mapę obrazów po stronie serwera.

Dlaczego dotyczy to dostępności?

Mapy obrazów po stronie serwera nie mogą być nawigowane przez użytkowników czytnika ekranu i użytkowników korzystających wyłącznie z klawiatury.

Co należy zrobić?

Nie używaj map obrazów po stronie serwera. Mapy obrazów po stronie klienta są dopuszczalne, ale należy je udostępnić poprzez dodanie atrybutów alt do znaczników <area>.

Alert: Alt obrazu nie jest opisowy.

  • danger icon Tekst alternatywny [alt] obrazu nie jest opisowy.

Dlaczego ANDI zgłasza ten alert?

Ten obraz zawiera tekst alt, który nie zapewnia równoważnego opisu tekstowego przekazującego cel i / lub funkcję obrazu.

Dlaczego dotyczy to dostępności?

Jeśli obraz nie ma odpowiedniego alternatywnego opisu tekstowego, który zawiera znaczącą reprezentację obrazu, obraz nie jest dostępny dla osoby niewidomej lub niedowidzącej i korzystającej z czytnika ekranu.

Co należy zrobić?

Tekst alternatywny obrazu lub inny identyfikator/deskryptor powinien zawierać tekstową alternatywę lub krótki opis obrazu.

Alternatywnie, jeśli obraz jest wyłącznie dekoracyjny i nie wymaga wyjaśnienia, dodaj role=presentation do obrazu lub ustaw wartość alt na pusty ciąg alt="". Takie postępowanie sprawi, że czytnik ekranu nie będzie próbował opisać obrazu..

Alert: Brak area w map.

  • danger icon Element <area> nie jest zawarty w <map>.

Dlaczego ANDI zgłasza ten alert?

ANDI znalazł element mapy obrazu (<area>), który nie jest zawarty w elemencie <map>.

Co należy zrobić?

Aby utworzyć prawidłową mapę obrazu po stronie klienta, elementy <area> muszą znajdować się w elemencie <map>

Alert: Nazwa pliku tekstem alt.

  • warning icon Tekst alternatywny [alt] zawiera nazwę pliku.

Dlaczego ANDI zgłasza ten alert?

Tekst alternatywny obrazu zawiera nazwę pliku, taką jak „.jpg”, „.gif”, „.png”.

Dlaczego dotyczy to dostępności?

Jeśli obraz nie ma alternatywnego opisu tekstowego, który zawiera znaczącą reprezentację obrazu, obraz nie jest dostępny dla osoby niewidomej lub niedowidzącej i korzystającej z czytnika ekranu.

Co należy zrobić?

Tekst alternatywny obrazu lub inny identyfikator/deskryptor powinien zawierać tekstową alternatywę lub krótki opis obrazu.

Alternatywnie, jeśli obraz jest wyłącznie dekoracyjny i nie wymaga wyjaśnienia, dodaj role=presentation do obrazu lub ustaw wartość alt na pusty ciąg alt="". Takie postępowanie sprawi, że czytnik ekranu nie będzie próbował opisać obrazu..

Alert: Zbędny tekst w alt.

  • caution icon Nadmiarowe wyrażenie w tekście [alt] obrazu.

Dlaczego ANDI zgłasza ten alert?

Tekst alternatywny obrazu zawiera zbędne słowa lub wyrażenia, takie jak „obraz…”, „zdjęcie…”, „idź do…”.

Dlaczego dotyczy to dostępności?

Czytnik ekranu automatycznie ogłosi słowo „grafika”, gdy użyty jest znacznik <img>, więc dołączenie zbędnej frazy w tekście alternatywnym zwiększa gadatliwość.

Co należy zrobić?

Usuń zbędne słowa z wartości alt.

Alert: Upewnij się, że obrazy tła są dekoracyjne.

  • caution icon Upewnij się, że obrazy tła są dekoracyjne.

Dlaczego ANDI zgłasza ten alert?

ANDI znalazł co najmniej jeden element zawierający regułę CSS background-image.

Dlaczego dotyczy to dostępności?

Jeśli obraz tła nie jest dekoracyjny lub zawiera ważne informacje, osoba niedowidząca może przegapić ważne treści, gdy obraz nie ma opisu tekstu lub odpowiednika tekstowego gdzieś na stronie.

Co należy zrobić?

Upewnij się, że wszystkie nie-dekoracyjne obrazy tła mają gdzieś na stronie alternatywny opis tekstowy.

Alert: Element ma aria-hidden.

  • danger icon Element jest ukryty przed czytnikiem ekranu za pomocą [aria-hidden=true].

Dlaczego ANDI zgłasza ten alert?

Ten element został ukryty przed czytnikiem ekranu za pomocą aria-hidden="true". Element może być dzieckiem innego elementu z aria-hidden="true".

Dlaczego dotyczy to dostępności?

Jeśli element jest interaktywny, powinien zostać rozpoznany przez czytnik ekranu. Gdy element ma atrybut aria-hidden="true" lub jest dzieckiem elementu z atrybutem aria-hidden="true", czytnik ekranu zignoruje ten element.

Co należy zrobić?

aria-hidden="true" jest przeznaczony do stosowania w rzadkich sytuacjach, w których czytnik ekranu powinien ignorować elementy wizualne.

Elementy, na których można ustawiać fokus klawiatury, nie powinny być ignorowane, a zatem nie powinny mieć aria-hidden="true" i nie powinny mieć elementu nadrzędnego z atrybutem aria-hidden="true".

Jeśli element powinien być ukryty przed czytnikiem ekranu, ponieważ informacje wizualne są przekazywane alternatywnymi środkami, wówczas element z aria-hidden="true" nie powinien być możliwy do osiągnięcia z klawiatury. tabindex="-1" usunie element z porządku tabulacji.

Alert: Żywy region zawiera formularz.

  • danger icon Żywy region zawiera element formularza.

Dlaczego ANDI zgłasza ten alert?

There is a "live region" on this page that contains a form element. Na tej stronie znajduje się „żywy region” (aria-live), który zawiera element formularza.

Dlaczego dotyczy to dostępności?

Czytniki ekranu monitorują żywe regiony i informują o zmianach za każdym razem, gdy zmienia się zawartość żywego regionu.

Jeśli element formularza jest zawarty w żywym regionie, czytnik ekranu będzie odczytywał zawartość żywego regionu, gdy element formularza zmieni się, powodując zamieszanie i gadatliwość dla użytkowników czytnika ekranu.

Co należy zrobić?

Usuń elementy formularza z aktywnego obszaru lub przenieś aria-live do innego elementu.

Alert: Żywy region bez kontenera.

  • danger icon Żywy region może byc tylko w kontenerze.

Dlaczego ANDI zgłasza ten alert?

Ten element nie jest elementem kontenera (nie może zawierać tekstu ani innych elementów) i jest oznaczony jako „żywy region” (aria-live).

Dlaczego dotyczy to dostępności?

Czytniki ekranu monitorują żywe regiony i informują o zmianach za każdym razem, gdy zmienia się ich zawartość. Ponieważ ten element nie jest elementem kontenera, więc nie ma zawartości, projekt nie będzie działał zgodnie z oczekiwaniami, tzn. czytniki ekranu nie będą rozpoznawać zmian w tym żywym regionie.

Co należy zrobić?

Tylko elementy kontenera (takie jak a <div>) można wyznaczyć jako żywe regiony. Zmiany zawartości (innerText) żywego regionu spowodują, że czytnik ekranu wypowie zmienioną treść.

Alert: Niepoprawna role=image.

  • danger icon [role=image] jest niepoprawne; użyj [role=img].

Dlaczego ANDI zgłasza ten alert?

Ten element ma atrybut role z niedozwoloną wartością "image".

Dlaczego dotyczy to dostępności?

"image" nie jest poprawną wartością atrybutu role. Czytnik ekranu nie rozpozna tego elementu jako obrazu..

Co należy zrobić?

Zmień wartość na role="img" tak, aby czytnik ekranu rozpoznał element jako obraz.

Alert: Kontener listy ma rolę inną niż list.

  • danger icon Kontener elementu listy nie jest rozpoznawany jako lista, ponieważ ma [role=%%%].

Dlaczego ANDI zgłasza ten alert?

Ten element listy <li> jest zawarty w kontenerze listy <ol> lub <ul> kontener ma zdefiniowany atrybut role, która zmienia jego semantykę na coś, co nie jest kontenerem listy.

Dlaczego dotyczy to dostępności?

Czytnik ekranu nie rozpozna tego jako listy, ponieważ semantyka kontenera listy została zastąpiona przez atrybut role.

Co należy zrobić?

Usuń atrybut role z kontenera listy lub, jeśli to konieczne, przenieś go do innego elementu.

Alert: aria-Level nie większy od 0.

  • warning icon [aria-level] nie jest liczbą całkowitą większą niż zero; domyślnie zostanie zastosowany poziom 2.

Dlaczego ANDI zgłasza ten alert?

Wartość atrybut aria-level nie jest większa niż zero lub nie jest liczbą całkowitą.

Dlaczego dotyczy to dostępności?

Gdy atrybut aria-level dla elementu z role="heading" nie jest liczbą całkowitą większą od zero, czytnik ekranu będzie domyślnie uznawał, że nagłówek ma poziom 2.

Co należy zrobić?

Upewnij się, że wartość aria-level jest poprawna i że jest to odpowiedni poziom dla jej lokalizacji na stronie.

Alert: Nieunikalny przycisk.

  • warning icon Nieunikalny przycisk: taka sama nazwa/opis jak innego przycisku.

Dlaczego ANDI zgłasza ten alert?

Ten przycisk ma taką samą dostępną nazwę i opis jak inny przycisk.

Dlaczego dotyczy to dostępności?

Jeśli te przyciski pełnią różne funkcje lub wykorzystują inny zestaw danych, każdy z nich musi być jednoznacznie zidentyfikowany. Osoba niedowidząca może nie znać kontekstu przycisku (jego lokalizacji na stronie). Jeśli dwa lub więcej przycisków ma tę samą dostępną nazwę i opis, funkcjonalność również powinna być taka sama bez względu na to, który przycisk zostanie naciśnięty.

Rozważmy na przykład tabelę danych z przyciskami „Usuń” w każdym wierszu. Opis identyfikujący, co ma zostać usunięte, musi być programowo powiązany z przyciskiem, w przeciwnym razie użytkownik może usunąć niewłaściwy element.

Co należy zrobić?

Jeśli przyciski pełnią inną funkcję lub wykorzystują inny zestaw danych, zmień nazwę przycisków lub dołącz unikalny opis do przycisku, używając atrybutów aria-describedby lub title. W przeciwnym razie, jeśli przyciski są naprawdę identyczne i wykonują tę samą funkcję przy użyciu tych samych danych, zmiana nie jest wymagana.

Alert: Niesemantyczne oznakowanie nagłówka.

  • warning icon Element wizualnie przekazuje znaczenie nagłówka, ale nie używa semantycznego znacznika nagłówka.

Dlaczego ANDI zgłasza ten alert?

Ten element wydaje się fałszywym nagłówkiem.

Dlaczego dotyczy to dostępności?

Nagłówki (zwięzły tekst, duży rozmiar czcionki lub pogrubiona czcionka) umożliwiają wizualne uporządkowanie i kategoryzację sekcji strony. Użytkownicy technologii wspomagających mogą szybko nawigować po stronach internetowych, jeśli na stronie istnieją nagłówki. Jednak nagłówki muszą być poprawnie zakodowane przy użyciu znaczników semantycznych (<h1> do <h6>), aby użytkownicy technologi pomocniczych mogli nawigować.

Co należy zrobić?

Przekonwertuj ten fałszywy nagłówek i wszystkie inne na stronie na jeden z semantycznych znaczników nagłówka: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

Alert: Konflikt poziomu nagłówka

  • warning icon Poziom elementu nagłówka <h#> powoduje konflikt z [aria-level=%%%].

Dlaczego ANDI zgłasza ten alert?

Poziom nagłówka tego elementu nagłówka wynikający z nazwy znacznika (<h1> - <h6>)nie odpowiada wartości liczbowej aria-level.

Dlaczego dotyczy to dostępności?

Zamierzony poziom nagłówka może nie zostać przekazany użytkownikom technologii wspomagającej.

Co należy zrobić?

Zawsze upewnij się, że użyty poziom nagłówka jest odpowiednim poziomem w stosunku do treści i innych nagłówków na stronie. Gdy użyta została role="heading", to aria-level zastąpi poziom nagłówka wskazany w nazwie znacznika. Dlatego albo:

  • Używaj tylko natywnej semantyki: Usuń role="heading" i aria-level co spowoduje, że zastosowany zostanie poziom oznaczonego nagłówka. Takie postępowanie rozwiąże ten alert.
  • Użyj elementu ogólnego, takiego jak <div> z role="heading" i aria-level zamiast elementu nagłówka <h1> - <h6>. Takie postępowanie rozwiąże ten alert..
  • Zignoruj ​​ten alert, wiedząc że aria-level zastępuje poziom nagłówka z nazwy znacznika.

Najlepszym rozwiązaniem jest stosowanie natywnej semantyki zamiast ARIA, gdy tylko jest to możliwe.

Alert: Użyto role=heading bez aria-level

  • warning icon Użyto [role=heading] bez [aria-level]; domyślnie zostanie zastosowany poziom 2.

Dlaczego ANDI zgłasza ten alert?

Ten element został zdefiniowany jako nagłówek za pomocą role="heading", ale nie ma określonego poziomu nagłówka za pomocą aria-level.

Dlaczego dotyczy to dostępności?

Czytnik ekranu przyjmie, że nagłówek ma poziom 2, ponieważ 2 jest domyślnym dla aria-level.

Co należy zrobić?

Użyj semantycznego nagłówka (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) zamiast role="heading" lub dodaj atrybut aria-level do elementu i przypisz mu dodatnią wartość liczbową.

Alert: Etykieta zwiększy obszar klikalny

  • caution icon Powiązana <label> zwiększy obszar klikalny tego elementu.

Dlaczego ANDI zgłasza ten alert?

Ten przycisk radiowy lub pole wyboru nie jest powiązane z <label>, a rozmiar przycisku radiowego lub pola wyboru jest mniejszy niż 21px na 21px.

Dlaczego dotyczy to dostępności?

Osoby z niepełnosprawnością ruchową, które mogą korzystać z myszy, mogą mieć problemy z kliknięciem małego celu o wymiarach mniejszych niż 21 na 21 pikseli. Uwaga: Limit wielkości (21 na 21 pikseli) został tu ustalony arbitralnie. Nie jest to oficjalny wymóg WCAG.

Co należy zrobić?

Dodanie powiązania przycisku radiowego lub pola wyboru z <label> pozwala użytkownikowi myszy kliknąć etykietę, aby wybrać przycisk radiowy lub pole wyboru. Zwiększa to rozmiar klikalnego obszaru. Powiązana <label> jest również standardowym sposobem zapewniania dostępnej nazwy dla przycisku opcji lub pola wyboru.

Alert: Treści wstrzykiwane za pomocą CSS.

  • warning icon Treść została wstrzyknięta przy użyciu pseudoelementów CSS ::before lub ::after.

Dlaczego ANDI zgłasza ten alert?

Ta strona zawiera treści wstrzykiwane przy użyciu pseudoelementów CSS ::before lub ::after.

Dlaczego dotyczy to dostępności?

W zależności od używanej przeglądarki treści wstrzykiwane przy użyciu tej techniki mogą nie być rozpoznawane przez czytniki ekranu, dlatego tekst może nie być przekazywany osobom korzystającym z technologii wspomagających. W szczególności w przeglądarce Internet Explorer czytniki ekranu nie rozpoznają treści wstrzykniętych za pomocą pseudoelementów CSS.

Co należy zrobić?

Jeśli treść jest znacząca lub ważna, powinna być widoczna dla osoby niewidomej za pomocą czytnika ekranu.

Jeśli znaczenie wstrzykiwanej treści jest dostępne w innym miejscu strony, nie trzeba nic zmieniać. W przeciwnym razie opcje naprawy są następujące:

  • Porzuć technikę wstrzykiwania treści CSS i umieść tekst bezpośrednio na ekranie lub użyj wbudowanych obrazów.
  • Prawidłowo nazwij i opisz elementy, z którymi skojarzona jest wstrzykiwana zawartość css.

Alert: Element ma obraz tła.

  • warning icon Element ma obraz tła, wykonaj ręczny test kontrastu.

Dlaczego ANDI zgłasza ten alert?

Ten element znajduje się „nad” obrazem tła, dlatego nie można automatycznie określić współczynnika kontrastu.

Dlaczego dotyczy to dostępności?

Tekst informacyjny powinien mieć współczynnik kontrastu, który umożliwia czytanie tekstu osobom o umiarkowanym wzroku.

Co należy zrobić?

Wykonaj ręczny test współczynnika kontrastu, wybierając podstawowy kolor obrazu tła i podstawowy kolor pierwszego planu tekstu za pomocą narzędzia wyboru koloru (Colour Contrast Analyser Installation).

Wymagania WCAG AA dotyczące współczynnika kontrastu są następujące:

  • W przypadku dużego tekstu (czcionka 18 pkt lub czcionka 14 pkt i pogrubiona) współczynnik kontrastu co najmniej 3:1
  • W przeciwnym razie współczynnik kontrastu wynosi co najmniej 4,5: 1
  • Logo, nazwa marki i tekst ozdobny nie muszą spełniać wymagań dotyczących kontrastu.

Alert: Jeśli obrazy zawierają tekst.

  • caution icon Strona ma obrazy; jeśli obrazy zawierają tekst, wykonaj ręczny test kontrastu.

Dlaczego ANDI zgłasza ten alert?

Strona zawiera osadzone obrazy (<img>, <input[type='image']> lub<svg>).

Dlaczego dotyczy to dostępności?

Jeśli obraz zawiera tekst informacyjny, powinien on mieć współczynnik kontrastu, który umożliwia czytanie tekstu osobom o umiarkowanym wzroku.

Co należy zrobić?

Jeśli obrazy na tej stronie zawierają tekst informacyjny, przeprowadź ręczny test współczynnika kontrastu, wybierając podstawowy kolor tła i podstawowy kolor pierwszego planu tekstu za pomocą narzędzia wyboru koloru (Instalacja Analizatora kontrastu kolorów).

Wymagania WCAG AA dotyczące współczynnika kontrastu są następujące:

  • W przypadku dużego tekstu (czcionka 18 pkt lub czcionka 14 pkt i pogrubiona) współczynnik kontrastu co najmniej 3:1
  • W przeciwnym razie współczynnik kontrastu wynosi co najmniej 4,5: 1
  • Logo, nazwa marki i tekst ozdobny nie muszą spełniać wymagań dotyczących kontrastu.

Alert: Krycie mniejsze niż 100%.

  • warning icon Krycie mniejsze niż 100%; wykonaj ręczny test kontrastu.

Dlaczego ANDI zgłasza ten alert?

Ten element ma właściwość CSS opacity o wartości mniejszej niż 1, co czyni go półprzezroczystym.

Dlaczego dotyczy to dostępności?

Zmniejszenie wartości krycia poniżej 1 wpływa na kolor pierwszego planu oraz kolor tła i obniża współczynnik kontrastu. Tekst informacyjny powinien mieć współczynnik kontrastu, który umożliwia czytanie tekstu osobom o umiarkowanym wzroku.

Czy to naprawdę problem? (elementy wyłączone)

Czasami programiści używają krycia CSS, aby element wyglądał na wyłączony. Wyłączone elementy nie muszą być uwzględniane w teście kontrastu, ale do testera należy określenie, czy element jest w stanie wyłączonym. Ponadto, aby poinformować użytkownika czytnika ekranu, że element jest wyłączony, element powinien mieć aria-disabled="true".

Co należy zrobić?

Jeśli tekst nie jest w stanie wyłączonym, wykonaj ręczny test współczynnika kontrastu, wybierając podstawowy kolor obrazu tła i podstawowy kolor pierwszego planu tekstu za pomocą narzędzia wyboru koloru (Instalacja Analizatora kontrastu kolorów).

Wymagania WCAG AA dotyczące współczynnika kontrastu są następujące:

  • W przypadku dużego tekstu (czcionka 18 pkt lub czcionka 14 pkt i pogrubiona) współczynnik kontrastu co najmniej 3:1
  • W przeciwnym razie współczynnik kontrastu wynosi co najmniej 4,5: 1
  • Logo, nazwa marki i tekst ozdobny nie muszą spełniać wymagań dotyczących kontrastu.

Alert: Przetestuj nawigację role=grid

  • caution icon Znaleziono [role=grid]; przetestuj wzorzec projektowy nawigacji.

Dlaczego ANDI zgłasza ten alert?

Na stronie wykryto element z role="grid" was detected on the page.

Dlaczego dotyczy to dostępności?

Gdy siatka uzyska fokus (zostanie aktywowana), czytnik ekranu ogłosi konkretne instrukcje nawigacyjne. z tego powodu użytkownicy mają pewne oczekiwania dotyczące sposobu działania siatki.

Co należy zrobić?

Programiści powinni przestrzegać: Praktyki autorskie dla siatki W3C WAI-ARIA.

Programista musi zarządzać fokusem w siatce za pomocą JavaScript, a tester powinien upewnić się, że wdrożono właściwą nawigację. Wskazane jest zamknięcie ANDI podczas testowania nawigacji w siatce, jednak ANDI może być użyty do przetestowania nazewnictwa i opisu (Wyjście ANDI) elementów w siatce.

Podsumowanie oczekiwań dotyczących działania siatki:

  • Tylko jeden element w siatce powinien znajdować się jednocześnie w porządku tabulacji (koncepcja wędrującego tabindex).
  • Wszystkie elementy w siatce, na których można ustawiać fokus, powinny być nawigowalne za pomocą klawiszy strzałek.
  • Do poruszania się po siatce można używać innych poleceń klawiaturowych(np. Page Up, Page Down, Home, End)
  • Jeśli siatka zawiera elementy interaktywne (takie jak pola formularza lub przyciski), fokus należy wysłać do elementu interaktywnego, a nie do komórki siatki, która go zawiera.

Prawidłowo wdrożona siatka to doskonały, użyteczny i dostępny interfejs. Programista powinien mieć zaawansowaną wiedzę na temat wymagań dostępności i musi wdrożyć siatkę zgodnie ze specyfikacjami WAI ARIA Authoring Practices. W wielu przypadkach natywne znaczniki tabel danych HTML przy użyciu struktur <table> lub struktury or ARIA role="table" powinny w wystarczającym stopniu spełniać potrzeby użytkownika.

Alert: Minimalne wymagania dotyczące współczynnika kontrastu.

  • danger icon Zwykły tekst nie spełnia minimalnych wymagań 4,5:1.
  • danger icon Duży tekst nie spełnia minimalnych wymagań 3:1.

Dlaczego ANDI zgłasza ten alert?

Ten element nie zapewnia wystarczającego kontrastu między tekstem a kolorem tła. Innymi słowy, współczynnik kontrastu nie spełnia wymagań minimalnych.

Dlaczego dotyczy to dostępności?

Tekst informacyjny powinien mieć współczynnik kontrastu, który umożliwia czytanie tekstu osobom o umiarkowanym wzroku.

Co należy zrobić?

Dostosuj kolor tekstu i/lub kolor tła tego elementu, aby współczynnik kontrastu był równy lub wyższy od minimalnego wymaganego współczynnika kontrastu.

Wymagania WCAG AA dotyczące współczynnika kontrastu są następujące:

  • W przypadku dużego tekstu (czcionka 18 pkt lub czcionka 14 pkt i pogrubiona) współczynnik kontrastu co najmniej 3:1
  • W przeciwnym razie współczynnik kontrastu wynosi co najmniej 4,5: 1
  • Logo, nazwa marki i tekst ozdobny nie muszą spełniać wymagań dotyczących kontrastu.