Acesta este al treilea post dintr-o serie mică pe care o facem despre accesibilitatea formularelor. Dacă ați ratat a doua postare, verificați Gestionarea focusului utilizatorului cu :focus-visible. În această postare, vom analiza utilizarea unui cititor de ecran atunci când navigăm într-un formular și, de asemenea, câteva bune practici.
Ce este un cititor de ecran?
Este posibil să fi auzit termenul „cititor de ecran” în timp ce te deplasai pe web. Este posibil să utilizați chiar și un cititor de ecran în acest moment pentru a rula teste manuale de accesibilitate pe experiențele pe care le construiți. Un cititor de ecran este un tip de AT sau tehnologie de asistență.
Un cititor de ecran convertește textul digital în vorbire sintetizată sau ieșire Braille, văzută de obicei cu un cititor Braille.
În acest exemplu, voi folosi Mac VO. Mac VO (VoiceOver) este încorporat în toate dispozitivele Mac; Sistemele iOS, iPadOS și macOS. În funcție de tipul de dispozitiv pe care rulați macOS, deschiderea VO poate diferi. Macbook Pro care rulează VO pe care scriu acest lucru nu are bara tactilă, așa că voi folosi tastele de comenzi rapide în funcție de hardware.
Învârtirea VO pe macOS
Dacă utilizați un Macbook Pro actualizat, tastatura de pe aparat va arăta ceva ca imaginea de mai jos.
Veți începe prin a ține apăsat butonul cmd tasta și apoi apăsând tasta Touch ID de trei ori rapid.
Dacă sunteți pe un MBP (MacBook Pro) cu TouchBar, veți folosi comanda rapidă cmd+fn+f5 pentru a activa VO. Dacă utilizați o tastatură tradițională cu desktopul sau laptopul, tastele ar trebui să fie aceleași sau va trebui să activați VO în setările de accesibilitate.. Odată ce VO este activat, veți fi întâmpinat cu acest dialog împreună cu o voce vocalizată. introducere în VO.
Dacă faceți clic pe butonul „Utilizați VoiceOver”, sunteți pe cale să utilizați VO pentru a vă testa site-urile și aplicațiile. Un lucru de reținut este că VO este optimizat pentru utilizare cu Safari. Acestea fiind spuse, asigurați-vă, când rulați testul cititorului de ecran, că Safari este browserul pe care îl utilizați. Asta este valabil și pentru iPhone și iPad.
Există două moduri principale în care puteți utiliza VO de la început. Modul în care îl folosesc personal este prin navigarea către un site web și folosind o combinație a tab, control, option, shift și tastele săgeată, pot naviga prin experiență eficient doar cu aceste taste.
Un alt mod obișnuit de a naviga prin experiență este utilizarea VoiceOver Rotor. Rotorul este o caracteristică concepută pentru a naviga direct unde doriți să fiți în experiență. Folosind Rotorul, elimini nevoia de a traversa întregul site, gândește-te la el ca la „Alege-ți propria aventură”.
Taste modificatoare
Tastele modificatoare sunt modul în care utilizați diferitele funcții din VO. Tasta modificatoare implicită sau VO is control + option dar îl puteți schimba în majuscule sau puteți alege ambele opțiuni pentru a le folosi interschimbabil.
Folosind rotorul
Pentru a utiliza Rotorul, trebuie să utilizați o combinație a tastelor modificatoare și a litera „U”. Pentru mine, tasta mea modificatoare este caps lock. apăs caps lock + U iar Rotorul se învârte pentru mine. Odată ce rotorul apare, pot naviga la orice parte a experienței pe care o doresc folosind săgețile stânga și dreapta.
Navigarea după nivel de titlu
Un alt mod elegant de a naviga prin experiență este nivelul de titlu. Dacă utilizați combinația tastelor modificatoare + cmd + H puteți parcurge structura documentului pe baza nivelurilor de titlu. De asemenea, puteți muta documentul în sus, apăsând shift în secvența așa, tastele modificatoare + shift + cmd + H.
Istorie și bune practici
Formularele sunt unul dintre cele mai puternice elemente native pe care le avem în HTML. Indiferent dacă căutați ceva pe o pagină, trimiteți un formular pentru a cumpăra ceva sau trimiteți un sondaj. Formele sunt o piatră de temelie a web-ului și au fost un catalizator care a introdus interactivitatea în experiențele noastre.
Istoria formularului web datează din septembrie 1995, când a fost introdus în Specificații HTML 2.0. Unii spun că vremurile bune ale web-ului, cel puțin eu spun asta. Stephanie Stimac a scris un articol minunat despre Smashing Magazine intitulat „Standardizarea selectării și nu numai: trecutul, prezentul și viitorul controalelor native de formular HTML".
Următoarele sunt 5 cele mai bune practici de urmat atunci când construiți un formular accesibil pentru web.
- Asigurați-vă că utilizați un element de formular. Formularele sunt accesibile în mod implicit și ar trebui folosite peste div-uri în orice moment.
<form>
<!-- Form controls are nested here. -->
</form>
- Asigurați-vă că utilizați
forșiidatribute pelabelșiinputpentru ca acestea să fie legate. În acest fel, dacă dați clic/atingeți eticheta, focalizarea se va deplasa către intrare și puteți începe să tastați.
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>- Dacă este necesar un câmp pentru ca formularul să fie complet, utilizați atributul obligatoriu și atributul necesar aria. Acestea vor restricționa trimiterea formularului. Atributul aria-required spune în mod explicit tehnicianului de asistență că câmpul este necesar.
<input type="text" id="name" name="name" required aria-required/>- Folosește,
:focus,:focus-withinși:focus-visiblePseudoclase CSS pentru a gestiona și personaliza modul în care un utilizator primește focalizarea.
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
buttoneste folosit pentru a invoca o acțiune, cum ar fi trimiterea unui formular. Foloseste-l! Nu creați butoane folosinddivlui. Adivprin definiție este un divizor. Nu are proprietăți inerente de accesibilitate.
Demo
Dacă doriți să verificați codul, navigați la VoiceOver Demo GitHub repo. Dacă doriți să încercați demonstrația de mai sus cu cititorul de ecran ales, verificați Navigarea într-un formular web cu VoiceOver.
Software cititor de ecran
Mai jos este o listă cu diferite tipuri de software de citire de ecran pe care le puteți utiliza pe sistemul dvs. de operare dat. Dacă un Mac nu este mașina preferată, există opțiuni pentru Windows și Linux, precum și pentru dispozitivele Android.
NVDA
NVDA este un cititor de ecran de la NV Access. În prezent, este acceptat numai pe computerele care rulează Microsoft Windows 7 SP1 și versiuni ulterioare. Pentru mai mult acces, consultați Pagina de descărcare a NVDA versiunea 2024.1 de pe site-ul web NV Access!
FĂLCI
„Avem nevoie de un cititor de ecran mai bun”
- Anonim
Dacă ai înțeles referința de mai sus, ești într-o companie bună. Conform site-ului web JAWS, aceasta este pe scurt:
„JAWS, Job Access With Speech, este cel mai popular cititor de ecran din lume, dezvoltat pentru utilizatorii de computere a căror pierdere a vederii îi împiedică să vadă conținutul ecranului sau să navigheze cu mouse-ul. JAWS oferă ieșire de vorbire și Braille pentru cele mai populare aplicații de computer de pe computer. Veți putea să navigați pe internet, să scrieți un document, să citiți un e-mail și să creați prezentări de la birou, de pe desktopul de la distanță sau de acasă.”
Verificați singuri JAWS și dacă acea soluție se potrivește nevoilor dvs., cu siguranță încercați!
Narator
Narator este o soluție de citire de ecran încorporată care este livrată cu Windows 11. Dacă alegeți să îl utilizați ca cititor de ecran preferat, linkul de mai jos este pentru documentația de asistență privind utilizarea acestuia.
Orca
Orca este un cititor de ecran care poate fi folosit pe diferite distribuții Linux care rulează GNOME.
„Orca este un cititor de ecran gratuit, open source, flexibil și extensibil, care oferă acces la desktopul grafic prin vorbire și Braille reîmprospătabilă.
Orca lucrează cu aplicații și seturi de instrumente care acceptă Interfața furnizorului de servicii de tehnologie de asistență (AT-SPI), care este infrastructura principală de tehnologie de asistență pentru Linux și Solaris. Aplicațiile și seturile de instrumente care acceptă AT-SPI includ setul de instrumente GNOME Gtk+, setul de instrumente Swing al platformei Java, LibreOffice, Gecko și WebKitGtk. Se urmărește suportul AT-SPI pentru setul de instrumente KDE Qt.”
Răspunde
Google TalkBack este cititorul de ecran care este utilizat pe dispozitivele Android. Pentru mai multe informații despre pornirea și utilizarea acestuia, consultați acest articol pe site-ul de asistență pentru accesibilitate Android.
Suport pentru browser
Dacă sunteți în căutarea unui suport real pentru browser pentru elemente HTML și atribute ARIA (Accessible Rich Internet Application), vă sugerez caniuse.com pentru HTML și Suport pentru accesibilitate pentru ARIA pentru a obține cel mai recent 4-1-1 privind suportul pentru browser. Amintiți-vă, dacă browserul nu acceptă tehnologia, este posibil ca nici cititorul de ecran să nu o facă.
DigitalA11Y poate ajuta la rezumarea informațiilor despre browser și cititorul de ecran cu articolul lor, Cititoare de ecran și browsere! Care este cea mai bună combinație pentru testarea accesibilității?
Link-uri
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
- Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
- PlatoData.Network Vertical Generative Ai. Împuterniciți-vă. Accesați Aici.
- PlatoAiStream. Web3 Intelligence. Cunoștințe amplificate. Accesați Aici.
- PlatoESG. carbon, CleanTech, Energie, Mediu inconjurator, Solar, Managementul deșeurilor. Accesați Aici.
- PlatoHealth. Biotehnologie și Inteligență pentru studii clinice. Accesați Aici.
- Sursa: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/
