Ola, somos Arume

Desenvolvemos páxinas web, aplicacións para móbiles, capas de realidade aumentada e aplicacións para Facebook. Apaixónanos a informática e somos uns perfeccionistas incurables; por eso nos nosos proxectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Rexistrarse. Esqueceches o teu contrasinal?

Etiquetas

Saltar as etiquetas

Subscríbete ás RSS

Estás en:

Accesibilidade en formularios

04 Abr 2011 por Jose

Comentarios: 0

Formularios

Os formularios son a principal ferramenta de comunicación e interacción entre os usuarios e as aplicacións web; poden usarse para distintos fins como solicitude de datos persoais, comentarios, procura de produtos, ... Como elemento imprescindible de comunicación os formularios deben ser accesibles, sinxelos e fáciles de utilizar para todos os usuarios.

Un exemplo onde esta situación non se cumpre é nos formularios de contacto que obrigan a dar un teléfono para porse en contacto co usuario, sen proporcionar outro medio alternativo de comunicación; que sucede entón cos usuarios que teñen algún problema de audición? Non poderían completar correctamente este formulario, polo tanto debemos ter en conta as necesidades dos usuarios á hora de crear formularios web, para iso vexamos unhas normas para a creación de formularios accesibles.

Normas xerais

Acceso ós formularios mediante teclado

Isto realízase usando os atributos accesskey e tabindex.

accesskey
Son atallos de teclado que se usan para poder acceder directamente a unha etiqueta no documento pulsando unha combinación de teclas.
tabindex
Proporciona a orde de tabulación a través do documento.
Etiqueta explicitamente todos os campos do formulario

Identifica o texto asociado a cada campo ca etiqueta label asociándoa a este mediante o atributo id.

Nos campos de texto (textarea, input type="text") a etiqueta colócase antes do campo, mentres que os campos input type="radio" e input type="checkbox" levarán a etiqueta despois.

Indica cales son os campos obrigatorios na etiqueta label mediante un texto "obrigatorio" ou un asterisco cunha lenda que explique o seu significado.

Ordena os campos do formulario dunha forma lóxica

Os bloques pequenos de información son máis sinxelos de asimilar que os formularios enormes sen ningún tipo de agrupamento. Isto realízase co uso das etiquetas fieldset e legend.

Podes agrupar tamén semánticamente os controis relacionados, especialmente os campos input type="radio" e input type="checkbox".

Agrupa as opcións de menú

Nos campos select demasiado longos deberás clasificar as súas opcións mediante a etiqueta optgroup.

<label for="provincia">Elixe unha provincia</label>
<select name="provincia" id="provincia">
	<optgroup label="Asturias"">
		<option value="oviedo">Oviedo</option">
	</optgroup>
	<optgroup label="Galicia">
		<option value="acoruña">A coruña</option">
		<option value="portugal">Lugo</option">
		<option value="ourense">Ourense</option">
		<option value="pontevedra">Pontevedra</option">
	</optgroup>
</select>

Outras recomendacións para a creación de formularios accesibles

  • Proporciona un botón de tipo submit para os cambios de contexto. Se a modificación dun campo do formulario provoca un cambio de contexto debes informar diso.
  • Á hora de validar o formulario, sempre que se produzan erros deberás proporcionar unha descrición da natureza do problema, destacar claramente os campos onde se produciu o erro e se é posible proporcionar exemplos dos valores correctos para os campos.
  • Os campos que necesiten un formato concreto (datas, documentos de identidade, ...) deberán levar asociada a información sobre devandito formato.
  • Informa claramente se o formulario foi correctamente enviado.
  • Cando vaias realizar operacións irreversibles na aplicación (modificación de datos, borrado, transacción bancaria, ...) deberás solicitar confirmación antes, do tipo "Está vostede seguro que desexa realizar a seguinte operación?" e indicar as súas consecuencias.
  • Se usas Javascript na validación asegúrate que o fas de forma correcta. Por exemplo, o seguinte código non permite o envío do formulario cando Javascript está desactivado:
    function validar()
    {
    	document.forms[0].submit();
    }
    <form action="#">
    	<input type="button" value="Enviar" onclick="validar()" />
    </form>

Máis información

Comentarios

0 comentarios. Comentar.

Comentar

Comentar de forma anónima

Podes comentar poñendo calquera nome ou alcume, exceptuando os nomes de usuarios rexistrados. Máximo de 50 caracteres.

Comentar como usuario rexistrado

Rexistrarse. Esqueceches o teu contrasinal?