Alegerea fontului potrivit și prezentarea acestuia: A Key to ADA Accessible Websites

Web-ul este un loc de găzduire publică în care toată lumea are un drept egal de a participa, de a accesa, prezenta și prelua informații în ciuda oricărui handicap. Legea privind americanii cu dizabilități (Americans with Disability Act – ADA) a fost adoptată pentru a asigura egalitatea de șanse pentru persoanele cu dizabilități. Deși internetul era încă în fază incipientă la acea vreme, realitatea este că acum se aplică tuturor locurilor virtuale, inclusiv serviciilor digitale și conținutului online.

Pentru a-și îndeplini obligațiile legale și morale, toate organizațiile și întreprinderile sunt obligate să-și facă site-urile și canalele online accesibile persoanelor cu handicap. Unul dintre pilonii cheie ai proiectării unui site web accesibil constă în lizibilitatea și lizibilitatea conținutului textului său. Acest lucru este realizabil doar folosind fonturi accesibile.

Am organizat acest ghid pentru a-i ajuta pe cititorii noștri să răspundă la întrebări precum Ce sunt fonturile accesibile și care este cel mai bun font de utilizat pentru un site web? Citiți mai departe pentru a afla detalii despre fonturile aprobate de ADA și despre caracteristicile acestora. Vom aborda, de asemenea, unele dintre caracteristicile necesare pentru a face un site web accesibil persoanelor cu deficiențe de vedere, dislexie și tulburări de citire.

O privire de ansamblu asupra familiilor de fonturi

Fontele și diferitele familii de fonturi ocupă un loc important în tipografia digitală. O familie de fonturi este alcătuită dintr-un set de fonturi diferite care împărtășesc caracteristici și atribute similare referitoare la stilurile de design. Înțelegerea proprietăților acestora poate ajuta designerii web să aleagă cele mai accesibile fonturi pentru site-urile lor web. Deși există multe familii de fonturi, aici enumerăm patru dintre ele, care pot fi, de asemenea, configurate de către un utilizator într-un browser web:

• Serif: Fonturile Serif au decorații sau ornamente la sfârșitul unei liniuțe într-o literă sau simbol.
• Sans-Serif: Sans este cuvântul francez pentru „fără”. Fonturile Sans-serif sunt mai simple și nu au linii extinse sau ornamente la sfârșitul fiecărei liniuțe dintr-o literă sau simbol.
• Monospace: Fonturile monospace au aceeași lățime pentru fiecare literă sau simbol. Ele se mai numesc și fonturi cu lățime fixă sau non-proporționale.
• Cursive: Fonturile cursive sunt scrise într-o manieră cursivă care seamănă cu cuvintele scrise de mână. Literele individuale pot fi alăturate pentru a da o impresie artistică.

Unități de măsură

Există diferite unități pentru definirea dimensiunilor fonturilor:

• Ems (em): Această unitate definește o dimensiune a fontului în raport cu dimensiunea elementului părinte într-o pagină HTML. De exemplu, dacă elementul părinte în HTML este de 14 px, atunci 2 em ar face ca acesta să fie de 28 px.
• Rems (ems rădăcină): Atunci când se utilizează unități rem, toate fonturile sunt definite în raport cu dimensiunea fontului elementului rădăcină din HTML. Prin urmare, tot textul din HTML este specificat în raport cu un font de bază și nu va depinde de locul în care este plasat textul în ierarhia HTML a paginilor web.
• Pixeli (px): Aceasta este o unitate de măsură absolută și nu se bazează pe măsurarea față de un element de bază.
• Puncte (pt): Punctele sunt, de asemenea, o unitate de măsură absolută. WCAG utilizează valorile CSS3, unde 1pt este 1,333 px. Prin urmare, 14pt și 18pt se traduc prin 18,5px și, respectiv, 24px.

Ce face ca un font să fie inaccesibil?

Fontele inaccesibile excluse din lista de fonturi conforme ADA sunt cele care:

• Îngreunează citirea textului
• Împiedică distingerea formei diferitelor litere și caractere
• Reduce viteza de citire a utilizatorului
• Au litere sau caractere suprapuse, ceea ce îngreunează distingerea unei litere de alta.

