stringtranslate.com

Wikipedia:Manual de estilo/Accesibilidad

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.

Estructura del artículo

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 .

Encabezados

  • MOS: BUENA CABEZA
  • MOS:CABEZA MALA
  • MOS: ESPACIO BAJO EL ENCABEZAMIENTO

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.

  • MOS:PSEUDOCABEZA
  • MOS: CABEZA FALSA

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.

Elementos flotantes

  • MOS:ACCESO#FLOTANTE

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 ).

Resolución de pantalla

  • MOS: RESOL

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.

Texto

  • MOS: NO HAY ATAQUE
  • MOS:NO SÍMBOLOS

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.

  • MOS:NO HAY QUE VOLAR
  • MOS:NOTOOLTIPS

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 después de una oración aparezca un solo salto de línea, lo que puede resultar útil para algunos editores.

Tamaño de fuente

  • MOS:PEQUEÑO
  • MOS: TEXTO PEQUEÑO

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>

Fracciones

Aparte de las excepciones explicadas en WP:Manual de estilo/Fechas y números § Fracciones , no utilice caracteres fraccionarios precompuestos como ½ (marcado obsoleto: &frac12;o &#189;). 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 34 . (Para textos científicos y matemáticos , utilice que produce fracciones en la forma {{Fraction}}{{sfrac}}3/4. )

Otros idiomas

  • MOS: OTRO IDIOMA
  • MOS:IDIOMA
  • WP:IETF

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}}

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:

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}}

Campo de golf

  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.

Color

  • MOSCÚ:COLOR
  • MOS:COLOR
  • MOS:CONTRASTE
Dos capturas de pantalla de la misma interfaz de usuario con gran cantidad de texto. La superior utiliza rojo, verde y azul; la inferior utiliza casi el mismo color para rojo y verde, de modo que el texto rojo se vuelve casi invisible en su fondo verde.
Un par de capturas de pantalla que muestran los efectos del daltonismo rojo/verde en la legibilidad.

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:

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)

Elementos de bloque

Liza

  • MOS:MEZCLA INDENT

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 los lectores de pantalla , que anunciarán varias listas cuando solo se pretendía una, y por lo tanto pueden 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:

controlarYEn 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

controlarYO, 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

controlarYTambié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.

Varios párrafos dentro de los elementos de la lista

  • MOS:PARABR

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

controlarYPara 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.

controlarYEsto 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.

controlarYEn 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.

controlarYEsta 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.

controlarYComo 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.

Sangría

  • MOS:BRECHA DE INDENT

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>.

Listas verticales

Listas verticales con viñetas
  • MOS:LISTA GAP

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í:

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".

  • MOS:NOBR
  • MOS: SIN PAUSA

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}}

Listas verticales sin viñetas
  • Lista de deseos
  • Lista de Mos:V

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.

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 .

Otras listas verticales

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 .

Listas horizontales

  • Lista de MOS:HL

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}}|{{!}}

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.

Encabezados de lista

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).

☒N1. Incorrect

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

controlarY2. Encabezado

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

Tablas

  • MOS: DTAB

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.

Tablas de datos

Wikitexto:

{| 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 |}           

Produce:

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

Tablas de diseño

  • MOS:LTAB

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. |}     

Imágenes

  • MOS:ACCIM
Visualización de una galería de imágenes fragmentadas en el móvil

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.

Colocación de imágenes

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.

Iconos

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.

Animaciones, vídeos y contenidos de audio.

  • MOS:ANIMACIÓN

Animaciones

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

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]

Video

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]

Audio

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.

Estilos y opciones de marcado

  • MOS:DESVIACIONES

Práctica recomendada: marcado wiki y clases CSS

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>

Usuarios con soporte limitado para CSS o JavaScript

  • MOS: PRE COLAPSO

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 ]

Véase también

Notas

  1. ^ La versión anterior, WCAG 2.0, también es un estándar ISO , ISO/IEC 40500:2012.
  2. ^ El tamaño de fuente general para los cuadros de información y 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 .
  3. ^ Más detalles sobre este uso están disponibles en la documentación de la plantilla para .{{lang}}
  4. ^ Las listas de descripción HTML se denominaban anteriormente listas de definición y listas de asociación . La estructura es la misma; solo ha cambiado la terminología entre las versiones de especificación HTML.<dl><dt>...</dt><dd>...</dd></dl>

