Przychodzę do Ciebie z niewielką wskazówką o tym, jak ułatwić sobie testowanie dostępności strony za pomocą klawiatury. Otóż czasami nasz focus ginie, np. znajdując się na elemencie umieszczonym poza ekranem. Bywa, zdarza się, kolega mówił, że zna kogoś, kto… Jak sobie sprawnie radzić z tym problemem?
Z pomocą przychodzi nam Chrome DevTools.
- Otwórz konsolę (F12, a potem zakładka Console).
- Kliknij w ikonę oka, po lewej stronie od okienka filtrowania. W ten sposób otworzysz pole do budowania tzw. live expression.
- Wpisz
document.activeElement.
- Naciśnij Enter, aby zapisać wyrażenie. Lub po prostu kliknij poza pole Live Expression, np. na testowaną stronę. Wyrażenie powinno pokazać aktualny aktywny element.
- Używając klawisza TAB przenieś focus na inne elementy. Wyrażenie powinno się automatycznie aktualizować (w teorii co 250ms).
Ale to nie koniec magii. Ja wiem, że sama sucha nazwa czasem może być niewystarczająca, aby zidentyfikować aktywny element…
W takim przypadku najedź kursorem na wynik wyrażenia, aby podświetlić aktywny element na ekranie.
Lub też kliknij prawym przyciskiem myszy na wynik wyrażenia, otwierając menu podręczne. Następnie wybierz Reveal in Elements panel , aby znaleźć aktywny element w drzewie DOM na zakładce Elements.
Możesz również wybrać z menu podręcznego opcję Store outerHTML as global variable, aby stworzyć zmienną temp1. Następnie korzystaj z niej według potrzeb w konsoli (zakładka Console).
Oddaję Tobie głos. Czy korzystasz często z live expressions? Sprawdzasz z ich pomocą aktywny element? A może masz swój własny, inny sposób na testowanie strony z poziomy klawiatury? Wszelakie komentarze zawsze mile widziane!
