stringtranslate.com

Wikipedia: Manual de estilo/Accesibilidad

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 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 ellos son más fáciles de leer y editar para todos.

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

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

Encabezamientos

  • MOS: BUENA CABEZA
  • MOS: CABEZA MALA
  • MOS:ESPACIOBAJO ENCABEZADO

Los títulos deben ser descriptivos y estar en el orden coherente definido en el Manual de estilo .

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

Para fines de legibilidad para editores con problemas de visión (solo en el editor fuente ), se puede agregar una sola línea en blanco debajo de cada título, pero no más de una; más de una línea en blanco debajo del encabezado de una sección hará que se vea espacio adicional en la página renderizada. También se debe considerar cómo puede aparecer una sola línea blanca en blanco debajo de los títulos 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 título puede en realidad restar legibilidad. para estos editores, para algunos artículos.

  • MOS:PSEUDOCABEZA
  • MOS: FALSO

No cree pseudotítulos abusando del marcado de punto y coma (reservado para listas de descripción ) y trate de evitar el uso de marcado en negrita. Los lectores de pantalla y otras tecnologías de asistencia solo pueden usar títulos que tengan marcado de encabezado para la navegación. Si desea reducir el tamaño de la tabla de contenido (TOC), utilice {{ límite TOC }} en su lugar. En los casos en los que {{ límite TOC }} no se puede utilizar debido a títulos de nivel inferior en otras partes del artículo, el uso de negrita para los subsubtítulos causa la menor molestia para los usuarios de lectores de pantalla. Usar un pseudotítulo significa que ha agotado todas las demás opciones. Se considera una rareza.

Elementos flotantes

  • MOS:ACCESO#FLOTAR

En el wikicode, los elementos flotantes (incluidas las imágenes) deben colocarse dentro de la sección a la que pertenecen; No coloques la imagen al final del apartado 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 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 voz alta. el punto donde se codifica la imagen ).

Resolución

  • 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 de baja resolución. En el escritorio, esto a veces es un problema en artículos con varias 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 reestructurar las tablas anchas para que se extiendan verticalmente en lugar de horizontalmente.

Texto

  • MOS:NOSTRIKE
  • MOS:NOSÍMBOLOS

De forma predeterminada, la mayoría de los lectores de pantalla no indican atributos de texto de presentación (negrita, cursiva, subrayado, monoespacio, tachado) ni siquiera atributos de texto semánticos (é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 la política de Wikipedia y en los debates sobre eliminación 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 común en artículos (por ejemplo, para mostrar cambios en un análisis textual) causará problemas de accesibilidad y absoluta confusión si es la única indicación utilizada. Esto se aplica tanto a los elementos <s>y <del>(junto con sus correspondientes <ins>, generalmente representados visualmente como subrayados), así como a las plantillas que los utilizan. No utilice tachados para objetar 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 tienen una compatibilidad muy variable con caracteres fuera de Latin-1 y Windows-1252 y no es seguro asumir cómo se pronunciará un carácter determinado en 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 en 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 indican idiomas de escritura no latina y puede 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).
  2. No utilice símbolos posiblemente impronunciables como ♥ (un símbolo de corazón ); use 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 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 sólo por las propiedades CSS o el marcado wiki.

  • MOS:NOHOVER
  • MOS:NOCONSEJOS SOBRE HERRAMIENTAS

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 envoltorio para el elemento) se puede utilizar para indicar la forma larga de una abreviatura (incluido un acrónimo o una inicial).{{abbr}}<abbr>

No insertes saltos de línea dentro de una oración, ya que esto dificulta la edición con un lector de pantalla . Un salto de línea simple puede seguir a una oración, lo que puede ayudar a 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 en puntos. 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 el uso de tamaños de fuente más pequeños dentro de elementos de página que ya usan un tamaño de fuente más pequeño, como la mayoría del texto dentro de cuadros de información , cuadros de navegación y secciones de referencias . [b] Esto significa que <small>...</small>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. Tenga en cuenta que la etiqueta HTML tiene un significado semántico de letra pequeña o comentarios laterales; [2] no lo utilices 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 de fracción 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. Uso que produce fracciones en la forma 34 . (Para textos científicos y matemáticos , utilice el que produce fracciones en la forma{{frac}}{{sfrac}}3/4.)

