La accesibilidad web es el objetivo de hacer que las páginas web sean más fáciles de navegar y leer. Si bien esto está destinado principalmente a ayudar a las personas con discapacidades , puede ser útil para todos los lectores. Nuestro objetivo es cumplir con las Pautas de accesibilidad al contenido web 2.0 (también conocidas como ISO / IEC 40500: 2012) en las que se basan las siguientes sugerencias. Las páginas que se adhieren a ellos son más fáciles de leer y editar para todos.
El 14 de enero de 2006, la Junta de la Fundación Wikimedia aprobó la siguiente resolución de no discriminación : "La Fundación Wikimedia prohíbe la discriminación contra usuarios y empleados actuales o potenciales por motivos de raza, color, género, religión, nacionalidad, edad, discapacidad, sexualidad orientación, o cualquier otra característica legalmente protegida. La Fundación Wikimedia se compromete con el principio de igualdad de oportunidades, especialmente en todos los aspectos de las relaciones con los empleados, incluido el empleo, la administración de salarios, el desarrollo de los empleados, los ascensos y la transferencia "
. La WMF afirma que sus políticas "no pueden ser eludidas, erosionadas o ignoradas por los funcionarios o el personal de la Fundación Wikimedia ni las políticas locales de ningún proyecto de Wikimedia"
.
Estructura del artículo
Una estructura estandarizada de artículos mejora la accesibilidad, porque permite a los usuarios esperar que los contenidos estén en una parte específica de la página. Por ejemplo, si un usuario ciego está buscando enlaces de desambiguación y no encuentra ninguno en la parte superior de la página, sabrá que no hay ninguno y no tendrá que leer toda la página para averiguarlo.
La estandarización ya es un hábito en Wikipedia, por lo que las pautas a seguir son simplemente Wikipedia: Manual de estilo / diseño y Wikipedia: Sección principal § Elementos del prospecto .
Encabezados
Los títulos deben ser descriptivos y estar en un orden coherente como se define en el Manual de estilo .
Anida los encabezados secuencialmente, comenzando con el nivel 2 ( ==
), luego el nivel 3 ( ===
) y así sucesivamente. (El nivel 1 es el título de la página generado automáticamente). No omita partes de la secuencia, como seleccionar niveles para enfatizar; este no es el propósito de los títulos.
Correcto | Aleatorio / caótico | Saltarse niveles |
---|---|---|
[Artículo principal aquí] | [Artículo principal aquí] [4] [3] [2] [2] [4] [3] | [Líder del artículo aquí] |
No cree pseudo-encabezados abusando del marcado de punto y coma (reservado para las listas de descripciones ) y trate de evitar el uso de marcado en negrita. Los lectores de pantalla y otras tecnologías de asistencia solo pueden usar encabezados que tengan marcado de encabezado para la navegación. Si desea reducir el tamaño de la tabla de contenido (TOC), utilice {{ TOC limit }} en su lugar. En los casos en los que no se puede usar {{ TOC limit }} debido a títulos de nivel inferior en otras partes del artículo, usar negrita para los subtítulos secundarios causa la menor molestia a los usuarios de lectores de pantalla. Usar un pseudo encabezado significa que ha agotado todas las demás opciones. Está pensado como una rareza.
Aceptable | Incorrecto |
---|---|
[Artículo principal aquí] | [Artículo principal aquí] |
Elementos flotantes
En el wikicode, los elementos flotantes (incluidas las imágenes) deben colocarse dentro de la sección a la que pertenecen; no coloque la imagen al final de la sección anterior. (Dependiendo de la plataforma, "apilar" varias imágenes junto con una cantidad relativamente pequeña de texto puede hacer que una imagen en particular se mueva a una sección posterior. Sin embargo, esto no es un problema de accesibilidad, ya que los lectores de pantalla siempre leen cada imagen alt=
en el punto donde se codifica la imagen .)
Resolución
Los artículos de Wikipedia deben ser accesibles para lectores que utilicen dispositivos con pantallas pequeñas o para lectores que utilicen monitores de baja resolución. La resolución más baja que se considera posible admitir sin afectar negativamente a otros usuarios es 1024 × 768; todos los artículos deben verse aceptables en esta resolución sin un desplazamiento horizontal excesivo. A veces, esto es un problema en artículos con múltiples imágenes en ambos lados de la pantalla; aunque las resoluciones más bajas tenderán a estirar los párrafos verticalmente, separando las imágenes en esa dirección, tenga cuidado de no agregar imágenes u otro contenido flotante en ambos lados de la pantalla simultáneamente. Las tablas e imágenes grandes también pueden crear problemas; a veces, el desplazamiento horizontal es inevitable, pero considere la posibilidad de reestructurar tablas anchas para que se extiendan verticalmente en lugar de horizontalmente.
Texto
De forma predeterminada, la mayoría de los lectores de pantalla no indican atributos de texto de presentación (negrita, cursiva, subrayado, monoespacio, tachado) o incluso atributos de texto semántico (énfasis, importancia, eliminación de texto), por lo que el texto tachado se lee normalmente junto con cualquier otro texto. . (Se recomienda a los editores que utilizan lectores de pantalla que participan en los debates sobre la eliminación y la política de Wikipedia que activen las notificaciones sobre los atributos del texto al hacerlo, ya que el texto tachado es muy común en las discusiones internas de Wikipedia).
Dado que los lectores de pantalla normalmente ignoran el tachado , su uso poco frecuente en artículos (por ejemplo, para mostrar cambios en un análisis textual) causará problemas de accesibilidad y confusión absoluta si es la única indicación utilizada. Esto se aplica tanto a los elementos
y
(junto con sus correspondientes , generalmente representados visualmente como subrayados), así como a las plantillas que los usan. [ en discusión a diciembre de 2020[actualizar]] No utilice tachado para oponerse a contenido que crea que es inapropiado o incorrecto. En su lugar, coméntelo con
, elimínelo por completo, o use una plantilla de limpieza / disputa en línea , y plantee el asunto en la página de discusión.
Los lectores de pantalla tienen un soporte muy variado para caracteres fuera de Latin-1 y Windows-1252 y no es seguro asumir cómo se pronunciará un carácter dado en estos rangos. Si el lector de pantalla o el sintetizador de voz no los reconoce, se pueden pronunciar como un signo de interrogación u omitirse por completo en la salida de voz.
- Proporcionar una transliteración para todo el texto en un sistema de escritura no latina donde el carácter no latino es importante en el contexto original, como nombres, lugares, cosas, etc. Esta funcionalidad está disponible en plantillas que significan idiomas con escritura no latina y pueden también se puede encontrar en plantillas como {{ transl }}; estas plantillas también tienen otros beneficios de accesibilidad (consulte la sección "Otros idiomas" a continuación).
- No utilice símbolos posiblemente impronunciables como ♥ (un símbolo de corazón ); use imágenes con texto alternativo en su lugar. [1]
- Los símbolos que causan problemas a los lectores de pantalla pueden tener ya plantillas creadas para producir una imagen y texto alternativo. Un ejemplo es la plantilla de daga {{ † }} (consulte Categoría: Plantillas de inserción de una sola imagen para obtener más información).
La secuencia de caracteres debe ser suficiente para transmitir aspectos semánticos del texto (y, preferiblemente, otras formas similares de contenido); La dependencia de "símbolos especiales" personalizados que se distingan solo por las propiedades CSS o el marcado wiki no es aceptable.
No utilice técnicas que requieran interacción para proporcionar información, como información sobre herramientas o cualquier otro texto "flotante". Las abreviaturas están exentas de estos requisitos, por lo que la plantilla (un contenedor para el elemento) se puede utilizar para indicar la forma larga de una abreviatura (incluido un acrónimo o inicial).{{abbr}}
No inserte saltos de línea dentro de una oración, ya que esto dificulta la edición con un lector de pantalla . Un solo salto de línea puede seguir a una oración, lo que puede ayudar a algunos editores.
Tamaño de fuente
Los tamaños de fuente reducidos o agrandados deben usarse con moderación y, por lo general, se realizan con elementos de página automatizados, como encabezados, encabezados de tablas y plantillas estandarizadas. Los cambios de tamaño se especifican como un porcentaje del tamaño de fuente original y no como un tamaño absoluto en píxeles o en puntos. Esto mejora la accesibilidad para los usuarios con discapacidad visual que utilizan un tamaño de fuente predeterminado grande.
Evite el uso de tamaños de fuente más pequeños dentro de los elementos de la página que ya usan un tamaño de fuente más pequeño, como la mayoría del texto dentro de los cuadros de información , los cuadros de navegación y las secciones de referencias . [a] Esto significa que las ...
etiquetas y plantillas como y no deben aplicarse al texto sin formato dentro de esos elementos. En ningún caso, el tamaño de fuente resultante de cualquier texto debe caer por debajo del 85% del tamaño de fuente predeterminado de la página (es decir, 11,9 px en la máscara vectorial o 10,8 px en Monobook). Tenga en cuenta que la etiqueta HTML tiene un significado semántico de letra pequeña ; no lo use para cambios estilísticos.{{small}}
{{smaller}}
...
Otros idiomas
Las palabras o frases que no están en inglés deben incluirse en {{ lang }}, que utiliza códigos de idioma ISO 639 , así:
{{lang|fr|Assemblée nationale}}
que se traduce como
Assemblée nationale
o {{lang-fr|Assemblée nationale}}
que se traduce como
Francés : Assemblée nationale .
Justificación : {{lang}}
permite que los sintetizadores de voz pronuncien el texto en el idioma correcto. [2] Tiene muchos otros usos; ver Plantilla: Lang / doc § Justificación para una lista completa de beneficios.
No es necesario ni deseable envolver estas construcciones en cursiva; las plantillas y ya están en cursiva automática.{{lang}}
{{lang-xx}}
Tenga en cuenta que las transliteraciones deben usar {{ transl }} y las pronunciaciones deben usar {{ IPA }}, {{ respell }} o una plantilla relacionada. {{ PIE }} es para protoindoeuropeo .
Enlaces
- Cree buenas descripciones de enlaces, especialmente para enlaces externos (evite " haga clic aquí ", " esto "). [3] [4]
- No utilice caracteres Unicode como iconos; use un icono con texto alternativo en su lugar. Por ejemplo, algunos lectores de pantalla no pueden reproducir un carácter como "→" en texto útil .
Color
Los colores se encuentran con mayor frecuencia en los artículos de Wikipedia dentro de plantillas y tablas .
Los artículos (y otras páginas) que usan color deben tener en cuenta la accesibilidad, de la siguiente manera:
- Asegúrese de que el color no sea el único método utilizado para comunicar información importante. Especialmente, no utilice texto o fondo en color a menos que su estado también se indique mediante otro método, como un símbolo accesible que coincida con una leyenda o etiquetas de notas al pie . De lo contrario, los usuarios ciegos o lectores que accedan a Wikipedia a través de una copia impresa o un dispositivo sin pantalla a color no recibirán esa información.
- Los enlaces deben ser claramente identificables como un enlace a nuestros lectores.
- Algunos lectores de Wikipedia son parcial o totalmente daltónicos o con discapacidad visual. Asegúrese de que el contraste del texto con su fondo alcance al menos el nivel AA de las Pautas de accesibilidad al contenido web (WCAG) 2.0 y el nivel AAA cuando sea posible (consulte "Comprensión de SC 1.4.3: Contraste (mínimo)" de las WCAG ). Para usar colores CSS con nombre para texto sobre un fondo blanco, consulte Wikipedia: Manual de estilo / Accesibilidad / colores CSS para texto en blanco para conocer los colores recomendados. Para otros usos, aquí hay una selección de herramientas que se pueden usar para verificar que el contraste sea correcto:
- El Analizador de contraste de color le permite elegir colores en la página y revisar su contraste a fondo. Sin embargo, asegúrese de utilizar únicamente el algoritmo de "luminosidad" actualizado, y no el "brillo / diferencia de color", que está desactualizado.
- También puede utilizar la comprobación de contraste de color de Snook , que está actualizada al 11 de enero de 2015[actualizar].
- El equipo de diseño de la Fundación Wikimedia ha proporcionado una paleta de colores con colores marcados hacia el nivel AA. Se utiliza para todos los elementos de la interfaz de usuario en todos los productos y en los temas principales de Wikimedia, escritorio y móvil. Sin embargo, no considera el texto vinculado.
- La tabla en Wikipedia: Manual de estilo / Accesibilidad / Colores muestra los resultados de 14 tonos de búsqueda de los fondos más oscuros o claros que cumplen con AAA contra texto negro, texto blanco, texto vinculado y texto vinculado visitado.
- Chrome Canary de Google tiene un depurador de contraste de color con guía visual y selector de color.
- Existen varias otras herramientas en la web, pero compruebe si están actualizadas antes de usarlas. Varias herramientas se basan en el algoritmo de WCAG 1.0, mientras que la referencia ahora es el algoritmo de WCAG 2.0. Si la herramienta no menciona específicamente que está basada en WCAG 2.0, asuma que está desactualizada.
- Se pueden utilizar herramientas adicionales para ayudar a producir cuadros gráficos y esquemas de color para mapas y similares. Estas herramientas no son medios precisos para revisar la accesibilidad del contraste, pero pueden ser útiles para tareas específicas.
- Paletton (anteriormente Diseñador de esquemas de color) ayuda a elegir un buen conjunto de colores para una tabla gráfica.
- Color Brewer 2.0 proporciona esquemas de color seguros para mapas y explicaciones detalladas.
- El esquema de color cualitativo de luz proporciona un conjunto de nueve colores que funcionan para usuarios daltónicos y con etiquetas de texto negras (entre otras paletas).
- Hay algunas herramientas para simular la visión daltónica: Toptal ColorFilter (análisis de página web) y Coblis Colour-blindness Simulator (análisis de archivos locales). También hay extensiones de navegador para el análisis de páginas web: Daltonismo (Chrome) NoCoffee (Chrome) NoCoffee (Firefox)
- Una herramienta de código abierto muy simple que puede ser útil para elegir colores contrastantes es Color Oracle , un "simulador gratuito de daltonismo para Windows, Mac y Linux". Le permite ver lo que está en su pantalla como lo vería alguien con uno de los tres tipos de daltonismo o en escala de grises.
- Si un artículo abusa de los colores y no sabe cómo solucionarlo usted mismo, puede pedir ayuda a otros editores. Coloque ({{ Overcolored }} o {{ Overcolored }}) en la parte superior del artículo.
Elementos de bloque
Liza
No separe los elementos de la lista dejando líneas vacías o saltos de columnas tabulares entre ellos. Esto incluye los elementos de una lista de descripción (una lista hecha con un punto y coma inicial o colon, que también es cómo se formatean mayoría de las discusiones charla páginas) o una lista ordenada o lista desordenada . Las listas están destinadas a agrupar elementos que pertenecen juntos, pero MediaWiki interpretará la línea en blanco como el final de una lista y comenzará una nueva. Los saltos de línea dobles excesivos también interrumpen a los lectores de pantalla , que anunciarán varias listas cuando solo se pretendía una y, por lo tanto, pueden engañar o confundir a los usuarios de estos programas. Este formato incorrecto también puede triplicar el tiempo que tardan en leer la lista.
Del mismo modo, no cambie entre los tipos de marcadores de lista iniciales (dos puntos, asteriscos o signos de almohadilla) en una lista. Al sangrar en respuesta a una publicación que comienza con una combinación de dos puntos y asteriscos y, a veces, signos de almohadilla, es necesario copiar la serie de esos caracteres que se usó anteriormente y agregar uno más. Alternativamente, simplemente anule la sangría y comience una nueva discusión (es decir, una nueva lista HTML).
Por ejemplo, en una discusión, haga
esta mejor práctica:* Soporte. Me gusta esta idea. —Usuario: Ejemplo ** Pregunta: ¿Qué le gusta de él? —Usuario: Example2 *** Parece encajar con el espíritu de Wikipedia. —Usuario: ejemplo
o
, en una discusión sin bulle:: Apoyo. Me gusta esta idea. —Usuario: ejemplo:: Pregunta: ¿Qué le gusta de él? —Usuario: Example2::: Parece encajar con el espíritu de Wikipedia. —Usuario: ejemplo
Esto
también es una práctica aceptable (suprimir la viñeta en una respuesta):* Apoyo. Me gusta esta idea. —Usuario: ejemplo*: Pregunta: ¿Qué le gusta de él? —Usuario: Example2* :: Parece encajar con el espíritu de Wikipedia. —Usuario: ejemplo
Pero
no haga esto (cambie el tipo de lista de viñetas a lista de descripción):* Apoyo. Me gusta esta idea. —Usuario: ejemplo:: Pregunta: ¿Qué le gusta de él? —Usuario: Example2
ni
esto (cambie el tipo de lista de viñetas a lista de descripción):* Apoyo. Me gusta esta idea. —Usuario: ejemplo: * Pregunta: ¿Qué le gusta de él? —Usuario: Example2
ni
esto (deje líneas en blanco entre los elementos de la lista):* Soporte. Me gusta esta idea. —Usuario: ejemplo** Pregunta: ¿Qué te gusta de él? —Usuario: Example2
ni
esto (saltar más de un nivel):* Soporte. Me gusta esta idea. —Usuario: Ejemplo *** Pregunta: ¿Qué le gusta de él? —Usuario: Example2
Esto generalmente se desaconseja
:: Apoyo. Me gusta esta idea. —Usuario: ejemplo: * Pregunta: ¿Qué le gusta de él? —Usuario: Example2
Esta inyección de una viñeta aumenta innecesariamente la complejidad de la lista y dificulta el seguimiento de la discusión para los lectores de pantalla, que tratan la viñeta adicional como una lista anidada completamente nueva.
Varios párrafos dentro de los elementos de la lista
Lamentablemente, el marcado normal de la lista de MediaWiki es incompatible con el marcado normal de párrafos de MediaWiki.
Para poner varios párrafos en un elemento de lista, {{pb}}
* Este es un elemento. {{ Pb }} Este es otro párrafo dentro de este elemento.* Este es otro artículo.
Esto también se puede hacer
* Este es un elemento. Este es otro párrafo dentro de este artículo. * Este es otro elemento.
En ambos casos, esto debe hacerse
en una sola línea de código. Sin embargo, opcionalmente puede usar el truco de envolver un salto de línea de código en un comentario HTML (que lo suprime como un salto de línea de salida), para separar mejor los párrafos en la vista de código:* Este es un elemento. -> Este es otro párrafo dentro de este artículo. * Este es otro elemento.
Esta técnica se puede utilizar
para varias formas de inclusión de bloques dentro de un elemento de lista (porque los elementos de lista son técnicamente elementos de bloque, que pueden contener otros elementos de bloque):* Este es un elemento. -> Este es otro párrafo dentro de este artículo, y vamos a citar a alguien: -> {{ bloque de citas de conversación | Imagina un mundo en el que cada persona en el Planet tiene acceso gratuito a la suma de todo el conocimiento humano. | Jimbo }} -> Este es un párrafo final dentro del mismo elemento de la lista. * Este es otro elemento.
Tenga en cuenta que no todas las plantillas sofisticadas se pueden usar de esta manera (por ejemplo, algunas plantillas de citas decorativas están basadas en tablas, y el analizador de MediaWiki no manejará el marcado como si estuviera dentro de un elemento de lista).
No hacer
use saltos de línea para simular párrafos, porque tienen una semántica diferente:* Este es un elemento.
Este es el mismo párrafo, con un salto de línea antes.* Este es otro artículo.
Las etiquetas de salto de línea sirven para envolver dentro de un párrafo, como las líneas de un poema o de un bloque de código fuente. Consulte también las etiquetas
y
MediaWiki.
Definitivamente no
intente usar dos puntos para que coincida con el nivel de sangría, ya que (como se mencionó anteriormente) produce tres listas separadas:* Este es un elemento.: Esta es una lista completamente separada.* Esta es una tercera lista.
Alternativamente, puede
utilice una de las plantillas de lista HTML para garantizar la agrupación. Esto es más útil para incluir elementos de bloque, como código formateado, en listas:{{lista con viñetas| 1 = Este es un elemento:Este es un código.Este sigue siendo el mismo artículo.| 2 = Este es un segundo elemento.}}
Pero esta técnica no se usa en las páginas de discusión.
Sangría
Un enfoque accesible para la sangría es la plantilla para contenido de varias líneas; utiliza CSS para sangrar el material. Para líneas simples, existe una variedad de plantillas, que incluyen (una plantilla universal, con el mismo nombre en todos los sitios de Wikimedia); estos sangría con varios caracteres de espacio en blanco. No abuse del elemento o las plantillas que lo usan (como AKA ) para la sangría visual; son solo para material citado directamente. La alternativa genérica se creó para estos casos sin cotización, así que úsela.{{block indent}}
{{in5}}
...
{{blockquote}}
{{quote}}
{{block indent}}
Un signo de dos puntos ( :
) al comienzo de una línea marca esa línea en el analizador de MediaWiki como parte de una lista de descripción HTML (
). [b] El efecto visual en la mayoría de los navegadores web es sangrar la línea. Esto se utiliza, por ejemplo, para indicar respuestas en una discusión encadenada en páginas de discusión. Sin embargo, a este marcado solo le falta el elemento (término) requerido de una lista de descripción, a la que
pertenece la (descripción / definición). Como se puede ver al inspeccionar el código enviado al navegador, esto da como resultado un HTML roto (es decir, falla la validación [5] ). El resultado es que la tecnología de asistencia, como los lectores de pantalla, anunciará una lista de descripción que no existe, lo que confunde a cualquier visitante que no esté acostumbrado al marcado roto de Wikipedia. Esto no es ideal para accesibilidad, semántica o reutilización , pero actualmente se usa comúnmente, a pesar de los problemas que causa a los usuarios de lectores de pantalla.
Las líneas en blanco no deben colocarse entre líneas de texto con dos puntos sangrados , especialmente en el contenido del artículo. Esto es interpretado por el software como marcar el final de una lista y el comienzo de una nueva.
Si se necesita espacio, hay dos enfoques, que tendrán resultados diferentes para los lectores de pantalla:
La primera es agregar una línea en blanco con el mismo número de dos puntos que los que preceden al texto por encima y por debajo de la línea en blanco. Esto es apropiado cuando dos editores están haciendo comentarios inmediatamente uno después del otro con el mismo nivel de sangría. Por ejemplo:
: Estoy completamente de acuerdo. —Usuario: ejemplo:: No estoy convencido. ¿Existe una mejor fuente disponible? –Usuario: Example2
Esto le dirá al lector de pantalla que se trata de dos elementos de la lista (se ignorará el que está en blanco).
El segundo enfoque, para cuando el material está destinado a ser un solo comentario (u otro elemento de la lista, por ejemplo, en el texto del artículo) es utilizar el marcado de párrafo nuevo en la misma línea de salida (consulte la sección anterior para conocer las técnicas avanzadas en esto, para incluir bloques de contenido complejo):
: Envía un mensaje de texto aquí. {{Pb}} Más texto. —Usuario: Example3
Para mostrar una fórmula o expresión matemática en su propia línea, se recomienda utilizar en lugar de
:
.
Listas verticales
Listas verticales con viñetas
Para listas verticales con viñetas, no separe elementos dejando líneas en blanco entre ellos. Si los elementos de la lista están separados por más de un salto de línea, la lista HTML terminará antes del salto de línea y se abrirá otra lista HTML después del salto de línea. Esto efectivamente divide lo que se ve como una lista en varias listas más pequeñas para aquellos que usan lectores de pantalla . Por ejemplo, para la codificación:
* Rosa blanca* Rosa amarilla* Rosa rosada* Rosa roja
el software suprime parcialmente los espacios de línea y, por lo tanto, se ve así:
- Rosa blanca
- Rosa amarilla
- Rosa rosada
- Rosa roja
pero el lector de pantalla lo leerá como: "Lista de 2 elementos: (viñeta) Rosa blanca, (viñeta) Rosa amarilla, final de lista. Lista de 1 elementos: (viñeta) Rosa rosa, final de lista. Lista de 1 elementos: (viñeta) Rosa roja, fin de lista ".
No separe los elementos de la lista con saltos de línea (
). Use {{ plainlist }} / {{ unbulleted list }} si la lista debe permanecer vertical; o considere {{ flatlist }} / {{ hlist }} si la lista se pudiera representar mejor horizontalmente (en línea) como se describe en las siguientes dos secciones.
Listas verticales sin viñetas
Para las listas sin viñetas que se encuentran en la página, las plantillas {{ plainlist }} y {{ unbulleted list }} están disponibles para mejorar la accesibilidad y la significación semántica marcando lo que es claramente una lista en lugar de incluir
saltos de línea, que no deben usarse. -véase más arriba. Se diferencian solo en el marcado wiki utilizado para crear la lista. Tenga en cuenta que debido a que se trata de plantillas, el texto de cada elemento de la lista no puede contener el símbolo de barra vertical ( |
) a menos que sea reemplazado por {{!}}
o esté contenido dentro de
etiquetas. De manera similar, no puede contener el signo igual ( =
), a menos que se reemplace con {{=}}
o esté contenido dentro
, aunque puede omitir esto nombrando los parámetros ( |1=
, |2=
etc.). Si esto se vuelve demasiado complicado, es posible que pueda usar la variante usando {{ endplainlist }} en su lugar.
Wikitexto | Renderiza como |
---|---|
{{plainlist |* Rosa blanca* Rosa amarilla* Rosa rosada* Rosa roja}} |
|
Wikitexto | Renderiza como |
---|---|
{{lista sin viñetas| Rosa blanca| Rosa amarilla| Rosa rosada| Rosa roja}} |
|
Alternativamente, en plantillas como navboxes y similares, o cualquier contenedor adecuado, dichas listas pueden tener el estilo de la clase " plainlist
", así:
| listclass = plainlist
o| bodyclass = plainlist
En infoboxes :
| rowclass = plainlist
o| bodyclass = plainlist
puede ser usado.
Listas horizontales
Para las listas que se ejecutan en la página, y en filas individuales en infoboxes y otras tablas, las plantillas {{ flatlist }} y {{ hlist }} (para 'lista horizontal') están disponibles para mejorar la accesibilidad y el significado semántico. Esta función utiliza el marcado HTML correcto para cada elemento de la lista, en lugar de incluir viñetas que, por ejemplo, se leen (p. Ej., "Punto gato punto perro punto caballo punto ...") por el software de asistencia utilizado por las personas que son ciegos. Las plantillas difieren solo en el marcado wiki utilizado para crear la lista. Tenga en cuenta que cuando se pasa texto a estas (o cualquier otra) plantillas, el carácter de barra vertical (|) debe escaparse con {{!}} .
Wikitexto | Renderiza como |
---|---|
{{lista plana |* Rosa blanca* Rosa amarilla* Rosa rosada* Rosa roja}} |
|
Wikitexto | Renderiza como |
---|---|
{{hlist| Rosa blanca| Rosa amarilla| Rosa rosada| Rosa roja}} |
|
Alternativamente, en plantillas como navboxes y similares, o cualquier contenedor adecuado, dichas listas pueden tener estilo con la clase hlist
, así:
| listclass = hlist
o| bodyclass = hlist
En infoboxes :
| rowclass = hlist
o| bodyclass = hlist
puede ser usado.
Encabezados de lista
El uso inadecuado de un punto y coma para poner en negrita un "encabezado falso" antes de una lista (figura 1) crea un espacio en la lista, y algo peor. La línea de punto y coma es una lista de descripción de un elemento, sin contenido descriptivo, seguida de una segunda lista.
En su lugar, utilice el marcado de encabezado (figura 2).
1. Incorrecto
; Gases nobles * Helio * Neón * Argón * Criptón * Xenón * Radón
2. Encabezado
== Gases nobles ==* Helio* Neón* Argón* Criptón* Xenón* Radón
Mesas
Los lectores de pantalla y otras herramientas de navegación web utilizan etiquetas de tabla específicas para ayudar a los usuarios a navegar por los datos que contienen.
Utilice la sintaxis correcta de wikitable pipe para aprovechar todas las funciones disponibles. Consulte meta: Ayuda: Tablas para obtener más información sobre la sintaxis especial utilizada para las tablas. No utilice únicamente formato, ya sea de CSS o estilos codificados, para crear un significado semántico (por ejemplo, cambiar el color de fondo).
Muchas cajas de navegación , plantillas de series y cajas de información se crean mediante tablas.
Evite el uso de etiquetas
o
en celdas adyacentes para emular una fila visual que no se refleja en la estructura de la tabla HTML. Este es un problema para los usuarios de lectores de pantalla que leen tablas celda por celda, HTML fila por fila HTML, no fila visual por fila visual. La accesibilidad de WikiProject / Infobox ha estado abordando este problema.
Tablas de datos
{|| + [texto de la leyenda]| -! alcance = "col" | [encabezado de columna 1]! alcance = "col" | [encabezado de columna 2]! alcance = "col" | [encabezado de columna 3]| -! alcance = "fila" | [encabezado de fila 1]| [celda normal 1,2] || [celda normal 1,3]| -! alcance = "fila" | [encabezado de fila 2]| [celda normal 2,2] || [celda normal 2,3]...|}
- Título (
|+
) - Una leyenda es el título de una tabla que describe su naturaleza. [WCAG-TECH 1] Las tablas de datos siempre deben incluir un título.
- Encabezados de fila y columna (
!
) - Al igual que la leyenda, ayudan a presentar la información en una estructura lógica a los visitantes. [WCAG-TECH 2] Los encabezados ayudan a los lectores de pantalla a presentar la información del encabezado sobre las celdas de datos. Por ejemplo, la información del encabezado se dice antes que los datos de la celda, o la información del encabezado se proporciona a pedido. [6] Debido a que el encabezado de fila y el encabezado de columna se pueden decir antes de los datos en cada celda cuando se navega en modo tabla, es necesario que los encabezados de columna y los encabezados de fila identifiquen de forma única la columna y la fila respectivamente. [7]
- Alcance de los encabezados (
! scope="col" |
y! scope="row" |
) - Esto identifica claramente los encabezados como encabezados de fila o encabezados de columna. Los encabezados ahora se pueden asociar a las celdas correspondientes. [WCAG-TECH 3]
Wikipedia: el tutorial del Manual de estilo / Accesibilidad / Tablas de datos proporciona requisitos detallados sobre:
- Leyendas de tabla correctas
- Estructura de encabezados correcta
- Tablas complejas
- Imágenes y color
- Evitar tablas anidadas
Tablas de disposición
Evite el uso de tablas para el posicionamiento visual de contenido no tabular. Las tablas de datos proporcionan información adicional y métodos de navegación que pueden resultar confusos cuando el contenido carece de relaciones lógicas entre filas y columnas. En su lugar, utilice elementos y
style
atributos semánticamente apropiados .
Cuando utilice una tabla para colocar contenido no tabular, los lectores de pantalla ayudarán a identificarlo como una tabla de diseño, no como una tabla de datos. Establezca un role="presentation"
atributo en la tabla y no establezca ningún summary
atributo. No utilice ningún
o
elementos dentro de la tabla, o dentro de las tablas anidadas. En el marcado de la tabla wiki, esto significa que no use los prefijos |+
o !
. Asegúrese de que el orden de lectura del contenido sea correcto. Los efectos visuales, como el centrado o el tipo de letra en negrita, se pueden lograr con hojas de estilo o elementos semánticos. Por ejemplo:
{| rol = "presentación" clase = "tocolores" estilo = "ancho: 94%"| -| colspan = "2" estilo = "alineación de texto: centro; color de fondo: #ccf;" | Texto importante | -| El rápido || zorro marrón| -| salta || el perro perezoso.|}
Imagenes
- Las imágenes que no son puramente decorativas deben incluir un atributo alt que actúe como un sustituto de la imagen para lectores ciegos, arañas de búsqueda y otros usuarios no visuales. Si se agrega texto alternativo adicional, debe ser conciso o remitir al lector a la leyenda o al texto adyacente. Consulte WP: ALT para obtener más información.
- En la mayoría de los casos , las imágenes deben incluir un título utilizando la sintaxis de imagen incorporada. El pie de foto debe describir de manera concisa el significado de la imagen y la información esencial que está tratando de transmitir.
- Evite el uso de imágenes en lugar de tablas o gráficos . Siempre que sea posible, cualquier gráfico o diagrama debe tener un texto equivalente o debe estar bien descrito para que los usuarios que no pueden ver la imagen puedan comprender el concepto.
- Evite intercalar texto entre dos imágenes o, a menos que sea absolutamente necesario, utilizar tamaños de imagen fijos .
- Evite las secciones indiscriminadas de la galería porque el tamaño de la pantalla y el formato del navegador pueden afectar la accesibilidad de algunos lectores debido a la visualización de imágenes fragmentadas.
- Evite hacer referencia en el texto a las imágenes como si estuvieran a la izquierda o la derecha. La ubicación de las imágenes puede ser diferente para los espectadores del sitio móvil y no tiene sentido para las personas a las que se les leen páginas mediante software de asistencia. En su lugar, use leyendas para identificar imágenes.
- Las descripciones detalladas de las imágenes, cuando no sean apropiadas para un artículo, deben colocarse en la página de descripción de la imagen, con una nota que diga que la activación del enlace de la imagen conducirá a una descripción más detallada. [ ¿cómo? ]
- Las imágenes deben estar dentro de la sección a la que están relacionadas (después del encabezado y después de los enlaces a otros artículos), y no en el encabezado en sí ni al final de la sección anterior. Esto asegura que los lectores de pantalla leerán y el sitio móvil mostrará la imagen (y su alternativa textual) en la sección correcta.
- Esta guía incluye texto alternativo para ecuaciones con formato LaTeX en
modo. [ aclaración necesaria ]
- No coloque imágenes en los títulos ; esto incluye iconos y
marcas. Hacerlo puede romper los enlaces a las secciones y causar otros problemas.
Animaciones, contenido de video y audio
Animaciones
Para ser accesible, una animación ( GIF - Formato de intercambio de gráficos) debe:
- No exceder una duración de cinco segundos (lo que lo convierte en un elemento puramente decorativo) [8] o
- Estar equipado con funciones de control (detener, pausar, reproducir) [9]
Esto requiere que los GIF con animaciones de más de cinco segundos se conviertan en video (para aprender cómo, vea el tutorial sobre conversión de GIF animados a Theora OGG ).
Además, las animaciones no deben producir más de tres destellos en un período de un segundo. Se sabe que el contenido que parpadea más allá de ese límite causa convulsiones. [10]
Video
Se pueden agregar subtítulos al video, en formato de texto cronometrado . Hay una página de ayuda correspondiente en commons: Commons: Video # Subtítulos y subtítulos opcionales . Los subtítulos están destinados a la transcripción de voz.
Existe la necesidad de subtítulos para personas con problemas de audición. En noviembre de 2012 esto no es posible, pero esta función podría agregarse fácilmente y se solicitó en bugzilla: 41694 . Los subtítulos ocultos están destinados a ser vistos en lugar de subtítulos. Los subtítulos cerrados proporcionan una versión de texto de toda la información importante proporcionada a través del sonido. Puede incluir diálogos, sonidos (naturales y artificiales), el escenario y el fondo, las acciones y expresiones de personas y animales, texto o gráficos. [11] Se deben consultar las guías fuera de Wikipedia para saber cómo crear subtítulos. [12]
También se necesitaría una versión de texto del video para los ciegos, pero a partir de noviembre de 2012 no existe una forma conveniente de proporcionar texto alternativo para los videos.
Audio
Los subtítulos para voz, letras, diálogos, etc. [13] se pueden agregar fácilmente a archivos de audio. El método es similar al del video: commons: Commons: Video # Subtítulos y subtítulos .
Estilos y opciones de marcado
Práctica recomendada: utilice las clases Wikimarkup y CSS en lugar de alternativas
En general, los estilos para tablas y otros elementos a nivel de bloque deben establecerse usando clases CSS, no con atributos de estilo en línea. El CSS de todo el sitio en MediaWiki: Common.css se prueba más cuidadosamente para garantizar la accesibilidad (por ejemplo, suficiente contraste de color) y la compatibilidad con una amplia gama de navegadores. Además, permite a los usuarios con necesidades muy específicas cambiar los esquemas de color en su propia hoja de estilo ( Especial: MyPage / skin.css , o la hoja de estilo de su navegador). Por ejemplo, una hoja de estilo en Wikipedia: hojas de estilo para usuarios con discapacidad visual proporciona fondos de mayor contraste para los cuadros de navegación . El problema es que cuando se anulan las clases predeterminadas de todo el sitio, resulta mucho más difícil para una persona elegir su propio tema.
También crea un mayor grado de profesionalismo al garantizar una apariencia uniforme entre los artículos y la conformidad con una guía de estilo.
Con respecto a la accesibilidad, se pueden tolerar las desviaciones de las convenciones estándar siempre que sean accesibles . Los miembros del proyecto de accesibilidad se han asegurado de que el estilo predeterminado sea accesible. Si alguna plantilla o esquema de color específico se desvía del estándar, sus autores deben asegurarse de que cumpla con los requisitos de accesibilidad, como proporcionar suficiente contraste de color . Por ejemplo, la caja de información y Navbox relativa a un equipo deportivo podrían utilizar una combinación de colores amarillo y rojo, para empatar con los colores de la librea equipo. En este caso, los enlaces rojo oscuro sobre amarillo claro proporcionan suficiente contraste de color y, por lo tanto, serían accesibles, mientras que blanco sobre amarillo o negro sobre rojo no lo sería.
En general, los artículos deben usar wikimarkup en lugar del conjunto limitado de elementos HTML permitidos . En particular, no utilice los elementos de estilo HTML y
para formatear el texto; es preferible utilizar el marcado Wiki
''
o '''
para la cursiva y negrita puramente tipográficas, respectivamente, y utilizar plantillas o elementos de marcado semántico para diferencias más significativas. El elemento también debe evitarse en el texto del artículo; uso , , , y las otras plantillas de marcado semántico , según sea necesario, para enfatizar las diferencias lógicas no sólo las visuales. Utilice las plantillas {{ resize }}, {{ small }} y {{ big }} para cambiar el tamaño de fuente, en lugar de configurarlo explícitamente con atributos de estilo CSS como o elementos de estilo obsoletos como . Por supuesto que hay excepciones naturales; por ejemplo, puede ser beneficioso usar el elemento para indicar algo como un enlace de ejemplo en el que no se puede hacer clic, pero el subrayado no se usa generalmente en el texto del artículo .
{{em}}
{{code}}
{{var}}
font-size
...
Usuarios con compatibilidad limitada con CSS o JavaScript
Los elementos contraídos automáticamente (precontraídos) no deben usarse para ocultar contenido en el cuerpo principal del artículo, aunque los elementos como las tablas se pueden contraer a opción del lector.
Los artículos de Wikipedia deben ser accesibles para los lectores que utilicen navegadores y dispositivos que tengan soporte limitado o nulo para JavaScript o hojas de estilo en cascada ; recuerde que el contenido de Wikipedia se puede reutilizar libremente de formas que no podemos predecir, así como se puede acceder directamente a través de navegadores más antiguos. Al mismo tiempo, se reconoce que es imposible proporcionar la misma calidad de apariencia a tales usuarios sin evitar innecesariamente características que beneficiarían a los usuarios con navegadores más capaces. Por tanto, no se deben utilizar las funciones que podrían ocultar o dañar el contenido cuando CSS o JavaScript no están disponibles. Esto incluye técnicas como el hiddenStructure
método obsoleto para ocultar el contenido de la tabla (que produce una salida incomprensible sin CSS) y algunas implementaciones del NavFrame
código colapsante (que puede hacer que el contenido sea inaccesible sin la compatibilidad con JavaScript). Sin embargo, la consideración para los usuarios sin CSS o JavaScript debe extenderse principalmente a asegurarse de que su experiencia de lectura sea posible ; se reconoce que inevitablemente será inferior .
Para adaptarse a estas consideraciones, pruebe los cambios potencialmente disruptivos con JavaScript o CSS deshabilitados. En Firefox o Chrome, esto se puede hacer fácilmente con la extensión Web Developer; JavaScript se puede desactivar en otros navegadores en la pantalla "Opciones". Tenga especial cuidado con los efectos CSS en línea, que no son compatibles con varios navegadores, medios y versiones XHTML.
En 2016, alrededor del 7% de los visitantes de Wikipedia no solicitaron recursos de JavaScript. [14]
Ver también
- Usabilidad: Iniciativa de accesibilidad (ubicada en Wikimedia)
- Iniciativa de accesibilidad web (WAI)
- Wikipedia: lo que se debe y no se debe hacer en accesibilidad (puntos clave de esta guía)
- Wikipedia: lectores disléxicos
- Wikipedia: haz que los artículos técnicos sean comprensibles
- Wikipedia: uso de JAWS
- Ayuda: acceso móvil
- Wikipedia: defensores de la accesibilidad
- Wikipedia: Accesibilidad de WikiProject
- Wikipedia: usabilidad de WikiProject
notas y referencias
Específico
- ^ El tamaño de fuente general para los cuadros de información y los cuadros de navegación es el 88% del valor predeterminado de la página. El tamaño de fuente general para las secciones de referencia es el 90% del valor predeterminado de la página. Se pueden encontrar valores adicionales en MediaWiki: Common.css .
- ^ Las listas de descripción HTMLantes se llamaban listas de definición y listas de asociación . Laestructura es la misma; solo la terminología ha cambiado entre las versiones de especificación HTML.
- ...
- ...
- ^ "F26: Fracaso del criterio de cumplimiento 1.3.3 debido al uso de un símbolo gráfico solo para transmitir información" . Técnicas para WCAG 2.0 . Consorcio World Wide Web . Consultado el 1 de enero de 2011 .
- ^ H58: Uso de atributos del lenguaje para identificar cambios en el lenguaje humano , Técnicas para WCAG 2.0, W3C, nivel de accesibilidad: AA.
- ^ "G91: Proporcionar texto de enlace que describa el propósito de un enlace" . Técnicas para WCAG 2.0 . Consorcio World Wide Web . Consultado el 1 de enero de 2011 .
- ^ "F84: Fracaso del Criterio de Conformidad 2.4.9 debido al uso de un enlace no específico como" haga clic aquí "o" más "sin un mecanismo para cambiar el texto del enlace a un texto específico" . Técnicas para WCAG 2.0 . Consorcio World Wide Web . Consultado el 1 de enero de 2011 .
- ^ "Servicio de validación de marcado: compruebe el marcado (HTML, XHTML,…) de los documentos web" . validator.w3.org . v1.3 + hg. Consorcio World Wide Web . 2017 . Consultado el 13 de diciembre de 2017 .La falla del validador reportada es " Error : Al elemento
dl
le falta un elemento secundario requerido". - ^ "Celdas de tabla: Los elementos TH y TD" . Técnicas para WCAG 2.0 . Consorcio World Wide Web . Consultado el 1 de enero de 2011 .
- ^ "Mesas con JAWS" . Freedom Scientific . Consultado el 18 de febrero de 2021 .
- ^ "Configuración de imágenes gif animadas para que dejen de parpadear después de n ciclos (en 5 segundos)" . Técnicas para WCAG 2.0 . Consorcio World Wide Web . Consultado el 1 de enero de 2011 .
- ^ "Permitir que el contenido se pause y reinicie desde donde se pausó" . Técnicas para WCAG 2.0 . Consorcio World Wide Web . Consultado el 1 de enero de 2011 .
- ^ "Directriz 2.3 Incautación: no diseñe el contenido de una manera que se sepa que provoca incautación" . Pautas de accesibilidad al contenido web (WCAG) 2.0 . Consorcio World Wide Web . 11 de diciembre de 2008 . Consultado el 28 de mayo de 2015 .
- ^ "Proporcionar una alternativa para los medios basados en el tiempo" . Técnicas para WCAG 2.0 . W3C . Consultado el 1 de enero de 2011 .
- ^ Consulte: Una referencia rápida y básica para subtítulos , una referencia detallada (PDF) y una lista de las mejores prácticas para subtítulos .
- ^ "Proporcionar una alternativa a los medios basados en el tiempo para contenido de solo audio" . Técnicas para WCAG 2.0 . Consorcio World Wide Web . Consultado el 1 de enero de 2011 .
- ^ Archivo: Navegadores, geografía y compatibilidad con JavaScript en Wikipedia Portal.pdf y Archivo: Análisis del tráfico del portal de Wikipedia y JavaScript Support.pdf .
General
- Clark, Joe (2003). Creación de sitios web accesibles . New Riders Press. ISBN 0-7357-1150-X. Consultado el 1 de enero de 2011 .
- Peregrino, Mark (2002). "Sumérjase en la accesibilidad: 30 días a un sitio web más accesible" . Consultado el 26 de diciembre de 2013 .
Técnico
- ^ H39: Uso de elementos de título para asociar títulos de tablas de datos con tablas de datos , un nivel de accesibilidad.
- ^ "H51: uso de marcado de tabla para presentar información tabular" . Consorcio World Wide Web . Consultado el 1 de enero de 2011 .
- ^ "H63: Uso del atributo de alcance para asociar celdas de encabezado y celdas de datos en tablas de datos" . Técnicas para WCAG 2.0 . Consorcio World Wide Web . Consultado el 1 de enero de 2011 .
enlaces externos
- La guía de estilo de diseño de Wikimedia
- 10 consejos rápidos para hacer sitios web accesibles , de WAI
- Filtro de página web para daltónicos
- Componentes esenciales de accesibilidad web , de WAI
- Introducción a la accesibilidad web , de WAI
- Error 367 de MediaWiki: problemas de accesibilidad de marcado (seguimiento)