Estoy trabajando en la iniciativa COVID-19 RAMP. Elegimos Discourse para nuestro foro y estamos muy satisfechos con él.
Un colega y yo hemos estado revisando la accesibilidad. Creo que hemos solucionado los problemas de bajo contraste mediante la funcionalidad de CSS de administración. Sin embargo, tenemos algunos problemas, según indica WAVE, que no estamos seguros de poder resolver por nosotros mismos, como se detalla a continuación:
Imagen enlazada sin texto alternativo: esto se refiere a las imágenes de avatar. Existe un título descriptivo, pero el atributo alt está vacío.
Falta una etiqueta en cada página:
<div><input type="text"></div>
Hay un encabezado vacío en cada página:
<div class="title"><h3></h3><!-- --></div>
Se han reportado numerosos botones vacíos asociados con SVG.
Hay enlaces vacíos, por ejemplo: <a href="" aria-hidden="true" tabindex="-1" class="tabLoc"></a>
y <a href="" class="edit-topic" title="edit the title and category of this topic" data-ember-action="" data-ember-action-27="27"><svg class="fa d-icon d-icon-pencil-alt svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#pencil-alt"></svg></a>.
Hay un encabezado de tabla vacío: <th data-sort-order="posters" class="posters"></th>
Me sorprendería mucho si somos los únicos que tenemos estos problemas, así que me pregunto si WAVE está sobreanalizando la situación o si quizás nos estamos perdiendo algún truco. Cualquier ayuda será muy apreciada.
Gracias por tu interés. Hay uno que no estoy seguro de poder encontrar (el encabezado vacío), pero el resto lo obtengo de la funcionalidad de “código” de WAVE y puedo localizar (con algo de esfuerzo) mediante el inspector F12.
No estoy seguro de que los husos horarios estén de nuestro lado (estoy en el Reino Unido, UTC+01:00), pero estaría encantado de hacer una llamada por Teams o similar para demostrarlo, si te resulta útil.
Algunos lectores de pantalla ignoran correctamente los avatares, pero otros leen el nombre/usuario dos veces debido a esto.
He creado una PR para eliminar el atributo title de los avatares de las publicaciones:
Este es el campo de entrada donde mostramos la URL para copiar y compartir. PR para agregar una etiqueta aria aquí:
No pude encontrar este… podría estar basado en la configuración del sitio? necesito mirar un poco más
No etiquetamos esto para usuarios con vista porque podemos echar un vistazo a la columna y hacer una suposición sobre su contenido… eso es mucho más difícil de hacer si no puedes ver… tiene sentido agregar una etiqueta para lectores de pantalla:
Los problemas restantes que no cubrí están relacionados con botones, todavía necesito investigarlos…
Muchas gracias por las respuestas rápidas y la acción en su momento. ¿Puedo confirmar que las solicitudes fusionadas ya están en el código desde alguna versión?
Además, ¿sería útil si (ordenara y) compartiera el tema que modificamos para superar las pruebas de accesibilidad de WAVE?
El truco inteligente que se me ocurrió tarde es simplemente probar la página de colores para verificar la accesibilidad.
Posteriormente, realizamos una gran cantidad de cambios utilizando el editor CSS (admin/customize/themes/3/common/scss/edit) de los cuales no estoy seguro de cómo compartirlos (puedo copiar y pegar, pero no sé si eso es lo que deseas ni si quieres que lo incluya en este hilo). Creo que si pudiéramos ver los otros colores mencionados (por ejemplo, var(–primary-medium)) en una interfaz de alto nivel, las cosas podrían volverse más sencillas. Por ejemplo, un caso clásico fue #919191 –\u003e #595959, pero mi método solo trata los síntomas que de alguna manera veo al navegar por las páginas (y, además, la naturaleza dinámica del “sitio” significa que lo que funciona hoy podría no funcionar mañana).
Estoy dispuesto a intentarlo de otra manera también, solo avísame, aunque en ningún momento podré ejecutar un servicio de demostración, revisar código, etc.
También debo señalar que no pude arreglar admin/upgrade en absoluto (y tiene numerosos problemas de contraste); no estoy seguro de si no sigue el CSS o cuál es la razón.
Recuerdo que el lado de administración de Discourse tiene hojas de estilo separadas (más difíciles de editar) para dificultar que las personas se bloqueen accidentalmente una interfaz de administración utilizable con cambios en el CSS.
Me he quedado un poco atrás con esto, aunque ya hemos actualizado el foro. Pero pensé en responder a las personas que se tomaron el tiempo (¡muchas gracias!) para revisar este hilo.
Gracias. Si hago clic en tu enlace, Wave detecta 13 problemas de accesibilidad (bajo contraste), pero no en los colores en sí. Esto se debe a que, a diferencia de la página de colores, no muestra cómo se utilizan (como fondo o como primer plano con texto).
Házmelo saber si puedo ayudar; tiene muchos errores de contraste.
En publicaciones con calificación (no estoy seguro de cuán extendido está esto en Discourse; es una extensión que @angus amablemente desarrolló para nosotros): Faltan etiquetas de formulario.
Numerosas (40 en la página que estoy revisando, con dos usuarios calificándola) instancias que se ven así: <input class=" disabled" type="radio" value="1" checked="" disabled="">. Esto está bajo <span class="star-rating">.