Otros idiomas

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

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

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

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

Sin especificar una secuencia de comandos, las etiquetas IETF asumen la secuencia de comandos más común utilizada para escribir un idioma determinado. Por lo tanto, las transliteraciones deben especificar el uso de la escritura latina agregando -Latnal código del idioma o usando la plantilla equivalente {{ transl }}. Wikipedia tiene varias plantillas específicas para cada idioma , como {{ lang-zh }} y {{ nihongo }}, que brindan a los editores funciones específicas para cada idioma, 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 optimizar el wikitexto, en lugar de saturar párrafos con instancias de {{ lang }} y {{ transl }}.

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 forma predeterminada. Si el texto no debe estar en cursiva, como en los nombres de lugares o personas, se puede agregar el parámetro. [c] Como se describe en MOS:FOREIGN , el texto que utiliza una escritura no latina casi nunca debe estar en cursiva o negrita.{{lang}}{{lang-xx}}|italic=no

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

Enlaces

  1. Cree buenas descripciones de enlaces, especialmente para enlaces externos (evite "¡ haga clic aquí !", "esto"). [4] [5]
  2. No utilice caracteres Unicode como iconos; use un ícono con texto alternativo en su lugar. Por ejemplo, algunos lectores de pantalla no pueden reproducir un carácter como "→" en texto útil .
  3. Utilice Plantilla: anclajes visibles donde el resaltado de destino ayuda a las personas con discapacidad visual a localizar más fácilmente el destino del enlace en la página de destino.

Color

  • MOS:COLOR
  • MOS:COLOR
  • MOS: CONTRASTE
Dos capturas de pantalla de la misma interfaz de usuario altamente textual. El de arriba usa rojo, verde y azul; el de abajo usa 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 más comúnmente 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 los colores seguros para la web frente al negro (fila superior) y el blanco (abajo) o viceversa, con contornos en 3 (rojo), 4,5 (verde) y 7 (azul)

Elementos de bloque

Liza

  • MOS:INDENTMIX

No separe los elementos de la lista dejando líneas vacías o saltos de columnas tabulares entre ellos. Esto incluye elementos en una lista de descripción (una lista hecha con un punto y coma o dos puntos al principio, que es también el formato de la mayoría de las discusiones en las páginas de discusión) o una lista ordenada o una 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 los lectores de pantalla , que anunciarán varias listas cuando solo se esperaba una y, por lo tanto, pueden inducir a error o confundir a los usuarios de estos programas. Este formato inadecuado también puede triplicar el tiempo que les lleva leer la lista.

Del mismo modo, no cambie entre los tipos de marcadores de lista inicial (dos puntos, asteriscos o signos de almohadilla) 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, signos de almohadilla, es necesario copiar cualquier serie de esos caracteres que se haya utilizado anteriormente y agregar un carácter más. Alternativamente, simplemente elimine la sangría y comience una nueva discusión (es decir, una nueva lista HTML).

Ejemplos:

controlarYEn una discusión, haga esto,

* Apoyo. Me gusta esta idea. —Usuario:Ejemplo ** Pregunta: ¿Qué te gusta de esto? —Usuario: Ejemplo2 *** Parece encajar 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 encajar con el espíritu de Wikipedia. —Usuario:Ejemplo

controlarYTambién es aceptable suprimir la viñeta en una respuesta,

* Apoyo. Me gusta esta idea. —Usuario:Ejemplo *: Pregunta: ¿Qué te gusta de esto? —Usuario:Ejemplo2 *:: Parece encajar en 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 lo es saltar más de un nivel,

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

☒NPor lo general, esto no se recomienda:

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

Esta inyección de una viñeta aumenta innecesariamente la complejidad de la lista y hace que las personas sean más propensas a utilizar 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 la lista, sepárelos con :{{pb}}

* Este es un artículo. {{ pb }} Este es otro párrafo dentro de este artículo. * Este es otro artículo.

