I dag skal vi se på tilgjengelighet og semantikk. La oss starte med et spørsmål: Har du noen gang brukt en skjermleser? Hvis svaret er Nei, du bør prøve det - det kan godt endre måten du nærmer deg HTML-oppslaget for alltid!
Under denne artikkelen skal vi se på strukturen på en nettside, måten leselesere tolker den strukturen på, og forbedringer vi kan gjøre til egen oppmåling for å forbedre tilgjengelighet.
Et raskt ord om demoen
Jeg trakk sammen en prøvewebside for å demonstrere hvordan spesifikk markering behandles av skjermlesere. Jeg ønsket også å demonstrere semantisk HTML5 markup på sitt mest grunnleggende - noe som jeg håper du finner nyttig. Til slutt, jeg vet hvordan du ligner kildefilnedlastinger for å komme med en opplæring, så nyt å trekke den fra hverandre!
Demoen
Demoen er en enkel, fleksibel en kolonneside. Det er ikke responsivt, men er godt satt opp for å bli gjort, så skal du: det bruker relative horisontale enheter (%) og relative enheter (em) for skriftene. Bilder er fleksible og endres i størrelse i henhold til dimensjonene til foreldrebeholderen. Det bruker også et par groovy Google-skrifter. Lett og rent.
Webstandardmodellen
Hvis du er en vanlig besøkende på nettstedet, har du hørt gang på gang at når du bygger et nettsted, er det viktig å skille mellom bekymringer. Dette er en del av det vi gjenkjenner som webstandardmodell; bestående av struktur, presentasjon og oppførsel.
Struktur Vi bygger i form av HTML-oppslaget vårt, presentasjon er vår styling (hvordan innholdet vises i en hvilken som helst bruker agent) som vi takler med CSS, og oppførsel av en webside, front-end interaktivitet, som vi vanligvis oppnår med javascript.
Å holde disse tre aspektene av webdesign separat er gunstig for oss i praksis - det er langt lettere å opprettholde innhold som er delt slik og ikke alle sammen jumbled sammen.
Å skille bekymringer er også gunstig når det gjelder forståelse. Vi, mennesker, pleier å behandle en nettside takket være hvordan den leveres via en nettleser. Men det finnes andre måter som en nettside er tilgjengelig på, ikke minst av hvilke søkemotorroboter som kryper den rå strukturen på sider for å kunne kategorisere og rangere innholdet nøyaktig.
Deretter har vi Assistive Technologies (AT) som skjermlesere. Skjermlesere tolker datagrensesnitt og sier hva de ser, og hjelper de synskadede til å bruke dem. Websider er et slikt eksempel på grensesnitt, og skjermlesere leser innholdet slik det presenteres for dem i oppslaget. Forvirrende og rotete merking resulterer logisk i tilgjengelighetsproblemer, selv om det gjengitte nettstedet kan virke feilfritt i nettleseren.
Merk: Det er viktig å huske på at, mens denne tut fokuserer på synshemmede, optimaliserer tilgjengelighet fordeler brukere begrenset på andre måter også (motor, auditiv, kognitiv etc.)
semantikk
Selv om du ikke har forstått hva som menes med semantikk du har sikkert hørt begrepet kastet rundt mye. Semantikk i webdesign refererer til betydning gitt til HTML-oppslag. Flyttet fra tabellbaserte oppsett så store forbedringer i den semantiske verdien av (X) HTML-oppslag, tabellceller gjorde plass for
koder (divisjoner), uordnede lister (
) ble vanlig, og vi begynte å bruke ting som (vekt) i stedet for (kursiv) for å avvike vår markering fra presentasjonskoden.
For tiden er webdesign fellesskapet i ferd med å få tak i HTML5-markup, og takket være et bredt spekter av nye elementer kan vi beskrive vår oppslag mer detaljert enn noensinne. Primærnavigasjon tar fremdeles vanligvis formen av en uordnet liste, men den kan nå leve inne i tags, som perfekt beskriver hva det gjør der.
For hjelp med riktig semantisk HTML5, sjekk ut hva gutta over på HTML5Doctor.com er opp til.
Har du noen gang brukt en skjermleser?
Det er overraskende hvor få webdesignere faktisk har brukt skjermlesere. Å teste arbeidet ditt ut fra synsvinkelen til noen som er synskadet, kan være så givende som det er frustrerende, men jeg anbefaler at du prøver det minst en gang. Skjermleserverktøyene kan være ganske tøffe å forstå, så sørg for at du gjenkjenner forskjellen mellom dårlig tilgjengelighet og enkel manglende evne til å bruke programvaren?
Skjermlesere bruker alternativ navigering (via tastaturet) til å markere, behandle og samhandle med ulike elementer på skjermen. Hopping mellom kontrollene på nettleseren din og kontrollene på en nettside kan være vanskelig å begynne med! Men når du har fått tak i å bruke verktøyene, blir tilgangen til oppslaget ditt klart.
Det finnes flere vanlige eksempler, her er bare noen av dem til din referanse:
KJEVER
NVDA
Windoweyes
SAToGo
Voice
Merk: Interessant, ifølge demografisk forskning utført av webaim.org, sier den største delen av brukerne av skjermlesere Internet Explorer som nettleseren de vanligvis bruker når de leser nettsider. Microsofts tolkning av CSS-spesifikasjonen er ikke på vei der jeg antar?
Eksempel Markup
Jeg får ofte opplæringsmeldinger for nettsidebygger, som, selv om de ser helt greit ut i nettleseren, og de bruker den riktige doktypen, la den ofte være der for HTML5. Det er synd, for det tar ikke mye anstrengelse å ta med på noen HTML5 semantisk markering.
La oss starte med et eksempeldokument. Til å begynne med, kvitt deg for noen doktype som ligner dette:
For gyldig HTML5 trenger vi ikke noe mer komplekst enn dette:
La oss nå kutte ut resten av vår grunnleggende nettside:
Hva sier Markup til deg?
Hva sier Markup til deg?
Hjem
Mer ost
Flere baboons
Opphavsrett ? Ian Yates 2011
Dette er ganske typisk for hvordan vi ville ha strukturert en side før HTML5-elementer ledet vår vei. Det er helt greit, og kan styles uten noen reelle problemer.
Vi har en hjemmehoved div, som selv sitter nestet innenfor en wrapper div. Innenfor hjemmehoved vi finner et par artikkel divs, og vi kommer til å komplisere ting ytterligere i et sekund ved å stanse noen flere divs der inne? se dette?
Hva sier Markup til deg?
Hva sier Markup til deg?
Hjem
Mer ost
Flere baboons
Wisconsin osthistorie
"Oster" høflighet av Graeme Maclean på Flickr
Historien om Wisconsins meieriindustri har røtter i forhistoriske tider. Naturen satte scenen for America's Dairyland i den siste istiden, da isbreer skar gjennom det som nå er Wisconsin. Som de ble tilbaketrukket, ble massiv Isbjergene etterlod et landskap med bølgende åser og frodige hager.
Millioner år senere, da europeiske innvandrere migrerte vest, fant de nasjonens hjerte, som påminnet mange av deres hjemland. Klimaforholdene passer godt til jordbruk, og i utgangspunktet vokste bønder hvete, humle og andre korn. Melkeavlingen fulgte naturlig, og melkebøndene produserte snart en overflod av toppkvalitetsmelk. For å bevare overflødig melk, gjorde bønder ost. Flyttet fra å produsere ost til familiebruk for å lage ost til å selge var et kort skritt. Imidlertid begynte kommersiell produksjon av ost i Wisconsin i liten skala.
Hentet fra www.eatwisconsincheese.com
Sosiale systemer innenfor en Baboon Troop
"Baboon buttocks" høflighet av Prakhar Amba på Flickr
De fleste baboons lever i hierarkiske tropper. Gruppestørrelser varierer mellom 5 og 250 dyr (ofte omtrent 50 eller så), avhengig av spesifikke omstendigheter, spesielt arter og tid på året. Strukturen i troppen varierer betydelig mellom hamadryasbavianer og de gjenværende artene, noen ganger kollektivt referert til som savannbavianer.
Hamadryas bavianen vises ofte i svært store grupper som består av mange mindre haremer (en mann med fire eller så kvinner), som kvinner fra andre steder i troppen rekrutteres mens de fortsatt er for unge til å avle. Andre bavianarter har en mer promiskuøs struktur med et strenge dominanshierarki basert på matrilinen. Hamadryas bavian-gruppen vil typisk inkludere en yngre mann, men han vil ikke forsøke å mate med hunnene med mindre den eldre mann er fjernet.
Hentet fra wikipedia.com
Opphavsrett ? Ian Yates 2011
Du ser? Til hver artikkel div har vi lagt til et bilde, nestet i en div for å binde den til bildeteksten, pluss en annen div som fungerer som en bunntekst nederst.
La oss legge til litt presentasjon; noen CSS-stiler. For det første, noen tilbakestilt stiler, tatt i sin helhet fra Eric Meyer:
/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Lisens: ingen (offentlig domene) * / html, kropp, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, stor kiter koden del dfn em img kbd q s samp liten streik sterk sub sup sup tt var du du midt i dl dt, dd, ol, ul, li, feltet, form, etikett, legenden, tabell, bildetekst, tbody, tfoot, thead, tr, th, td, artikkel, til side, lerret, detaljer, embed, figur, figcaption, footer, header, hgroup, meny, nav, utdata, rubin, seksjon, sammendrag, tid, markere, lyd, video margin: 0; polstring: 0; grense: 0; skriftstørrelse: 100%; skrifttype: arve; vertikaljustering: basislinje; / * HTML5 display-rolle reset for eldre nettlesere * / artikkel, til side, detaljer, figcaption, figur, footer, header, hgroup, meny, nav, del display: block; kropp linjehøyde: 1; ol, ul listestil: ingen; blockquote, q quotes: none; blockquote: før, blockquote: etter, q: før, q: etter innhold: "; innhold: none; table border collapse: collapse; border spacing: 0;
Da legger vi til våre egne stiler. Du vil legge merke til et par fremmede skrifttyper, fanget fra Google-fonts-API og brukt ved hjelp av @ Font-face. Resten er selvforklarende, og resultatet viser lite i vei for komplikasjoner.
På færre enn 200 (ikke-kondenserte) linjer av CSS har vi stylet vår side pent. Ingenting for fancy-senterte overskrifter og menyelementer, en fin stor skriftstørrelse (100% av nettleserens standard, vanligvis 16px), og bilder hvis containere flyter til høyre. Det mest kompliserte av stilene er uten tvil den dobbelte boksens skygger på menyelementene og bildebeholderne. Allikevel faller styling ikke innenfor denne tutens omfang, men vær så snill å plukke den fra hverandre som du vil.
Bedre tilgjengelighet
Det er flere områder hvor vi kunne få bedre tilgjengelighet i vår oppslag. For en start, den tagger mangler alt Egenskap. Hvis du surfer på nettstedet under normale omstendigheter, vil det brise seg over det problemet, men hvem som helst med bilder slått av, ville være uvitende om at det noen gang hadde vært et bilde. Skjermlesere vil i beste fall si at det er et bilde tilstede, men de kan ikke fortelle brukeren mer enn det.
Bruk alternativ tekst som en sjanse til å beskrive bildet. Dette vil være til nytte for brukere, søkemotorer, og dermed også deg.
Dokumentet mangler også alvorlig i semantisk betydning, brukere som navigerer på siden din med en skjermleser, kan ikke bestemme noen hierarkisk verdi i teksten. En div med en klasse av bunntekst sier absolutt ingenting om innholdet til noen (unntatt deg), det lar deg bare CSS-filen din målrette mot den.
Når det gjelder vedlikehold, er det også vanskelig å skille alle de nestede
elementer tilstede det store antallet av dem krever videre behovet for å kommentere dine avsluttende elementer. Det er vanskelig å forsøke å opprettholde bestillingen i seksjoner av merking som dette!
La oss da bytte ut noen av de overflødige div-kodene for flere semantiske elementer:
Ha det?
Hva sier Markup til deg?
Hjem
Mer ost
Flere baboons
? Hallo
Hva sier Markup til deg?
Ha det?
Wisconsin osthistorie
"Oster" høflighet av Graeme Maclean på Flickr
Historien om Wisconsin? frodige hagen.
Millioner år senere? en liten skala.
Hentet fra www.eatwisconsincheese.com
? Hallo
Wisconsin osthistorie
"Oster" høflighet av Graeme Maclean på Flickr
Historien om Wisconsin? frodige hagen.
Millioner år senere? en liten skala.
Her er det komplette HTML-oppslaget, polert opp med strålende semantikk:
Hva sier Markup til deg?
Hva sier Markup til deg?
Wisconsin osthistorie
"Oster" høflighet av Graeme Maclean på Flickr
Historien om Wisconsins meieriindustri har røtter i forhistoriske tider. Naturen satte scenen for America's Dairyland i den siste istiden, da isbreer skar gjennom det som nå er Wisconsin. Som de ble tilbaketrukket, ble massiv Isbjergene etterlod et landskap med bølgende åser og frodige hager.
Millioner år senere, da europeiske innvandrere migrerte vest, fant de nasjonens hjerte, som påminnet mange av deres hjemland. Klimaforholdene passer godt til jordbruk, og i utgangspunktet vokste bønder hvete, humle og andre korn. Melkeavlingen fulgte naturlig, og melkebøndene produserte snart en overflod av toppkvalitetsmelk. For å bevare overflødig melk, gjorde bønder ost. Flyttet fra å produsere ost til familiebruk for å lage ost til å selge var et kort skritt. Imidlertid begynte kommersiell produksjon av ost i Wisconsin i liten skala.
Sosiale systemer innenfor en Baboon Troop
"Baboon buttocks" høflighet av Prakhar Amba på Flickr
De fleste baboons lever i hierarkiske tropper. Gruppestørrelser varierer mellom 5 og 250 dyr (ofte omtrent 50 eller så), avhengig av spesifikke omstendigheter, spesielt arter og tid på året. Strukturen i troppen varierer betydelig mellom hamadryasbavianer og de gjenværende artene, noen ganger kollektivt referert til som savannbavianer.
Hamadryas bavianen vises ofte i svært store grupper som består av mange mindre haremer (en mann med fire eller så kvinner), som kvinner fra andre steder i troppen rekrutteres mens de fortsatt er for unge til å avle. Andre bavianarter har en mer promiskuøs struktur med et strenge dominanshierarki basert på matrilinen. Hamadryas bavian-gruppen vil typisk inkludere en yngre mann, men han vil ikke forsøke å mate med hunnene med mindre den eldre mann er fjernet.
Så hva er forbedringene vi har gjort? Vel, i tillegg til å legge til alt attributter til bildene våre, har vi brukt følgende sju elementer:
: Vi har brukt dette øverst i dokumentet vårt, der hovedposten og navigasjonen er. Vi kan også bruke denne taggen som en header for underavsnitt av merkingen (for eksempel artikler).
: Denne taggen er vert for noe som virker som navigering på en nettside. Vår primære navigasjon er det perfekte eksempelet, men nav-koder kan også pakke inn paginering (for eksempel).
: Vi har bare den ene delen, men dette er en flott kode for å gruppere tilhørende innhold.
: En artikkel kan beskrives som en del av informasjon som kan stå uavhengig av det omgivende innholdet, uten å miste meningen. I vårt tilfelle har vi to artikler, hver bestående av tittel, litt tekst, akkreditering og et relevant bilde.
: Figotaggen tillater oss å inneholde bildene våre, og også tilknytte metainformasjon som?
: Vårt bildetekst er nå plassert på en slik måte at det er knyttet til sitt søskendebilde.
: Vi har en footer ved foten av vår side (hmmmm), men som topptekster kan disse også brukes i underavsnitt, som vi har demonstrert i våre artikler.
Prøv å bruke elementer som disse når du kan. Bruk div-koder, for all del, men bare hvis du ikke kan tenke på et mer passende semantisk element. Når det gjelder styling, kan du ikke gå galt, og for øyeblikket er det ingen forbrytelse hvis du bruker elementer på feil sted. Du må starte et sted, så vær ikke redd for å bruke artikler og seksjoner ufullstendig.
Med noen litt redigert CSS, er resultatet i nettleseren? ingen forskjell.
Hvordan ser en skjermleser det?
Her er vårt design, sett gjennom øynene til Google Chromes skjermleserutvidelse, og OSXs VoiceOver.
Når VoiceOver er igjen for å behandle en hel nettside (Control-Option-A), spretter den gjennom DOM sekvensielt og dikterer hvilket innhold det kommer over. Siste versjoner lar deg spesifisere poeng på favorittwebsider som du kan hoppe til, men om markøren finner seg selv å se på en lenke, en liste, et avsnitt eller et bilde, leser den det så godt det kan.
Vår innsats har gått ubemerket!
Du kan legge merke til, bortsett fra den merkelig attraktive stemmen, at VoiceOver ikke nevnte at vår navigasjon er plassert innenfor en tag, og helt ignorert enhver tilstedeværelse av artikler. Dette er situasjonen i øyeblikket; HTML5 er ennå ikke godt støttet på tvers av skjermlesere, vår innsats har gått ubemerket! På omtrent samme måte som merking og styling standarder blir sakte (men sikkert) implementert av nettleservirksomhetene, slik at skjermleserutviklerne befinner seg i samme situasjon.
For å holde deg oppdatert med statusen for HTML5-tilgjengelighet og skjermleserutvikling, kan du gjøre mye verre enn å holde øye med Bruce Lawson. Han presser ofte problemet, blogger om det og snakker om det. Alternativt kan du sjekke ut www.accessibleculture.org for regelmessig skjermleser produkttesting.
Hjelp i form av WIA-ARIA
WIA-ARI-HVA?! WIA (Web Accessibility Initiative) ARIA (Tilgjengelig Rich Internet Applications) er en spesifikasjon som hjelper assistentteknologier til å tolke HTML-markup. Den bruker attributter til å beskrive elementer på flere måter:
rolle: Et elements formål (ja, ok, dets rolle)
Stat: Et elements nåværende tilstand (tjek merket avkrysningsboks)
Eiendom: Enhver av a tonn av egenskaper (som den horisontale posisjonen til en skyveknapp)
Spesielt der stater og egenskaper er opptatt, kan du forestille deg at de ellers ville være vanskelig for hjelpende teknologier å tolke. Vi kan gjerne legge til ARIA-attributter (innenfor grenser) til vårt oppslag, og avgjørende, de validerer som en del av HTML5-spesifikasjonen.
WAI-ARIA er ment å være en brodannende teknologi. Det klargjør semantikk til assistentteknologi når forfattere oppretter nye typer objekter, via stil og skript, som ennå ikke støttes direkte av språket på siden. www.w3.org
Her er et eksempel på hvordan vi kan forbedre vår markering ytterligere - vi tar dette:
? og vi legger til dette:
Igjen, dette er gyldig HTML5.
Vi har lagt til en rolleattributt for navigasjon til vår nav element, som kan virke motintuitivt, men for tiden hjelper det. (Noen) skjermlesere vil nå gjenkjenne vår navigasjon på riktig måte. Videre nedover linjen, når HTML5-spesifikasjonen er riktig vedtatt av enheter av alle slag, er elementet nav vil innebære en ARIA-attributt av navigasjon (og ditto for andre elementer), noe som gjør det unødvendig.
Vi kan også legge til en rolle i vår overskrift:
Og endelig få vår artikkel noe fortjent anerkjennelse:
For mer informasjon om tilgjengelige roller og hvordan du bruker dem, sjekk ut Virginia DeBolts omfattende introduksjon til ARIA-roller.
Så vi har endelig oppdatert vår markering for å forbedre tilgjengeligheten. Ta en titt på den ferdige artikkelen, men for å merke en hvilken som helst reell forskjell du trenger for å se den med en egnet skjermleser selvfølgelig. Din beste innsats for øyeblikket vil være å teste med JAWS eller NVDA, da disse poengene er høyt for deres håndtering av både HTML5 semantikk og ARIA-attributter.
Konklusjon
Jeg håper denne artikkelen har hjulpet deg med å få bedre perspektiv på hvilken rolle du kan spille for å forbedre tilgjengeligheten på Internett. Øvingsstandardbasert webdesign, vær oppmerksom på å utvikle teknologier, og selv om innsatsen din ennå ikke kan brukes fullt ut, er du i det minste fremtidssikret i arbeidet ditt. Takk for at du leser (eller lytter)!
Accentsconagua
Share
Demoen 
