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.

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.

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.

• Element formularza nie ma dostępnej nazwy, powiązanej etykiety ani tytułu (title).

Dlaczego ANDI zgłasza ten alert?

Ten element formularza nie ma znacznika HTML, który zapewniłby mu dostępną nazwę.

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ł. Użytkownik z niepełnosprawnością wzroku nie będzie wiedział, jakie informacje wprowadzić w tym polu formularza.

Co należy zrobić?

Dodaj oznakowanie HTML, aby zapewnić dostępną nazwę dla tego elementu formularza.

Po wprowadzeniu zmian w kodowaniu w celu nadania nazwy elementowi formularza, przetestuj zmiany, uruchamiając program ANDI i odczytując zaktualizowane wyjście ANDI.

• Element nie ma dostępnej nazwy.

Dlaczego ANDI zgłasza ten alert?

Ten element nie ma oznakowania HTML, który zapewniłoby mu dostępną nazwę.

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ł. Użytkownik z niepełnosprawnością wzroku nie usłyszy informacji o tym elemencie.

Co należy zrobić?

Dodaj oznakowanie HTML, aby zapewnić dostępną nazwę dla tego elementu.

Po wprowadzeniu zmian w kodowaniu w celu zapewnienia dostępnej nazwy dla elementu, przetestuj zmiany, uruchamiając ANDI i odczytując zaktualizowane wyjście ANDI.

• Obraz nie ma dostępnej nazwy, alt ani title.

Dlaczego ANDI zgłasza ten alert?

Ten obraz nie ma oznakowania HTML, które zapewniłoby mu dostępną nazwę.

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ł. Użytkownik z niepełnosprawnością wzrokunie będzie wiedział, czy obraz jest znaczący.

Co należy zrobić?

Określ, czy obraz ma znaczenie, czy jest dekoracyjny.

Jeśli obraz jest znaczący, dodaj znacznik HTML, który zapewni dostępną nazwę (tekst alternatywny) dla obrazu.

Jeśli obraz ma charakter dekoracyjny, dodaj znacznik HTML, który poinformuje czytnik ekranu, że obraz nie ma znaczenia i może zostać zignorowany.

Po wprowadzeniu zmian w kodowaniu w celu zapewnienia dostępnej nazwy dla elementu, przetestuj zmiany, uruchamiając ANDI i odczytując zaktualizowane wyjście ANDI.

• Tabela nie ma dostępnej nazwy, podpisu (caption) ani title.

Dlaczego ANDI zgłasza ten alert?

Ta tabela nie ma oznakowania HTML, które zapewniłoby jej dostępną nazwę.

Dlaczego dotyczy to dostępności?

Użytkownik czytnika ekranu często ma możliwość podglądu listy tabel danych na stronie. Jeśli tabele danych nie są nazwane, użytkownik jest zmuszony poświęcić więcej czasu na określenie znaczenia każdej tabeli. To znacznie obniża efektywność pracy użytkowników z niepełnosprawnością wzroku, gdy na stronie znajduje się wiele tabel.

Co należy zrobić?

Określ, czy tabela jest prawdziwą tabelą danych, czy też struktura tabeli html jest używana do celów ułożenia treści.

Jeśli jest to tabela danych, dodaj znacznik HTML, który zapewni dostępną nazwę podsumowującą tabelę danych..

Jeśli nie jest to tabela danych, dodaj znacznik HTML, który zakomunikuje czytnikowi ekranu, że znacznik tabeli html powinien zostać zignorowany i uznany za niesemantyczne kontenery używane do celów układu.

Po wprowadzeniu odpowiednich zmian w kodowaniu przetestuj zmiany, uruchamiając ponownie ANDI.

• Rycina (Figure) nie ma dostępnej nazwy, figcaption, ani title.

Dlaczego ANDI zgłasza ten alert?

Element <figure> nie ma oznakowania HTML, które zapewniłoby mu dostępną nazwę.

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ł. Użytkownik z niepełnosprawnością wzroku nie będzie wiedział, jakie znaczenie ma ta ilustracja.

Co należy zrobić?

Dodaj oznakowanie HTML, aby zapewnić dostępną nazwę (tekst alternatywny) dla elementu figure.

