31 May Paginas webs y formularios

Posted at 04:33h in Diseño paginas web by PanelEmilio2019

Tabla de Contenidos

Paginas webs y formularios

Paginas webs y formularios. Los formularios son una parte importante de cualquier aplicación web. Fomentan la interacción del usuario y suelen ser características clave del sitio. A continuación, se muestra una breve descripción de cómo asegurarse de que todos los usuarios puedan acceder a sus formularios.

¿Qué es la accesibilidad web?

Los problemas de accesibilidad en la web conciernen a grandes grupos de personas con una amplia variedad de discapacidades, que van desde la visual o del habla hasta la cognitiva o neurológica. Pero la accesibilidad web también beneficia a las personas sin discapacidad. Piense en alguien con una conexión lenta a Internet o una pantalla pequeña, o alguien con lesiones temporales, como un brazo roto. La accesibilidad de los sitios web es ahora un requisito legal en el Reino Unido y está cubierto por la Ley de Igualdad de 2010. Los propietarios de sitios y proveedores de servicios están obligados a anticipar las necesidades de los posibles clientes discapacitados.

Para las personas que utilizan lectores de pantalla o teclados para la navegación, el marcado HTML esencialmente es la experiencia web, que hace del marcado semántico una prioridad clave. Una vez que tenga sus elementos en orden, es importante no comprometer los componentes básicos de su aplicación para la experiencia de los usuarios videntes mediante el uso excesivo de CSS y Javascript. Alguien con discapacidades cognitivas requerirá instrucciones claras y notificaciones de usuario y alguien con su mano dominante en un yeso apreciará las áreas de clic grandes.

Cómo asegurarse de que los formularios de su sitio web sean accesibles:

Marcado de formulario

Siempre que sea posible, utilice el elemento para asociar texto con elementos de formulario de forma explícita. Utilice para atributo para conectar la etiqueta al elemento de formulario. El atributo for debe coincidir exactamente con el id del elemento del formulario. El uso del atributo for en la etiqueta también aumenta el área de clic. Esto es un beneficio para todos los usuarios cuando, por ejemplo, el área de clic de un botón de radio o casilla de verificación incluye la etiqueta, así como el área de entrada real.

Recuerde usar controles de agrupación

y para asociar controles de formulario relacionados.

Name Email

También es posible tener la entrada dentro de la etiqueta de la etiqueta si el control de formulario no se puede etiquetar explícitamente, sin embargo, esto no es compatible con la tecnología de asistencia.

Suscribirse al boletín

Etiquetas ARIA

aria-label es otro atributo de etiqueta. La etiqueta aria es invisible y está diseñada para ser leída por tecnología de asistencia. Se puede utilizar cuando no es posible utilizar una etiqueta visible.

aria-labelledby es similar pero se refiere directamente a la identificación del control de formulario.

Botones

Los botones pueden ser un elemento

Asegúrese de que el botón tenga un área de clic grande, que los colores tengan suficiente contraste y que los estados de enfoque y desplazamiento tengan estilo o se les permita depender de los estilos predeterminados del navegador.

Estilo de forma

A veces queremos ocultar las etiquetas de los formularios si el propósito es obvio. Los visitantes videntes podrán reconocer un campo por su ubicación o un icono de aviso estándar en un botón. Como desarrollador, puede tener la tentación de optar por la pantalla obvia: ninguna; o visibilidad: oculta ;, pero su uso también lo oculta a los lectores de pantalla. Una mejor manera de crear una experiencia ordenada para los usuarios videntes es esta solución a continuación, que utiliza la propiedad de desbordamiento y mantiene toda la información disponible para los lectores de pantalla.

etiqueta altura: 1px; ancho: 1px; margen: -1px; desbordamiento: oculto;

Pruebas

Una vez que haya creado sus formularios, es hora de probarlos antes de la implementación. La mayoría de los dispositivos vienen con un lector de pantalla incorporado. A menudo usamos VoiceOver, que viene de serie con los dispositivos Apple y está optimizado para usarse con Safari.

La herramienta de auditoría de Google Lighthouse tiene una sección dedicada a la accesibilidad. Obtienes una puntuación en la accesibilidad de tu marcado (por ejemplo, orden semántico), así como en los estilos de tus elementos (por ejemplo, suficiente contraste de color).

También es importante que un usuario pruebe sus formularios. Un par de ojos frescos en un nuevo trabajo es una herramienta muy útil para desentrañar cualquier inconsistencia o problemas pasados por alto.