Share
HTML-beskrivelsen beskriver seks overskriftelementer: h1, h2, h3, h4, h5, og h6. Tallet i hvert av disse overskriftene reflekterer sin prioritet, med h1 å være den mest generelle og h6 å være den mest spesifikke.
Dette er en viktig ting å vite! WebAIMs 2017 Screen Reader-undersøkelse forteller oss at navigering via overskrifter er den viktigste måten folk som stoler på assistent teknologi, finner informasjon. På grunn av dette er det viktig å utforme nettstedets overskrifter på riktig måte.
Denne opplæringen er en del av Web Accessibility: Den komplette læringsguiden, der vi har samlet en rekke opplæringsprogrammer, artikler, kurs og e-bøker, for å hjelpe deg å forstå web tilgjengelighet fra begynnelsen.
Før vi går inn i det nitty-gritty av hvordan hjelpeteknologi fungerer, er det en grunn til at våre trykte medier bruker ting som kapitler, seksjoner og delseksjoner og scenepauser. Å dele innhold opp i biter gjør det lettere å forstå, fordøye, beholde og referere.
Biter av innhold, fra The Guardian avisMens nettet ikke er skrevet, låner det alle de gode ting fra det. HTML-overskriftelementer er analoge med disse utskriftskonvensjonene. Det er en av de tingene som alle tar for gitt, men hjelper ut massevis av mennesker. Kognitive bekymringer er utbredt og oppveier hver annen form for funksjonshemning. Gruppering av innhold i logiske biter hjelper alle, fra personer som har en biologisk tilstand som demens til personer som opplever situasjonsmessig nedsatt funksjonsevne, som søvnmangel eller læring av en helt ny ferdighet.
Enkelte hjelpemidler (inkludert, men ikke begrenset til, skjermlesere) tillater folk å hoppe fra overskrift til overskrift på en side. Det svarer til hva folk som ikke bruker hjelpeteknologi gjør hver dag, flitting rundt en side for å få det generelle kjennetegnet av det, stopper når de finner informasjonen de leter etter.
Enkelte hjelpemidler kan ta disse overskriftene og gjøre dem til en bestilt liste. Denne listen kan brukes til å raskt bestemme den generelle meningen med siden.
Generert liste over overskrifter på Wikipedia-sidenHvis du ikke opprettholder en logisk sekvens, for eksempel å gå fra overskrift ett til overskriftsnivå tre uten å erklære et overskriftsnivå på to mellomliggende, kan det skape en potensielt forvirrende, definitivt irriterende opplevelse for den personen som stoler på overskrifter for å navigere. Dette gapet i den logiske sekvensen vil legge byrden på brukeren, og tvinge dem til å bruke andre, mer tid og krefterintensive metoder for å navigere for å bestemme logikken for den samlede sidestrukturen (hvis noen) og hvis innholdet de trenger er faktisk presentere på siden.
En annen viktig ting vi kan gjøre er å sikre at det bare er en første nivå overskrift per side. Denne overskriften skal beskrive hovedpoenget til sidens innhold. For eksempel kan en side om historien om fransk konditori ha et første nivå overskrift skrevet slik:
Historien om fransk bakverk
...
Dessverre er det en misforståelse at du kan bruke første nivåoverskrifter til begynnelsen av hvert innholdsdelingselement på en side, og stoler på nettleseren for å finne ut resten via dokumentoversiktalgoritmen. Denne algoritmen er spekulativ fiksjon - på tidspunktet for denne artikkels publisering har den ennå ikke blitt implementert av noen nettleser. På grunn av dette må vi respektere valgkretsens prioriteringer og bruke de andre overskriftene.
Overskrift nivå to til seks bør følge første nivå overskrift, og være forfattet i en sekvensiell rekkefølge som beskriver de viktigste snakkepunktene til sidens innhold.
Dette er for eksempel overskriftsstrukturen for denne artikkelen:
Ved å lese gjennom denne listen kan du raskt finne ut hva denne artikkelen handler om. Ganske pent, huh?
Den andre tingen som er verdt å påpeke, er at overskriftene, akkurat som hierarkiske formater som JSON, kan være nestet i andre overskrifter, forutsatt at de utvikler seg logisk. Innenfor et overskudd på andre nivå kan du bruke flere overskrifter på tredje nivå. Hver av disse underposisjonene kan i sin tur ha nestede underposisjoner på fjerde nivå.
Når du er ferdig med et emne, kan du lukke dine nestede overskrifter. Dette er det eneste stedet hvor "hopper" -nivåer er akseptabelt - du har gjort diskusjon om et bestemt konsept og tilbake til et mer generelt emne.
Accentsconagua
h1 Historien om fransk bakverkh2 Viktige øyeblikkh3 Det 16. århundreh4 Puff bakverkh4 Oubliesh3 Det 17. århundreh4 Folierte kringleh4 Pisket kremh5 Prinsen av Condé kokkh3 Det 18. århundreh4 macaronsh3 Det 19. århundreh3 Det 20. århundreh2 Viktige folkh3... Dette eksemplet viser hvordan det er gyldig å ha en femte-nivås overskrift (Prinsen av Condés kokk) etterfulgt av et tredje nivåsoverskrift (18. århundre), så lenge foreldreoverskriftene er i sekvensiell rekkefølge. Hadde et tredje nivå på vei foran femte-nivået overskriften, ville det vært ugyldig.
Å bruke for mange overskrifter kan skape en overveldende opplevelse for en person som stoler på en skjermleser for å navigere. Dette kan virke litt motintuitivt først, da jeg bare fortalte deg hvor viktig overskriftene er som navigasjonshjelp.
Tenk på det på denne måten: mye som hvor mange visuelle navigasjonsalternativer på en side kan påvirke en persons fokus og oppmerksomhet negativt, for mange overskrifter skaper «støy» som distraherer og forvirrer hovedpunktet du prøver å formidle.
Det er ingen angitt regel for hvor mange overskrifter som er for mange. Det avhenger helt av hva innholdet er, og hvor mye av det er til stede. For eksempel kan en oppskrift bare kreve navnet på parabolen, dets ingredienser og instruksjoner, mens et akademisk papir kan kreve en langt mer nyansert analyse.
En god posisjon struktur fordeler mer enn bare personer som bruker hjelpesteknologi. Siden overskriftene har semantisk mening, kan andre tjenester hekte seg i denne programmatiske innholdsbeskrivelsen og rekontekstualisere den på ulike brukervennlige måter. For eksempel, her er det som Bing-søkemotoren gjør med godt konstruerte sider:
Bing søkemotor resultatI likhet med skjermlesere vil tjenester som Google Dokumenter og Dropbox Paper automatisk generere en bestilt liste over overskrifter, slik at du raskt kan forstå og navigere i et dokument. Mange tekstbehandlere kan også raskt generere en dynamisk oppdatert innholdsfortegnelse fra overskrifter, en ellers kjedelig og tidkrevende oppgave. Og takket være HTML-interoperabiliteten, kan vi til og med gjenskape denne navigeringsvekten som en nettleserutvidelse!
En ting vi alt for ofte synes å glemme er at CSS-klasser kan brukes på overskriftselementer, akkurat som alle andre HTML-elementer deklarert inne i kropp.
Grunnen til at jeg nevner dette er at overskriftselementer ofte blir brukt på grunn av hvordan de se("Ooh! Jeg liker fargen og fonten til h3, Jeg bruker det. "), Og ikke hvilken prioritet av innhold de beskrive (Brioche er en slags Viennoiserie). Det er et utbredt problem.
I en idealisert verden av akademisk renhet, ville vi ære den materielle ærligheten av overskriftselementer ved å dimensjonere og stylere dem i henhold til hierarkiet de beskriver.
Dette er imidlertid den virkelige verden. Moderne nettsteder og webapps er kompliserte ting som jobber med mange forskjellige typer mennesker, som alle har forskjellige nivåer av erfaring, interesse, kjennskap og evne når de utformes og kodes..
Den virkelige verden kan ringe til en femte nivå overskrift som må se ut som om det er et andre nivå overskrift, eller noe helt nytt. I disse situasjonene er det bedre å bevare den underliggende logiske sidestrukturen og endre retningen på bildene i stedet:
Ekspertvård til en rimelig pris
Det er en trade-off, og en bekreftelse på at den virkelige verden er komplisert. Denne tilnærmingen favoriserer å bevare den viktige delen: intuitiv og effektiv navigering for hjelpeteknologi.
Metodologier som bruksformater tillater en enda mer fleksibel tilnærming til å tilpasse en toppteksts visuals:
Vilkår og betingelser
For dette eksempelet erklærer jeg en rekke små tweaks for å justere presentasjonen av overskriften til jeg får det ønskede visuelle utseendet. Du vil vanligvis møte Utility-stiler på større statsdrevne nettsteder og webapps, hvor klassens lave spesifisitet bidrar til å sikre konsistens.
For å bidra til å forsterke bruk av ordentlig bestilt og nestet overskrift, kan det til og med være verdt å bruke en tilbakestilling for tilbakestilling for å holde alle overskrifter uten en klasse som er deklarert på dem, ser det samme ut.
h1, h2, h3, h4, h5, h6 farge: arv; skriftstørrelse: 1em; linjehøyde: arv; margin: 0; polstring: 0; vertikaljustering: basislinje;
Dette er en liten defensiv design som bidrar til å oppmuntre til å tenke på hvordan et dokument er struktur formet over hvordan det utseende. Det er ment å bli erklært etter en importert CSS tilbakestilling, slik at den kan overstyre tilbakestillingenes meninger.
Det nest vanskeligste problemet innen datavitenskap er å navngi ting. Den første er å innrømme at du ikke vet noe. Jeg antar ikke å vite den beste måten å navngi overskriften styling klasser for ditt nettsted eller web app. Men hvis du bruker en ikke-bruksstiler-basert tilnærming, vil jeg anbefale ikke navngi dem .h1, .h2, .h3, etc.
Problemet med denne tilnærmingen er at folk som ikke er kjent med kodebasen, kan tolke disse klassenavnene som instruksjoner som dikterer å måtte matche klassenavn med overskriftsnivå. Dette vil forsterke "hvordan det ser ut" over "hva det beskriver" -problemet.
Jeg har også møtt situasjoner der det forsterker at det er akseptabelt å bruke HTML annet enn overskriftselementer til forfatteroverskrifter ("Åh, jeg kan gjøre dette div ser ut som en h5!“). Ikke bra!
WebAIMs 2017-skjermleserundersøkelse forteller oss også at manglende eller ukorrekte overskrifter er et av de ti mest problematiske problemene som oppleves av folk som er avhengige av hjelpeteknologi for å navigere på nettet.
Dette er et utbredt tilgjengelighetsproblem med en enkel løsning. Ta litt tid til å se gjennom nettsider eller webapps sider for å se om overskriften din beskriver siden nøyaktig, og at denne beskrivelsen følger en logisk rekkefølge. Det kan være like enkelt som å skifte noen tall rundt!
