Wikipedia:Manual de estilo/Accesibilidad

Esta guía es parte del Manual de estilo de Wikipedia en inglés . Se trata de un estándar generalmente aceptado que los editores deben intentar seguir, aunque pueden aplicarse excepciones ocasionales . Cualquier modificación sustancial de esta página debe reflejar el consenso . En caso de duda, debatir primero en la página de discusión .

Atajos MOS:ACCESO WP:ACCESIBILIDAD

Esta página en pocas palabras: Las páginas de Wikipedia deben ser fáciles de navegar y leer para personas con discapacidades.

La accesibilidad web tiene como objetivo facilitar la navegación y la lectura de las páginas web. Si bien esto tiene como objetivo principal ayudar a las personas con discapacidades , puede resultar útil para todos los lectores. Nuestro objetivo es cumplir con las Pautas de Accesibilidad al Contenido Web 2.1, ^[a] en las que se basan las siguientes sugerencias. Las páginas que se adhieren a ellas son más fáciles de leer y editar para todos.

Una estructura estandarizada de los artículos mejora la accesibilidad, ya que 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 busca 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 una costumbre en Wikipedia, por lo que las pautas a seguir son simplemente Wikipedia:Manual de estilo/Diseño y Wikipedia:Manual de estilo/Sección principal § Elementos .

Los encabezados deben ser descriptivos y estar en un orden coherente según lo definido en el Manual de Estilo .

Coloque los encabezados en forma secuencial, 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; ese no es el propósito de los encabezados.

Para facilitar la lectura a los editores con problemas de visión (solo en el editor de código fuente ), se puede agregar una sola línea en blanco debajo de cada encabezado, pero no más de una; más de una línea en blanco debajo de un encabezado de sección hará que se vea espacio adicional en la página renderizada. También se debe tener en cuenta cómo puede aparecer una sola línea en blanco debajo de los encabezados de sección en una pantalla pequeña para un artículo en particular, ya que muchos editores usan dispositivos móviles para editar y tener una sola línea en blanco debajo del encabezado puede en realidad restar valor a la legibilidad para estos editores, en el caso de algunos artículos.

No cree pseudotítulos abusando del marcado de punto y coma (reservado para listas de descripción ) e intente 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), use {{ TOC limit }} en su lugar. En los casos en los que no se pueda usar {{ TOC limit }} debido a encabezados de nivel inferior en otras partes del artículo, entonces el uso de negrita para los subtítulos secundarios causa la menor molestia para los usuarios de lectores de pantalla. El uso de un pseudotítulo significa que ha agotado todas las demás opciones. Se considera una rareza.

En el código wiki, los elementos flotantes (incluidas las imágenes) deben ubicarse dentro de la sección a la que pertenecen; no coloque la imagen al final de la sección anterior. (Dependiendo de la plataforma, la "apilación" de varias imágenes junto a una cantidad relativamente pequeña de texto puede provocar que una imagen en particular se desplace 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 está codificada ).

Los artículos de Wikipedia deben ser accesibles para lectores que utilicen dispositivos con pantallas pequeñas, como dispositivos móviles , o para lectores que utilicen monitores con baja resolución. En el escritorio, esto a veces 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 las tablas anchas para que se extiendan verticalmente en lugar de horizontalmente.

De manera predeterminada, la mayoría de los lectores de pantalla no indican los atributos de presentación del texto (negrita, cursiva, subrayado, monoespaciado, tachado) ni tampoco los atributos semánticos del texto (é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 y participan en los debates sobre políticas y eliminación de textos de Wikipedia que activen las notificaciones sobre los atributos de texto cuando lo hagan, ya que el texto tachado es muy común en los debates internos de Wikipedia).

Dado que los lectores de pantalla normalmente ignoran el tachado, su uso poco frecuente en los artículos (por ejemplo, para mostrar cambios en un análisis textual) provocará problemas de accesibilidad y confusión total si es la única indicación utilizada. Esto se aplica tanto a los elementos <s>y <del>(junto con sus correspondientes <ins>, que normalmente se representan visualmente como subrayados), como a las plantillas que los utilizan. No utilice el tachado para objetar el contenido que considere inapropiado o incorrecto. En su lugar, coméntelo con <!--y -->, elimínelo por completo o utilice una plantilla de limpieza/disputa en línea y plantee el asunto en la página de discusión.

Los lectores de pantalla admiten de forma muy variable caracteres distintos de Latin-1 y Windows-1252 , y no es seguro asumir cómo se pronunciará un carácter determinado de estos rangos. Si el lector de pantalla o el sintetizador de voz no los reconoce, es posible que se pronuncien como un signo de interrogación o se omitan por completo de la salida de voz.

1. Proporcionar una transliteración para todo el texto en un sistema de escritura no latino 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 también se puede encontrar en plantillas como {{ Transliteración }} ; estas plantillas también tienen otros beneficios de accesibilidad (consulte la sección "Otros idiomas" a continuación).
2. No utilice símbolos que puedan ser impronunciables, como ♥ (un símbolo de corazón ); utilice imágenes con texto alternativo en su lugar. ^[1]
3. Es posible que los símbolos que causan problemas a los lectores de pantalla ya tengan plantillas creadas para producir una imagen y un 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). ^{[ necesita actualización ]}

