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

Przejdź do treści

Podręcznik użytkownika ANDI

Na tej stronie opisano funkcje i funkcjonalność ANDI (Accessible Name and Description Inspector), narzędzia do automatycznego testowania dostępnosci.

Uruchomienie ANDI

Przejdź do strony, którą chcesz przetestować. Uruchom ANDI, klikając ulubioną/zakładkę oznaczoną „ANDI”. ANDI zostanie wstawiony na stronę. Zobacz instrukcje instalacji.

Jeśli występują problemy z uruchomieniem ANDI, prosimy odwiedzić stronę FAQ.


Podświetlanie elementów

Po zakończeniu skanowania strony przez ANDI wszystkie elementy aktywne / interaktywne zostaną wyróżnione wizualnie.

Elementy interaktywne:

Pole tekstowe z pomarańczowym obrysem - element interaktywny bez alertu o zagrożeniu Elementy, na których można ustawić fokus, zostaną wyróżnione pomarańczowym przerywanym konturem (grubość 1 piksela), co oznacza, że ​​dla elementu znaleziono pewne znaczniki dostępności. Tester powinien sprawdzić te elementy, aby ustalić, czy Wyjście ANDI jest odpowiednie dla jego kontekstu na stronie.

Element interaktywny z „czerwonym alertem”: danger icon

Pole tekstowe z czerwonym obrysem - alert o zagrożeniu Jeśli ANDI znalazł Alert dostępności o wysokim priorytecie związany z elementem, element zostanie podświetlony czerwonym, przerywanym konturem (grubość 3 pikseli).

Element aktywny:

Pole tekstowe z purpurowym konturem - element aktywny Gdy użytkownik porusza się po stronie testowej, ANDI sprawdza element, który jest fokusowany lub wskazany myszką. Kontrolowany element nazywany jest „elementem aktywnym” i będzie podświetlony różowo-fioletowym jednolitym konturem (grubość 4 pikseli). Znacznik dostępności aktywnego elementu zostanie wyświetlony w sekcji Komponenty dostępności, a jego alternatywne obliczenia tekstowe (co powiedziałby czytnik ekranu) pojawią się w sekcji Wyjście ANDI.

Inspekcja aktywnego elementu

Ta sekcja pozwala użytkownikowi zobaczyć informacje o dostępności aktywnego elementu.

Ponieważ element na stronie jest fokusowany lub wskazywany myszą, ta sekcja zostanie zaktualizowana o informacje dla tego elementu. Aby zapobiec aktualizacji tej sekcji po najechaniu myszką, przytrzymaj klawisz Shift (blokada wskazania).

Sekcja inspekcji aktywnego elementu

W tej sekcji wyświetlana jest nazwa lub rola elementu, komponenty dostępności, dane wyjściowe ANDI oraz wszelkie alerty związane z aktywnym elementem.


Nazwa elementu / Rola

ANDI wyświetla znacznik HTML i rolę ARIA aktywnego elementu.

Element: <input type="text">

Ta pozycja działa również jako łącze, które po przejściu spowoduje przeniesienie fokusu do lokalizacji elementu na stronie. Najechanie kursorem na ten element spowoduje narysowanie „lasera”, który wskazuje położenie elementu na testowanej stronie.


Tabela komponentów dostępności

Kiedy ANDI skanuje testowaną stronę, szuka znaczników HTML i atrybutów, które wpływają na dostępność elementów na stronie. Te znaczniki i atrybuty są nazywane komponentami dostępności i są przedstawione w tabeli.

Tabela komponentów dostępnoścci, 3 wyświetlone elementy

Oto niektóre skanowne elementy: aria-label, aria-labelledby, aria-describedby, alt, title, <caption>, <figcaption>, <label>, <legend>, innerText. Aby uzyskać więcej informacji o komponentach dostępności, zobacz Podręcznik programisty.


Wyjście ANDI

