Sådan kommer du i gang med webstedets tilgængelighed

Da jeg kom ind i front-end-udviklerrækkerne, talte ingen med mig om tilgængelighed. Jeg vidste ikke, at du kunne bryde loven ved at have et utilgængeligt websted, indtil en dag en universitetsklient kom til mit team for at få hjælp til at udføre en tilgængelighedsrevision. Mand var jeg over hovedet.

Jeg begyndte at grave mig ind og forske, men fandt, at en masse af dokumentationen var skræmmende. Noget af det var over mit hoved. Der var så meget at fordøje, men jeg gik til sidst min vej gennem. (Nå, jeg er faktisk stadig ved at komme igennem).

Jeg har siden lært, at tilgængelighed ikke behøver at være skræmmende og endda kan være sjov.

Hvad der ville have hjulpet mig i begyndelsen var et par praktiske principper til at hjælpe mig med at forstå det grundlæggende.

Så lad mig dele med dig: Ben's hjemmegrønne webtilgængelighedsprincipper.

De er ikke regler.

Det er mentale skift, som jeg var nødt til at foretage, da jeg begyndte at udvikle tilgængelige websteder.

Lad os komme ind på det.

Princip 1: Webdesign er mere end grafisk design

Da jeg startede mit første webjob, fik jeg et billede af et websted og blev bedt om at gøre det til et websted.

Efter at jeg gjorde det, sammenlignede designerne derefter omhyggeligt mit websted med deres billede af et websted og fortalte mig alle de fejl, jeg gjorde.

Liniehøjde skal være 18px, ikke 16.
Denne grå er den forkerte lysegrå. Det skal være lys lysegrå.
Box-skyggeoskarphed er slukket af en pixel.

Sådan ting. De var meget imponerende, og jeg lærte et ton.

Men ingen af ​​os mente virkelig, at nettet ikke er et kontrolleret medium. Vi var så optaget af de visuelle elementer i værket, at vi ikke overvejede, hvordan webstedet kunne fungere på en Android-telefon på $ 99 over 3G, eller for nogen, der var farveblind, eller nogen, der overhovedet ikke kunne se.

Og det faktum, at internettet kan få adgang til forskellige mennesker i forskellige situationer, er det, der gør webdesign så meget mere end grafisk design.

Så i stedet for kun at fokusere på visuelle elementer, delte jeg mit arbejde op i tre hovedopgaver.

Tre opgaver med webdesign

Opgave 1: Skriv god (læst: semantisk) markup

Den første opgave er at skrive god markup.

Dette betyder at organisere indholdet på siden godt. Ved hjælp af HTML, som det var beregnet til at blive brugt. HTML er tilgængelig som standard. Så hvis vi får dette lige fra starten, er vores job så meget lettere. Vi vil bruge lidt mere tid på dette lidt senere.

Opgave 2: Forbedre markeringen med CSS

Den anden opgave er at bruge CSS til at forbedre den fremragende markup, som vi har skrevet.

CSS skal bruges til at understrege betydningen af ​​dit indhold. Det burde gøre det mere meningsfuldt og mere virkningsfuldt. Men du er nødt til at bruge den rigtige HTML til at begynde med, ellers bliver dit job meget sværere.

Opgave 3: Laginteraktivitet på din HTML og CSS med JavaScript

Den tredje opgave er at lag interaktivitet over strukturen og stilen med JavaScript.

Før og efter

Før jeg vedtog denne tilgang, plejede jeg bare at nå ud til det element, der var nemmest at style og bruge det.

Jeg har brug for stor tekst, så jeg bruger en h1.
Jeg har en kompliceret harmonika-grænseflade, så jeg bruger en masse divs.

Sådan ting. Men det fokuserer kun på de visuelle aspekter. For at bygge tilgængelige websteder er vi nødt til at tænke på mere end bare hvor tæt webstedet matcher billedet. Det er mere end visuelt design eller grafisk design. Derfor kalder vi det webdesign.

Dette bringer os til princip 2.

Princip 2: Vær ASAP (så semantisk som muligt)

Sådan anbefaler jeg at gøre dette.

Hver gang du begynder at skrive

...

Hold op.

Se i spejlet.

Og spørg dig selv.

Kunne jeg bruge et mere semantisk element?

Hvordan ved du, om der er et mere semantisk element at bruge?

Mozilla-udviklingsnetværket har en side med alle HTML-elementer, der er organiseret efter deres formål. (Denne reference er fantastisk - brug den!)

Lad os se på nogle af de semantiske alternativer, vi har til

s.

Alternativer til

Hvis du har et enkeltstående afsnit på en side, kan du overveje at bruge -tagget.

Hvis du har en blog, nyhedsartikel, forumindlæg eller nogen form for selvstændigt stykke indhold, kan du bruge en .

Har du flere komponenter af samme art ved siden af ​​hinanden? Overvej at bruge en ordnet eller uordnet liste (

    eller
      ).

      Har du et øverste afsnit på dit blogindlæg med titel og metadata? Brug en

      . Har du et nederste afsnit med tags og sådan? Brug en
      .

      Har du en sidebjælke? Brug en