To już trzeci post z małej serii poświęconej dostępności formularzy. Jeśli przegapiłeś 3. post, sprawdź Zarządzanie fokusem użytkownika za pomocą :focus-visible. W tym poście przyjrzymy się używaniu czytnika ekranu podczas nawigacji w formularzu, a także przyjrzymy się najlepszym praktykom.
Co to jest czytnik ekranu?
Być może słyszałeś termin „czytnik ekranu”, gdy poruszałeś się po Internecie. Być może w tej chwili używasz czytnika ekranu, aby przeprowadzić ręczne testy dostępności tworzonych doświadczeń. Czytnik ekranu to rodzaj technologii AT lub technologii wspomagającej.
Czytnik ekranu konwertuje tekst cyfrowy na mowę syntezowaną lub sygnał brajlowski, co jest powszechnie spotykane w przypadku czytnika brajlowskiego.
W tym przykładzie będę używać Mac VO. Mac VO (VoiceOver) jest wbudowany we wszystkie urządzenia Mac; Systemy iOS, iPadOS i macOS. W zależności od typu urządzenia, na którym używasz systemu macOS, otwieranie VO może się różnić. Macbook Pro, na którym działa VO, na którym to piszę, nie ma paska dotykowego, więc będę używać klawiszy skrótów w zależności od sprzętu.
Spinning Up VO na macOS
Jeśli używasz zaktualizowanego Macbooka Pro, klawiatura na Twoim komputerze będzie wyglądać mniej więcej tak, jak na obrazku poniżej.
Zaczniesz od przytrzymania przycisku cmd , a następnie szybko trzykrotnie naciśnij Touch ID.
Jeśli korzystasz z MBP (MacBook Pro) z paskiem TouchBar, użyjesz skrótu cmd+fn+f5 aby włączyć funkcję VO. Jeśli używasz tradycyjnej klawiatury na komputerze stacjonarnym lub laptopie, klawisze powinny być takie same, w przeciwnym razie konieczne będzie włączenie funkcji VO w ustawieniach dostępności. Po włączeniu funkcji VO zostaniesz przywitany tym oknem dialogowym i wokalizowanym dźwiękiem wprowadzenie do VO.
Jeśli klikniesz przycisk „Użyj VoiceOver”, jesteś na dobrej drodze do wykorzystania VO do testowania swoich witryn i aplikacji. Należy pamiętać, że VO jest zoptymalizowane do użytku z Safari. Mając to na uwadze, podczas testu czytnika ekranu upewnij się, że przeglądarką, której używasz, jest Safari. Dotyczy to również iPhone'a i iPada.
Istnieją dwa główne sposoby korzystania z funkcji VO od samego początku. Osobiście korzystam z niego, przechodząc do witryny internetowej i używając kombinacji tab, control, option, shift i strzałek, mogę efektywnie poruszać się po aplikacji za pomocą samych tych klawiszy.
Innym powszechnym sposobem poruszania się po środowisku jest użycie przycisku Pokrętło VoiceOver. Rotor to funkcja zaprojektowana tak, aby nawigować bezpośrednio do miejsca, w którym chcesz się znaleźć. Korzystając z Rotora, eliminujesz konieczność przemierzania całej witryny, pomyśl o tym jak o „Wybierz własną przygodę”.
Klawisze modyfikujące
Klawisze modyfikujące umożliwiają korzystanie z różnych funkcji komunikatów głosowych. Domyślny klawisz modyfikujący lub VO is control + option ale możesz zmienić go na Caps Lock lub wybrać obie opcje, aby używać ich zamiennie.
Korzystanie z rotora
Aby skorzystać z Rotora, musisz użyć kombinacji klawiszy modyfikujących i litery „U”. Dla mnie moim kluczem modyfikującym jest caps lock. Naciskam caps lock + U i Rotor kręci się dla mnie. Gdy pojawi się Rotor, mogę przejść do dowolnej części doświadczenia, używając strzałek w lewo i w prawo.
Nawigacja według poziomu nagłówka
Innym ciekawym sposobem poruszania się po witrynie jest poziom nagłówka. Jeśli użyjesz kombinacji klawiszy modyfikujących + cmd + H możesz przeglądać strukturę dokumentu w oparciu o poziomy nagłówków. Możesz także cofnąć dokument, naciskając shift w takiej kolejności klawisze modyfikujące + shift + cmd + H.
Historia i najlepsze praktyki
Formularze są jednym z najpotężniejszych elementów natywnych, jakie mamy w HTML. Niezależnie od tego, czy szukasz czegoś na stronie, przesyłasz formularz zakupu, czy przesyłasz ankietę. Formularze są kamieniem węgielnym sieci i katalizatorem, który wprowadził interaktywność do naszych doświadczeń.
Historia formularza internetowego sięga września 1995 roku, kiedy to został on wprowadzony w Specyfikacja HTML 2.0. Niektórzy mówią, że to dobre czasy w sieci, przynajmniej ja tak mówię. Stephanie Stimac napisała świetny artykuł na temat Smashing Magazine pod tytulem, "Standaryzacja zaznaczania i nie tylko: przeszłość, teraźniejszość i przyszłość natywnych kontrolek formularzy HTML".
Poniżej znajduje się 5 najlepszych praktyk, których należy przestrzegać podczas tworzenia dostępnego formularza w Internecie.
- Upewnij się, że używasz elementu formularza. Formularze są dostępne domyślnie i powinny być zawsze używane zamiast elementów div.
<form>
<!-- Form controls are nested here. -->
</form>
- Koniecznie skorzystaj z
foriidatrybuty włączonelabeliinputtak, aby były powiązane. W ten sposób, jeśli klikniesz/dotkniesz etykietę, fokus zostanie przeniesiony na wprowadzanie i będziesz mógł zacząć pisać.
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>- Jeżeli do wypełnienia formularza wymagane jest pole, należy użyć atrybutu wymaganego oraz atrybutu aria-required. Spowoduje to ograniczenie możliwości przesłania formularza. Atrybut wymagany przez aria wyraźnie informuje technologię wspomagającą, że pole jest wymagane.
<input type="text" id="name" name="name" required aria-required/>- Użyj,
:focus,:focus-withini:focus-visiblePseudoklasy CSS do zarządzania i dostosowywania sposobu, w jaki użytkownik otrzymuje fokus.
form:focus-within {
background-color: #cfffcf;
}
input:focus-within {
border: 10px solid #000000;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid crimson;
border-radius: 3px;
}- A
buttonsłuży do wywołania akcji, takiej jak przesłanie formularza. Użyj tego! Nie twórz przycisków za pomocądiv'S. Adivz definicji jest dzielnikiem. Nie ma nieodłącznych właściwości dostępności.
Demo
Jeśli chcesz sprawdzić kod, przejdź do Repozytorium demonstracyjne VoiceOver w GitHubie. Jeśli chcesz wypróbować powyższą wersję demonstracyjną z wybranym czytnikiem ekranu, sprawdź Poruszanie się po formularzu internetowym za pomocą VoiceOver.
Oprogramowanie czytnika ekranu
Poniżej znajduje się lista różnych typów oprogramowania czytnika ekranu, którego można używać w danym systemie operacyjnym. Jeśli komputer Mac nie jest Twoją ulubioną maszyną, dostępne są opcje dla systemów Windows i Linux, a także dla urządzeń z systemem Android.
NVDA
NVDA to czytnik ekranu firmy NV Access. Obecnie jest obsługiwana tylko na komputerach PC z systemem Microsoft Windows 7 SP1 i nowszymi wersjami. Aby uzyskać większy dostęp, sprawdź Strona pobierania wersji NVDA 2024.1 w witrynie NV Access!
SZCZĘKI
„Potrzebujemy lepszego czytnika ekranu”
- Anonimowy
Jeśli zrozumiałeś powyższy odnośnik, jesteś w dobrym towarzystwie. Według strony internetowej JAWS wygląda to w skrócie:
„JAWS, Job Access With Speech, to najpopularniejszy na świecie czytnik ekranu, opracowany dla użytkowników komputerów, których utrata wzroku uniemożliwia im oglądanie zawartości ekranu lub nawigację za pomocą myszy. JAWS zapewnia mowę i wyjście Braille'a dla najpopularniejszych aplikacji komputerowych na Twoim komputerze. Będziesz mógł przeglądać Internet, pisać dokumenty, czytać e-maile i tworzyć prezentacje w biurze, zdalnym komputerze lub w domu.
Sprawdź osobiście JAWS i jeśli to rozwiązanie odpowiada Twoim potrzebom, zdecydowanie spróbuj!
Narrator
Narrator to wbudowany czytnik ekranu dostarczany z systemem Windows 11. Jeśli zdecydujesz się używać tego czytnika ekranu jako wybranego czytnika ekranu, poniższe łącze prowadzi do dokumentacji pomocy technicznej dotyczącej jego użycia.
Kompletny przewodnik po Narratorze
Orca
Orca to czytnik ekranu, którego można używać w różnych dystrybucjach Linuksa z systemem GNOME.
„Orca to darmowy, elastyczny i rozszerzalny czytnik ekranu typu open source, który zapewnia dostęp do graficznego pulpitu za pomocą mowy i odświeżalnego alfabetu Braille'a.
Orca współpracuje z aplikacjami i zestawami narzędzi obsługującymi interfejs dostawcy usług technologii wspomagających (AT-SPI), który jest podstawową infrastrukturą technologii wspomagających dla systemów Linux i Solaris. Aplikacje i zestawy narzędzi obsługujące AT-SPI obejmują zestaw narzędzi GNOME Gtk+, zestaw narzędzi Swing platformy Java, LibreOffice, Gecko i WebKitGtk. Trwają prace nad obsługą AT-SPI dla zestawu narzędzi KDE Qt.”
TalkBack
Google TalkBack to czytnik ekranu używany na urządzeniach z Androidem. Więcej informacji na temat włączania i korzystania z niego można znaleźć na stronie zapoznaj się z tym artykułem w witrynie pomocy dotyczącej ułatwień dostępu w systemie Android.
Wsparcie dla przeglądarki
Jeśli szukasz rzeczywistej obsługi przeglądarki dla elementów HTML i atrybutów ARIA (Accessible Rich Internet Application), sugeruję caniuse.com dla HTML i Wsparcie dostępności dla ARIA aby uzyskać najnowszą wersję 4-1-1 dotyczącą obsługi przeglądarek. Pamiętaj, że jeśli przeglądarka nie obsługuje tej technologii, istnieje duże prawdopodobieństwo, że czytnik ekranu też jej nie obsługuje.
CyfrowyA11Y może pomóc w podsumowaniu informacji o przeglądarce i czytniku ekranu w swoim artykule, Czytniki ekranu i przeglądarki! Jaka jest najlepsza kombinacja do testowania dostępności?
Linki
https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac
https://www.w3.org/TR/wai-aria/
https://www.w3.org/WAI/standards-guidelines/aria/
https://support.google.com/accessibility/android/answer/6283677?hl=en
https://support.google.com/accessibility/android/answer/6283677?hl=en
- Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
- PlatoData.Network Pionowe generatywne AI. Wzmocnij się. Dostęp tutaj.
- PlatoAiStream. Inteligencja Web3. Wiedza wzmocniona. Dostęp tutaj.
- PlatonESG. Węgiel Czysta technologia, Energia, Środowisko, Słoneczny, Gospodarowanie odpadami. Dostęp tutaj.
- Platon Zdrowie. Inteligencja w zakresie biotechnologii i badań klinicznych. Dostęp tutaj.
- Źródło: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/