Wyjście ANDI wyświetla to, co czytnik ekranu powinien ogłosić użytkownikowi, dostępną nazwę oraz dostępny opis. Może także zawierać różne sformułowania w zależności od wykrytych stanów i właściwości plus wszelkie powiązane alerty dostępności które wykrył ANDI.

Wyjście ANDI z przykładowym tekstem

Obliczenia opierają się przede wszystkim na specyfikacjach W3C, a tam, gdzie specyfikacje są nieobsługiwane lub niejasne, oparte są na dokładnej analizie zachowania współczesnych czytników ekranu.

Alerty w danych wyjściowych

Alerty pojawiające się w łączu Wyjście są szczegółowo omówione na stronie pomocy Alerty.

Różnica między wyjściem czytnika ekranu

Użytkownicy mogą oczekiwać, że dostępna nazwa i opis w danych wyjściowych ANDI, są dokładne i powinny zostać wypowiedziane przez czytniki ekranu zgodne ze standardami.

Czytniki ekranu często dodają dodatkowe słowa w niektórych elementach, takie jak „przycisk” dla przycisków, czy „grafika” dla obrazów. ANDI nie zawiera tych sformułowań i wyświetla tylko tekst komponentów. Na przykład, jeśli słowo „przycisk” znajduje się w dostępnej nazwie lub opisie przycisku, czytnik ekranu najprawdopodobniej powie dwa razy „przycisk”, a ANDI nie.

Analiza strony

Po przeanalizowaniu strony przez ANDI, wyniki zostaną przedstawione w sekcji Analiza strony.

sekcja Analiza strony

W tej sekcji znajdują się Łączna liczba znalezionych elementów, Przyciski poprzedni/następny element, Dodatkowe szczegóły strony oraz Lista alertów dostępności.


Łączna liczba znalezionych elementów

ANDI wyświetli ogólną liczbę elementów znalezionych na stronie. Typy elementów zależą od wybranego modułu.

Przyciski poprzedni/następny element

Po naciśnięciu, fokus zostanie przesunięty na podświetlony element, który poprzedza lub następuje po elemencie aktywnym w oparciu o strukturę HTML strony; generalnie „poprzedni” lub „następny” element przeanalizowany przez ANDI.


Dodatkowe szczegóły strony

W zależności od wybranego modułu w tej sekcji mogą być wyświetlane dodatkowe wyniki. Na przykład: klawisze dostępu, lista tabel, lista linków, szczegóły grafiki.

Aby uzyskać więcej informacji, zapoznaj się z dokumentacją każdego modułu.


Alerty dostępności

Po uruchomieniu ANDI każdy element HTML jest analizowany pod kątem warunków, które często powodują problemy z dostępnością, w zależności od wybranego modułu. o znalezieniu takiego warunku, ANDI generuje alert, który pomaga użytkownikowi zidentyfikować potencjalne problemy z dostępnością.

Alerty dostępności z przykładowym alertem

Alerty są przedstawione na liście Alerty dostępności. Alerty są podzielone na trzy poziomy alertów, które wskazują prawdopodobieństwo wystąpienia wady dostępności:

  • Zagrożenie (czerwony, ikona X) - niemal pewne prawdopodobieństwo wystąpienia problemu
  • Ostrzeżenie (pomarańczowy, ikona !) - możliwość wystąpienia problemu lub niespójnego zachowania się czytników ekranu
  • Uwaga (żółty ikona ?) - wymaga dalszych badań

Alerty na liście są podzielone na grupy. Rozszerzenie grupy powoduje wyświetlenie komunikatów ostrzegawczych dotyczących elementów na stronie. Komunikaty są łączami, które prowadzą do elementu, z którym powiązany jest alert.

Alerty związane z aktywnym elementem pojawią się w sekcji Wyjście ANDI. Aktywacja alertu w danych wyjściowych ANDI otworzy stronę pomocy Alerty, która zawiera szczegółowe informacje na temat konkretnych alertów i kroków naprawczych.

Menu wyboru modułu

