Så du har hørt meget snak om noget, der hedder tilgængelighed. Måske har du endda hørt om folk, der sagsøger store virksomheder for at levere utilgængelige tjenester. Men ved du præcis, hvad tilgængelighed betyder?

Heldigvis er tilgængelighed ikke for svært at forstå eller implementere, når du først har forpligtet dig til det. Når du har lært, hvad tilgængelighed er, kan du omsætte den teori i praksis ved at skrive tilgængelige Vue.js-apps.

Hvad er tilgængelighed?

Tilgængelighed er et populært buzzword på nettet, men hvad betyder det præcist? Det viser sig, at navnet er ret beskrivende. Tilgængelighed er simpelthen et mål for, hvor brugbar en webapplikation er for alle typer mennesker.

Ikke alle oplever nettet på samme måde. Nogle mennesker har svækkelse, som kan påvirke deres hørelse eller syn. Nogle kan ikke få adgang til moderne hardware eller højhastighedsinternet, og folk har ofte brug for at bruge nettet under mindre end ideelle forhold. Tilgængelighed handler om at sikre, at alle disse mennesker stadig kan bruge en webapplikation så glat som muligt.

instagram viewer

Hvorfor er tilgængelighed vigtig?

Tilgængelighed er vigtig, fordi når en applikation er meget tilgængelig, kan den betjene så mange mennesker som muligt. Når nogen leverer en tjeneste eller information på et websted, er deres mål, at andre bruger den pågældende tjeneste eller læser disse oplysninger.

Optimering af tilgængelighed sikrer, at så få personer som muligt ikke er i stand til at bruge webapplikationen. Desuden er webapps, der er mere tilgængelige, generelt placeret højere i søgeresultaterne. Dette giver endnu flere mennesker mulighed for at finde og bruge mere tilgængelige webapplikationer.

Almindelige udviklerfejl, der skader tilgængeligheden

Mange webapplikationer er mindre tilgængelige, end de kunne være. Dette er normalt resultatet af fejl fra dem, der har bygget dem. Nogle almindelige tilgængelighedsfejl, som udviklere begår, når de bygger apps, er:

Brug af utilgængelige biblioteker

Du kan stole på tredjepartsbiblioteker for at spare tid og kræfter, når du udvikler dine apps. Det er desværre ikke alle biblioteker, der tager tilgængelighed seriøst, og det kan være svært at identificere de gode. Det er nemt at komme til at sænke tilgængeligheden af ​​dine applikationer ved et uheld på denne måde.

Forsømmelse af semantisk HTML, når du bygger komponenter

Semantisk HTML er HTML, hvis betydning såvel som dens struktur er korrekt. Hvert HTML-tag har et iboende formål, som hjælpeteknologi bruger til at udlede betydningen af ​​dets indhold. For eksempel markerer header-tagget overskriften på et websted. En skærmlæser bør være i stand til at annoncere, at alt inde i et header-tag er en hjemmeside-header.

Desværre er der intet, der forhindrer dig i at bruge et tag til det forkerte formål. Et andet almindeligt eksempel er brugen af ​​et knapmærke til at fungere som et link eller omvendt.

At skrive HTML på denne måde skader tilgængeligheden, fordi hjælpeteknologi ikke længere kan være sikker på formålet med noget HTML-element. Det kan ende med at producere forvirrende eller frustrerende output for brugerne af teknologien. For maksimal tilgængelighed bør du altid skrive semantisk HTML, selvom det betyder lidt mere arbejde.

Tester ikke for tilgængelighed

At bygge en webapp kan ofte være en besværlig opgave med krævende deadlines. Mellem hastværket med at færdiggøre funktioner og byrden med at teste andre aspekter af softwaren, tager tilgængelighedstest en bagsædet. Du kan blive fristet til at implementere en applikation til produktion, før du har testet den for tilgængelighedsproblemer.

Hvorfor? Testen kræver tid og kan kræve omfattende ændringer af applikationens kode. Men test af en webapplikation er en uundværlig del af udviklingsprocessen. Du bør teste din applikations tilgængelighed lige så grundigt som ethvert andet aspekt.

Heldigvis findes der værktøjer til at hjælpe med at løse disse problemer. De følgende fem værktøjer kan hjælpe dig med at skrive mere tilgængelige Vue.js-apps:

WAVE er en samling værktøjer, der hjælper udviklere med automatisk at teste deres apps for tilgængelighedsproblemer. Selvom WAVE ikke er en erstatning for slutbrugertest, kan det stadig hjælpe dig med at fange mange tilgængelighedsproblemer.

WAVE tilbyder et online testværktøj på sin hjemmeside. Det tilbyder også browserudvidelser og flere andre værktøjer til at hjælpe med tilgængelighedstest for mange typer webapps.

Mange af de signaler, som webapps bruger til at kommunikere aktivitet, såsom fremskridtsbjælker og indlæsningsindikatorer, er rent visuelle. Mennesker med synshandicap eller dem, der bruger skærmlæsere, kan ikke opfatte dem.

Vue-announcer er et bibliotek, der lader dig annoncere ændringer i dine Vue.js-apps på en måde, som alle kan få adgang til.

Vue-skip-to er et bibliotek, der er oprettet for at give folk, der bruger en skærmlæser, mulighed for at springe direkte til hovedindholdet i en Vue.js-applikation. Dette er nyttigt, fordi mange webapps har navigationslinks og andre elementer før hovedindholdet. Disse er lette for nogle brugere at springe over, men kan være besværlige og frustrerende at bruge med en skærmlæser.

ESLint er et værktøj, der hjælper dig med at skrive bedre JavaScript ved at analysere din kode og tjekke den for fejl.

Dette værktøj er et ESLint-plugin, som hjælper dig med at sikre, at strukturen af ​​dine Vue.js-komponenter er i overensstemmelse med tilgængelighedsregler.

Når det er installeret, analyserer dette plugin alle Vue.js-filer og påpeger problematisk kode. Du kan så maksimere tilgængeligheden, mens du skriver dine apps, i stedet for at skulle ændre kode efter testfasen.

En stor kilde til tilgængelighedsproblemer i apps er brugen af ​​utilgængelige komponentbiblioteker. Vuetensils er et bibliotek af Vue.js-komponenter.

Disse komponenter er optimeret til minimal størrelse, maksimal tilgængelighed, brugervenlighed og let styling. Du kan spare tid og bruge disse forudbyggede komponenter uden at skade tilgængeligheden af ​​dine applikationer.

Tilgængelighed i Vue.js er let

Tilgængelighed handler om at sikre, at alle kan bruge din applikation i enhver sammenhæng. Maksimering af tilgængeligheden er vigtig for at sikre, at en applikation kan bruges af så mange mennesker som muligt.

Udviklere laver ofte almindelige, men undgåelige tilgængelighedsfejl, når de bygger deres apps. Almindelige problemer omfatter ikke at teste og skrive ikke-semantisk HTML. Men ved hjælp af nogle få værktøjer er det nemmere at skrive meget tilgængelige Vue.js-apps.