Web Captionr

Web Captioner es un complemrnto que subtitula según se habla para facilitarte el proceso tienes un tutorial muy practico.

Arrastra y suelta usando WAI-ARIA

La aria-grabbed
La aria-grabbed se utiliza para determinar si un elemento está en un estado agarrado para una operación de arrastrar y soltar.

Valores

• `true` Indica que el elemento ha sido seleccionado para arrastrar.
• "falso" Indica que el elemento no está actualmente seleccionado para arrastrar, pero puede estar disponible para arrastrar estableciendo la propiedad en `true`.

Si un elemento no tiene ninguna aria-grabbed el elemento no puede ser arrastrado.

El aria-grabbed en el siguiente ejemplo indica que el elemento de la lista se ha seleccionado para participar en una operación de arrastrar y soltar.
<li aria-grabbed="true">

La aria-dropeffect es un estado que indica el tipo de operación que se producirá cuando un objeto que participa en una operación de arrastrar y soltar se libera en el destino. Se puede proporcionar más de un valor como una lista de fichas separadas por espacios. La siguiente tabla enumera los valores posibles para aria-dropeffect.

Valores

`copy` La fuente se duplica y se suelta en el objetivo.
`move` El origen se elimina de su ubicación actual y se suelta en el destino.
`reference`Se creará una referencia o acceso directo al objeto de origen en el destino.
`ejecutar` Una función compatible con el objetivo se ejecuta utilizando la fuente de arrastre como entrada.
`popup` Se presenta un menú emergente o un cuadro de diálogo para que el usuario pueda elegir una de las operaciones compatibles (copiar, mover, referencia y ejecutar) u otra funcionalidad de arrastre.
`none` El objetivo no aceptará la fuente.
El aria-dropeffect en el siguiente ejemplo indica que el efecto de soltar un objeto en esta lista desordenada sería eliminar el objeto de su ubicación actual y copiarlo en esta lista.

<ul aria-dropeffect="move">
El modelo de evento de arrastrar y soltar HTML 5
Existe un modelo de eventos HTML 5 bien definido para las operaciones de arrastrar y soltar . El modelo es demasiado complejo para cubrirlo en detalle.

Datos sacados de :https://dev.opera.com/articles/accessible-drag-and-drop/

Guía para personas con discapacidades de lenguaje o comunicación

Esta guía describe las funciones de accesibilidad más populares de Windows y Microsoft Office. También cubre productos de tecnología de asistencia para Windows y Microsoft Office diseñados para personas con discapacidades de lenguaje o comunicación puedes descargar esta guía en la web de soporte de Windows

Lista de verificación de accesibilidad

Accessibility checklist es una web muy recomendable donde puedes filtrar los requisitos ge accesibilidad que precises.

3dRudder for PlayStation VR

Ratón para pies de PlayStation

Pautas generales de vídeos de cabecera

Mantenga el video relativamente corto

Los videos más largos tendrán un tamaño de archivo mayor, consumirán más ancho de banda del usuario y pueden tardar más en iniciar la transmisión. Mantenga el video alrededor de 10-15 segundos de duración. Eso debería ser una cantidad adecuada de tiempo para transmitir una idea o emoción intencional.

Evitar el movimiento excesivo

Cierto movimiento está bien, pero el movimiento excesivo puede distraer e inoportuna. Además, tenga en cuenta que el término "fondo" de video implica que hay información más importante en primer plano. El video de fondo está destinado a apoyar visualmente y reforzar la información de primer plano. Si hay demasiadas cosas en el video, es probable que reste valor al primer plano más importante. También es importante tener en cuenta que el movimiento excesivo también puede desorientar a las personas con trastornos vestibulares (sensibilidad al movimiento).

Exportación de video final a alta calidad.

Al exportar el video final desde su aplicación de edición de video, asegúrese de exportarlo con configuraciones de alta calidad. La conversión y la optimización para su uso en la web se realizarán más adelante.

Quitar el canal de audio

El audio puede distraer en este contexto, además, los videos de fondo no se reproducirán automáticamente en el móvil si contienen sonido, así que asegúrese de eliminar el canal de audio completamente.

Proporcionar múltiples formatos

Para que el video sea compatible con todos los navegadores, deberá convertirlo a múltiples formatos, actualmente, WebM y MP4. Para hacer esto, recomiendo usar ffmpeg a través de la línea de comandos. Si tienes homebrew es fácil de instalar brew install ffmpeg --with-libvpx. Los comandos se ven algo como esto:

ffmpeg -i input.mp4 -c: v libvpx-vp9 -an output.webm
ffmpeg -i input.mp4 -c: v libx264 -an output.mp4

Considere el uso de ancho de banda de los usuarios móviles

Dado que los videos suelen ser archivos grandes, consumirán más ancho de banda y ralentizarán el tiempo total de carga de la página. Considere utilizar consultas de medios para publicar un video con dimensiones más pequeñas y una tasa de bits más baja para dispositivos de pantalla pequeña. Esto permitirá una transmisión y reproducción más eficientes en dispositivos de pantalla pequeña, y consumirá menos ancho de banda general para aquellos en una conexión celular.

Asegurar suficiente contraste con el texto de primer plano

Si está mostrando texto en su video, asegúrese de que sea fácil de leer. De lo contrario, deberá aumentar el contraste agregando una superposición al video, cambiando el color del texto o agregando una sombra de texto o un fondo al texto

Proporcionar un botón de pausa

Siempre habrá personas a las que les gustaría hacer una pausa en el video, por lo que es mejor darles la posibilidad de hacer eso.

