Fer que el vostre lloc web sigui més accessible per a tothom

D'acord, siguem sincers. Desenvolupar el lloc web accessible perfecte és massa difícil i requereix molt de temps. I, per descomptat, no viable per a desenvolupadors individuals o petites empreses. Però hi ha algunes mesures que podeu implementar fàcilment per millorar l'experiència de navegació dels visitants amb discapacitat visual i lectors de pantalla.

En aquest article, enumerem algunes de les maneres més fàcils de millorar l'accessibilitat que no requereixen dos dies de codificació javascript fantàstica.

Sense més preàmbuls, comencem amb els consells d'accessibilitat.

Formes

Els formularis són un dels elements més comuns en un lloc web. Normalment participen en funcions importants del vostre lloc web, com ara enviar un formulari de contacte o emmagatzemar algunes dades a la base de dades.

Un poder tan gran ve amb una gran responsabilitat. Hem de fer que els nostres formularis siguin fàcilment accessibles per als lectors de pantalla i els usuaris amb discapacitat visual.

Etiquetes de control de formularis

Assegureu-vos que tots els controls del formulari (entrada, àrea de text, selecció...) tinguin una "etiqueta amiga". Podeu fer-ho amb un atribut for =" " a l'etiqueta d'etiqueta i un atribut coincident id =" " al vostre control de formulari.

Sí, però... Les etiquetes semblen lleig al meu disseny.

No és una excusa. Podeu ocultar visualment l'etiqueta i els lectors de pantalla encara podran llegir-los.

Només assegureu-vos de no utilitzar display: none; o visibility: hidden, ja que els elements amb aquestes propietats d'estil seran ignorats pels lectors de pantalla com ho fan els navegadors normals.

Podeu jugar amb l'opacitat i l'alçada/amplada de l'element per ocultar visualment l'etiqueta.

Índex de pestanyes

Sabíeu que podeu utilitzar l'atribut tabindex =" " per establir l'ordre de navegació per pestanyes a la vostra pàgina web?

Si utilitzeu un disseny elegant, assegureu-vos de configurar un ordre de pestanyes per als controls del formulari que us faciliti la navegació amb la tecla de tabulació.

Voleu eliminar un ítem de l'ordre de pestanyes natural però mantenir l'esdeveniment focus ()? A continuació, utilitzeu un tabindex negatiu tabindex =" - 1 ".

Conjunts de camps i llegendes

S'utilitza principalment per a grups d'entrada relacionats com els botons de ràdio o de caselles de selecció. Però també podeu utilitzar-lo per agrupar seccions dels controls del vostre formulari.

Per exemple, si l'usuari envia la seva informació personal i de facturació a través d'un formulari, podeu crear un conjunt de camps per a la informació personal i un altre per als detalls de facturació.

Aplicacions d'Internet riques accessibles

Les etiquetes Aria són un dels elements d'accessibilitat més infravalorats dels nostres documents html. Normalment falten i de vegades en fan un ús excessiu.

La primera regla és intentar no utilitzar etiquetes d'aria. Només cal que utilitzeu les etiquetes html adequades, com ara la capçalera, el peu de pàgina o la taula, ja que les etiquetes aria només s'han d'utilitzar per afegir accessibilitat als elements html que no són accessibles de manera nativa.
Això significa, per exemple, que <form role =" form "> no és necessari i s'ha d'evitar. Com que l'etiqueta de formulari ja fa servir la funció de formulari.

Casos de mal ús

• <form role =" forma ">
• <rol principal =" principal ">

Casos d'ús acceptables

• <div role =" principal ">
• Algunes vegades hem de fer clic en un div: <div role =" button "> </div>
• Tens una plantilla que utilitza <div> per a la navegació i no vols editar tot l'estil? <div role =" nav ">

Si voleu cercar etiquetes de rol d'aria innecessàries al vostre html, podeu utilitzar l'eina de validació w3.

Enllaços

Intenteu donar una bona descripció als vostres àncores perquè els usuaris amb discapacitat visual puguin entendre fàcilment on va l'enllaç.

<!-- Dolent -->
<p> <a href=""> Feu clic aquí </a> per veure la nostra galeria de fotos de l'hotel <p>

<!-- Bé -->
<p> Vegeu la nostra <a href=""> galeria de fotos de l'hotel </a> </p>

Esquemes

Segur que de vegades heu eliminat aquells contorns blaus lleigs d'un botó perquè no coincideixen amb el vostre disseny minimalista. oi?

Ningú us diu que no ho hauríeu de fer, però assegureu-vos d'aplicar un altre comentari visual a l'element (com ara un color de vora) o implementar una solució alternativa per identificar els usuaris del teclat i aplicar un esquema a aquests usuaris.

Si voleu obtenir més informació sobre com identificar els usuaris de les pestanyes, podeu llegir aquesta bonica publicació de David Gilberston .

Imatges Alt atribut

Sembla obvi, però quantes vegades has posat alt =" hero " o alt =" cta " a les imatges de la teva pàgina de destinació?

Un malson per a un lector amb discapacitat entendre què hi passa.

Imagina que estàs descrivint la imatge a un amic cec. Quan ho tingueu, poseu-lo (o una versió reprèn si és massa llarga).

Colors

Contrast de color

No tots són lectors de pantalla. I no tots podem veure la mateixa quantitat de colors.

Per tant, quan feu una nova capa de pintura al vostre lloc web, preneu uns minuts per comprovar si els colors del vostre disseny es poden distingir fàcilment per a cada persona.

Aquí teniu una petita fitxa de relació de contrast a tenir en compte:

• Text normal *

• Dolent: proporció inferior a ** 4,5: 1 **

• Bé: des de ** 4,5: 1 ** fins a ** 7: 1 **

• Genial: per sobre de ** 7: 1 ** proporció

• Text gran *

• Dolent: proporció inferior a 3:1

• Bé: de 3:1 a 4,5:1

• Genial: per sobre de la proporció 4,5:1

Les aplicacions i els navegadors de disseny moderns com Google Chrome ja van implementar un verificador de contrast de color al seu selector de colors. Així que ja no és una excusa.

Si les vostres eines de desenvolupament o el vostre navegador no tenen un verificador de contrast de color, podeu utilitzar llocs com color.review que ofereix una bona manera de comprovar i millorar les vostres coincidències de color.

No només confieu en el color

Quan poseu èmfasi en la interacció amb els elements del vostre lloc, no confieu només en el color.
Per exemple, no utilitzeu només colors per indicar un camp de formulari obligatori. Assegureu-vos de complementar el disseny del color amb alguns elements visuals com icones, asteriscs...

Hi ha eines agradables com Filtres de llocs web de daltònics que us permeten veure el vostre lloc web com si tinguéssiu una de les anomalies més comunes del color dels ulls.

Això és tot de moment. Us donem temps per respirar i implementar algunes d'aquestes millores d'accessibilitat al vostre lloc.