Accesibilitate și titluri: proiectare pentru utilizatorii cu deficiențe de vedere

Publicat: 2021-07-19

Un mic detaliu, cum ar fi modul în care utilizați titlurile pe site-ul sau aplicația dvs., ar putea să vă coste potențialii sau vânzările. Citiți mai departe pentru a afla de ce site-ul dvs. web ar trebui să fie accesibil, ce s-ar putea întâmpla dacă nu este și câteva dintre cele mai bune practici în legătură cu modul în care puteți utiliza titlurile pentru a ghida utilizatorii corect printr-o pagină.

Cazul accesibilității

Titlurile pot fi ușor trecute cu vederea la proiectarea unui nou site web sau la actualizarea celui vechi. Marketerii tind să se concentreze mai mult pe latura estetică a designului și mai puțin pe partea practică. Este adevărat că elementele vizuale joacă un rol important în experiența de utilizare a unui site web (UX), totuși, făcându-l mai accesibil utilizatorilor cu dizabilități de vedere, poate crește numărul de vizitatori care convertesc.

Statisticile ne întăresc argumentul privind accesibilitatea:

  • aproximativ 253 de milioane de oameni din întreaga lume suferă de o deficiență a vederii
  • în fiecare zi, 250 de persoane încep să-și piardă vederea în Marea Britanie
  • peste 2 milioane de oameni din Marea Britanie trăiesc cu pierderi de vedere care au un impact semnificativ asupra vieții lor de zi cu zi, de exemplu, incapacitatea de a conduce
  • degenerescența legată de vârstă este principala cauză de orbire la adulți.

orb folosind telefonul

Cu 4,1 milioane de persoane așteptate să fie afectate de pierderea vederii în Marea Britanie până în 2050 , companiile nu își permit să nu își adapteze site-urile web pentru toate publicurile. Acest lucru este important mai ales dacă piața lor țintă este o demografie mai veche, care are mai multe șanse să întâmpine probleme de vedere.

Un aspect simplu, cum ar fi utilizarea corectă a titlurilor, poate face o diferență uriașă și nu este dificil de aplicat. De asemenea, vă poate economisi costurile aferente procesului.

Cazul lui Domino

Domino's Pizza este un bun exemplu al modului în care neglijarea accesibilității pentru utilizatorii cu deficiențe de vedere poate fi costisitoare.

Un client orb din SUA a depus o reclamație în 2016, după ce s-a străduit să aleagă toppingurile, să folosească un cod de reducere și chiar să-și finalizeze comanda prin aplicația iPhone a restaurantului. Problema a fost că aplicația nu s-a integrat cu software-ul de citire a ecranului telefonului, care vocalizează conținutul pe baza textului utilizat corect și a imaginilor etichetate cu text. Aplicația și site-ul companiei nu aveau codul corect pentru a permite iPhone-ului să citească opțiunile.

căutare vocală de accesibilitate

În timp ce judecătorii s-au alăturat inițial lui Domino, instanța de apel a decis în favoarea clientului chiar săptămâna trecută pe motiv că „ presupusa inaccesibilitate a site-ului și aplicației Domino împiedică accesul la bunurile și serviciile francizelor sale fizice de pizza - care sunt locuri de public cazare ”.

În Marea Britanie, Royal National Institute of Blind People a salutat, de asemenea, hotărârea care a comentat pentru BCC : „Toate organizațiile au responsabilitatea conform Legii egalității 2010 de a se asigura că site-urile și aplicațiile lor pot fi folosite de persoanele nevăzătoare și cu deficiențe de vedere, inclusiv cele care folosesc cititoare de ecran ”.

Există diferite moduri în care companiile își pot face site-urile web mai accesibile și utilizarea corectă a etichetelor de titlu ajută un utilizator să navigheze pe o pagină.

Cele mai bune practici pentru accesibilitate

Există destul de puțină confuzie și utilizare incorectă a titlurilor, în parte datorită dezvoltatorilor care urmează un design prea atent sau proiectanților care nu sunt conștienți de modul corect de utilizare a titlurilor.