Además, aunque WCAG no menciona específicamente el uso de video de fondo, los criterios de éxito en la sección 2.2.2 (Pausa, Detener, Ocultar) pueden aplicarse a esto:

“Para cualquier información que se mueve, parpadea o se desplaza que (1) se inicia automáticamente, (2) dura más de cinco segundos y (3) se presenta en paralelo con otro contenido, existe un mecanismo para que el usuario haga una pausa, se detenga o esconderlo..."

Anticipar la posibilidad de mareo por movimiento.

Cuando se enfrentan a la animación y el movimiento a gran escala en la web, las personas con trastornos vestibulares provocados visualmente suelen lidiar con los sentimientos de mareos, como mareos, náuseas y dolores de cabeza. Afortunadamente, iOS

La fuente del texto y la accesibilidad

Creo que es seguro afirmar que una gran parte de la accesibilidad del sitio web recae en la tipografía, después de todo, la web aún es del 95% tipografía 1 . Los espectadores visitan un sitio web para leer su contenido o simplemente para encontrar información específica que están buscando. Y la mayor parte de esa información y la mayor parte del contenido se comunica a través de texto. Esta es una de las pocas constantes en la web que no ha cambiado con los años. Entonces, ¿cómo nos aseguramos de que todos puedan leer el contenido de nuestro sitio web? Y por todos, me refiero absolutamente a todos . Esto incluye a personas con problemas de visión, trastornos de lectura, ceguera al color.
Los diseñadores y desarrolladores de sitios web a menudo se olvidan de estas personas o inventan excusas como "las personas ciegas no conducen automóviles, por lo que no necesitan comprar uno en nuestro sitio web". Esto fue, literalmente, lo que alguien dijo cuando trabajé para una gran empresa de mercado de automóviles en línea en el Reino Unido . Este es un comentario de mente cerrada, egoísta y repugnante. La web fue creada para todos y es nuestro trabajo hacerla accesible para todos. Estas son algunas de las mejores prácticas de tipografía web accesible.

1. ESTABLEZCA SU TAMAÑO DE FUENTE BASE EN UNIDADES RELATIVAS

¿Qué es el tamaño de fuente base, cómo lo configuramos y cómo lo usamos? Vamos a empezar con el qué . El tamaño de fuente base es simplemente el tamaño de fuente del que se derivarán todos los demás tamaños de fuente. Si usamos correctamente unidades relativas.

TAMAÑO DE FUENTE BASE Y ACCESIBILIDAD

¿Por qué es tan importante establecer el tamaño de fuente base en unidades relativas? Tengo que ser honesto, durante mucho tiempo, pensé: ¿para qué sirve configurar el tamaño de fuente base 100%? Más tarde supe que es por una razón simple: el tamaño de fuente predeterminado del navegador . La mejor práctica es establecer el font-sizeen el htmluso de %(o cualquier otra unidad relativa), y a continuación, establecer todos los demás elementos a cualquiera emo remque será en relación con el tamaño del cuerpo.

2. COMPRUEBA EL COLOR DE TU TIPO Y SOLO SU CONTRASTE.

Comprobar el contraste de un texto en comparación con su fondo no es suficiente. Muchos diseñadores y desarrolladores web simplemente usan una herramienta para verificar si el contraste de los dos es lo suficientemente alto, pero no es tan simple. También debemos asegurarnos de que el color de nuestro tipo sea lo suficientemente oscuro. Esto significa que la fuente no debería ser demasiado delgada y que deberíamos limitar el suavizado de la fuente solo en ciertos casos.


El comprobador de contraste dice que la combinación de este color de fuente y el fondo es perfectamente adecuada. Pero está claro que esto podría causar problemas al leerlo
Así que no solo compruebe el contraste en una herramienta de comprobación de contraste, asegúrese de que el tipo tenga suficiente contraste.

ALTURA DE LA LÍNEA

La altura de línea recomendada para los párrafos de texto suele estar entre 1.3 y 1.7

LONGITUD DE LA LÍNEA

Obtener la longitud correcta de las líneas es muy simple, pero lamentablemente, la mayoría de los sitios web aún lo tienen mal. La longitud ideal de una línea de texto es de 45 a 75 caracteres, incluidos los espacios. Cualquier cosa que llegue lejos de ese rango se vuelve difícil de leer. Leer líneas muy largas de texto es agotador para nuestros ojos.

Esto se puede resolver muy fácilmente, aplique una max-width propiedad a los párrafos de su contenido en el sitio web y luego cuente la cantidad de caracteres (incluidos los espacios) .
No use alineación justificada
Ni siquiera debería tener que escribir sobre esto por más tiempo. La justificación del texto en la web da como resultado “ríos de espacios en blanco entre palabras” que tienen un impacto enormemente negativo en la legibilidad.

No alinee los párrafos largos en el centro

El otro problema son los párrafos largos que están alineados en el centro. Cuando tenemos líneas de texto que tienen una longitud desigual y están alineadas en el centro, es extremadamente difícil encontrar el comienzo de la siguiente línea. Nuevamente, coloque trastornos de la visión o de la lectura por encima de eso y se vuelve casi imposible de leer. No alinee los párrafos que tengan más de 2 o 3 líneas de texto.

Articulo sacado de: https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/

Diagrama de Venn representa mejor la discapacidad

Ya es hora de actualizar los iconos de personas con diferentes discapacidades se realizó entre 981 personas y el diagrama de Venn con tres imagenes fue el más elegido.
https://www.newswise.com/articles/examining-perceptions-of-accessibility-symbols#.XPHs-JemrbQ.twitter