Referencias

  1. ^ "F26: Incumplimiento del criterio de conformidad 1.3.3 debido al uso de un símbolo gráfico únicamente para transmitir información". Técnicas para WCAG 2.0 . Consorcio World Wide Web . 7 de octubre de 2016 . Consultado el 29 de diciembre de 2011 .
  2. ^ "4.5.4 El elemento pequeño". HTML Living Standard . Grupo de trabajo sobre tecnología de aplicaciones de hipertexto web . 24 de diciembre de 2023 . Consultado el 29 de diciembre de 2023 .
  3. ^ "H58: Uso de atributos del lenguaje para identificar cambios en el lenguaje humano". Técnicas para WCAG 2.0 . Consorcio World Wide Web . 7 de octubre de 2016. Consultado el 29 de diciembre de 2023 .Nivel de accesibilidad: AA.
  4. ^ "G91: Proporcionar texto de enlace que describa el propósito de un enlace". Técnicas para WCAG 2.0 . Consorcio World Wide Web . 7 de octubre de 2016 . Consultado el 29 de diciembre de 2023 .
  5. ^ "F84: Incumplimiento 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 . 7 de octubre de 2016 . Consultado el 29 de diciembre de 2023 .
  6. ^ "Servicio de validación de marcado: comprueba el marcado (HTML, XHTML, ...) de documentos web". validator.w3.org . v1.3+hg. World Wide Web Consortium . 2017 . Consultado el 13 de diciembre de 2017 .La falla del validador informada es " Error : al elemento dlle falta un elemento secundario requerido".
  7. ^ "H39: Uso de elementos de título para asociar títulos de tablas de datos con tablas de datos". Técnicas para WCAG 2.0 . Consorcio World Wide Web . 7 de octubre de 2016 . Consultado el 29 de diciembre de 2023 .Nivel de accesibilidad: A.
  8. ^ "H51: Uso de marcado de tabla para presentar información tabular". Técnicas para WCAG 2.0 . Consorcio World Wide Web . 7 de octubre de 2016 . Consultado el 29 de diciembre de 2023 .
  9. ^ "4.9.10 El elemento th". HTML Living Standard . Grupo de trabajo sobre tecnología de aplicaciones de hipertexto web . 24 de diciembre de 2023 . Consultado el 29 de diciembre de 2023 .
  10. ^ "Tablas HTML con JAWS". FreedomScientific.com . Freedom Scientific . Consultado el 29 de diciembre de 2023 .
  11. ^ "H63: Uso del atributo de ámbito para asociar celdas de encabezado y celdas de datos en tablas de datos". Técnicas para WCAG 2.0 . Consorcio World Wide Web . 7 de octubre de 2016 . Consultado el 24 de diciembre de 2023 .
  12. ^ "G152: Configuración de imágenes gif animadas para que dejen de parpadear después de n ciclos (en un plazo de 5 segundos)". Técnicas para WCAG 2.0 . Consorcio World Wide Web . 7 de octubre de 2016 . Consultado el 29 de diciembre de 2023 .
  13. ^ "G4: Permitir que el contenido se pause y se reinicie desde donde se pausó". Técnicas para WCAG 2.0 . Consorcio World Wide Web . 7 de octubre de 2016 . Consultado el 29 de diciembre de 2023 .
  14. ^ "Directriz 2.3 Convulsiones: no diseñe contenido de una manera que se sepa que puede provocar convulsiones". Pautas de Accesibilidad al Contenido Web (WCAG) 2.0 . Consorcio World Wide Web . 11 de diciembre de 2008 . Consultado el 29 de diciembre de 2023 .
  15. ^ "G69: Proporcionar una alternativa para los medios basados ​​en el tiempo". Técnicas para WCAG 2.0 . Consorcio World Wide Web . Consultado el 1 de enero de 2011 .
  16. ^ Ver:
  17. ^ "G158: Proporcionar una alternativa para los medios basados ​​en el tiempo para contenido de solo audio". Técnicas para WCAG 2.0 . Consorcio World Wide Web . 7 de octubre de 2016 . Consultado el 29 de diciembre de 2023 .
  18. ^ Archivo:Navegadores, geografía y compatibilidad con JavaScript en el portal de Wikipedia.pdf; y Archivo:Análisis del tráfico del portal de Wikipedia y compatibilidad con JavaScript.pdf .

Lectura adicional

Enlaces externos