Hoe u een toegankelijk ontwerp van een webpagina maakt

Laptop scherm

Online winkels, bankapplicaties, hotelreserveringen of freelancetaken, er zijn er steeds meer de taken die via internet worden afgehandeld en die in sommige gevallen de conventionele media hebben vervangen.

Oosten de snelle groei van digitale activiteiten heeft het ons gemakkelijker gemaakt in veel aspecten leven. Het bespaart ons tijd omdat transacties sneller verlopen en het niet nodig is om naar een fysieke vestiging te reizen, en natuurlijk er zijn nieuwe media gecreëerd die voorheen niet bestonden en die nu de meeste mensen gebruiken, zoals sociale netwerken, streaming films en series op platforms als Netflix, of online betalingssystemen zoals Paypal.

Met deze opkomst van de digitale wereld is het essentieel investeren in de ontwikkeling van toegankelijke en goed ontworpen interfaces Voor de gebruikers. Dat mogen we echter niet vergeten er zijn gebruikers met een handicap fysiek of psychologisch die hun ervaring en hun vermogen om computers en mobiele telefoons te gebruiken aanzienlijk beperken.

Hoewel er enkele handicaps zijn, zoals mensen die rolstoelen gebruiken, die het gebruik van internet niet verstoren, andere, zoals problemen met het gezichtsvermogen of blindheid, motorische coördinatieproblemen, doofheid of autisme, ze kunnen uw vermogen om op internet te navigeren ernstig belemmeren. Voor deze gevallen zijn er al enkele gemaakt dispositivos zoals schermlezers, die gebruikers assisteren en ondersteunen in gebieden waar ze een handicap hebben.

Maar dit is slechts het eerste deel van het oplossen van het probleem. Als we aan deze gebruikers denken, moeten we ontwerp webpagina-interfaces die uw ervaring vergemakkelijken en passen bij uw behoeften. Er zijn enkele principes bij het ontwerpen die we kunnen toepassen.

Inhoud en bronnen

Beginnend met de meest elementaire, moet je stel prioriteiten bij het ontwerpen van inhoud. De koptekst en menubalk moeten visueel gemakkelijk te lokaliseren zijn en moeten het eerste zijn dat de gebruiker ziet. De elementen op de homepage, de afbeeldingen en de relevante informatie zullen als tweede worden gelokaliseerd.

Op veel pagina's verschijnen advertenties of reclamebanners. Als dit op zich al vervelend is voor alle gebruikers, is het voor mensen met een visuele beperking een probleem, aangezien het veel verwarring veroorzaakt en het lezen van het webdiagram verstoort. Daarom is het essentieel dat u een algemeen redactioneel ontwerp van de pagina die is logisch georganiseerd en begrijpelijk, en de elementen hebben de juiste afmetingen, zodat gebruikers zich kunnen concentreren op de belangrijke inhoud, zelfs als er andere afleidingen zijn.

De lettertypen die u gebruikt bij voorkeur moeten ze zijn groot en leesbaar. Het type Sans serif en vet Ze maken het lezen veel gemakkelijker voor mensen met dyslexie. Andere aanbevolen lettertypen zijn: Arial, Times New Roman, Helvetica, Tahoma, Calibri en Verdana.

En je moet er natuurlijk altijd voor zorgen dat er een duidelijk onderscheid is tussen de tekst en de achtergrond. Gebruik geen vergelijkbare kleuren, maar kies liever contrasterende kleuren.

Vetgedrukt Sans Serif-lettertype

Door Sans Serif Bold-lettertypen te gebruiken, kan de tekst beter worden weergegeven.

Alternatieve tekst

El Alternatieve tekst of de Alt-tag, zijn de beschrijvingen die op de afbeeldingen worden geplaatst op de webpagina's. Hoewel deze tekst niet door gebruikers kan worden gelezen, is een goedgeschreven beschrijving is een tool waarmee we een betere SEO-positionering kunnen bereiken.

Maar het nut van de Alt Tag wordt niet alleen hiertoe beperkt. Voor hen gebruikers die schermlezers gebruiken voor visuele beperkingen zijn de beschrijvingen van de afbeeldingen de enige referentie die ze hebben om te weten wat het uiterlijk is van wat er op de pagina wordt weergegeven. Dus als we bijvoorbeeld een foto gaan plaatsen van wat vetplanten, een goede alternatieve tekst zou zijn: Drie vetplanten in roze potten. Een heel korte tekst zoals: Potplanten, Het is geen beschrijving die relevante details geeft en daarom niet werkt.

Vetplanten in roze pot

Drie vetplanten in roze potten. Alternatief tekstvoorbeeld.

aanpassingsvermogen

Bij het ontwerpen moeten we ook met alles rekening houden de presentaties waarin onze interface wordt getoond, ofwel in web- of mobiele versie. De ervaring zal altijd anders zijn, afhankelijk van het medium waar we het bekijken.

Wanneer we de mobiele telefoon gebruiken, we kunnen worden blootgesteld aan verschillende omgevingen die het lezen moeilijk maken Van inhoud van het scherm. Als we bijvoorbeeld buiten zijn, zorgt de helderheid van de zon ervoor dat het scherm er erg donker uitziet, en door de ruis kunnen we de audio niet goed horen. Daarom is het belangrijk om goed na te denken over deze details, zodat de mobiele versie grote letters en donkere kleuren heeft, en de video's ondertitels zouden moeten hebben voor het geval het moeilijk is om ze te horen.

Mobiel scherm

Pas het interface-ontwerp aan zodat het leesbaar is op zowel mobiele telefoons als computers.

Consistentie in ontwerp

Redactioneel ontwerp wat we doen met onze website moet hetzelfde zijn, ongeacht de sectie waar je bent. Dezelfde pictogrammen op de menubalk zouden in het Home-gedeelte moeten verschijnen als in het gedeelte Contacten. We mogen de stijl niet veranderen noch de locatie van de belangrijkste knoppen van het web.

Ook is het voor ons niet handig om video's te plaatsen die automatisch worden afgespeeld bij het openen van de pagina. Voor gebruikers die schermlezers gebruiken, is het moeilijk om te weten hoe ze deze moeten pauzeren.

Starbucks-website

De menubalk op de Starbucks-pagina is in alle secties hetzelfde.

Toetsenbordnavigatie

Ten slotte hebben sommige gebruikers met motorische coördinatieproblemen moeite om een ​​computermuis vast te pakken of het touchpad van een laptop te gebruiken, en vertrouwen ze uitsluitend op het toetsenbord. Zorg dat je dat uw website op een bepaalde manier is ontworpen dat kan volledig zijn alleen functioneel met de toetsenbordknoppen.


Laat je reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

*

*

  1. Verantwoordelijk voor de gegevens: Miguel Ángel Gatón
  2. Doel van de gegevens: Controle SPAM, commentaarbeheer.
  3. Legitimatie: uw toestemming
  4. Mededeling van de gegevens: De gegevens worden niet aan derden meegedeeld, behalve op grond van wettelijke verplichting.
  5. Gegevensopslag: database gehost door Occentus Networks (EU)
  6. Rechten: u kunt uw gegevens op elk moment beperken, herstellen en verwijderen.