La secuencia de caracteres debe ser suficiente para transmitir aspectos semánticos del texto (y, preferiblemente, otras formas similares de contenido); no es aceptable confiar en "símbolos especiales" personalizados que se distinguen únicamente por propiedades CSS o marcado wiki.

No utilice técnicas que requieran interacción para proporcionar información, como información sobre herramientas o cualquier otro texto que se muestre al pasar el mouse sobre el elemento. 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 una sigla).{{abbr}}<abbr>

No inserte saltos de línea dentro de una oración, ya que esto dificulta la edición con un lector de pantalla . Es posible que haya un solo salto de línea después de una oración, lo que puede resultar útil para algunos editores.

Los tamaños de fuente reducidos o ampliados 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 tamaño de punto. Los tamaños relativos aumentan la accesibilidad para los usuarios con discapacidad visual al permitirles establecer un tamaño de fuente predeterminado más grande en la configuración de su navegador. Los tamaños absolutos niegan a los usuarios esa capacidad.

Evite utilizar tamaños de fuente más pequeños dentro de los elementos de la página que ya utilizan un tamaño de fuente más pequeño, como la mayoría del texto dentro de infoboxes , navboxes y references sections . ^[b] Esto significa que <small>...</small>las etiquetas y plantillas como y , no se deben aplicar al texto sin formato dentro de esos elementos. En ningún caso el tamaño de fuente resultante de ningún texto debe caer por debajo del 85% del tamaño de fuente predeterminado de la página. Tenga en cuenta que la etiqueta HTML tiene un significado semántico de letra pequeña o comentarios laterales; ^[2] no la use para cambios estilísticos.{{small}}{{smalldiv}}<small>...</small>

Aparte de las excepciones explicadas en WP:Manual de estilo/Fechas y números § Fracciones , no utilice caracteres fraccionarios precompuestos como ½ (marcado obsoleto: ½o ½). Esto se debe a que algunas fracciones precompuestas pueden no funcionar con lectores de pantalla o pueden resultar excesivamente difíciles de descifrar para lectores con problemas de visión. Utilice que produce fracciones en la forma 3 ⁄ 4 . (Para textos científicos y matemáticos , utilice que produce fracciones en la forma ⁠{{Fraction}}{{sfrac}}3/4. )

De manera predeterminada, los artículos de Wikipedia en inglés indican explícitamente al navegador que están escritos completamente en inglés. El texto en un idioma distinto del inglés debe etiquetarse como tal, normalmente con una plantilla como (o uno de sus derivados). Esto envuelve el texto en una etiqueta de idioma IETF , que especifica el idioma y la escritura. Por ejemplo:{{lang}}

• N ''Assemblée nationale''Está simplemente en cursiva y no se especifica que es un texto en francés. La mayoría de los lectores de pantalla que intenten manejar esto sonarán ridículos o confusos.
• Y {{lang|fr|Assemblée nationale}}se representa como Assemblée nationale , que aparece en cursiva de forma predeterminada y permitirá a los lectores de pantalla seleccionar una voz en francés.
• Y {{lang-fr|Assemblée nationale}}→ Francés : Asamblea Nacional : es similar a la anterior, pero utiliza una plantilla diseñada específicamente para textos en francés.

Justificación : Entre otros usos, especificar el idioma del texto {{lang}}permite que los sintetizadores de voz seleccionen una voz capaz de leer correctamente el texto. ^[3]

Las etiquetas de idioma IETF especifican el idioma del texto según la especificación ISO 639 , pero también qué escritura se utiliza para escribir el idioma:

• Y {{lang|sr-Cyrl|Народна скупштина}}→ Народна скупштина
• Y {{lang|sr-Latn|Narodna skupština}}→ Narodna skupština – El serbio normalmente puede escribirse utilizando el alfabeto latino o cirílico.
• N {{lang|ja|Kokumin gikai}}– De forma predeterminada, se espera que el texto en japonés se escriba utilizando el sistema de escritura nativo, cuyas reglas pueden tratar algunos caracteres de forma diferente.
• Y {{lang|ja-Latn|Kokumin gikai}}especifica japonés escrito con el alfabeto latino (p. ej. rōmaji ).
• Y {{transliteration|ja|Kokumin gikai}}es equivalente a lo anterior.

Sin especificar un alfabeto, las etiquetas IETF asumen el alfabeto más común usado para escribir un idioma determinado. Por lo tanto, las transliteraciones deben especificar el uso del alfabeto latino agregándolo -Latnal código del idioma o usando la plantilla equivalente. Wikipedia tiene varias plantillas específicas para cada idioma, como y , que brindan funcionalidad específica para el idioma a los editores, como la capacidad de mostrar fácilmente varias transliteraciones con una sola plantilla. No todos los idiomas tienen su propia plantilla, pero usar una puede ser útil para simplificar el wikitexto, en lugar de abarrotar los párrafos con instancias de y .{{transliteration}}{{lang-zh}}{{nihongo}}{{lang}}{{transliteration}}