În cazul în care un font este decorativ, cu ornamente, acesta devine greu de citit. Toate fonturile cu ornamente la sfârșitul unei liniuțe pot fi mai greu de citit pentru unii utilizatori. Fonturile în stil cursiv sau scris de mână fac, de asemenea, textul inaccesibil și, prin urmare, nu sunt cele mai bune fonturi de utilizat pentru un site web.

Ce sunt fonturile accesibile?

Când se proiectează un site web, unul dintre cele mai importante aspecte este selectarea fontului potrivit și prezentarea acestuia. Marea majoritate a site-urilor web necesită mult conținut textual, care trebuie să fie perceptibil și vizibil. Cheia unui site web accesibil este, prin urmare, lizibilitatea textului din cadrul acestuia, care se exprimă folosind diferite stiluri de fonturi și culori.

Ce fonturi standard sunt accesibile?

Din păcate, părerea experților diferă în ceea ce privește cel mai lizibil font pentru web și ce font ar trebui folosit, deoarece diferiți utilizatori au seturi diferite de cerințe. De exemplu, un public cu vedere slabă ar avea o nevoie mai mare de un text mai mare. Persoanele cu un câmp vizual redus, dar cu o claritate mai mare a vederii, ar avea nevoie de mai multe caractere pentru a se încadra în câmpul lor vizual, păstrând în același timp dimensiunea mică a textului. Persoanele cu dislexie sau tulburări de citire au, de asemenea, propriile nevoi.

Este mai bine ca proiectanții web să ofere flexibilitate, astfel încât utilizatorii să își poată alege propriile fonturi. Dacă o pagină web folosește fontul implicit al browserului web, atunci un cititor nu va trebui să treacă la un font diferit de fiecare dată când pagina web este încărcată.

În timp ce nu există o cerință fixă privind dimensiunea fontului ADA, fonturile accesibile conforme ADA sunt clare, curate și ușor de distins, spre deosebire de stilurile cursive sau de scris de mână. Este în general acceptat faptul că fonturile sans-serif sunt mai ușor de citit și mai accesibile decât omologii lor cu serife. Lista de fonturi conforme ADA include, dar nu se limitează la Arial, Calibri, Century Gothic, Helvetica, Tahoma și Verdana.

Importanța fonturilor accesibile

Majoritatea informațiilor de pe web este transmisă și diseminată prin conținut textual. O metodă de prezentare a textului este prin intermediul imaginilor .png sau .bmp ale textului. Cu toate acestea, aceasta nu este o opțiune viabilă din mai multe motive. De exemplu, atunci când imaginile sunt redimensionate, lizibilitatea lor se deteriorează. De asemenea, textul din imagini nu poate fi citit cu voce tare de către cititorii de ecran. Prin urmare, tot textul de pe un site web ar trebui să fie compus din fonturi accesibile, care pot fi citite și vizualizate.

Proiectarea unui site web accesibil folosind fonturi accesibile nu mai este acum doar o recomandare sau o caracteristică opțională. Este obligatorie; dacă un site web încalcă principiile de accesibilitate, compania sau afacerea care îl găzduiește riscă să se confrunte cu sancțiuni, amenzi sau procese grele. Această amendă poate ajunge până la 75.000 de dolari pentru prima încălcare și chiar mai mult pentru neconformități ulterioare.

Se estimează că există 32,2 milioane de adulți cu deficiențe de vedere, conform datelor din National Health Interview Survey (NHIS). Aceasta include nu numai persoanele nevăzătoare, ci și persoanele care au vedere slabă în ciuda faptului că poartă ochelari. CDC prevede că acest număr este în creștere rapidă din cauza deficiențelor vizuale legate de vârstă sau de boli.

Când se proiectează site-uri web, companiile și afacerile care se adresează acestei mari minorități a populației se vor bucura în mod natural de o audiență mai largă. Este cunoscut faptul că, dacă textul este mai greu de citit pe un site web, acesta va avea un număr mai mic de cititori și un număr limitat de vizite pe pagină. Prin urmare, adăugarea de fonturi aprobate de ADA pe un site web este un aspect esențial pentru gestionarea unei afaceri de succes.

Fonturi specializate

British Dyslexia Association (BDA) subliniază următoarele aspecte importante care trebuie avute în vedere la proiectarea site-urilor web și la selectarea fonturilor accesibile pentru persoanele cu dislexie:

• Fontul selectat ar trebui să fie proiectat astfel încât utilizatorii să poată face cu ușurință diferența între diverse litere și numere. De exemplu, l (L mic), 1 și I (i mare), pot arăta toate la fel.
• Letrele b și d, și p și q, sunt imagini în oglindă una față de cealaltă. Persoanele dislexice pot avea dificultăți în a le distinge între ele. Literele ar trebui să fie redate astfel încât să nu mai fie imagini în oglindă.
• Majoritatea persoanelor chestionate de BDA preferă un „g” rotunjit și un „a” rotunjit. Cu toate acestea, rotunjirea acestor litere nu ar trebui să ducă la confundarea lor cu un „o”.
• Spațierea literelor ar trebui să fie suficientă pentru a face distincția între diferitele caractere, de exemplu, „rn” împreună poate fi confundat cu litera „m”, astfel încât „learn” poate fi confundat cu „leam”.

Au fost concepute fonturi specializate pentru persoanele cu dislexie, de exemplu, Dyslexie și OpenDyslexic. Ambele aceste fonturi sunt disponibile în mod gratuit și pot fi descărcate fără costuri. Acestea se numără printre cele mai bune fonturi care pot fi utilizate pentru un site web atunci când se adresează persoanelor dislexice. În mod similar, fontul Fs Me este destinat persoanelor cu dizabilități de învățare și este susținut de organizația caritabilă Mencap din Marea Britanie pentru persoanele cu dizabilități de învățare.

Conformitatea cu liniile directoare privind accesibilitatea conținutului web

Legile directoare privind accesibilitatea conținutului web (WCAG) au fost dezvoltate și publicate de World Wide Web Consortium (W3C). Aceste recomandări formează standardul acceptat pe scară largă pentru proiectarea de site-uri web și conținut online accesibile. În S.U.A., regula finală a Secțiunii 508 impune în mod direct respectarea WCAG cu cel puțin nivelul AA de conformitate. În cazul proceselor legate de ADA, Departamentul de Justiție și instanțele din SUA au făcut deseori referire la aceste orientări pentru a evalua accesibilitatea site-urilor web publice.

WCAG are orientări clare privind fonturile accesibile pentru utilizatorii cu deficiențe de vedere, inclusiv atributele și caracteristicile de proiectare, cum ar fi culoarea, contrastul, dimensiunea și proporțiile textului. Există, de asemenea, recomandări pentru dispunerea și structura conținutului textual care face ca o pagină web să fie mai ușor de citit și mai accesibilă. Este esențial să se încorporeze aceste caracteristici într-o pagină web pentru a veni în întâmpinarea utilizatorilor cu vedere slabă, dislexie, tulburări de citire sau alte dizabilități cognitive.

Acest ghid discută diferitele recomandări W3C privind alegerea celor mai bune fonturi pentru accesibilitate, menținerea fonturilor conforme cu ADA și caracteristicile lor importante.

Dimensiunile și proporțiile fonturilor: lăsați utilizatorul să le controleze

Când se scrie un text, forma variază, iar acest lucru depinde și de limbă. Unele forme ale alfabetului sunt complexe, în timp ce altele sunt mai simple și mai ușor de citit chiar și la dimensiuni mai mici. Acesta este principalul motiv pentru care nu este definită o dimensiune minimă a fontului în WCAG. Următoarele sunt aspecte importante care trebuie luate în considerare atunci când se aleg cele mai bune fonturi pentru accesibilitate și cel mai bun font pentru citirea pe ecran:

• Dimensiuni și unități de font: Conform WCAG, dimensiunea fontului trebuie specificată folosind ems și rems, adică ghidul favorizează unitățile relative ale fontului mai degrabă decât unitățile absolute. Designerii web ar trebui să evite stabilirea unei dimensiuni de bază a fontului în elementul rădăcină. În schimb, poate fi utilizată dimensiunea implicită a fontului din browser, care poate servi ca punct de referință pentru definirea tuturor celorlalte dimensiuni ale fontului. Dacă utilizatorul modifică dimensiunea fontului de bază, atunci întreaga pagină se modifică în mod corespunzător.
• Funcția de zoom: Utilizatorii ar trebui să aibă control asupra mărimii fontului, inclusiv mărirea textului până la 200%. Textul ar trebui să rămână lizibil atunci când este mărit, fără a fi supraaglomerat sau a avea suprapuneri. Această mărire ar trebui să fie posibilă fără utilizarea tehnologiei de asistență, de exemplu, un control simplu, cum ar fi un cursor, poate fi adăugat pe site-ul web pentru a mări sau a micșora dimensiunea textului. Această funcție ar trebui să fie accesibilă pe toate dispozitivele, de ex, mobil, desktop, tabletă etc.