Po wprowadzeniu zmian w kodowaniu w celu zapewnienia dostępnej nazwy dla <figure>, przetestuj zmiany, uruchamiając ANDI i odczytując zaktualizowane wyjście ANDI.

• Iframe nie ma dostępnej nazwy lub [title].

Dlaczego ANDI zgłasza ten alert?

Element iframe nie ma znacznika HTML, który zapewniłby dostępną nazwę dla tego elementu.

Dlaczego dotyczy to dostępności?

Użytkownik czytnika ekranu często ma możliwość podglądu listy ramek iframe na stronie. Jeśli ramki iframe nie są nazwane, użytkownik musi znaleźć inny sposób, aby określić, która ramka jest która. W przypadku gdy na stronie znajduje się wiele ramek iframe, znacznie obniża to wydajność pracy użytkowników z niepełnosprawnością wzroku.

Co należy zrobić?

Dodaj oznakowanie HTML, aby zapewnić dostępną nazwę dla każdej ramki iframe, która zawiera treść prezentowaną użytkownikowi.

Po wprowadzeniu zmian w kodowaniu, aby zapewnić dostępną nazwę dla ramki iframe, przetestuj zmiany, uruchamiając ANDI i odczytując zaktualizowane wyjście ANDI.

• [%%%] odnosi się do zduplikowanego id [id=%%%]; Identyfikatory elementów muszą być unikalne.
• 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, atrybut headers komórki tabeli, 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.

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

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

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

