Introducción a Markdown

Markdown es un lenguaje de marcado ligero diseñado para facilitar la escritura de texto formateado de manera sencilla y sin distracciones. Su propósito principal es convertir texto plano en HTML sin necesidad de aprender complejas etiquetas o reglas de maquetado.
Este formato de texto se ha convertido en una herramienta esencial para desarrolladores, escritores y creadores de contenido por su simplicidad, versatilidad y beneficios, especialmente en términos de accesibilidad y fácil mantenimiento.

Markdown fue creado por Aaron Swartz y John Gruber en 2004 con la intención de que los documentos fueran fáciles de escribir y leer en su forma original, y a la vez, que pudieran convertirse fácilmente en HTML para la web. Su estructura se basa en texto plano, lo que significa que cualquier persona puede leer y escribir Markdown con un editor de texto básico.
Markdown es ampliamente utilizado en blogs, documentación técnica, ficheros README de proyectos en GitHub, foros y mensajes en algunas redes sociales.

Dentro de las ventajas de Markdown se destacan su simplicidad y su portabilidad.
Markdown utiliza una sintaxis mínima que es fácil de aprender. No necesitas herramientas sofisticadas ni experiencia previa para comenzar a escribir.
Los archivos Markdown son simplemente texto plano, lo que significa que son extremadamente ligeros y se pueden abrir en cualquier dispositivo o sistema operativo.
Además de todo esto se ha de indicar que Markdown se puede convertir fácilmente a formatos más ricos como HTML, PDF, DOCX o incluso ePub, usando herramientas automáticas.

Cómo Escribir con Markdown

La sintaxis de Markdown es extremadamente sencilla, principalmente se utilizan algunos caracteres especiales al comienzo de línea o para indicar el comienzo y la finalización de un bloque marcado semánticamente.

Texto en Negrita y Cursiva

Para marcar en negrita un texto se usa doble asterisco.
Para marcar en  cursiva, se usa un solo asterisco.

Ejemplos:

**Este texto está en negrita**
*Este texto está en cursiva*

Encabezados

Los encabezados se crean utilizando el símbolo # al comienzo de una línea. El número de # define el nivel del encabezado (de 1 a 6).

Ejemplo:

# Encabezado de nivel 1
## Encabezado de nivel 2
### Encabezado de nivel 3

Enlaces

Los enlaces se crean utilizando corchetes para el texto y paréntesis para la URL.

Ejemplo:

