Skip to main content

Creación de guías en Biblioguías UCM

Manual básico para la creación de guías en LibGuides

Biblioguías accesibles

Springshare ha recopilado esta amplia guía sobre buenas prácticas respecto a la accesibilidad. En principio, aunque el software LibGuides pasa las pruebas de accesibilidad, los autores individuales de las guías tienen la responsabilidad de asegurar que el contenido y el diseño de sus páginas sigan siendo accesibles.

Su lectura es el primer paso necesario para la creación de biblioguías teniendo en cuenta este requerimiento.

TAW es una herramienta automática on-line para analizar la accesibilidad de sitios web. Creada teniendo como referencia técnica las pautas de accesibilidad al contenido web ( WCAG 2.0) del W3C, cuenta con más de 15 años, siendo la herramienta de referencia en habla hispana.

Pautas

Texto

  • No mezclar diferentes tipos de fuentes. Debemos emplear las fuentes predeterminadas: Quattrocento Sans y, en contados estilos prefijados, Noto Sans. No se deben establecer las fuentes manualmente.
  • No usar subrayados para enfatizar. Los usuarios pensarán que un subrayado es un hipervínculo.
  • Utilizar texto real en lugar de texto dentro de gráficos.
  • No debemos confiar solo en el color para transmitir significado o importancia. Es posible que esa información no esté disponible para los usuarios de lectores de pantalla.
  • Asegurar el contraste adecuado entre la fuente y el fondo.
  • Evitar cambiar el tamaño de fuente a menos que tengamos una buena razón. Si necesitamos encabezados dentro de un cuadro de texto, usaremos el Encabezado 3 (<h3>) y seguiremos con el Encabezado 4 (<h4>), etc., en el editor de texto enriquecido.
  • Usaremos negrita o cursiva en el editor de texto enriquecido (o las etiquetas <strong> o <em> en HTML) para indicar el énfasis. Debemos utilizar estas etiquetas con moderación.
  • Si usamos HTML, evitaremos las etiquetas de negrita <b> o de cursiva <i> antiguas, ya que denotan estilo en lugar de importancia.
  • Nos aseguraremos de que el contenido esté claramente escrito y sea fácil de leer.
  • Debemos evitar depender en lo posible de contenido no HTML que podría no ser accesible, como PDFs o documentos de PowerPoint.

Consejos para agregar texto

  • Se debe escribir directamente en el editor de texto enriquecido; luego se usarán las funciones en el editor de texto para agregar estilo y formato. Crear el texto en otro lugar e intentar copiarlo / pegarlo en el editor de texto traerá una gran cantidad de código HTML y formato innecesarios, que también introducirán contenido inaccesible.
Copiar y pegar

Hay maneras de evitar que el código de estilo oculto se coloque en la guía. El editor de texto enriquecido tiene algunas herramientas específicas para ello.

Barra de pegado de texto del editor de texto enriquecido

  • Botón para pegar el texto sin formatoEste botón mostrará un cuadro emergente que eliminará todo el formato de texto y dejará el texto plano. Lo mejor para texto simple.
  • Botón para dejar el formato original como en el documento WordEste botón mostrará un cuadro emergente que mantendrá gran parte del formato original del documento fuente de Word. Este es también el comportamiento por defecto cuando se pega directamente en el editor de texto enriquecido. Esto no sigue las mejores prácticas, así que no usaremos esta función a menos que planeemos revisar el código fuente y limpiar el formato a mano.
  • Botón que se utiliza para eliminar todo el formato del texto seleccionado en el editor de texto enriquecidoEste botón eliminará todo el formato del texto seleccionado dentro del editor de texto enriquecido. Esto generalmente solucionará problemas de formato extraños que podemos encontrar en el texto copiado. Este botón también eliminará los anchos codificados de las tablas que puedan desbordar la guía.

Encabezados

  • Utilizaremos los encabezados de texto enriquecido como indicadores para las secciones y subsecciones de la guía. Esto no sólo proporciona una organización y un formato jerárquico, sino que también facilita a los lectores de pantalla la tarea de escanear y saltar a diferentes áreas de contenido.
  • Nunca utilizaremos el Encabezado 1 (<h1> en HTML) en la guía, ya que sólo debe utilizarse una vez para toda la página.
  • SpringShare utiliza el Encabezado 2 (<h2>) para los títulos de las cajas, así que sólo utilizaremos el Encabezado 3 (<h3> en HTML) y sucesivos en las cajas de texto enriquecido.
  • Los encabezados con números más altos deben ser colocados sobre los más bajos, de lo contrario su herencia se confundirá.
  • SpringShare ha eliminado las etiquetas <h1> y <h2> en el editor de cajas para cumplir con el WCAG2.