Dacă nu sunteți sigur de ceea ce este un titlu, atunci W3C are o definiție bună și Yoast explică utilizarea sa SEO.

W3C definește utilizarea corectă ca:

„Cele șase elemente de titlu, H1 până la H6, denotă titluri de secțiune. Deși ordinea și apariția titlurilor nu sunt restricționate de HTML DTD, documentele nu ar trebui să treacă peste niveluri (de exemplu, de la H1 la H3), deoarece convertirea acestor documente în alte reprezentări este adesea problematică. ”

Nu numai că utilizarea corectă a titlurilor are un impact asupra modului în care oamenii și Google vă citesc pagina, ci și un impact uriaș asupra modului în care cititorii de ecran vă prezintă conținutul utilizatorului. Persoanele care utilizează instrumente de accesibilitate pot naviga pe pagină prin titlurile dvs., deci dacă aveți ceva important de spus, atunci ar trebui să fie structurat și vizual așa cum ați intenționat să fie.

Nu este nevoie de muncă suplimentară pentru a face titlurile accesibile atunci când vă creați pagina. Dacă urmați utilizarea corectă, atunci vor fi îndeplinite criteriile de accesibilitate. Sfaturile de accesibilitate W3c pentru titluri explică destul de bine acest lucru și, după cum puteți vedea, nu are sens doar pentru accesibilitate, ci are sens structural și vizual.

Cum verific titlurile?

Dacă dezvoltatorii sau tema urmează utilizarea corectă a titlurilor, atunci ar trebui să puteți adăuga pur și simplu conținutul și să adăugați titlul în mod corect prin intermediul editorului / CMS.

Ca o notă laterală, nu este nevoie să adăugați titluri peste tot, ar fi suficient un simplu H1 (care este de obicei titlul paginii) urmat de un H2 - dar să spunem că doriți să structurați corect o pagină deosebit de lungă sau că verificați altcineva muncă? Încercați să utilizați unul dintre aceste pluginuri pentru browserul dvs. preferat:

  • Harta titlurilor pentru Chrome
  • Harta titlurilor pentru Firefox

Odată instalate, acestea sunt foarte ușor de utilizat și orice titluri incorecte apar evidențiate cu roșu în bara laterală atunci când faceți clic pe butonul plugin. Această caracteristică va fi, de asemenea, o opțiune implicită în editorul Gutenberg din versiunea WordPress 5.0 și este explicată pe acest site.

Modul corect de utilizare a titlurilor:

<h1> De obicei, titlul paginii dvs. </h1>

<p> Un text de paragraf aici </p>

<h2> Următoarea secțiune importantă a paginii dvs. </h2>

<p> Un text de paragraf aici </p>

<h3> Ceva nu atât de important, dar legat de h2 de mai sus </h3>

<p> Un text de paragraf aici </p>

<h2> Următoarea secțiune importantă a paginii dvs. </h2>

Modul incorect de a utiliza titluri:

<h1> De obicei, titlul paginii dvs. </h1>

<p> Un text de paragraf aici </p>

<h3> Următoarea secțiune importantă a paginii dvs. </h3>

<p> Un text de paragraf aici </p>

<h2> Ceva nu atât de important, dar legat de h3 de mai sus </h2>

<p> Un text de paragraf aici </p>

<h4> Următoarea secțiune importantă a paginii dvs. </h4>

Imaginea de mai jos prezintă titlurile utilizate mai degrabă pentru stil, decât pentru structură. Acest lucru va provoca erori de marcare și ar fi incorect din punct de vedere semantic - evitați să le utilizați astfel!

Utilizarea incorectă a titlurilor într-o zonă a bannerului

Sperăm că această postare vă va ajuta acum să vă structurați corect paginile web pentru toată lumea.


Dacă aveți nevoie de ajutor pentru dezvoltarea dvs. web, nu ezitați să ne contactați.