Kiedy ANDI jest uruchamiany po raz pierwszy, skanuje stronę w poszukiwaniu elementów interaktywnych. Aby przetestować inne obszary dostępności, ANDI oferuje możliwość uruchomienia specjalistycznych „modułów”.

Przyciski uruchamiania modułów ANDI: elementy interaktywne, grafika/obrazy, łącza, tabele, struktury, kontrast kolorów, treści ukryte

Więcej informacji na temat każdego modułu można znaleźć na stronie pomocy Moduły.

Przyciski sterowania / ustawień

Przyciski sterowania i ustawień znajdują się w prawym górnym rogu okna ANDI.

Przyciski sterowania i ustawień

Przyciski są następujące: Odśwież (Uruchom ponownie), Ustawienia rozszerzone, Klawisze skrótów, Pomoc i Zamknij.


Odśwież

przycisk Odśwież

klawiatura z wyróżnionym klawiszem alt i klawiszem znaku plus/równa się - polecenie Odśwież ANDI Aby ponownie uruchomić ANDI na testowanej stronie, naciśnij przycisk Odśwież. Alternatywnie, alt+= lub na pasku zakładek/ulubionych w przeglądarce naciśnij przycisk oznaczony „ANDI”.

Gdy ANDI zostanie odświeżony, najpierw usunie ze strony pasek ANDI wraz z dodanymi do strony testowej znacznikami dodanymi do strony i uruchomi się ponownie. Nie powinno być potrzeby odświeżania strony testowej, a następnie odświeżania ANDI.


Rozszerzone ustawienia

przycisk Rozszerzone ustawienia

Naciśnięcie tego przycisku spowoduje otwarcie menu z niektórymi ustawieniami dla zaawansowanych użytkowników.

Szczegóły dotyczące każdego zaawansowanego ustawienia są wyjaśnione poniżej.


Przycisk Lista skrótów

przycisk Lista skrótów - włączony przycisk Lista skrótów - wyłączony

Naciśnięcie przycisku Listy skrótów spowoduje wyświetlenie listy skrótów klawiszowych ANDI, które umożliwiają szybkie dotarcie do wybranych sekcji ANDI.

Lista skrótów ANDI

Przycisk Pomoc

przycisk Pomoc

Naciśnięcie przycisku Pomoc otwiera w nowym oknie Pomoc ANDI (witryna, którą teraz czytasz).

Jeśli ten przycisk zostanie naciśnięty po wybraniu modułu innego niż „elementy interaktywne”, otworzy się Pomoc dla tego modułu.


Przycisk Zamknij

przycisk Zamknij

Naciśnięcie przycisku Zamknij usunie ekran ANDI z testowanej strony wraz ze wszystkimi dodanymi do strony znacznikami. Opuszczenie strony testowej lub naciśnięcie przycisku odświeżania przeglądarki (F5) również spowoduje usunięcie ANDI.


Okno wyskakujące Wersja

Kliknięcie tekstu nagłówka „ANDI” w lewym górnym rogu paska ANDI spowoduje wyświetlenie wyskakującego okienka zawierającego numer wersji ANDI i numer wersji modułu.

Ustawienia rozszerzone

menu Ustawienia rozszerzone

Przełącznik Podświetlanie elementów

To ustawienie pozwoli użytkownikowi ukryć lub pokazać podświetlanie elementu (kontury) na testowanej stronie.

Wszystkie funkcje ANDI pozostają z wyłączonymi podświetleniami; ta kontrolka jest ściśle kosmetyczna.

Użytkownicy ANDI z defektami widzenia mogą znaleźć podobne informacje, na które wskazują podświetlenia w sekcji Wyjście ANDI.

Podczas przeprowadzania widoczności wskaźnika fokusa najlepiej jest wyłączyć to ustawienie lub nie odświeżać ANDI

Uwaga: Możliwość wyłączenia podświetlenia elementów nie jest dostępna na stronach renderowanych w trybie zgodności z Internet Explorerem 7 lub mniejszym.


Opcja linearyzacji strony