Por lo general, no es necesario especificar cursiva además de las plantillas o , que ponen en cursiva el texto utilizando el alfabeto latino de manera predeterminada. Si el texto no debe estar en cursiva, como en el caso de los nombres de lugares o personas, se puede agregar el parámetro. ^[c] Como se describe en MOS:NON-ENG , el texto que utiliza una escritura no latina casi nunca debe estar en cursiva o negrita.{{lang}}{{[[Template:lang-xx|lang-xx]]}}|italic=unset

Las transcripciones fonéticas o las guías de pronunciación deben utilizar , u otra plantilla adecuada. se utiliza para protoindoeuropeo .{{IPA}}{{respell}}{{PIE}}

1. Crea buenas descripciones de enlaces, especialmente para enlaces externos (evita " haz clic aquí ", "esto"). ^{[4] [5]}
2. No utilice caracteres Unicode como iconos; utilice en su lugar un icono con texto alternativo. Por ejemplo, algunos lectores de pantalla no pueden reproducir un carácter como "→" en un texto útil .
3. Utilice la plantilla: anclas visibles donde el resaltado de destino ayuda a las personas con discapacidad visual a localizar más fácilmente el enlace de destino en la página de destino.

Los colores se encuentran con mayor frecuencia en los artículos de Wikipedia dentro de plantillas y tablas . Para obtener asistencia técnica sobre cómo se utilizan los colores, consulte Ayuda: Uso de colores .

Los artículos (y otras páginas) que utilizan 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. En particular, 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 asociado a una leyenda o etiquetas de pie de página . De lo contrario, los usuarios ciegos o los 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 daltónicos parcial o totalmente o tienen problemas visuales. Asegúrese de que el contraste del texto con el 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 "Entender SC 1.4.3: Contraste (Mínimo)" de WCAG). Para usar colores CSS con nombre para texto sobre un fondo blanco, consulte Wikipedia:Manual de Estilo/Accesibilidad/Colores CSS para texto sobre fondo blanco para ver los colores recomendados. Para otros usos, aquí hay una selección de herramientas que se pueden usar para verificar que el contraste sea correcto:
  • Puede utilizar algunas herramientas en línea para comprobar los contrastes de color, entre ellas: el verificador de contraste en línea WebAIM , el sitio WhoCanUse o el verificador de contraste de color de Snook.
    • Existen otras herramientas en la web, pero verifique que estén actualizadas antes de usarlas. Varias herramientas se basan en el algoritmo WCAG 1.0, mientras que la referencia actual es el algoritmo WCAG 2.0. Si la herramienta no menciona específicamente que se basa en WCAG 2.0, suponga que está desactualizada.
  • El equipo de diseño de la Fundación Wikimedia ha proporcionado una paleta de colores con colores marcados para cumplir con el nivel AA. Se utiliza para todos los elementos de la interfaz de usuario en todos los productos y en los principales temas de Wikimedia, tanto para escritorio como para dispositivos móviles. Sin embargo, no tiene en cuenta el texto vinculado.
  • La tabla en Wikipedia:Manual de estilo/Accesibilidad/Colores muestra los resultados para 14 tonos de búsqueda de los fondos más oscuros o más claros que cumplen con los estándares AAA contra texto negro, texto blanco, texto vinculado y texto vinculado visitado.
  • Google Chrome tiene un depurador de contraste de color con guía visual y selector de color.
  • El software descargable Color Contrast Analyser le permite seleccionar colores en la página y revisar su contraste en detalle. Sin embargo, asegúrese de utilizar únicamente el algoritmo de "luminosidad" actualizado y no el de "brillo/diferencia de color", que está desactualizado.
• Se pueden utilizar herramientas adicionales para ayudar a producir 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 Color Scheme Designer) ayuda a elegir un buen conjunto de colores para un gráfico.
  • Color Brewer 2.0 proporciona esquemas de color seguros para mapas y explicaciones detalladas.
  • El esquema de color cualitativo claro proporciona un conjunto de nueve colores que funcionan para usuarios daltónicos y con etiquetas de texto negras (entre otras paletas).
  • Existen algunas herramientas para simular la visión daltónica: Toptal ColorFilter (análisis de páginas web) y Coblis Color-blindness Simulator (análisis de archivos locales). También existen extensiones de navegador para el análisis de páginas web: NoCoffee (Firefox)
  • Una herramienta de código abierto muy sencilla que puede resultar útil para elegir colores contrastantes es Color Oracle, un "simulador gratuito de daltonismo para Windows, Mac y Linux". Te permite ver lo que hay en tu pantalla como lo vería una persona con uno de los tres tipos de daltonismo o en escala de grises.
• Si en un artículo se hace un uso excesivo de los colores y no sabes cómo solucionarlo, puedes pedir ayuda a otros editores. Coloca {{ Overcolored }} o {{ Overcoloured }} en la parte superior del artículo.

Relaciones de contraste de colores seguros para la web frente al negro (fila superior) y el blanco (fila inferior) o viceversa, con contornos en 3 (rojo), 4,5 (verde) y 7 (azul)