controlarYEsto también se puede hacer con marcado HTML explícito para los 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 puedes usar el truco de incluir un salto de línea de código en un comentario HTML (lo 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 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 artículo. <!-- --> < p > Este es otro párrafo dentro de este artículo, y vamos a citar a alguien: </ p > <!-- --> {{ talk quote block | Imaginemos un mundo en el que cada persona del planeta tenga libre acceso 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 artículo.

Tenga en cuenta que no todas las plantillas sofisticadas se pueden utilizar de esta manera (por ejemplo, algunas plantillas de citas decorativas se basan en tablas y el analizador de MediaWiki no manejará dichas etiquetas como si estuvieran 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 descripción/definición/asociación .

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

* Este es un artículo. < br /> 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 ajustarse dentro de un párrafo, como 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 coincidir con el nivel de sangría, ya que (como se mencionó anteriormente) produce tres listas separadas:

* Este es un artículo. : Esta es una lista completamente separada. * Esta es una tercera lista.

controlarYAlternativamente, puede utilizar una de las plantillas de listas 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: < pre >Este es un código.</pre>Este 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:INDENTGAP

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 individuales, existe una variedad de plantillas, que incluyen (una plantilla universal, con el mismo nombre en todos los sitios de Wikimedia); estos sangran con varios caracteres de espacio en blanco. No abuse del elemento o las plantillas que lo utilizan (como AKA ) para la sangría visual; son sólo para material cotizado directamente. La alternativa genérica se creó para estos casos sin comillas, así que úsela.{{block indent}}{{in5}}<blockquote>...</blockquote>{{blockquote}} {{quote}}{{block indent}}

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 utiliza, por ejemplo, para indicar respuestas en una discusión encadenada en páginas de discusión. Sin embargo, a este marcado por sí solo le falta el <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 un HTML roto (es decir, no supera la validación [6] ). El resultado es que la tecnología de asistencia, como los lectores de pantalla, anunciará una lista de descripciones que no existe, lo que resulta confuso para cualquier visitante no 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.

No se deben colocar líneas en blanco entre líneas de texto con sangría de dos puntos  , especialmente en el contenido del artículo. El software interpreta que esto marca el final de una lista y el comienzo de una nueva.

Si se necesita espacio, existen 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 arriba y debajo de la línea en blanco. Esto es apropiado cuando dos editores hacen comentarios inmediatamente uno después del otro en el mismo nivel de sangría. Por ejemplo:

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

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

El segundo enfoque, cuando el material debe ser un único comentario (u otro elemento de la 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 esto, para incluir bloques de contenido complejos):

: Texto aquí.{{pb}}Más texto. —Usuario:Ejemplo3

Para mostrar una fórmula o expresión matemática en su propia línea, se recomienda utilizarla <math display="block">1 + 1 = 2</math>en lugar de :<math>1 + 1 = 2</math>.

Listas verticales

Listas verticales con viñetas
  • MOS: LISTA GAP

Para 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 formato 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 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 considera una lista en varias listas más pequeñas para quienes usan lectores de pantalla . Por ejemplo, para la codificación:

* Rosa blanca* Rosa amarilla* Rosa rosada* Rosa roja

el software suprime parcialmente los espacios entre líneas y por lo tanto se ve así:

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

  • MOS:NOBR
  • MOS:NOBREAKS

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 horizontalmente (en línea) como se describe en las dos secciones siguientes.{{plainlist}}{{unbulleted list}}{{flatlist}}{{hlist}}

Listas verticales sin viñetas
  • MOS:PLISTA
  • MOS: LISTA V

Para las listas sin viñetas que aparecen en la página, están disponibles las plantillas {{ Plainlist }} y {{ Unbulleted List }}, para mejorar la accesibilidad y el significado semántico al marcar lo que claramente es una lista en lugar de incluir <br />saltos de línea, que no deben usarse. -véase más arriba. Sólo se diferencian 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 etiquetas {{!}}o esté contenido en <nowiki>...</nowiki>ellas. De manera similar, no puede contener el signo igual ( =), a menos que se reemplace {{=}}o esté contenido dentro de <nowiki>...</nowiki>, aunque puede evitarlo nombrando los parámetros ( |1=, |2=etc.). Si esto se vuelve demasiado complicado, es posible que puedas usar la variante con {{ endplainlist }} en su lugar. Dentro de una referencia, es posible que necesites {{ unbulleted list citebundle }} en su lugar.

Alternativamente, en plantillas como cuadros de navegación y similares, o cualquier contenedor adecuado, dichas listas pueden tener un estilo con la clase " plainlist", por lo tanto:

En los cuadros de información , se puede utilizar lo siguiente:

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

Otras listas verticales

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

Listas horizontales

  • MOS: LISTA H

Para las listas que se encuentran 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 el significado semántico. Esta función utiliza el formato 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...") mediante el software de asistencia utilizado por las personas. que son ciegos. Las plantillas difieren sólo en el marcado wiki utilizado para crear la lista. Tenga en cuenta que cuando se pasa texto a estas (o a cualquier otra) plantilla, el carácter de barra vertical ( ) debe tener como escape .{{flatlist}}{{hlist}}|{{!}}

Alternativamente, en plantillas como navboxes y similares, o en cualquier contenedor adecuado, dichas listas pueden tener estilo con la clase hlist, así:

En cuadros de información :

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 vacío 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 etiquetas de encabezado (figura 2).

☒N1. Incorrecto

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

controlarY2. Rumbo

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

Mesas

  • 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 correcta de canalización wikitable para aprovechar todas las funciones disponibles. Consulte meta:Ayuda:Tables 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 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 el uso de 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 tablas celda por celda, fila HTML por fila HTML, no fila visual por fila visual.

tablas de datos

Wikitexto:

{| clase = "wikitable" |+ texto del título |- ! alcance = "col" | encabezado de columna 1 ! alcance = "col" | encabezado de columna 2 ! alcance = "col" | encabezado de columna 3 |- ! alcance = "fila" | encabezado de fila 1 | datos 1 || datos 2 |- ! alcance = "fila" | encabezado de fila 2 | datos 3 || datos 4 |}           

Produce:

Subtítulo ( |+)
Un título es el título de una tabla y describe su naturaleza. [7] Las tablas de datos siempre deben incluir un título.
Encabezados de fila y columna (  ! )
Al igual que el título, 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 información del encabezado sobre las celdas de datos. Por ejemplo, la información del encabezado se pronuncia 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 aparecer antes de los datos en cada celda cuando se navega en modo de tabla, es necesario que los encabezados de columna y de fila identifiquen de forma ú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. Úselo ! scope="colgroup" colspan="2" |si un encabezado de columna abarca un grupo de columnas y ! scope="rowgroup" rowspan="2" |si un encabezado de fila abarca un grupo de filas, ajustando el recuento de extensión según sea necesario. Los encabezados ahora se pueden asociar a las celdas correspondientes. [11]

Wikipedia: el tutorial del Manual de estilo/Accesibilidad/Tablas de datos proporciona requisitos detallados sobre:

  1. Títulos de tabla correctos
  2. Estructura de encabezados correcta
  3. tablas complejas
  4. Imágenes y color
  5. Evitar tablas anidadas

Tablas de diseño

  • MOS:LTAB

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 <div>y styleatributos semánticamente apropiados.

Cuando utilice una tabla para colocar 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 summaryatributo. No utilice ningún <caption>elemento <th>dentro de la tabla o dentro de tablas anidadas. En el marcado de tablas wiki, esto significa no utilizar los prefijos |+o !. Asegúrese de que el orden de lectura del contenido sea correcto. Los efectos visuales, como el centrado o la negrita, se pueden lograr con hojas de estilo o elementos semánticos. Por ejemplo:

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

Imágenes

  • MOS:ACCIM
  1. Las imágenes e í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 alternativo adicional, debe ser conciso o remitir al lector al título o al texto adyacente. (Consulte WP:Manual de estilo/Accesibilidad/Texto alternativo para imágenes para obtener más información. Para consideraciones adicionales sobre íconos, consulte WP:Manual de estilo/Iconos § Recuerde accesibilidad para personas con discapacidad visual ).
  2. En la mayoría de los casos , las imágenes deben incluir un título utilizando la sintaxis de imagen incorporada. El título debe describir de manera concisa el significado de la imagen y la información esencial que intenta transmitir.
  3. Evite el uso de imágenes en lugar de tablas o gráficos. Siempre que sea posible, cualquier cuadro o diagrama debe tener un texto equivalente o debe estar bien descrito para que los usuarios que no puedan ver la imagen puedan comprender el concepto.
  4. Evite intercalar texto entre dos imágenes o, a menos que sea absolutamente necesario, utilizar tamaños de imagen fijos .
  5. Evite galerías indiscriminadas porque el tamaño de la pantalla y el formato del navegador pueden afectar la accesibilidad para algunos lectores debido a la visualización de imágenes fragmentadas ( p. ej .). Los artículos con muchas imágenes pueden caducar en las versiones móviles de Wikipedia. Lo ideal es que una página no tenga más de 100 imágenes (por pequeñas que sean). Ver MediaWiki: Limitar el número de imágenes en una página
  6. Evite hacer referencia en el texto a imágenes como si estuvieran a la izquierda o a la derecha. La ubicación de las imágenes puede ser diferente para los visitantes del sitio móvil y no tiene sentido para las personas a las que les leen las páginas mediante software de asistencia. En su lugar, utilice subtítulos para identificar las imágenes. (Ver WP: Manual de estilo/Imágenes § Referencias del texto del artículo ).
  7. 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 activar el enlace de la imagen conducirá a una descripción más detallada. (Consulte Ayuda: página de descripción del archivo § Resumen de imagen ).
  8. Las imágenes deben estar dentro de la sección con la que están relacionadas (después del título y cualquier nota ), y no en el título 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. (Ver WP:Manual de Estilo/Imágenes § Sección ).
  9. Esta guía incluye texto alternativo para ecuaciones con formato LaTeX en <math>modo. Ver Wikipedia: Manual de estilo / Matemáticas § Texto alternativo
  10. No pongas imágenes en los títulos ; esto incluye íconos y <math>marcas. Hacerlo puede romper los enlaces a las secciones y causar otros problemas.

Animaciones, contenido de vídeo y 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 en vídeo (para saber cómo, consulte 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 que ese límite provoca convulsiones. [14]

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. Los subtítulos están destinados a la transcripción del discurso.

Existe la necesidad de subtítulos para personas con discapacidad auditiva. A partir de noviembre de 2012 esto no es posible, pero esta función se puede agregar fácilmente y se solicitó en bugzilla:41694. Los subtítulos están destinados a verse en lugar de subtítulos. Los subtítulos 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 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 sobre cómo crear subtítulos. [dieciséis]

También sería necesaria una versión de texto del vídeo para los ciegos, pero a partir de noviembre de 2012 no existe una forma conveniente de proporcionar texto alternativo para los vídeos.

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 vídeo: :commons:Commons:Video § Subtítulos y subtítulos.

Estilos y opciones de marcado.

  • MOS:DESVIACIONES

Mejores prácticas: marcado wiki y clases de CSS

En general, los estilos para tablas y otros elementos a nivel de bloque deben configurarse mediante 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 ( Special: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 para todo el sitio, a un individuo le resulta mucho más difícil 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 cumpla con 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 pueden usar una combinación de colores 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 utilizar el marcado wiki con preferencia al conjunto limitado de elementos HTML permitidos. En particular, no utilice elementos de estilo HTML <i>ni <b>para formatear texto; es preferible utilizar el marcado Wiki ''o '''para cursiva y negrita puramente tipográfica, respectivamente, y utilizar plantillas o elementos de marcado semántico para diferencias más significativas. El <font>elemento también debe evitarse en el texto del artículo; utilice , , y nuestras otras plantillas de marcado semántico según sea necesario para enfatizar las diferencias lógicas, no solo las visuales. Utilice las plantillas {{ subst:resize }}, {{ subst:small }} y {{ subst: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 existen excepciones naturales; por ejemplo, puede ser beneficioso utilizar el elemento para indicar algo como un enlace de ejemplo en el que no se puede hacer clic, pero el subrayado generalmente no se utiliza en el texto del artículo .{{em}}{{code}}{{var}}font-size<big /><u>...</u>

Usuarios con soporte limitado de CSS o JavaScript

  • MOS:PRECOPLAZAMIENTO

Los elementos contraídos automáticamente (precontraídos) 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 formas que no podemos predecir, así como acceder directamente a través de navegadores más antiguos. Al mismo tiempo, se reconoce que es imposible brindar la misma calidad de apariencia a dichos usuarios sin evitar innecesariamente características que beneficiarían a los usuarios con navegadores más capaces. Como tal, no se deben utilizar funciones que podrían causar que el contenido se oculte o se corrompa cuando CSS o JavaScript no están disponibles. Sin embargo, la consideración para los usuarios sin CSS o JavaScript debe extenderse principalmente a garantizar que su experiencia de lectura sea posible ; se reconoce que inevitablemente será inferior .

Tenga en cuenta que las versiones móviles del sitio web no admiten el colapso, por lo que cualquier contenido plegable se abrirá automáticamente.

Para tener en cuenta estas consideraciones, pruebe cualquier cambio potencialmente perjudicial 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. [18]

Ver 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 cuadros de información y 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 predeterminado de la página. Se pueden encontrar valores adicionales en MediaWiki:Common.css .
  3. ^ Hay más detalles sobre este uso disponibles en la documentación de la plantilla de {{ lang }}.
  4. ^ Las listas de descripción HTML anteriormente se denominaban listas de definiciones y listas de asociaciones . La estructura es la misma; sólo la terminología ha cambiado entre las versiones de la 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 Mundial de la red . 7 de octubre de 2016 . Consultado el 29 de diciembre de 2011 .
  2. ^ "4.5.4 El elemento pequeño". Estándar de vida HTML . 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 Mundial de la red . 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 Mundial de la red . 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 vínculo a un texto específico". Técnicas para WCAG 2.0 . Consorcio Mundial de la red . 7 de octubre de 2016 . Consultado el 29 de diciembre de 2023 .
  6. ^ "Servicio de validación de marcado: consulte el marcado (HTML, XHTML, ...) de documentos web". validador.w3.org . v1.3+hg. Consorcio Mundial de la red . 2017 . Consultado el 13 de diciembre de 2017 .El error del validador informado 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 Mundial de la red . 7 de octubre de 2016 . Consultado el 29 de diciembre de 2023 .Nivel de accesibilidad: A.
  8. ^ "H51: uso del marcado de tabla para presentar información tabular". Técnicas para WCAG 2.0 . Consorcio Mundial de la red . 7 de octubre de 2016 . Consultado el 29 de diciembre de 2023 .
  9. ^ "4.9.10 El décimo elemento". Estándar de vida HTML . 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 . Libertad científica . Consultado el 29 de diciembre de 2023 .
  11. ^ "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 Mundial de la red . 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 5 segundos)". Técnicas para WCAG 2.0 . Consorcio Mundial de la red . 7 de octubre de 2016 . Consultado el 29 de diciembre de 2023 .
  13. ^ "G4: Permitir pausar el contenido y reiniciarlo desde donde se pausó". Técnicas para WCAG 2.0 . Consorcio Mundial de la red . 7 de octubre de 2016 . Consultado el 29 de diciembre de 2023 .
  14. ^ "Pauta 2.3 Convulsiones: No diseñe contenido de una manera que se sepa que causa convulsiones". Pautas de accesibilidad al contenido web (WCAG) 2.0 . Consorcio Mundial de la red . 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 Mundial de la red . Consultado el 1 de enero de 2011 .
  16. ^ Ver:
  17. ^ "G158: Proporcionar una alternativa a los medios basados ​​en el tiempo para contenido de solo audio". Técnicas para WCAG 2.0 . Consorcio Mundial de la red . 7 de octubre de 2016 . Consultado el 29 de diciembre de 2023 .
  18. ^ Archivo: Compatibilidad con navegadores, geografía y JavaScript en Wikipedia Portal.pdf; y Archivo: Análisis del tráfico del portal de Wikipedia y soporte de JavaScript.pdf .

Otras lecturas

enlaces externos