To ustawienie „linearyzuje” stronę, wyszukując elementy, które zostały ustawione za pomocą CSS, i zmieniając ich położenie w kolejności, w której wykryje je czytnik ekranu.

Elementy, które zostały przeniesione, będą miały wokół siebie otoczkę w kolorze turkusowym.

Może to być przydatne podczas testowania znaczącej sekwencji elementów na stronie.


Opcja wyświetlania w trybie mini

To ustawienie powoduje skondensowanie ANDI, dzięki czemu widoczna jest większa część testowanej strony.

Gdy tryb Mini jest włączony, ANDI pojawi się w następujący sposób:

  1. Tabela komponentów dostępności i sekcja Analiza strony (wszystkie alerty) zostaną ukryte.
  2. Nazwa/Rola elementu, Wyjście ANDI (w tym alerty powiązane z tym elementem) oraz przyciski Sterowanie/Ustawienia, przyciski następny i poprzedni element oraz menu wyboru modułu pozostaną widoczne.
ANDI z włączonym trybem mini

Klawisze skrótów

ANDI ma kilka wbudowanych skrótów klawiaturowych (znanych również jako klawisze skrótów), które pomagają użytkownikowi klawiatury w szybkiej nawigacji.

Arkusz klawiszy skrótów ANDI
alt+= Odśwież klawiatura z wyróżnionymi klawiszami skrótów
alt+' Skocz do Wyjścia ANDI
alt+/ Skocz do Aktywnego elementu
alt+kropka Następny element
alt+przecinek Poprzedni element
alt+apostrof Skocz do sekcji

UWAGA: Przeglądarka Firefox wymaga klawiszy modyfikujących shift+alt.


Odśwież alt+=

klawiatura z wyróżnionym klawiszem alt i klawiszem znaku plus/równa się - polecenie Odśwież ANDI Aby ponownie uruchomić ANDI na testowanej stronie, wystarczy nacisnąć klawisz skrótu (znak alt i znak równości). Alternatywnie, naciśnięcie przycisku oznaczonego „ANDI” na pasku ulubionych/zakładek może ponownie uruchomić ANDI.

Gdy ANDI zostanie odświeżony, najpierw usunie pasek ANDI ze strony wraz ze wszystkimi dodanymi do niej znacznikami i uruchomi się ponownie. Innymi słowy, nie ma potrzeby odświeżania strony testowej, a następnie ponownego uruchamiania ANDI.

Klawisz skrótu Odśwież pełni tę samą funkcję, co przycisk Uruchom ponownie.


Skocz do Wyjścia alt+'

klawiatura z wyróżnionym altem i apostrofem - polecenie Skocz do Wyjścia Ten skrót (alt i apostrof) przeniesie fokus do sekcji Wyjście ANDI. Jeśli używany jest czytnik ekranu, odczytuje on tekst Wyjścia. Dla użytkowników niedowidzących jest to bardzo przydatne w połączeniu z klawiszem aktywnym Skocz do elementu aktywnego.


Skocz do aktywnego elementu alt+ukośnik

klawiatura z wyróżnionym altem i ukośnikiem - polecenie Skocz do aktywnego elementu Po naciśnięciu tego skrótu (alt i ukośnik) fokus zostanie przeniesiony do elementu aktywnego na testowanej stronie. Dla użytkowników niedowidzących jest to bardzo przydatne w połączeniu z klawiszem skrótu do Wyjścia.


Następny element alt+kropka

klawiatura z wyróżnionym altem i kropką - polecenie Skocz do następnego elementu Po naciśnięciu fokus przejdzie do podświetlonego elementu, który w strukturze HTML strony następuje po elemencie aktywnym; zasadniczo „następny” element.


Poprzedni element alt+przecinek

klawiatura z wyróżnionym altem i przecinkiem - polecenie Skocz do poprzedniego elementu Po naciśnięciu fokus przejdzie do podświetlonego elementu, który w strukturze HTML strony poprzedza aktywny element; zasadniczo „poprzedni” element.