No separe los elementos de una lista dejando líneas vacías o saltos de columna tabulares entre ellos. Esto incluye los elementos de una lista de descripción (una lista hecha con un punto y coma o dos puntos al principio, que es también como se formatean la mayoría de las discusiones de las páginas de discusión) o una lista ordenada o una lista desordenada . Las listas están pensadas para 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 inadecuado también puede triplicar el tiempo que les lleva leer la lista.

De la misma manera, no alterne entre los tipos de marcadores de lista iniciales (dos puntos, asteriscos o almohadillas) en una lista. Al aplicar sangría en respuesta a una publicación que comienza con cualquier combinación de dos puntos y asteriscos y, a veces, almohadillas, es necesario copiar la serie de esos caracteres que se utilizó anteriormente y agregar un carácter más de ese tipo. Como alternativa, simplemente elimine la sangría y comience una nueva discusión (es decir, una nueva lista HTML).

Ejemplos:

YEn una discusión, haz esto:

* Apoyo. Me gusta esta idea. —Usuario:Ejemplo ** Pregunta: ¿Qué te gusta de esto? —Usuario:Ejemplo2 *** Parece que encaja con el espíritu de Wikipedia. —Usuario:Ejemplo

YO, en una discusión sin viñetas, esto,

: Apoyo. Me gusta esta idea. —Usuario:Ejemplo :: Pregunta: ¿Qué te gusta de esto? —Usuario:Ejemplo2 ::: Parece que encaja con el espíritu de Wikipedia. —Usuario:Ejemplo

YTambién es aceptable suprimir la bala en una respuesta.

* Apoyo. Me gusta esta idea. —Usuario:Ejemplo *: Pregunta: ¿Qué te gusta de esto? —Usuario:Ejemplo2 *:: Parece que encaja con el espíritu de Wikipedia. —Usuario:Ejemplo

NPero no cambie el tipo de lista con viñetas a lista de descripción.

* Apoyo. Me gusta esta idea. —Usuario:Ejemplo :: Pregunta: ¿Qué te gusta de esto? —Usuario:Ejemplo2

Nni cambiar de lista con viñetas a tipo mixto,

* Apoyo. Me gusta esta idea. —Usuario:Ejemplo :* Pregunta: ¿Qué te gusta de esto? —Usuario:Ejemplo2

NDejar líneas en blanco entre los elementos de la lista generalmente es una mala práctica.

* Apoyo. Me gusta esta idea. —Usuario:Ejemplo** Pregunta: ¿Qué te gusta de esto? —Usuario: Ejemplo2

NComo es saltar más de un nivel,

* Apoyo. Me gusta esta idea. —Usuario:Ejemplo *** Pregunta: ¿Qué te gusta de esto? —Usuario:Ejemplo2

NGeneralmente no se recomienda hacer esto:

: Apoyo. Me gusta esta idea. —Usuario:Ejemplo :* Pregunta: ¿Qué te gusta de esto? —Usuario:Ejemplo2

Esta inyección de una viñeta agrega complejidad a la lista innecesariamente y hace que sea más probable que las personas usen niveles de sangría incorrectos en las respuestas.

Desafortunadamente, el marcado de lista normal de MediaWiki es incompatible con el marcado de párrafo normal de MediaWiki.

YPara colocar varios párrafos en un elemento de lista, sepárelos con :{{pb}}

* Este es un elemento. {{ pb }} Este es otro párrafo dentro de este elemento. * Este es otro elemento.

YEsto también se puede hacer con marcado HTML explícito para párrafos (tenga en cuenta la </p>etiqueta de cierre):

* Este es un artículo. < p > Este es otro párrafo dentro de este artículo. </ p > * Este es otro artículo.

YEn ambos casos, esto debe hacerse en una sola línea de código. Sin embargo, opcionalmente, puede utilizar el truco de envolver un salto de línea de código en un comentario HTML (lo que lo suprime como salto de línea de salida) para separar mejor los párrafos en la vista de código:

* Este es un artículo. <!-- --> < p > Este es otro párrafo dentro de este artículo. </ p > * Este es otro artículo.

YEsta 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. <!-- --> < p > Este es otro párrafo dentro de este elemento, y vamos a citar a alguien: </ p > <!-- --> {{ talk quote block | Imagine un mundo en el que cada persona del planeta tenga acceso gratuito a la suma de todo el conocimiento humano. | Jimbo }} <!-- --> < p > Este es un párrafo de cierre dentro del mismo elemento de la lista. </ p > * Este es otro elemento.

Tenga en cuenta que no todas las plantillas elegantes se pueden utilizar de esta manera (por ejemplo, algunas plantillas de citas decorativas están basadas en tablas y el analizador de MediaWiki no manejará dicho marcado como si estuviera dentro de un elemento de lista).

Consulte también WP:Manual de estilo/Glosarios para obtener un marcado rico pero accesible de listas complejas de descripciones/definiciones/asociaciones .

NNo utilice saltos de línea para simular párrafos, porque tienen una semántica diferente:

* Este es un elemento. < br /> Este es el mismo párrafo, con un salto de línea antes. * Este es otro elemento. 

Las etiquetas de salto de línea sirven para enmarcar un texto 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 <poem>y <syntaxhighlight>MediaWiki.