Visita mi blog [Programar a ciegas](https://programaraciegas.net) para leer más artículos como este.

Listas

Se pueden crear listas ordenadas o desordenadas utilizando un marcador al comienzo de línea.

• Listas no ordenadas: Utiliza guiones (-) o asteriscos (*).
• Listas ordenadas: Usa números seguidos de un punto (1., 2., etc.).

Ejemplos:

- Elemento 1 de una lista desordenada
- Elemento 2 de una lista desordenada

1. Primer elemento de una lista ordenada
2. Segundo elemento de una lista ordenada

Imágenes

El formato que se utiliza para mostrar imágenes es similar al formato empleado para los enlaces, pero con un signo de exclamación al principio. Ejemplo:

![Texto alternativo que describe la imagen](ruta/a/la/imagen.jpg)

Bloques de Código

Para marcar bloques de código, se utiliza tres acentos graves («`) antes y después del código.

Ejemplo:

```
func saludo() {
print("¡Hola, Markdown!")
}


```

Markdown admite otras marcas para resaltar citas, maquetar datos tabulares y otros elementos semánticos.

La importancia de los encabezados para la accesibilidad web y móvil

Cuando navegamos por una interfaz web o una aplicación móvil, probablemente no somos conscientes de la importancia que tienen los encabezados. Para la mayoría de los usuarios estas marcas semánticas sólo se aprecian por un cambio de tamaño del texto o por un resaltado de su aspecto visual pero para personas con discapacidad visual o cognitiva resultan imprescindibles para comprender mejor la interfaz que están navegando.

¿Qué son los encabezados?

Los encabezados son elementos que organizan y estructuran el contenido de una página o pantalla. En HTML, estos se definen mediante marcas semánticas o etiquetas como <h1>, <h2>, <h3>, y así sucesivamente hasta <h6>. En interfaces móviles, los encabezados suelen representarse como texto destacado o títulos que dividen secciones de contenido y utilizan atributos de la API de accesibilidad para que esos bloques de texto sean identificados como encabezados semánticos.

Para los usuarios sin discapacidad visual, los encabezados facilitan una comprensión visual rápida del contenido y su jerarquía. en cambio, para los usuarios que dependen de tecnologías de asistencia como lectores de pantalla, los encabezados son mucho más que un simple formato: son un mapa estructural que permite moverse rápidamente por la página o la app.

Por ejemplo, una persona ciega que usa un lector de pantalla puede saltar entre los encabezados para encontrar secciones específicas sin tener que escuchar todo el contenido desde el principio. Esto es especialmente útil en páginas con mucho texto o pantallas móviles con varias secciones de información.
Para las personas con discapacidad cognitiva esta estructura de encabezados les permite asimilar y comprender cómo se ha estructurado la información y los elementos de navegación en la interfaz.

Encabezados en WCAG

Las Pautas de Accesibilidad para el Contenido Web (WCAG) incluyen un criterio específico que aborda la correcta implementación de los encabezados. Este criterio está relacionado con el principio de Perceptible y se resume así:

Criterio 2.4.10 – Encabezados de sección (Section Headings)

Este criterio establece que, si el contenido está dividido en secciones, cada una debe contar con un encabezado descriptivo que refleje su propósito o tema. Esto no solo mejora la navegación, sino también la comprensión del contenido. Puedes leer más detalles sobre el criterio 2.4.10 en la página oficial del W3C.

Para cumplir con este criterio debemos asegurarnos de:
• Usar encabezados de forma jerárquica y lógica (por ejemplo, <h1> para el título principal, <h2> para subtítulos, etc.).
• Los encabezados deben ser descriptivos. Un encabezado como “Servicios” es claro, pero uno como “Más información” es ambiguo.
• Evitar saltos innecesarios en los niveles de encabezado (por ejemplo, pasar de un <h1> directamente a un <h3> sin un <h2> intermedio).

Buenas prácticas

A la hora de estructurar los contenidos de una interfaz web o de una pantalla de una aplicación es aconsejable seguir los siguientes puntos:
1. Respetar una estructura jerárquica

El encabezado principal de la página o pantalla debe ser un <h1>. A partir de ahí, usa <h2> para las subsecciones principales, <h3> para las subsecciones de estas, y así sucesivamente. Esto crea un flujo lógico que las tecnologías de asistencia pueden interpretar fácilmente.

Ejemplo en HTML:

<h1>Recetas saludables</h1>
<h2>Desayunos</h2>
<h3>Zumos y batidos saludables</h3>
<h3>Tostadas con aguacate</h3>
<h2>Cenas</h2>
<h3>Ensaladas ligeras</h3>
<h3>Sopas nutritivas</h3>

2. Prohibido usar encabezados para aplicar un estilo visual a un texto

Es común usar etiquetas de encabezado simplemente porque hacen el texto más grande o más llamativo. Esto es un error, ya que confunde a los usuarios de lectores de pantalla. Si es necesario aplicar un estilo concreto a un texto grande sin que sea un encabezado, es aconsejable usar estilos CSS en lugar de etiquetas como <h1>.

3. Los encabezados deben ser claros y concisos

Un buen encabezado es breve y refleja con precisión el contenido de su sección. Por ejemplo, “Configuración avanzada” es mejor que “Detalles sobre las configuraciones avanzadas”.

Cómo comprobar la accesibilidad de los encabezados

Muchas herramientas automatizadas para la detección de barreras de accesibilidad identifican la mayoría de problemas relacionados con el criterio WCAG 2.4.10. Tanto Wave como Lighthouse o Axe pueden detectar si falta algún encabezado o si se han utilizado de manera incorrecta.
En cualquier caso es muy recomendable realizar una verificación manual utilizando un lector de pantallas como NVDA, VoiceOver, TalkBack o JAWS. Todos estos lectores de pantalla incorporan funciones para navegar por encabezados o mostrar una lista con los encabezados detectados.

Los Beneficios y Desafíos de la Accesibilidad en Herramientas Low-Code y No-Code para la Creación de Software

En los últimos años, el auge de las herramientas low-code y no-code ha revolucionado la manera de desarrollar software. Estas plataformas han permitido el acceso al desarrollo de software, permitiendo que personas sin conocimientos avanzados de programación puedan crear sus propias aplicaciones, automatizaciones y sitios web. Sin embargo, para personas con discapacidad, estas herramientas presentan barreras significativas de accesibilidad.

¿Qué son las Herramientas Low-Code y No-Code?

Las herramientas low-code y no-code son paquetes de aplicaciones que permiten crear aplicaciones mediante interfaces gráficas y flujos visuales, reduciendo o eliminando la necesidad de escribir código manualmente. Estas plataformas están diseñadas para ser intuitivas, ofreciendo funciones como arrastrar y soltar (drag-and-drop), plantillas preconstruidas y bloques modulares para construir aplicaciones rápidamente.
Herramientas de lowCode como OutSystems, o Mendix presentan interfaces visualmente sencillas pero que contienen multitud de barreras de accesibilidad que impiden que un producto de apoyo como un lector de pantallas pueda transmitir la información a la persona ciega o interactuar con los elementos de la herramienta para colocar los componentes que darán forma al nuevo software.
Pero, además, herramientas noCode como Webflow o Bubble, enfocadas en la creación de aplicaciones y sitios web, además de resultar inaccesibles para personas que utilicen productos de apoyo, crean contenidos web que presentan barreras de accesibilidad perpetuando así el problema de una Web no accesible.

Beneficios de las Herramientas Low-Code y No-Code

Uno de los mayores beneficios es la posibilidad de que personas sin experiencia técnica puedan materializar sus ideas tecnológicas. Ya no es necesario depender exclusivamente de desarrolladores o equipos técnicos para crear prototipos o soluciones funcionales.
Además, la velocidad con la que se puede pasar de la idea a un producto mínimo viable (MVP) es uno de los mayores atractivos de estas plataformas. Las empresas pueden lanzar productos en menos tiempo, respondiendo más rápido a las necesidades del mercado.

Un gran poder conlleva una gran responsabilidad

La posibilidad de crear rápidamente y sin demasiados conocimientos nuevas experiencias y contenidos digitales es algo muy atractivo para muchas personas que bien no pueden o no quieren invertir mucho tiempo y esfuerzo en aprender aspectos del desarrollo de software. El problema es que este tipo de herramientas no permiten modificar la forma en que se generan esos contenidos y experiencias y en muchos casos lo hacen incluyendo barreras de accesibilidad. No está claro quién es la persona responsable de solucionar este problema: la persona que utiliza la herramienta pero no puede o no quiere aprender a desarrollar software o la empresa que ha creado la herramienta pero que no quiere complicar la experiencia de creación incluyendo aspectos de accesibilidad para así resultar una herramienta más atractiva a personas que no se quieren complicar con aspectos técnicos del desarrollo de software.

Iniciativas para Mejorar la Accesibilidad

Afortunadamente, algunas plataformas están comenzando a abordar estos desafíos. Por ejemplo, Webflow ha incorporado herramientas que permiten a los diseñadores agregar etiquetas y descripciones accesibles a los elementos. Bubble ofrece cierta flexibilidad para personalizar cómo se presentan los componentes en una aplicación para que sean más accesibles. Sin embargo, aún queda un largo camino por recorrer para garantizar que estas herramientas sean completamente inclusivas para todos los usuarios en esos contenidos web generados sin ninguna línea de código por parte de la persona que los crea.
Además, estas soluciones y parches siempre están enfocadas en el software generado y no en el uso de la propia herramienta por lo que los creadores de estas herramientas sólo piensan en personas con discapacidad como posibles clientes y no como posibles trabajadores o creadores.
Los hechos mencionados en el artículo publicado en el 2010 con el título La accesibilidad en crisis para los desarrolladores ciegos parece que siguen presentes en la sociedad actual.

Cómo utilizar Talkback en el emulador de Android

En un artículo anterior hemos visto cómo utilizar el emulador de Android para poder simular el comportamiento de un dispositivo Android dentro de nuestro ordenador.

Uno de los problemas del emulador de Android es que por defecto no vienen instalados todas las aplicaciones y servicios que se incluyen en un teléfono Android. Entre estos servicios están los servicios de accesibilidad como TalkBack. Pero esto no es problema ya que podemos instalar TalkBack en nuestro emulador de Android para poder probar la accesibilidad del proyecto que estemos realizando o para poder disfrutar de algunas experiencias de Android a través de su emulador.

Instalación del APK

Lo primero que debemos hacer es descargar el APK de TalkBack. Este fichero se puede descargar de la Google PlayStore y su nombre completo es com.google.android.marvin.talkback.apk.

El APK es un fichero comprimido que contiene todos los recursos que requiere una aplicación Android para ser ejecutada en un dispositivo Android.

Una vez descargado el fichero APK debemos arrancar el emulador para que ADB pueda detectarlo ya que realizaremos la instalación a través de ADB.

Podemos mostrar qué dispositivos están conectados a nuestro ordenador con el siguiente comando:

adb devices

Cuando el emulador esté disponible y ADB lo detecte podemos proceder a la instalación del APK con el siguiente comando:

adb install com.google.android.marvin.talkback.apk

Si ADB indica que no se ha encontrado el fichero es porque debemos indicar la ruta concreta o ejecutar el comando ADB en la misma carpeta donde guardamos la descarga del APK. Por ejemplo una versión con ruta completa de este comando sería:

adb install /Users/MiUsuario/Downloads/com.google.android.marvin.talkback.apk

Solucionando problemas con servicios y permisos

En Android es necesario que aplicaciones y servicios tengan permiso del usuario para realizar ciertas tareas. Un lector de pantallas, al igual que otros servicios de accesibilidad, requieren de permisos de alto nivel para poder funcionar. Por defecto al instalar un APK no se otorgan estos permisos por lo que debemos aprobar este nivel de acceso para TalkBack.

Podemos realizar esta operación con el siguiente comando de ADB:

adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/.TalkBackService

Arrancando el servicio de accesibilidad

Ahora que tenemos TalkBack instalado en el dispositivo virtual de Android y tiene permisos para ejecutarse debemos activar TalkBack en nuestro dispositivo emulado. Para ello deberíamos ir a los ajustes de Android, accesibilidad y activar TalkBack pero realizar esta operación no es posible si eres un usuario con discapacidad ya que el emulador no ofrece todavía una experiencia accesible.

Por suerte para los usuarios con discapacidad desde ADB también podemos activar y arrancar aplicaciones y servicios en nuestro dispositivo Android. Con el siguiente comando activaremos el servicio de accesibilidad de TalkBack:

adb shell am startservice com.google.android.marvin.talkback/.TalkBackService

Una vez ejecutado el siguiente comando TalkBack debería comenzar a hablar en el emulador. Verifica que el volumen del emulador es suficiente para escuchar la síntesis de voz de TalkBack.

Utilizar TalkBack en el emulador

Para controlar TalkBack en el emulador deberemos utilizar los atajos de teclado de TalkBack como vimos en el artículo sobre cómo utilizar TalkBack con el teclado.

Accesibilidad en los títulos de página

Los desarrolladores web y las herramientas de desarrollo van incorporando poco a poco elementos que van reduciendo la complejidad y la severidad de las barreras de accesibilidad presentes en las páginas de nueva creación. Pero estos esfuerzos se centran principalmente en las alternativas a imágenes, contrastes de color y, a veces, la estructura semántica de las páginas. En muchos casos siguen apareciendo barreras de accesibilidad relacionadas con la comprensión del sitio que se está navegando o de los mecanismos de navegación y orientación en un sitio web. En la mayoría de ocasiones este problema se debe al desconocimiento de las necesidades de estos mecanismos de orientación y navegación.

Título de página

El título de una página web es un mecanismo de orientación al que no se le presta actualmente mucha importancia. Incluso en muchos casos el desarrollador desconoce cómo cambiar el valor del título de la página sobre todo si desarrolla webs del tipo Single Page Application en la que toda la experiencia de navegación aparentemente se desarrolla sin saltar a otras páginas web.

El título de una página web es un mecanismo de navegación muy útil para personas con discapacidad que no pueden comprender una página de un vistazo.

Esta necesidad de accesibilidad se recoge en el criterio de éxito 2.4.2 de WCAG 2.0. Puedes leer la documentación oficial de la WAI para el criterio de éxito 2.4.2 understanding page titled.

Este criterio de éxito es de nivel A por lo que es de obligado cumplimiento en todas las legislaciones nacionales de Europa y Estados Unidos así como en las legislaciones de otros países ya que en todos ellos el nivel de mínimo cumplimiento legal es el de AA.

Título de página apropiado

Se considera como válido y accesible un título de página que identifique claramente el propósito y el contenido de la página que se está consultando.

En muchos casos el título de las páginas consiste en el uso del nombre de la empresa o producto que se está consultando. 

Imaginemos por ejemplo la experiencia de navegación por un sitio web especializado en la venta de productos de jardinería. Lo habitual es encontrar que el título de todas las páginas es algo como El jardinero en casa. Y utiliza este valor para titular todas las páginas del sitio web. Esto hace que el título de la página no ayude como mecanismo de orientación.

Sigamos imaginando y en nuestro sitio de jardinería encontramos que hay secciones de quienes somos, contactar, tienda, noticias y galería de fotos. Con esta complejidad en la estructura de secciones y contenidos es cada vez más necesario un título de página que refleje la sección que estamos consultando sin olvidar el nombre del sitio web. Un título de página más apropiado para estos contenidos podría ser: El jardinero en casa – quienes somos.

Pero si seguimos profundizando en la experiencia de navegación y nos movemos dentro de la tienda consultando productos el título de página que muestra el nombre del sitio y la sección no es suficiente. Además debemos añadir al título de página el nombre del contenido concreto que estamos consultando en esa página. Un título de página más apropiado sería: El jardinero en casa – Tienda – Tijeras de podar modelo Acme.

Con esta información una persona puede comprender dónde está y qué contenido principal se va a encontrar en la página.

Declaración del título de página

La declaración del título de página se realiza dentro del fichero HTML en la cabecera de la página (elemento <head></head>) y se utiliza el tag <title>.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />

    <title>El título de la página</title>

  </head>

  <body></body>

</html>

Esta declaración dentro del código HTML es apropiada cuando utilizamos tecnologías en las que tenemos total control del código HTML que se envía a los navegadores web de los usuarios.

En el caso de utilizar tecnologías como las utilizadas en las Single Page Applications como React o Angular debemos hacer uso de Javascript para actualizar el valor del título de la página.

La propiedad title del objeto document nos proporciona esta posibilidad de actualizar el título de nuestra página. Por ejemplo la siguiente línea en javascript actualizará el título de la página:

function setTitlePageWithProduct(productName) {

  document.title = "El jardinero en casa - Tienda - " + productName

}

Esta función se podría utilizar cada vez que se vaya a renderizar el componente que muestra la información del producto de la tienda.

Con toda esta información ya no hay excusas para que los desarrolladores no proporcionen buenos y accesibles títulos en sus páginas web.

Disponible la librería SpeechManager para MacOS, iOS, TvOS y WatchOS

La librería SpeechManager proporciona diversas funciones para poder controlar los sistemas de síntesis de voz que ofrece Apple en sus diversas plataformas.

Con SpeechManager podremos utilizar tanto la síntesis de voz del sistema como la de la propia API de accesibilidad.

Este framework se distribuye como un paquete compatible con Swift Package Manager por lo que la integración en proyectos con XCode está garantizada.

La librería se ha publicado bajo la licencia MIT por lo que es totalmente libre y únicamente se requiere respetar la autoría de la misma.

Puedes encontrar esta librería en la página del repositorio de SpeechManager en el Github de Tyflos accessible software.