• [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-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.

• Niepoprawny atrybut [role=image]. Użyj [role=img].

Dlaczego ANDI zgłasza ten alert?

Ten element ma atrybut role o nieistniejącej w specyfikacji wartości "image".

Dlaczego dotyczy to dostępności?

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

Co należy zrobić?

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

• '%%%' nie jest obsługiwaną wartością atrybutu [role].

Dlaczego ANDI zgłasza ten alert?

Atrybut role tego elementu zawiera wartość, której nie ma w atrybutach Core Accessibility API Role Mapping Table.

Dlaczego dotyczy to dostępności?

Technologia wspomagająca nie będzie w stanie przekazać semantyki elementu, ponieważ wartość role jest zasadniczo nieobsługiwana.

Co należy zrobić?

Zmień wartość role na jedną z określonych w Core Accessibility API Role Mapping Table.

• Element ma kilka wartości atrybutu role. Sprawdź, czy sekwencja jest dopuszczalna.

Dlaczego ANDI zgłasza ten alert?

Atrybut role tego elementu zawiera więcej niż jedną wartość. Na przykład, role="link presentation"

Dlaczego dotyczy to dostępności?

Technologia wspomagająca będzie próbowała użyć pierwszej wartości w sekwencji. Jeśli nie rozpoznaje lub nie obsługuje pierwszej wartości, spróbuje użyć następnej wartości w sekwencji. I tak dalej.

Co należy zrobić?

Upewnij się, że wartości podane na liście wartości są akceptowalne dla aplikacji, a ich kolejność jest zamierzona. Najlepszą praktyką, zapewniającą najszersze wsparcie, jest to, że atrybut role powinien zawierać pojedynczą wartość, a nie listę.

• 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ć?

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

• Atrybut [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>.

• Tabela 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.

• Tabela 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.

• Tabela 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.

• Tabela nie ma [scope], ale ma [headers], przełącz na 'tryb headers/id'.
• Tabela 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

• Powią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").

• Tabela ARIA nie ma komórek [role=cell].
• Siatka ARIA nie ma komórek [role=gridcell].
• Tabela/Siatka ARIA nie ma komórek [role=columnheader] ani [role=rowheader].
• Tabela/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ć?

Correct the structure to abide by the standards for an ARIA table, lub ARIA grid.

• Tabela nie ma komórek <th>, ani <td>.

Dlaczego ANDI zgłasza ten alert?

Ta tabela nie ma komórek nagłówków <th>, ani komórek danych <td>.

Dlaczego dotyczy to dostępności?

Jeśli ta tabela nie ma komórek, to czy naprawdę jest to tabela danych? Użytkownicy z upośledzeniem wzroku, którzy korzystają z czytnika ekranu, mogą nie rozumieć, jak poruszać się po tej tabeli.

Co należy zrobić?

Jeśli element <table> jest tabelą danych, powinien zawierać elementy <th> i <td>. Jeśli element <table> nie zawiera danych tabelarycznych, a zamiast tego jest używany do układu strukturalnego, powinien mieć role="presentation". Jeśli element <table> jest kontenerem typu placeholder dla dynamicznie propagujących się danych tabelarycznych (używających JavaScript do dynamicznego wstrzykiwania danych), zignoruj ten alert.

• 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”.

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:

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

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

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

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

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

• W 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.

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

• Znaleziono duplikat [accessKey=%%%] dla przycisku.
• Znaleziono duplikat [accessKey=%%%] dla łącza.

• Znaleziono duplikat [accessKey=%%%].

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 fokusu", 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.

• 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:

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:

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

• Możliwe nieprawidłowe użycie [aria-labelledby]: Nie znaleziono id "%%%", do których się odwołuje.
• Możliwe nieprawidłowe użycie [aria-describedby]: Nie znaleziono id "%%%", do których się odwołuje.
• 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.

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

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

• [%%%] 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>.

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

• [%%%] bezpośrednio odwołuje się do tego samego [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.

• [%%%] 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.

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

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

Dlaczego ANDI zgłasza ten alert?

Odnośnik tego łącza 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.

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

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

• Element zagnieżdżony w <label>, ale label[for=%%%] nie pasuje do [id=%%%] elementu.

Dlaczego ANDI zgłasza ten alert?

Ten element jest zagnieżdżony wewnątrz elementu <label> z atrybutem for, który nie odpowiada identyfikatorowi id elementu.

Dlaczego dotyczy to dostępności?

Czytnik ekranu może nie podawać prawidłowej etykiety dla tego elementu lub innego elementu, co może spowodować, że użytkownik z niepełnosprawnością wzroku wprowadzi informacje w niewłaściwym miejscu.

Co należy zrobić?

Element formularza powinien być powiązany ze swoją <label> jawnie (dopasowanie for/id) i/lub niejawnie (zagnieżdżenie elementu wewnątrz etykiety). W tym przypadku element jest zagnieżdżony wewnątrz swojej etykiety <label>, co powoduje utworzenie programowego powiązania, jednak atrybut for etykiety nie odpowiada identyfikatorowi id elementu formularza. Ta niezgodność może przerwać asocjację programową lub spowodować nieprawidłowe skojarzenie z innym elementem.

Upewnij się, że atrybut for znacznika label odpowiada identyfikatorowi id elementu formularza.

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

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

• Strona ma więcej niż jeden znacznik <title> z tytułem.

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.

• 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ę.

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

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

• 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ść fokusu 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 fokusu klawiatury za pomocą klawisza Tab. Wartości ujemne są przeznaczone do programowego kontrolowania fokusu za pomocą JavaScript.

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

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

• W HTML5 znaleziono przestarzały {attribute/tag}

Dlaczego ANDI zgłasza ten alert?

Typ dokumentu strony zdefiniowano jako HTML5, ale użyto przestarzałego 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:

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,

• 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:

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

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

• Atrybut [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.

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

• 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:

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

• 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:

Co należy zrobić?

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

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

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

• Element interaktywny jest poza porządkiem tabulacji.

Dlaczego ANDI zgłasza ten alert?

Ten element ma ujemną wartość tabindex. Ujemny tabindex nie zawsze jest problemem związanym z dostępnością, ale konieczne będzie ręczne sprawdzenie tego elementu.

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").

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

• 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").

• 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 fokusu, gdy sterowanie rezerwowe otrzymuje fokus, do sterowania rezerwowego należy dodać zdarzenia fokusu, 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.

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

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 fokusu, gdy sterowanie rezerwowe otrzymuje fokus, do sterowania rezerwowego należy dodać zdarzenia fokusu, 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.

• Element <a> nie ma atrybutów [href], [id] ani [tabindex]. Może to być łącze, które działa tylko przy użyciu myszy.

• Element <a> nie ma atrybutów [href], ani [tabindex]. Może to być łącze, które działa tylko przy użyciu myszy.

Dlaczego ANDI zgłasza ten alert?

Ten element nie znajduje się w porządku tabulacji (brak href lub tabindex), a mimo to użyto znacznika <a>. Jest to wskazówka, że może on funkcjonować jako łącze, które może być dostępne tylko dla użytkowników myszy.

Dlaczego dotyczy to dostępności?

W tym elemencie może brakować pewnych ważnych elementów, które umożliwiłyby jego dostępność dla użytkowników korzystających z klawiatury do nawigacji.

Co należy zrobić?

Konieczne jest przeprowadzenie pewnych testów ręcznych i badań.

Najpopularniejszym (klasycznym) sposobem tworzenia łącza jest użycie znacznika <a> i dołączenie href, który wskazuje na stronę docelową łącza. Czasami programiści świadomie decydują się na użycie znacznika <a>, ale wolą nie używać href do obsługi logiki aktywacji łącza i zamiast tego używają JavaScriptu do wykonania pewnych czynności przed przekierowaniem użytkownika. Jeśli w elemencie <a> nie ma href, ale element <a> działa jak łącze, należy zastosować role="link", aby czytnik ekranu wiedział, że element jest rzeczywiście łączem. Lub, jeśli element zachowuje się bardziej jak przycisk (wykonuje akcje), a nie jak łącze (przekierowuje), role="button" może być lepszym pomysłem. Albo jeszcze lepiej, po prostu użyj <button>.

Ponadto, aby upewnić się, że łącze znajduje się w kolejności tabulacji, należy zastosować href lub tabindex="0". Jeśli łącze ma ujemny tabindex="0", konieczne jest przeprowadzenie ręcznych testów, aby upewnić się, że łącze jest dostępne z klawiatury.

Na koniec, gdy łącze zostanie rozpoznane przez czytnik ekranu jako łącze i będzie można do niego nawigować, upewnij się, że łącze można obsługiwać za pomocą klawiatury, naciskając klawisz "enter".

• Ten <a> element jest celem innego łącza; Gdy łącze jest aktywowane, cel może nie otrzymać wskaźnika fokusu.

Dlaczego ANDI zgłasza ten alert?

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

Dlaczego dotyczy to dostępności?

Ponieważ ten element <a> nie posiada atrybutu tabindex, nie można na nim ustawić fokusu, dlatego nie będzie wizualnego wskaźnika fokusu, gdy łącze jest aktywowane. Po przejściu przez łącze użytkownicy widzący mogą nie być w stanie śledzić, gdzie umieszczono fokus.

Co należy zrobić?

Aby zapewnić, że kotwica docelowa wyświetla wizualne wskazanie fokusu, gdy otrzyma fokus, dodaj atrybut tabindex do elementu <a> target. Ponadto należy się upewnić, że dla danego elementu został zastosowany domyślny wskaźnik fokusu przeglądarki lub ulepszona stylizacja fokusu.

• Pusta 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.

• Żywy region nie ma 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.

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

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

• Niejednoznaczne łącze: taką sama nazwa/opis jak innego łącza, ale różne href.

Dlaczego ANDI zgłasza ten alert?

To łącze ma taką samą dostępną nazwę i dostępny opis jak inne łącze na stronie, ale odnośniki (href są inne. Zasadniczo łącza nie mają opisowego tekstu.

Dlaczego dotyczy to dostępności?

Niejednoznaczne łącza stanowią potencjalny problem dla wszystkich użytkowników, nie tylko użytkowników technologii wspomagających (czytników ekranu). Z powodu tej dwuznaczności (nazwa / opis łączy są takie same, ale miejsca docelowe są różne) użytkownik może nawigować do niezamierzonej lokalizacji.

Ponadto użytkownicy czytników ekranu mogą wyświetlić listę łączy, dzięki którym mogą efektywnie nawigować. Jeśli łącza na takiej liście nie są unikalne i „samookreślające się”, wpływa to na dostępność strony.

Co należy zrobić?

Jeśli wartości href są różne, dostępna nazwa i dostępny opis każdego łącza powinny być jednoznacznie zidentyfikowane. Uwaga: Jeśli href są identyczne, nazwy/opisy linków mogą być takie same lub różne.

• Tekst łącza jest niejasny i nie określa jego celu.

Dlaczego ANDI zgłasza ten alert?

Dostępna nazwa i opis tego łącza są niejasne i nie zapewniają znaczącego kontekstu.

Dlaczego dotyczy to dostępności?

Osoba słabowidząca może nie być w stanie określić pełnego celu tego łącza bez wyszukania jego kontekstu na stronie w sąsiadujących elementach.

Co należy zrobić?

Podaj sensowną dostępną nazwę/opis dla tego łącza.

• Łącze reaguje na zdarzenie click, ale nie jest osiągalne z klawiaury.

Dlaczego ANDI zgłasza ten alert?

To łącze nie ma atrybutu href lub tabindex, ale wykryto zdarzenie javascript click.

Dlaczego dotyczy to dostępności?

To łącze wykonuje jakąś funkcję, ale nie jest w porządku tabulacji. Może nie być dostępne dla użytkowników nawigujących za pomocą klawiatury.

Co należy zrobić?

Upewnij się, że wyjście ANDI jest odpowiednie.

Zamknij ANDI i sprawdź, czy można uzyskać dostęp do łącza za pomocą klawisza Tab, Shift + Tab, klawiszy strzałek lub innych udokumentowanych klawiszy.

Aby łącze znajdowało się w porządku tabulacji, dodaj href="#" lub href="javascript:void(0)", albo tabindex="0".

Jeśli href nie może być użyty, może być konieczne dodanie role="link" do elementu <a>, aby czytnik ekranu rozpoznał element jako łącze i uwzględnił go w swojej funkcji Lista linków.

• Element <a> bez [href] nie może być rozpoznany jako łącze; dodaj [role=link] lub [href].

Dlaczego ANDI zgłasza ten alert?

Ten element <a> ma tabindex, ale nie ma href.

Dlaczego dotyczy to dostępności?

Czytnik ekranu może nie zidentyfikować tego elementu jako łącze, a użytkownik może nie wiedzieć, że element można aktywować.

Co należy zrobić?

Czy ten element działa jak łącze? Kliknij na nią myszą. Przejdź do niego za pomocą klawiatury i naciśnij klawisz Enter.

Jeśli element pełni funkcję łącza, dodaj role="link" do elementu lub dodaj href. Dzięki temu czytnik ekranu rozpozna element jako łącze.

UWAGA: Jeśli element pojawia się i działa jak przycisk, dodaj role="button" i upewnij się, że można go nacisnąć za pomocą klawisza spacji.

Jeśli ten element nie wykonuje żadnej funkcji po kliknięciu, to może być celem zakotwiczenia, w takim przypadku zignoruj ​​ten alert.

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

• Znaleziono element <blink>, nie używaj go.

Dlaczego ANDI zgłasza ten alert?

Ten element to <blink>.

Dlaczego dotyczy to dostępności?

Ten element może powodować u niektórych osób napady padaczki, gdy zawartość jest duża. Ponadto błyskający /migający tekst w elemencie <blink> 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 <blink> i nie pozwalaj, aby tekst na stronie migał lub błyskał.

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

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

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

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

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

• 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. Konieczna jest ręczna ocena wszystkich obrazów tła.

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.

Czytniki ekranu traktują wszystkie obrazy tła jako dekoracyjne i dlatego użytkownicy z niepełnosprawnością wzroku nie są informowani o obecności obrazów tła. Uwaga: Jest to problem z dostępnością tylko wtedy, gdy obrazy tła zawierają ważne informacje.

Co należy zrobić?

Upewnij się, że wszystkie nie-dekoracyjne obrazy tła mają gdzieś na stronie alternatywny opis tekstowy. Moduł grafika/obrazy ANDI posiada dwie pomocne funkcje do lokalizowania obrazów tła: Ukryj obrazy tła and Znajdź tło przycisków.

Jeśli znaleziono znaczące obrazy tła bez alternatywnych tekstów, rozważ następujące rozwiązania:

• Żywy region zawiera element formularza.

Dlaczego ANDI zgłasza ten alert?

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.

• Ż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ść.

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

• [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.

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

• 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 (wygląda jak nagłówek).

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

• 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:

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

• 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ą.

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

• 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:

• 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. Nie można było określić koloru tła elementu ze względu na obraz tła.

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:

• 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:

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

Is this really an issue? (disabled elements)

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:

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

Dlaczego ANDI zgłasza ten alert?

Na stronie wykryto element z role="grid" (siatka).

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.

Streszczenie oczekiwań dotyczących działania siatki:

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.

• Zwykły tekst nie spełnia minimalnych wymagań 4,5:1.
• 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:

• Strona ma %%% wyłaczone elementy. Elementy wyłączone są poza porządkiem tbulacji (niewidoczne dla czytnika ekranu).
• Strona ma %%% wyłaczone przyciski. Elementy wyłączone są poza porządkiem tbulacji (niewidoczne dla czytnika ekranu).
• Strona ma %%% wyłaczone linki. Elementy wyłączone są poza porządkiem tbulacji (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 słaboowidząca i używająca klawiatury do nawigacji sekwencyjnej po stronie może nie wiedzieć, że element jest wyłączony lub że w ogóle istnieje.

Co należy zrobić?

Niektórzy twierdzą, że wyłączanie elementów jest ogólnie rzecz biorąc złą praktyką projektową. Użytkownicy mogą być zdezorientowani lub sfrustrowani, jeśli nie wiedzą, dlaczego dany element jest wyłączony lub jak sprawić, by stał się aktywny.

Wyłączenie elementu nie zawsze jest równoznaczne z problemem dostępności. Można jednak argumentować, że wyłączone elementy naruszają niektóre z zasad Cztery zasady dostępności. Mianowicie, czy treść jest postrzegalna? Czy można ją obsługiwać? Czy jest zrozumiała?

Być może istnieje możliwość ulepszenia projektu, tak aby był bardziej dostępny i użyteczny dla wszystkich. Oto kilka rzeczy, które warto rozważyć:

• Strona ma wyłączone elementy %%%. Elementy wyłaczone nie podlegają wymogom kontrastu kontrastu.

Dlaczego ANDI zgłasza ten alert?

Disabled elements (disabled="disabled") were found on the page. Elementy wyłączone to nieaktywne elementy interfejsu użytkownika i nie mają wymagań dotyczących kontrastu kolorów zgodnie z WCAG AA Wymagania dotyczące współczynnika kontrastu.

• Element jest ukryty przed czytnikiem ekranu przy użyciu [aria-hidden=true], co powoduje brak wyjścia.

• Element jest ukryty przed czytnikiem ekranu przy użyciu [aria-hidden=true], co powoduje brak wyjścia.

Dlaczego ANDI zgłasza ten alert?

Ten element został ukryty przed czytnikiem ekranu za pomocą aria-hidden="true". Uwaga: Element może być objęty nadrzędnym (przodkiem) elementem z aria-hidden="true".

Dlaczego dotyczy to dostępności?

Jeśli element jest interaktywny lub stanowi jedyne źródło znaczącej informacji, powinien być rozpoznawany przez czytnik ekranu, aby użytkownik z niepełnosprawnością wzroku mógł wejść w interakcję z tym elementem lub uzyskać dostęp do jego znaczenia.

Jeśli element jest oznaczony jako aria-hidden="true", czytnik ekranu całkowicie zignoruje ten element.

Co należy zrobić?

Atrybut aria-hidden="true" jest przeznaczony do stosowania w określonych sytuacjach. Można używać aria-hidden="true", gdy:

Rzadko zdarza się, aby elementy, na których można ustawić fokus, miały aria-hidden="true". Najprawdopodobniej, jeśli element może otrzymywac fokus, nie powinien mieć aria-hidden="true" i nie powinien mieć elementu przodka z aria-hidden="true".

Jeśli element nie powinien być używany przez wszystkich użytkowników, należy go ukryć, używając właściwości css display:none, co spowoduje usunięcie elementu z ekranu i ukrycie go przed użytkownikami czytników ekranu.

Jednym z przykładów, gdzie użycie aria-hidden="true" jest dopuszczalne i powszechne, są modalne okna dialogowe. Gdy modal jest otwarty, "wyszarzone tło" nie powinno być dostępne dla żadnego użytkownika. Niedostępna treść może mieć aria-hidden="true", aby uzupełnić wizualną informację o "wyszarzeniu".