NDefinitivamente no intente utilizar 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.

YComo alternativa, puede utilizar una de las plantillas de listas HTML para garantizar la agrupación. Esto resulta muy útil para incluir elementos de bloque, como código formateado, en listas:

{{ lista con viñetas | 1 = Este es un elemento: < pre >Esto es un código.</ pre >Éste sigue siendo el mismo artículo.| 2 = Este es un segundo elemento. }}

Pero esta técnica no se utiliza en las páginas de discusión.

Un método accesible para la sangría es la plantilla para contenido de varias líneas; utiliza CSS para sangrar el material. Para líneas individuales, existe una variedad de plantillas, incluida (una plantilla universal, con el mismo nombre en todos los sitios de Wikimedia); estas sangran con varios caracteres de espacio en blanco. No abuse del elemento o las plantillas que lo utilizan (como ) para la sangría visual; solo son para material citado directamente. La alternativa genérica se creó para esos casos sin citas, así que úsela.{{block indent}}{{in5}}<blockquote>...</blockquote>{{blockquote}}{{block indent}}

Los dos puntos ( :) al comienzo de una línea marcan esa línea en el analizador de MediaWiki como <dd>parte de una lista de descripción HTML ( <dl>). ^[d] El efecto visual en la mayoría de los navegadores web es sangrar la línea. Esto se usa, por ejemplo, para indicar respuestas en una discusión enhebrada en las páginas de discusión. Sin embargo, este marcado por sí solo carece del <dt>elemento (término) requerido de una lista de descripción, al que <dd>pertenece (descripción/definición). Como se puede ver al inspeccionar el código enviado al navegador, esto da como resultado HTML roto (es decir, falla la validación ^[6] ). El resultado es que la tecnología de asistencia, como los lectores de pantalla, anunciarán una lista de descripción que no existe, lo que es confuso para cualquier visitante no acostumbrado al marcado roto de Wikipedia. Esto no es ideal para la accesibilidad, la semántica o la reutilización , pero actualmente se usa comúnmente, a pesar de los problemas que causa para los usuarios de lectores de pantalla.

No se deben colocar líneas en blanco entre líneas de texto sangradas con dos puntos  , especialmente en el contenido de un artículo. El software interpreta esto como 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 la misma cantidad de dos puntos que los que preceden al texto que está arriba y debajo de la línea en blanco. Esto es apropiado cuando dos editores hacen comentarios inmediatamente después uno del otro en el mismo nivel de sangría. Por ejemplo:

:Estoy completamente de acuerdo. —Usuario:Ejemplo::No estoy convencido. ¿Hay alguna fuente mejor disponible? –Usuario:Example2

Esto le dirá al lector de pantalla que se trata de dos elementos de lista (el que esté en blanco se ignorará).

El segundo enfoque, para cuando el material está destinado a ser un solo comentario (u otro elemento de lista, por ejemplo, en el texto de un artículo), es utilizar el marcado de nuevo párrafo en la misma línea de salida (consulte la sección anterior para conocer técnicas avanzadas en este sentido, para incluir bloques de contenido complejos):

: 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 <math display="block">1 + 1 = 2</math>utilizar en lugar de :<math>1 + 1 = 2</math>.

En el caso de listas verticales con viñetas, no separe los elementos dejando líneas en blanco entre ellos. En su lugar, utilice la plantilla {{pb}} o el marcado HTML <p>. (Una línea en blanco antes del inicio de una lista o después del final de la lista no causa problemas).

El problema con las líneas en blanco en el medio de una lista es que, si los elementos de la lista están separados por más de un salto de línea, la lista HTML finalizará antes del salto de línea y se abrirá otra lista HTML después del salto de línea. Esto divide efectivamente 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 rosa*Rosa roja

El software suprime parcialmente los espacios entre líneas y por eso se ve así:

• Rosa blanca
• Rosa amarilla

• Rosa rosa

• Rosa roja

pero un lector de pantalla lo leerá como: "Lista de 2 elementos: (viñeta) Rosa blanca, (viñeta) Rosa amarilla, fin de lista. Lista de 1 elemento: (viñeta) Rosa rosa, fin de lista. Lista de 1 elemento: (viñeta) Rosa roja, fin de lista".

No separe los elementos de la lista con saltos de línea ( <br />). Utilice / si la lista debe permanecer vertical; o considere / si la lista podría representarse mejor en forma horizontal (en línea) como se describe en las siguientes dos secciones.{{plainlist}}{{unbulleted list}}{{flatlist}}{{hlist}}

Para las listas sin viñetas que se ejecutan a lo largo de la página, están disponibles las plantillas {{ plainlist }} y {{ unbulleted list }} , para mejorar la accesibilidad y la significación semántica al marcar lo que claramente es una lista en lugar de incluir <br />saltos de línea, que no se deben usar (ver arriba). Se diferencian solo en el marcado wiki utilizado para crear la lista. Tenga en cuenta que debido a que son plantillas, el texto de cada elemento de la lista no puede contener el símbolo de barra vertical ( |) a menos que se reemplace por {{!}}o esté contenido dentro de <nowiki>...</nowiki>las etiquetas. De manera similar, no puede contener el signo igual ( =), a menos que se reemplace por {{=}}o esté contenido dentro de <nowiki>...</nowiki>, aunque puede evitar esto nombrando los parámetros ( |1=, |2=etc.). Si esto se vuelve demasiado complicado, es posible que pueda usar la variante con {{ endplainlist }} en su lugar. Dentro de una referencia, es posible que necesite {{ unbulleted list citebundle }} en su lugar.

