Formularios Accessibilitat Digital

Ir a contenido Ir a Estudios, Gobernanza y organización
Logo UA
Realizar búsqueda
Menú
Altres llocs
Logo Accessibilitat Digital   Accessibilitat Digital
Accessibilitat Digital

Formularios

Els formularis són elements utilitzats per a arreplegar informació de l'usuari pel que hem de ser molt clars amb les dades que volem sol·licitar perquè obtinguem una informació concorde al que necessitem.

Campos correctament etiquetats

El primer element que anem a estudiar és l'etiqueta label. Va sorgir per a poder definir el significat o objectiu de cadascun dels camps d'entrada. En cada etiqueta label disposem de l'atribut for que s'associa a l'aneu del camp al que descriu. És molt comú usar l'etiqueta span o simplement no usar cap etiqueta, i definir en l'atribut placeholder. Visualment les etiquetes label ocupen espai i en molts casos no els disposem.

Amb les tècniques que hem vist d'ocultació de codi podem incloure aquests elements, i fer que per als lectors de pantalla o cercadors siga visible, però que per a la gent que els visualitza amb dispositius de pantalla xicoteta, s'oculte.

Millorar la usabilidad d'un formulari

En els formularis és comú desplaçar-nos amb el teclat. Amb la tecla de tabulació canviem entre camps i evitem haver d'estar usant el ratolí per a anar accedint a cadascun dels camps i després emplenar-ho amb el teclat. En ocasions hem vist que per una mala maquetació del formulari, anem saltant entre camps amb un ordre incorrecte al que visualitzem. Usant l'atribut tabindex, que hem vist anteriorment, podem solucionar aquest problema, encara que ja comentem que no és bé abusar d'ell. El recomanable és en els camps principals o requerits però el millor és que el flux siga el mateix que es visualitzar amb el que no es requereix el seu ús.

L'ús de l'atribut accesskey també ens facilita l'accés a determinats camps. És un valor afegit però tenim el problema de trobar combinacions que no interferisquen en el navegador o amb els lectors de pantalla. A més hem d'informar a l'usuari de les combinacions perquè no hi ha cap estàndard.

Per a formularis que siguen molt llargs o en general per a agrupar un conjunt de camps, disposem de l'etiqueta fieldset. Amb l'etiqueta legend dins de fieldset podem indicar un títol per a tot el conjunt de dades. El resultat és una caixa que envolta a tots els elements i en la part superior esquerra un títol amb el contingut de l'etiqueta legend. Amb les fulles d'estil podem modificar l'aspecte al nostre gust.

Nous tipus i atributs per a formularis en HTML5

HTML 5 ha ampliat la funcionalitat dels camps input amb els següents tipus: search, tel, url, email, datetime, date, month, week, estafe, datetime-local, number, range, color.

Les millores que aporten aquests nous camps són doble:

  • Valida el propi navegador que els camps són del tipus que hem indicat, mostrat un missatge d'error en cas que no s'haja introduït un valor correcte. Aquesta validació no requereix javascript ni llibreries addicionals, és natiu del navegador.
  • Adapta en determinats dispositius (per exemple mòbil o tablet) el teclat a les dades que cal introduir. Per al tipus email en iPhone veurem el següent.

A més trobem noves propietats, placeholder, required o autofocus.

La propietat placeholder introdueix text del camp, normalment en un gris suau, amb l'objectiu d'indicar el tipus d'informació que s'ha d'introduir. No cal confondre-ho amb l'etiqueta label. En el moment que escrivim, desapareix aquest text i se substitueix pel qual escriguem.

La propietat required la usem per a indicar al navegador que valide que no es deixe buit o en blanc. L'interessant d'aquesta propietat és que no es fa per Javascript. Cada navegador s'encarregarà d'implementar la validació. Mostrarà un missatge d'error quan ho deixem buit i no permetrà enviar el formulari fins que ho hàgem introduït.

La propietat autofocus permet marca o fer focus en l'últim element que tinga aquesta propietat en el moment que carrega la pàgina. Fa un desplaçament des del principi de la pàgina fins a l'element que tinga aquesta propietat. Hem d'anar amb compte amb aquest efecte si el camp al que li posem la propietat autofocus està molt a baix i requereix molt desplaçament.

Hem de tenir en compte que no tots els navegadors o lectors de pantalla tenen suport per a aquestes noves funcionalitats, encara que a poc a poc les van incloent.

Es pot consultar la taula de compatibilitat d'elements en diversos navegadors d'HTML5.

Hi ha camps com a llistes desplegables o conjunt de botons radie o checkbox que quan són molt extensos han d'ordenar-se per ordre alfabètic. Açò facilita enormement la seua localització, fins i tot desplaçar-nos amb certa velocitat.