Skocz do sekcji alt+grawis

klawiatura z wyróżnionym altem i grawisem - polecenie Skocz do sekcji Kilkakrotne naciśnięcie tego skrótu (alt i grawis) pozwoli użytkownikowi przeskakiwać między czterema sekcjami w kolejności:

  1. Logo ANDI („początek” ANDI)
  2. Przyciski ustawień i sterowania (w prawym górnym rogu)
  3. Sekcja inspekcji aktywnego elementu (po lewej)
  4. Sekcja analizy strony (po prawej)

Sterowanie myszą

Lasery

ANDI ma możliwość nałożenia na testowaną stronę „lasera”, aby szybko wskazać lokalizację powiązanych elementów.

Najechanie na aria-labelledby, aria-describedby lub

Blokada wskazania

Klawiatura z wyróżnionym klawiszem Shift - polecenie Blokuj wskazanie Gdy najedziesz myszą na elementy na testowanej stronie, przytrzymanie klawisza Shift „zablokuje” wyświetlanie aktywnego elementu. Jeśli kursor myszy będzie przesuwany nad innymi elementami podczas przytrzymywania klawisza Shift, wyświetlanie aktywnego elementu nie zmieni się (zgodnie z projektem). Zwolnienie klawisza Shift pozwoli użytkownikowi na normalną zmianę aktywnego elementu.

Jednoczesne użycie

Z czytnikami ekranu

ANDI jest w pełni dostępny i może być używany jednocześnie z czytnikiem ekranu.


Z narzędziami dla programistów

ANDI może być używany jednocześnie z narzędziem inspekcyjnymi, takim jak Narzędzia programistyczne przeglądarki. Artefakty z ANDI takie jak niestandardowe atrybuty data-andi508-* oraz ANDI508-*, klasy CSS, pojawią się na elementach testowanej strony, ale nie powinny wpływać na funkcjonalność testowanej strony.

Ograniczenia

Treść dynamiczna

Jeśli jakiś obszar na testowanej stronie zmienia się dynamicznie (np. kliknięcie na coś otwiera podmenu lub zmienia tekst na ekranie), ANDI nie będzie wiedział, że strona się zmieniła. Aby przetestować zaktualizowaną zawartość, po prostu odśwież ANDI i sprawdź na nowo wyświetlany obszar.

Aktywny element zostanie zachowany podczas odświeżania, a komponenty, dane wyjściowe i alerty zostaną zaktualizowane. Zapewnia to sposób testowania dynamicznie zmieniających się właściwości, takich jak bieżący stan sortera kolumn tabeli lub kontrolera rozwijania/zwijania.


Frame/iFrame

Gdy ANDI wykryje na stronie ramki lub ramki iframe, oferuje możliwość ich przetestowania niezależnie w nowym oknie.


Shadow DOM

Obecnie ANDI nie powraca do drzew Shadow DOM. Dlatego aktualnie zawartość w Shadow DOM nie może być testowana za pomocą ANDI.


Manipulowanie DOM testowanej strony

ANDI minimalizuje manipulowanie stroną testową DOM, jednakże pewne zmiany muszą być dokonane. Do niektórych elementów ANDI może dodać atrybuty data-* i swoje klasy CSS. Te atrybuty i klasy zawierają łańcuch „ANDI508”. Elementom, które mają pozycjonowanie ustalone przez CSS, ANDI dostosuje górne lub dolne odstępy, aby zapewnić, że elementy nie blokują widoku paska ANDI. Po naciśnięciu przycisku „Zamknij”, ANDI zostanie usunięty ze strony wraz z wszystkimi dokonanymi modyfikacjami elementów.


Testowanie ANDI Z ANDI

ANDI nie może być używany do testowania ANDI, ponieważ usuwa się przed startem. Niezła próba. Aby przetestować ANDI pod kątem dostępności, użytkownicy będą musieli powrócić do archaicznych metod, takich jak bezpośrednia inspekcja kodu lub słuchanie czytnika ekranu.