{{lista simple |*Rosa blanca*Rosa amarilla*Rosa rosa*Rosa roja}}

{{lista sin viñetas|Rosa blanca|Rosa amarilla|Rosa rosa|Rosa roja}}

Como alternativa, en plantillas como navboxes y similares, o cualquier contenedor adecuado, dichas listas pueden tener el estilo de la clase " plainlist", de la siguiente manera:

En los infoboxes se puede utilizar lo siguiente:

Véase también WP:Manual de estilo/Listas § Listas sin viñetas .

Los problemas de líneas en blanco mencionados anteriormente también afectan a las listas numeradas , que utilizan #marcado, y la numeración de la lista se restablecerá después del salto de línea. El problema de salto de línea de las listas también se aplica a las listas de descripción (definición, asociación) , que utilizan ;marcado :; ese tipo de lista puede tener saltos de línea si se crea con las plantillas de glosario .

Para las listas que se ejecutan a lo largo de la página y en filas individuales en cuadros de información y otras tablas, las plantillas y (para "lista horizontal") están disponibles para mejorar la accesibilidad y la significación semántica. Esta característica hace uso del marcado HTML correcto para cada elemento de la lista, en lugar de incluir caracteres con viñetas que, por ejemplo, se leen en voz alta (p. ej., "punto gato punto perro punto caballo punto...") mediante el software de asistencia utilizado por personas ciegas. Las plantillas difieren solo en el marcado wiki utilizado para crear la lista. Tenga en cuenta que cuando se pasa texto a estas (o a cualquier otra) plantillas, el carácter de barra vertical ( ) debe escaparse con .{{flatlist}}{{hlist}}|{{!}}

{{lista plana |*Rosa blanca*Rosa roja**Rosa rosa*Rosa amarilla}}

{{lista de h|Rosa blanca|Rosa roja|Rosa rosa|Rosa amarilla}}

Como alternativa, en plantillas como navboxes y similares, o cualquier contenedor adecuado, dichas listas pueden tener el estilo de la clase hlist, de la siguiente manera:

En los cuadros de información :

Puede ser utilizado.

El uso incorrecto del punto y coma para poner en negrita un "título falso" antes de una lista (figura 1) crea un espacio en blanco en la lista y algo peor. La línea del punto y coma es una lista de descripción de un solo elemento, sin contenido descriptivo, seguida de una segunda lista.

En su lugar, utilice el marcado de encabezado (figura 2).

; Gases nobles * Helio * Neón * Argón * Criptón * Xenón * Radón

== Gases nobles == * Helio * Neón * Argón * Criptón * Xenón * Radón

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 de canalización de wikitable correcta para aprovechar todas las funciones disponibles. Consulte mw:Help:Tables para obtener más información sobre la sintaxis especial utilizada para las tablas. No utilice únicamente formato, ya sea de CSS o de estilos codificados, para crear significado semántico (por ejemplo, cambiar el color de fondo).

Muchos cuadros de navegación , plantillas de series y cuadros de información se crean utilizando tablas.

Evite utilizar etiquetas <br />o <hr />en celdas adyacentes para emular una fila visual que no se refleja en la estructura de la tabla HTML. Esto es un problema para los usuarios de lectores de pantalla que leen las tablas celda por celda, fila HTML por fila HTML, no fila visual por fila visual.

{| class = "wikitable" |+ caption text |- ! scope = "col" | encabezado de columna 1 ! scope = "col" | encabezado de columna 2 ! scope = "col" | encabezado de columna 3 |- ! scope = "row" | encabezado de fila 1 | datos 1 || datos 2 |- ! scope = "row" | encabezado de fila 2 | datos 3 || datos 4 |}           

Subtítulo ( |+)

Un título es el título de una tabla, que describe su naturaleza. ^[7] Las tablas de datos siempre deben incluir un título.

Encabezados de filas y columnas (  ! )

Al igual que el título, estos ayudan a presentar la información en una estructura lógica a los visitantes. ^[8] Los encabezados ayudan a los lectores de pantalla a mostrar la información del encabezado sobre las celdas de datos. Por ejemplo, la información del encabezado se lee antes de los datos de la celda, o la información del encabezado se proporciona a pedido. ^[9] Debido a que el encabezado de fila y el encabezado de columna pueden leerse antes de los datos en cada celda cuando se navega en modo de tabla, es necesario que los encabezados de columna y los encabezados de fila identifiquen de manera única la columna y la fila respectivamente. ^[10]

Alcance de los encabezados ( ! scope="col" |y ! scope="row" |)

