Share
Specificația HTML descrie șase elemente de titlu: h1, h2, h3, h4, h5, și h6. Numărul din fiecare dintre aceste elemente din titlu reflectă prioritatea sa, cu h1 fiind cea mai generala si cea mai generala h6 fiind cel mai specific.
Acesta este un lucru important de știut! Sondajul WebAIM 2017 Screen Reader ne spune că navigarea prin intermediul rubricilor este cel mai important mod în care oamenii care se bazează pe tehnologii de asistență găsesc informații. Din acest motiv, este important să creați corect titlurile site-ului dvs..
Acest tutorial face parte din Accesibilitatea Web: Ghidul complet de învățare, unde am colectat o serie de tutoriale, articole, cursuri și cărți electronice, pentru a vă ajuta să înțelegeți accesibilitatea web de la început.
Înainte de a intra în grija cu privire la modul în care funcționează tehnologia asistată, există un motiv pentru care presa scrisă folosește lucruri precum capitole, secțiuni și subsecțiuni și pauze scenice. Împărțirea conținutului în bucăți ușurează înțelegerea, digestarea, păstrarea și referința.
Bucăți de conținut, din ziarul The GuardianÎn timp ce webul nu este tipărit, acesta împrumută toate lucrurile bune de la el - Elementele de titlu HTML sunt similare cu aceste convenții de tipărire. Este unul dintre acele lucruri pe care toată lumea le consideră de la sine înțeles, dar ajută o mulțime de oameni. Preocupările cognitive sunt răspândite și depășesc orice altă formă de handicap. Gruparea conținutului în bucăți logice ajută pe toată lumea, de la persoanele care au o stare biologică, cum ar fi demența, la persoanele care se confruntă cu afectări situaționale, cum ar fi lipsa de somn sau învățarea unei calități complet noi.
Anumite tipuri de tehnologii de asistență (inclusiv, dar fără a se limita la acestea, cititoarele de ecran) permit oamenilor să sară de la o poziție la alta pe o pagină. Este echivalentul a ceea ce fac oamenii care nu folosesc tehnologii de asistare în fiecare zi, care se strecoară în jurul unei pagini pentru a obține indicația generală a acesteia, oprindu-se când găsesc informațiile pe care le caută.
Unele tehnologii de asistență pot lua aceste titluri și le transformă într-o listă ordonată. Această listă poate fi utilizată pentru a determina rapid sensul general al paginii.
Lista generată de titluri pe pagina WikipediaDacă nu mențineți o secvență logică - spuneți că mergeți de la nivelul de la nivelul unu la cel de al treilea, fără a declara un nivel de poziție între două - poate crea o experiență potențial confuză, cu siguranță enervantă pentru persoana care se bazează pe rubrici pentru a naviga. Acest decalaj în secvența logică va pune povara asupra utilizatorului, forțându-i să folosească alte metode mai lungi și cu efort intensiv pentru a naviga pentru a determina logica structurii generale a paginii (dacă există) și dacă conținutul de care au nevoie este de fapt prezent pe pagină.
Un alt lucru important pe care îl putem face este să asigurăm că există numai unu primul titlu pe pagină. Această rubrică ar trebui să descrie punctul principal al conținutului paginii. De exemplu, o pagină despre istoria patiseriei franceze ar putea avea o rubrică de nivel 1 scrisă astfel:
Istoria patiseriei franceze
...
Din păcate, există o concepție greșită că puteți utiliza rubrici de nivel 1 pentru începutul fiecărui element de secționare a conținutului dintr-o pagină, încredințând browser-ului să-și dea seama restul prin algoritmul Document Outline. Acest algoritm este o ficțiune speculativă - în momentul publicării acestui articol nu a fost încă implementată orice browser-ul. Din această cauză, trebuie să respectăm Prioritatea circumscripțiilor și să folosim celelalte elemente de titlu.
Titlurile de la nivelul doi până la șase trebuie să urmeze prima linie a nivelului și să fie autorizate într-o ordine succesivă care descrie principalele puncte de discuție ale conținutului paginii.
De exemplu, aceasta este structura titlurilor pentru acest articol:
Prin citirea acestei liste puteți să determinați rapid ce este vorba despre acest articol. Destul de curat, huh?
Alt lucru care merită să subliniez este că rubricile - la fel ca și formatele ierarhice precum JSON - pot fi imbricate în alte rubrici, cu condiția ca acestea să progreseze logic. În cadrul unei rubrici de nivel secundar puteți utiliza mai multe rubrici de nivel 3. Fiecare dintre aceste subpoziții poate, la rândul său, să aibă noduri de nod la al patrulea nivel.
Când ați terminat cu un subiect, puteți să vă închideți titlurile imbricate. Acesta este locul unde se acceptă nivelurile de "sari peste", ați discutat despre un anumit concept și ați revenit la un subiect mai general.
Accentsconagua
h1 Istoria patiseriei francezeh2 Momente importanteh3 În secolul al XVI-leah4 Pucioasă de patiserieh4 Oubliesh3 În secolul al XVII-leah4 Foiță de patiserieh4 Friscah5 Bucătarul Printului Condéh3 Secolul al XVIII-leah4 macaronsh3 În secolul al XIX-leah3 În secolul al XX-leah2 Oameni importanțih3... Acest exemplu demonstrează modul în care este valabil să existe o poziție la al cincilea nivel (bucătarul-șef al lui Prince of Condé), urmată de o rubrică de la al treilea nivel (secolul XVIII), atâta timp cât titlurile părinților sunt în ordine succesivă. Dacă o poziție de la al treilea nivel a precedat poziția de la al cincilea nivel, ar fi fost nevalidă.
Utilizarea prea multor titluri poate crea o experiență copleșitoare pentru o persoană care se bazează pe cititoare de ecran pentru a naviga. Acest lucru poate părea un început contrar intuitiv la început, având în vedere că tocmai v-am spus cât de importante sunt titlurile ca ajutor de navigație.
Gândiți-vă la acest lucru: la fel cum prea multe opțiuni de navigare vizuală de pe o pagină pot afecta negativ atenția și atenția unei persoane, prea multe rubrici creează "zgomotul" care distrage și umple punctul principal pe care încercați să-l transmiteți.
Nu există o regulă stabilită pentru câte poziții sunt prea multe. Depinde în întregime de ce este conținutul și de cât de mult este prezent. De exemplu, o rețetă poate avea nevoie doar de numele vasului, ingredientelor și instrucțiunilor sale, în timp ce o lucrare academică poate necesita o defalcare mult mai nuanțată.
O structură de poziție bună beneficiază mai mult decât doar persoanele care utilizează tehnologii de asistență. Deoarece titlurile au semnificație semantică, alte servicii se pot conecta la această descriere programatică a conținutului și îl pot recontextualiza în moduri ușor de utilizat. De exemplu, iată ce face motorul de căutare Bing cu pagini bine construite:
Rezultatul motorului de căutare BingLa fel ca cititorii de ecran, serviciile precum Google Docs și Dropbox Paper vor genera automat o listă ordonată de rubrici pentru a vă permite să înțelegeți rapid și să navigați pe un document. Multe procesoare de texte pot genera de asemenea rapid un tabel de conținut actualizat dinamic de la titluri, o sarcină altfel dificilă și consumatoare de timp. Și datorită interoperabilității HTML, putem chiar să recreăm acest comportament de navigare după titlu ca extensie a browserului!
Un lucru pe care totuși îl uităm prea des este că clasele CSS pot fi aplicate la elementele de titlu, la fel ca orice alt element HTML declarat în interiorul corp.
Motivul pentru care menționez acest lucru este că elementele de rubrică sunt utilizate în mod obișnuit din cauza modului în care acestea uite("Ooh! Îmi place culoarea și fontul h3, Voi folosi asta "), și nu în ce prioritate conținutul descrie (Brioche este un fel de Viennoiserie). Este o problemă larg răspândită.
Într-o lume idealizată a purității academice, am onora onestatea materială a elementelor de direcție prin dimensionarea și modelarea lor în funcție de ierarhia pe care o descriu.
Totuși, aceasta este lumea reală. Site-urile moderne și aplicațiile web sunt lucruri complicate pe care le-au lucrat multe persoane diferite, care au diferite niveluri de experiență, interes, familiaritate și capacitate atunci când proiectează și codifică.
Lumea reală poate solicita o poziție pe al cincilea nivel care trebuie să pară ca o rubrică de nivel secundar sau ceva complet nou. În aceste situații, este mai bine să păstrați structura logică a paginilor subiacente și să modificați în schimb vizualul grafic al poziției:
Expert de îngrijire la un preț rezonabil
Este un compromis și o recunoaștere a faptului că lumea reală este complicată. Această abordare favorizează menținerea părții importante: navigație intuitivă și eficientă pentru tehnologia de asistență.
Metodologiile, cum ar fi stilurile de utilitate, permit o abordare și mai flexibilă a optimizării vizuale a unui antet:
Termeni si conditii
Pentru acest exemplu, declarăm o serie de trucuri mici pentru a ajusta prezentarea titlului până când obțin aspectul vizual dorit. În general, veți întâlni stiluri de utilități pe site-uri web și aplicații web mai mari, orientate către stat, unde specificitatea scăzută a clasei vă ajută să vă asigurați coerența.
Pentru a vă ajuta să vă consolidați folosind rubricile ordonate și imbricate corect, poate fi chiar util să utilizați o resetare a stilului pentru a păstra toate titlurile fără o clasă declarată pe ele caută aceeași.
h1, h2, h3, h4, h5, h6 culoare: moștenit; dimensiune font: 1em; line-height: moștenire; marja: 0; umplutura: 0; aliniere verticală: linia de bază;
Acesta este un design puțin defensiv care vă ajută să încurajați să vă gândiți la modul în care se află structura unui document profilat despre cum arată. Se intenționează să fie declarat după o resetare CSS importată, astfel încât să poată suprascrie opiniile resetării.
Cea mai dificilă problemă din domeniul informaticii este numirea lucrurilor. Primul recunoaște că nu știi nimic. Nu voi presupune să știu cel mai bun mod de a numi clasele de clasificare a titlurilor pentru site-ul dvs. web sau pentru aplicația web. Cu toate acestea, dacă utilizați o abordare bazată pe stiluri non-utilitare, aș recomanda nu numindu-le .h1, .h2, .h3, etc.
Problema cu această abordare este că oamenii care nu sunt familiarizați cu codul bazei ar putea interpreta aceste nume de clasă ca instrucțiuni care dictează necesitatea de a se potrivi cu numele clasei cu nivelul de titlu. Acest lucru va întări "cum arată" asupra problemei "ce descrie".
Am întâlnit, de asemenea, situații în care se consolidează faptul că este acceptabil să se utilizeze HTML, altele decât titlurile elementelor, în titlurile autorilor ("Ah, pot face acest lucru div arata ca un h5!„). Nu grozav!
Sondajul WebAIM 2017 Screen Reader ne arată că rubricile lipsă sau necorespunzătoare sunt una dintre cele zece probleme cele mai problematice cu care se confruntă oamenii care se bazează pe tehnologia de asistență pentru a naviga pe web.
Aceasta este o problemă de accesibilitate pe scară largă, cu o rezolvare ușoară. Acordați un pic de timp pentru a revizui paginile site-ului web sau ale aplicațiilor web pentru a vedea dacă structura de titlu descrie cu precizie pagina și că această descriere urmează o ordine logică - ar putea fi la fel de ușor ca schimbarea anumitor numere!