Enlaces

  • Cerciorarse de que el texto enlazado tiene sentido fuera de contexto. Evitemos usar frases como "haga clic aquí", "más", "haga clic para más detalles".
  • Debemos asegurarnos de que el enlace y los recursos de la base de datos A/Z muestren su descripción debajo del enlace. No ocultaremos la descripción detrás de un botón de forma que aparezca al pasar el ratón sobre el mismo, ya que esto interrumpe la accesibilidad.

Selección de opción para mostrar descripción bajo el título del ítem

Tablas

  • Utilizaremos las tablas principalmente para mostrar datos que encajan bien en filas y columnas. No utilizaremos nunca tablas para formatear enlaces u otra información.
  • Añadir cabeceras de tabla para describir el contenido de las columnas de la tabla (Propiedades de tabla → Cabeceras).
  • Agregaremos el título y el resumen de la tabla para que el lector de pantalla pueda obtener más información sobre la misma.
  • Debemos evitar las filas extendidas, ya que es posible que los lectores de pantalla no las analicen correctamente.
  • Las tablas ya cuentan con estilos específicos para que funcionen correctamente en el diseño responsivo. No es necesario cambiar manualmente el ancho de la tabla o el relleno de celdas en LibGuides.

Ejemplo de tabla 2x2 con encabezado creada en el editor de texto enriquecido

Encabezado 1 Encabezado 2
Celda A1 Celda B1
Celda A2 Celda B2

Imágenes

  • Todas las imágenes deben tener texto alternativo (etiqueta ALT) incluido. Para añadir una etiqueta ALT a una imagen en el editor de texto enriquecido, debemos:
    • Seleccionar la imagen y luego hacer clic en el icono de añadir imagen en el editor de texto enriquecido.
    • En la ventana de propiedades de la imagen, buscaremos el campo de texto alternativo en la ficha Información de la imagen y, a continuación, escribiremos el texto alternativo de la imagen.
  • Si la imagen enlaza a un recurso, debemos asegurarnos de que la etiqueta ALT describa también dicho destino.

Cómo añadir texto alternativo a una imagen desde el editor de texto

  • Las etiquetas ALT deben ser breves y descriptivas pero no redundantes.

Vídeos y otro contenido no HTML

  • Si tenemos posibilidad, agregaremos al vídeo subtítulos y/o proporcionaremos transcripciones.
  • Cuando incrustamos medios, como un vídeo, un formulario de Google o un widget de búsqueda en una guía, LibGuides utiliza un "contenedor" llamado iframe para mostrar los medios en la página. Una forma de hacer más accesibles los iframes es añadir un título, para que el usuario sepa lo que ha encontrado en la página.

    LibGuides no asigna automáticamente títulos significativos a los iframes, debemos hacerlo nosotros. Es un pequeño fragmento de texto que añadiremos directamente al principio del código de incrustación.

Pegaremos directamente tras la palabra iframe al principio del código:

title="texto con un título descriptivo del medio insertado"

Ejemplo:

<iframe title="Videotutorial sobre la configuración de EDUROAM UCM" src="https://www.youtube.com/embed/gP7EdZCLlrA?list=PL1548E"...></iframe>
  • Aseguraremos la accesibilidad de contenido no HTML. Si no podemos hacerlo accesible, preferiremos utilizar HTML o, al menos, daremos una alternativa accesible.

Recursos adicionales


Otros recursos


Comprobación de accesibilidad

  • Ainspector Sidebar (para Firefox): AInspector Sidebar evalúa el cumplimiento de accesibilidad de las páginas web en función de los requisitos de WCAG 2.0 utilizando los conjuntos de reglas de OpenAjax Alliance. Organiza los resultados de la evaluación por categorías de reglas y directrices WCAG.
  • Functional Accessibility Evaluator 2.0: El Evaluador de Accesibilidad Funcional (FAE) evalúa un sitio web o una sola página web según los requisitos de Nivel A y AA de las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.0 del W3C.
  • Bookmarklets de accesibilidad: Complementos del navegador que ayudan a que la información de accesibilidad oculta sea visible para los desarrolladores videntes.

Comprobador de contraste de color

  • Comprobador de contraste de color de WebAIM: permite especificar un color de primer plano y un color de fondo y determinar si proporcionan un contraste suficiente cuando alguien con déficit de color lo ve o cuando se ve en una pantalla en blanco y negro.
  • WCAG Contrast Checker (complemento de Firefox): comprueba el cumplimiento de los niveles de contraste, brillo y brillo en la combinación de colores de primer plano y fondo de contenido textual según los requisitos de WCAG 1 y WCAG 2.