Spațierea textului: faceți-o în raport cu dimensiunea fontului

WCAG 2.1 are următoarele recomandări pentru spațierea textului:

• Spațierea liniilor ar trebui să fie setată la cel puțin 1,5 ori dimensiunea fontului.
• Spațiul după un paragraf ar trebui să fie de cel puțin 2 ori mai mare decât dimensiunea fontului.
• Spațiul între litere ar trebui să fie de cel puțin 0,2 ori dimensiunea fontului.
• Spațiul între cuvinte ar trebui să fie de cel puțin 0,16 ori dimensiunea fontului.

Lățime linie: permiteți înfășurarea textului

În general, numărul de caractere este utilizat ca unitate de măsură a lungimii liniei. În ciuda oricărei dizabilități, este mai greu pentru oameni să citească rânduri mai lungi decât rânduri mai scurte, deoarece pauzele de rând permit odihna ochilor. În cele din urmă, lungimea rândului nu ar trebui să depășească 80 de caractere.

Persoanele care au un câmp vizual mai mic au nevoie de zone de text mai înguste, în care să poată distinge cu ușurință sfârșitul unui rând și începutul următorului. Prin urmare, lungimea liniei ar trebui să poată fi controlată de către utilizator. Dacă aceștia ajustează fereastra de vizualizare, liniile de text ar trebui să se înfășoare automat și să se refacă, permițând utilizatorului să citească textul fără derulare orizontală.

Paragrafe: aliniați paragrafele la stânga sau la dreapta

Tot conținutul web ar trebui să fie structurat și organizat în paragrafe scurte, iar propozițiile lungi ar trebui evitate. Paragrafele ar trebui să fie aliniate fie la stânga, fie la dreapta. Deși textul justificat poate părea mai atrăgător din punct de vedere vizual, trebuie evitat, deoarece spațiile suplimentare din interiorul rândurilor îl fac inaccesibil. Același lucru este valabil și pentru stilurile de paragrafe centrate, care pot îngreuna sarcina cititorului de a găsi începutul rândului următor.

Abordarea înțeleaptă a culorii fontului

Utilizarea eficientă a culorilor este importantă pentru a transmite informații semnificative utilizatorului. De exemplu, câmpurile obligatorii din formulare pot fi marcate prin evidențiere colorată, erorile pot fi afișate cu roșu, textul subliniat cu albastru indică de obicei hiperlinkurile, iar griul poate fi aplicat pentru a arăta câmpurile de formular pentru persoane cu dizabilități.

Deși culorile sporesc atractivitatea estetică a unei pagini web, trebuie avut grijă să se țină cont de persoanele cu percepție scăzută a culorilor, care s-ar putea să nu fie capabile să distingă diferențele de culoare. WCAG 2.1 prevede că ar trebui utilizate indicii vizuale alternative pentru a distinge diverse caracteristici, în afară de simpla culoare.

Utilizarea culorilor este strâns legată de raportul de contrast. Este esențial să existe un contrast bun al culorilor pentru un text lizibil și accesibil. Următoarele puncte sunt importante atunci când se iau în considerare fonturile accesibile pentru utilizatorii cu deficiențe de vedere:

• Contractul de culoare trebuie să permită distingerea textului din prim-plan de cel din fundal. Acesta nu ar trebui să fie prea scăzut sau prea dur.
• Culoarea textului de gri (#77777777) pe un fundal alb este minimă pentru nivelul AA WCAG. Pentru textul mai mare, 52% gri (#828282) este acceptabil.
• Textul inversat, care este o culoare deschisă a textului de prim-plan pe un fundal întunecat, trebuie evitat pe cât posibil, deoarece este mai greu de citit.

Raportul de contrast: faceți ca totul să se distingă

Legitimările WCAG 2.1 pentru raportul de contrast sunt enumerate mai jos:

1. 1. Titluri: Raportul de contrast pentru titlurile de text și textul mai mare trebuie să fie de minimum 3:1. Un text de 18 puncte sau un text bold de 14 puncte este considerat text mare și ar trebui să îndeplinească această cerință.
2. 2. Text principal: Pentru text, altul decât titlurile, trebuie menținut un raport de contrast de cel puțin 4,5:1.
3. 3. Logotipul: Textul care face parte dintr-un logo sau o marcă nu are o cerință de contrast.
4. 4. Text incidental: Textul care face parte dintr-o interfață inactivă cu utilizatorul, pur decorativ, invizibil sau parte a unei imagini, și care nu transmite informații semnificative, nu are o cerință de contrast.

Există mai multe modalități recomandate pentru a menține raportul de contrast recomandat. De exemplu, dacă o literă sau un simbol de text este mai deschis în partea de jos, atunci acesta poate încălca raportul de contrast al întregii litere. În acest caz, un designer poate fie să întunece fundalul, fie să adauge un contur negru subțire la literă pentru a menține raportul de contrast necesar. Luminozitatea relativă a literelor din prim-plan sau a fundalului poate fi, de asemenea, modificată pentru a obține rezultatul dorit. Diversele instrumente care pot fi utilizate pentru a verifica raportul de contrast sunt enumerate pe site-ul web al WCAG

Prezentarea textului

Pe lângă încorporarea fonturilor pentru utilizatorii cu deficiențe de vedere, este, de asemenea, important să se acorde atenție aspectului și structurii textului. Când vine vorba de prezentarea generală a textului pe o pagină web, ar trebui respectate următoarele puncte cheie:

• Documentele ar trebui să fie scrise folosind același font sau cât mai puține fonturi posibil. O pagină care conține mai multe fonturi, chiar dacă sunt fonturi conforme ADA, este mai greu de citit.
• Blagărele HTML de antet, de exemplu <h1>, <h2>, etc. ar trebui să fie folosite pentru a transmite structura și ierarhia documentului și nu ar trebui aplicate doar pentru că a fost nevoie de o anumită dimensiune a fontului pentru a evidenția vizual un element.
• Textul animat și în mișcare ar trebui evitat complet.
• Conținutul textual ar trebui să fie prezentat prin date textuale mai degrabă decât cu imagini sau grafice. Fonturile de text atunci când sunt mărite, în general, nu-și pierd lizibilitatea și își păstrează calitatea. Imaginile de text tind să aibă un comportament opus și calitatea lor se poate deteriora atunci când sunt mărite.
• Ar trebui folosite majusculele din propoziție și ar trebui evitate majusculele mici.
• Nu ar trebui combinate caracterele aldine și italice.
• Blocurile de text cu italice nu sunt accesibile și sunt mai greu de citit.
• Evitați sublinierea textului, cu excepția cazului în care este vorba de un link.

Concluzie

Înlăturarea barierelor digitale și oferirea aceleiași experiențe pe internet pentru toate persoanele, cu sau fără dizabilități, ar trebui să fie prioritatea principală a tuturor companiilor și organizațiilor. Pentru a realiza acest lucru, WCAG oferă recomandări valoroase pentru alegerea celor mai bune fonturi pentru un site web, care să redea un text lizibil pentru toți utilizatorii, inclusiv pentru cei cu vedere slabă, dislexie sau tulburări de citire.

Cei care au puțină sau nici o experiență ADA pot apela la experți atunci când proiectează și creează site-uri web noi sau își remediază site-urile existente. Faptul de a fi proactivi pentru a asigura accesibilitatea întregului conținut web și a serviciilor online va ajuta la evitarea amenzilor monetare și a daunelor mari.

Este prudent să achiziționați ajutor de la o echipă de dezvoltatori, designeri și ingineri care au expertiza și experiența de a dezvolta site-uri web conforme cu ADA și 508. Ca parte a serviciilor noastre de accesibilitate web, oferim pachete complete pentru dezvoltarea de site-uri web bazate pe standardele WCAG, remedierea site-urilor web vechi și efectuarea de audituri periodice pentru a asigura accesibilitatea site-ului dvs. web.

.