You are on the editable version of MDN Web Docs

View as an MDN Web Docs user: https://developer.mozilla.org/ca/docs/Learn/Accessibility/Accessibility_troubleshooting

A l'avaluació d'aquest mòdul, us presentem un lloc senzill amb diversos problemes d'accessibilitat que haureu de diagnosticar i solucionar.

Requisits previs: Coneixement bàsic d'informàtica, comprensió bàsica d’HTML, CSS i JavaScript, comprensió dels articles anteriors del curs.
Objectiu: Posar a prova els coneixements bàsics dels fonaments d'accessibilitat.

Punt de partida

Per començar aquesta avaluació, heu d'agafar el ZIP que conté els fitxers que formen l'exemple. Descomprimiu el contingut en un directori nou en algun lloc de l'ordinador local.

Com a alternativa, podeu fer servir un lloc com JSBin o Glitch per fer la vostra avaluació. Podeu enganxar l'HTML, CSS i JavaScript en un d'aquests editors en línia. Si l'editor en línia que utilitzeu no té un panell CSS / JS separat, no dubteu a posar-los en elements <style> / <script> adequats.

El lloc d'avaluació acabat hauria de ser així:

Veureu algunes diferències / problemes amb la visualització de l’estat inicial de l’avaluació; això es deu principalment a les diferències en el marcatge, que al seu torn provoquen alguns problemes d’estil, ja que el CSS no s’aplica correctament. No us preocupeu, solucionareu aquests problemes a les properes seccions.

Nota: si us quedeu atrapats, demaneu-nos ajuda; consulteu la secció Avaluació o ajuda addicional a la part inferior d'aquesta pàgina.

Brífing del projecte

Per a aquest projecte, se us presenta un lloc de natura fictícia que mostra un article "factual" sobre els óssos. Tal com està, té diversos problemes d’accessibilitat: la vostra tasca és explorar el lloc existent i solucionar-los al màxim de les vostres capacitats, responent a les preguntes que es donen a continuació.

Color

El text és difícil de llegir a causa de l’esquema de colors actual. Podeu fer una prova del contrast de color actual (text / fons), informar dels resultats de la prova i després corregir-la canviant els colors assignats?

HTML semàntic

  1. El contingut encara no és gaire accessible: informeu del que passa quan intenteu navegar-hi mitjançant un lector de pantalla.
  2. Podeu actualitzar el text de l'article per facilitar la navegació dels usuaris de lectors de pantalla?
  3. La part del menú de navegació del lloc (marcada per <div class = "nav"> </div>) es podria fer més accessible posant-la en un element semàntic HTML5 adequat. A quin s'ha d'actualitzar? Feu l'actualització.

Nota: haureu d'actualitzar els selectors de regles CSS que donen estil a les etiquetes als seus equivalents adequats per als encapçalaments semàntics. Un cop afegiu elements de paràgraf, notareu que l'estil té un aspecte millor.

Les imatges

Actualment, les imatges no són accessibles als usuaris de lectors de pantalla. Podeu solucionar-ho?

El reproductor d'àudio

  1. El reproductor <audio> no és accessible per a persones amb discapacitat auditiva (sordes). Podeu afegir algun tipus d'alternativa accessible per a aquests usuaris?
  2. El reproductor <audio> no és accessible per a aquells que utilitzen navegadors antics que no admeten àudio HTML5. Com es pot permetre que continuïn accedint a l'àudio?

Els formularis

  1. A l'element <input> del formulari de cerca de la part superior se li podria posar una etiqueta, però no volem afegir una etiqueta de text visible que pugui malmetre el disseny i que no sigui realment necessària per als usuaris vidents. Com es pot afegir una etiqueta que només sigui accessible per als lectors de pantalla?
  2. Els dos elements <input> del formulari de comentaris tenen etiquetes de text visibles, però no s’associen sense ambigüitats amb les seves etiquetes; com ho podem aconseguir? Tingueu en compte que també haureu d’actualitzar algunes de les regles CSS.

El control de mostrar / amagar comentaris

El botó de control de mostrar / amagar comentaris no és accessible per teclat actualment. Es pot fer accessible al teclat, tant pel que fa a donar-hi focus mitjançant la tecla de tabulació com per activar-lo amb la tecla de retorn?

La taula

Actualment, la taula de dades no és gaire accessible: és difícil per als usuaris de lectors de pantalla associar files i columnes de dades, i la taula tampoc no té cap mena de resum per deixar clar què mostra. Podeu afegir algunes funcions al vostre codi HTML per solucionar aquest problema?

Altres consideracions?

Podeu enumerar dues idees més per millorar que faran que el lloc web sigui més accessible?

Avaluació o ajuda addicional

Si voleu que el vostre treball sigui avaluat o esteu atrapats i voleu demanar ajuda:

  1. Poseu el vostre treball en un editor compartible en línia com CodePen, jsFiddle o Glitch.
  2. Escriviu un missatge demanant avaluació i/o ajuda a la categoria d’aprenentatge del fòrum Discourse de la MDN. La vostra publicació ha d'incloure:
    • Un títol descriptiu com ara "Avaluació per solucionar problemes d'accessibilitat".
    • Detalls del que ja heu provat i del que voleu que fem. P.ex. si esteu atrapats i necessiteu ajuda o voleu una valoració.
      • Un enllaç a l'exemple que vulgueu que s'avalui o amb el qual necessiteu ajuda en un editor compartible en línia (tal com s'esmenta al pas 1 anterior). Aquesta és una bona pràctica a adquirir: és molt difícil ajudar algú amb un problema de codi si no podeu veure el seu codi.
      • Un enllaç a la pàgina de tasca o avaluació real, de manera que podem trobar la pregunta amb la qual voleu obtenir ajuda.

In this module

Document Tags and Contributors

Contributors to this page: UOCccorcoles
Last updated by: UOCccorcoles,