Esto identifica claramente una celda como encabezado de una columna o fila. Utilícelo ! scope="colgroup" colspan="2" |si el encabezado de una columna abarca un grupo de columnas y ! scope="rowgroup" rowspan="2" |si el encabezado de una fila abarca un grupo de filas, ajustando el recuento de espacios según sea necesario. Ahora los encabezados se pueden asociar a las celdas correspondientes. ^[11]

Wikipedia:El tutorial sobre tablas de datos del Manual de estilo/Accesibilidad proporciona requisitos detallados sobre:

1. Títulos de tabla correctos
2. Estructura correcta de los encabezados
3. Tablas complejas
4. Imágenes y color
5. Cómo evitar las tablas anidadas

Evite utilizar tablas para la ubicación 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 o atributos semánticamente <div>apropiados style.

Al utilizar una tabla para posicionar contenido no tabular, ayude a los lectores de pantalla a identificarla 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 otro summaryatributo. No utilice ningún elemento <caption>o <th>dentro de la tabla o dentro de ninguna tabla anidada. En el marcado de tabla wiki, esto significa que no se deben utilizar los prefijos |+o !. Asegúrese de que el orden de lectura del contenido sea correcto. Los efectos visuales, como el centrado o la tipografía en negrita, se pueden lograr con hojas de estilo o elementos semánticos. Por ejemplo:

{| role = "presentación" |- | colspan = "2" style = "text-align: center; background-color: #ccf;" | < strong > Texto importante </ strong > |- | El rápido || zorro marrón |- | salta sobre || el perro perezoso. |}     

En la mayoría de los casos , las imágenes deben incluir un título que utilice la sintaxis de imágenes incorporada. El título debe describir de manera concisa el significado de la imagen y la información esencial que intenta transmitir.

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 indique que al activar el enlace de la imagen, se obtendrá una descripción más detallada.

• Evite utilizar imágenes en lugar de tablas o gráficos. Siempre que sea posible, los gráficos o diagramas deben tener un texto equivalente o deben estar bien descritos para que los usuarios que no puedan 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 galerías indiscriminadas , ya que el tamaño de la pantalla y el formato del navegador pueden afectar la accesibilidad para algunos lectores debido a la visualización fragmentada de las imágenes. Los artículos con muchas imágenes pueden quedarse obsoletos en las versiones móviles de Wikipedia. Lo ideal es que una página no tenga más de 100 imágenes (sin importar lo pequeñas que sean). Consulte MediaWiki:Limitar el número de imágenes en una página
• Evite hacer referencia en el texto a las imágenes como si estuvieran a la izquierda o a la derecha. La ubicación de las imágenes puede ser diferente para los usuarios del sitio móvil y no tiene sentido para las personas a las que se les lee la página mediante un software de asistencia. En su lugar, utilice subtítulos para identificar las imágenes. (Véase Wikipedia:Manual de estilo/Imágenes § Referencias del texto del artículo ).

Las imágenes deben estar dentro de la sección a la que están relacionadas (después del encabezado y cualquier nota adicional ), y no en el encabezado mismo ni al final de la sección anterior. Esto garantiza 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 <math>modo . Véase Wikipedia:Manual de estilo/Matemáticas § Texto alternativo

No inserte imágenes en los encabezados, incluidos los íconos y <math>el marcado. Si lo hace, puede romper los vínculos a las secciones y causar otros problemas.

Las imágenes y los íconos que no sean puramente decorativos deben incluir un atributo alt que actúe como sustituto de la imagen para lectores ciegos, arañas de búsqueda y otros usuarios no visuales. Si se agrega texto alt adicional, debe ser conciso o remitir al lector al título o al texto adyacente.

Para ser accesible, una animación ( GIF – Formato de intercambio de gráficos) debe:

• No exceder una duración de cinco segundos (lo que resulta en convertirlo en un elemento puramente decorativo) ^[12] o
• Estar equipado con funciones de control (parar, pausar, reproducir) ^[13]

