Wprowadzenie do koncentracji

Omówienie funkcji ułatwień dostępu na ekranie

Dave Gaach
Dave Gash
Meggin Kearney
Meggin Kearney

W tej lekcji opowiemy o centrum uwagi oraz o tym, jak możesz nim zarządzać w swojej aplikacji. Zaznaczenie odnosi się do elementu sterującego na ekranie (elementu wejściowego, takiego jak pole, pole wyboru, przycisk lub link), który obecnie odbiera dane wejściowe z klawiatury i ze schowka, gdy wklejasz treść.

To świetne miejsce, by dowiedzieć się więcej o ułatwieniach dostępu, ponieważ wszyscy wiemy, jak korzystać z klawiatury, łatwo się z nią zapoznać i przetestować, a przy tym przynosi ona korzyści praktycznie wszystkim użytkownikom.

Użytkownicy z niepełnosprawnością ruchową, np. trwałym paraliżem czy skręconym nadgarstkiem, mogą poruszać się po stronie tylko za pomocą klawiatury lub innego urządzenia, dlatego dobra strategia dotycząca koncentracji ma kluczowe znaczenie dla ich wygody.

Dla doświadczonych użytkowników, którzy znają wszystkie skróty klawiszowe na komputerze, z pewnością przyspieszy poruszanie się po witrynie przy użyciu samej klawiatury.

Dobrze wdrożona strategia skupienia sprawia, że korzystanie z aplikacji jest jeszcze lepsze dla wszystkich użytkowników. Na kolejnych lekcjach zobaczymy, że wysiłek, jaki się na to poświęca, jest ważną podstawą wspierania użytkowników technologii wspomagających, a rzeczy również wszystkich.

Czym jest ostrość?

Zaznaczenie wskazuje, w którym momencie na stronie mają się wyświetlać zdarzenia klawiatury. Jeśli na przykład zaznaczysz pole wprowadzania tekstu i zaczniesz pisać, w tym polu zostaną odebrane zdarzenia z klawiatury i wyświetlone wpisywane znaki. Po zaznaczeniu tej opcji element ten będzie też otrzymywać wklejony tekst ze schowka.

Zaznaczone pole tekstowe z klawiatury.

Obecnie aktywny element jest często oznaczony pierścieniem fokusowym, którego styl zależy od przeglądarki i stylu zastosowanego przez autora strony. Na przykład w Chrome zaznaczone elementy są zaznaczone niebieskim obramowaniem, a w Firefoksie – przerywane.

Przycisk rejestracji.

Niektórzy użytkownicy obsługują komputer niemal wyłącznie za pomocą klawiatury lub innego urządzenia wejściowego. Dla takich użytkowników kluczowe znaczenie ma koncentracja na ekranie, ponieważ jest to podstawowy sposób, aby dotrzeć do wszystkich elementów na ekranie. Dlatego w sekcji 2.1.1 listy kontrolnej Web AIM stwierdzamy, że wszystkie funkcje strony powinny być dostępne za pomocą klawiatury, chyba że jest to coś, czego nie można zrobić za pomocą klawiatury, na przykład rysowanie odręczne.

Jako użytkownik możesz decydować o tym, który element jest obecnie aktywny za pomocą Tab, Shift+Tab lub klawiszy strzałek. W Mac OSX działa to trochę inaczej: chociaż Chrome zawsze umożliwia nawigację za pomocą Tab, aby zmienić zaznaczenie w innych przeglądarkach, np. Safari, musisz nacisnąć Option+Tab. (możesz zmienić to ustawienie w sekcji Klawiatura w Preferencjach systemowych).

Okno ustawień klawiatury.

Kolejność przechodzenia do elementów interaktywnych w przód i w tył w elemencie Tab nie jest zaskakująca – nosi nazwę kolejności tabulacji. Dbanie o to, by strony zaprojektowano w sposób logiczny, to ważny krok, który omówimy później.

Co można zaznaczyć?

Wbudowane, interaktywne elementy HTML, takie jak pola tekstowe, przyciski i listy wyboru, można zaznaczyć, co oznacza, że są automatycznie wstawiane do kolejności kart i mają wbudowaną obsługę zdarzeń z klawiatury bez interwencji programisty.

Pola, które można zaznaczyć.

Nie wszystkie elementy można jednak zaznaczyć. Akapity, elementy div i inne elementy strony nie są podświetlane podczas przechodzenia między kartami. Jeśli użytkownik nie może wchodzić w interakcję z reklamą, nie trzeba się na czymś skupiać.

Nie wszystkie elementy można zaznaczyć,

Koncentracja

Wypróbujmy omówione przed chwilą techniki skupienia. W Chrome otwórz tę stronę z podglądem linii lotniczych i wyszukaj konkretny bilet przy użyciu klawiatury. Strona nie akceptuje danych za pomocą myszy, więc nie będzie można jej pominąć (nie mówiąc, że nie możemy Ci ufać).

Makieta strony linii lotniczych.

Parametry biletu, które należy określić:

  • w jedną stronę
  • do Melbourne
  • wylot 12 października 2017 r. (12.10.2017)
  • powrót 23 października 2017 r. (23.10.2017)
  • fotel przy oknie
  • nie chcą otrzymywać ofert promocyjnych

Gdy wypełnisz formularz bez żadnych błędów i aktywujesz przycisk wyszukiwania, formularz zostanie po prostu usunięty i zresetowany. Wypełnij formularz, a potem wróć tutaj.

Zobaczmy, jak formularz wykorzystuje dane wejściowe z klawiatury. Po kilku pierwszych naciśnięciach Tab w przeglądarce zostaną wyróżnione elementy nawigacji obsługujące Loty, Hotele i Wypożyczalnie samochodów. Naciskając Tab, przejdziesz do grupy przycisków radiowych, z której możesz wybrać za pomocą klawiszy strzałek: W obie strony, W jedną stronę lub Wiele miast.

Przejdź dalej w polach imienia i nazwiska oraz adresu, podając wymagane informacje. Po dotarciu do elementu wyboru miejsca docelowego możesz użyć klawiszy strzałek, by wybrać miasto, lub zacząć wpisywać tekst, by automatycznie uzupełnić pole. Podobnie w polach daty możesz używać klawiszy strzałek lub po prostu wpisywać datę.

Wybór typu miejsca wymaga też klawiszy strzałek. Aby przejść do wybranej opcji, naciśnij „W”, „a” lub „n”. Następnie możesz wyłączyć domyślne oferty promocyjne, naciskając spację przy zaznaczonym polu wyboru. Na koniec zaznacz przycisk Szukaj i naciśnij Enter, aby przesłać formularz.

Korzystanie z formularza przy użyciu samej klawiatury jest bardzo wygodne. Nie musisz przełączać się między myszką i z powrotem, aby wykonać zadanie. Wszystkie elementy formularza to natywne tagi HTML z ukrytym fokusem, formularz działa więc z klawiaturą bez konieczności pisania kodu służącego do dodawania funkcji fokusu i zarządzania nim.