Esto requiere que los GIF con animaciones de más de cinco segundos se conviertan a video (para saber cómo, consulte el tutorial sobre cómo convertir 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 emite más destellos que ese límite causa convulsiones. ^[14]

Los subtítulos y los subtítulos cerrados son procesos que permiten mostrar texto en archivos de audio y video en Wikipedia a través de c:Commons:Timed Text. Ambos se utilizan normalmente como transcripción de la parte de audio de un programa a medida que se reproduce (ya sea textualmente o en forma editada), a veces incluyendo descripciones de elementos no hablados. Esto ayuda a las personas sordas y con problemas de audición y ofrece una forma de que los hablantes de idiomas no nativos comprendan el contenido de un archivo multimedia.

Los subtítulos cerrados proporcionan una versión en texto de toda la información importante proporcionada a través del sonido. Puede incluir diálogos, sonidos (naturales y artificiales), el entorno y el fondo, las acciones y expresiones de personas y animales, texto o gráficos. ^[15] Se deben consultar guías fuera de Wikipedia para saber cómo crear subtítulos cerrados. ^[16]

Los subtítulos para discursos, letras, diálogos, etc. ^[17] se pueden agregar fácilmente a los archivos de audio. El método es similar al del video: :commons:Commons:Video § Subtítulos y subtítulos ocultos.

En general, los estilos para tablas y otros elementos a nivel de bloque se deben configurar utilizando clases CSS, no con atributos de estilo en línea. El CSS de todo el sitio en MediaWiki:Common.css se prueba con más cuidado 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 ( Special:MyPage/skin.css , o la hoja de estilo de su navegador). Por ejemplo, una hoja de estilo en Wikipedia:Style sheets for visually trouble users proporciona fondos de mayor contraste para navboxes . 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 consistente entre los artículos y la conformidad con una guía de estilo.

En cuanto a la accesibilidad, se pueden tolerar 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 cumple con los requisitos de accesibilidad, como proporcionar suficiente contraste de color . Por ejemplo, el cuadro de información y el cuadro de navegación relacionados con un equipo deportivo podrían utilizar un esquema de color amarillo y rojo, para combinar con los colores de la librea del equipo. En este caso, los enlaces de color rojo oscuro sobre amarillo claro proporcionan suficiente contraste de color y, por lo tanto, serían accesibles, mientras que el blanco sobre amarillo o el negro sobre rojo no lo serían.

En general, los artículos deben usar el marcado wiki en lugar del conjunto limitado de elementos HTML permitidos. En particular, no use los elementos de estilo HTML <i>y <b>para formatear el texto; es preferible usar el marcado Wiki ''o '''para cursiva y negrita puramente tipográficas, respectivamente, y use plantillas o elementos de marcado semántico<font> para diferencias más significativas. El elemento también debe evitarse en el texto del artículo; use , , y nuestras otras plantillas de marcado semántico según sea necesario, para enfatizar las diferencias lógicas, no solo las visuales. Use las plantillas {{ subst:resize }}, {{ subst:small }} y {{ subst:Large }} para cambiar el tamaño de la fuente, en lugar de configurarlo explícitamente con atributos de estilo CSS como o elementos de estilo obsoletos como . Por supuesto, 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 generalmente no se usa en el texto del artículo .{{em}}{{code}}{{var}}font-size<big /><u>...</u>

Los elementos colapsados ​​automáticamente (pre-colapsados) no deben usarse para ocultar contenido en el cuerpo principal del artículo.

Los artículos de Wikipedia deben ser accesibles para los lectores que utilicen navegadores y dispositivos que tengan soporte limitado o nulo para JavaScript u hojas de estilo en cascada , lo que se conoce como " mejora progresiva " en el desarrollo web. Recuerde que el contenido de Wikipedia se puede reutilizar libremente de maneras que no podemos predecir, así como acceder directamente a él a través de navegadores más antiguos. Al mismo tiempo, se reconoce que es imposible proporcionar la misma calidad de apariencia a dichos usuarios sin evitar innecesariamente funciones que beneficiarían a los usuarios con navegadores más capaces. Como tal, no se deben utilizar funciones que harían que el contenido se ocultara o se corrompiera cuando CSS o JavaScript no están disponibles. 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 tener en cuenta estas consideraciones, pruebe cualquier cambio que pueda resultar perjudicial con JavaScript o CSS deshabilitado. En Firefox o Chrome, esto se puede hacer fácilmente con la extensión Web Developer; JavaScript se puede deshabilitar 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 de XHTML.

En 2016, alrededor del 7% de los visitantes de Wikipedia no solicitaron recursos de JavaScript. ^{[18] [ necesita actualización ]}

• Lista de guías de estilo
• Iniciativa de Usabilidad: Accesibilidad (ubicada en Wikimedia)
• Iniciativa de Accesibilidad Web (WAI)
• Wikipedia: Qué hacer y qué no hacer en materia de accesibilidad (puntos clave de esta guía)
• Wikipedia:Lectores disléxicos
• Wikipedia:Haga que los artículos técnicos sean comprensibles
• Wikipedia:Verificabilidad § Accesibilidad
• Wikipedia:Uso de JAWS
• Ayuda:Acceso móvil
• Wikipedia:Defensores de la accesibilidad
• Wikipedia:Accesibilidad del WikiProject
• Wikipedia: usabilidad de WikiProject

• Clark, Joe (2003). Creación de sitios web accesibles. New Riders Press. ISBN 0-7357-1150-X. Recuperado el 1 de enero de 2011 .
• Pilgrim, Mark (2002). "Sumerjámonos en la accesibilidad: 30 días para un sitio web más accesible". Archivado desde el original el 5 de octubre de 2017.
• Lynch, Patrick J.; Horton, Sarah (2016). Guía de estilo web. Yale University Press . ISBN 978-0-300-21165-8. OCLC  1004033147 – a través de Google Books.

• Guía de estilo de diseño de Wikimedia
• Recomendaciones de artículos compatibles con dispositivos móviles en los wikis de Wikimedia
• 10 consejos rápidos para crear sitios web accesibles, de WAI
• Filtro de páginas web para daltónicos
• Legibilidad, de la Guía de estilo web, 3.ª edición
• Componentes esenciales de la accesibilidad web, según WAI
• Introducción a la Accesibilidad Web, de WAI
• Problemas de accesibilidad de MediaWiki conocidos y monitoreados