Macdown, un editor de textos sencillos en Markdown para MacOS

A la hora de escribir textos en formato Markdown, aunque podemos utilizar cualquier editor en texto plano, a veces nos resulta muy útil poder ver el resultado de la maquetación de nuestro documento para detectar posibles errores en el marcado de nuestro documento.

Un editor básico de Markdown nos debe permitir poder visualizar el resultado de nuestro documento en una vista web. Esto es lo que nos permite Macdown. Este editor de código abierto y de distribución gratuita nos permite editar documentos en formato Markdown, visualizar su contenido en la vista web y exportar nuestros documentos a formato PDF y HTML.

Este editor resulta muy accesible con los diversos productos de apoyo para MacOS y su uso es bastante sencillo.

Participación en el episodio 4 del podcast Gafotas, cegatos y sus aparatos

Recientemente se ha publicado el episodio 4 del podcast Gafotas, cegatos y sus aparatos. Este podcast de reciente creación trata sobre diferentes temas tecnológicos a través de una charla amena con Arturo, Ricardo y algúna persona invitada.

Ellos se describen como un podcast sobre accesibilidad, tecnología y cualquier tema que nos interese. Aprender y divertirnos es nuestro lema.

En este episodio mantengo una charla divulgativa sobre las baterías, su tecnología, sus límites y cómo afectan a la evolución de esos aparatos que solemos llevar encima.

Puedes escuchar el episodio 4 del podcast en su página web.

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.

Escribir fracciones con MathML

Una fracción es una forma de representar una parte de un entero o una división entre dos números enteros. La escritura de fracciones resulta una de las mayores barreras de accesibilidad debido a que las fracciones ocupan una disposición en vertical en la que el numerador, el denominador y la barra de fracción se distribuyen en 3 líneas de lectura. Con MathML se nos ofrece una forma de codificar una fracción y que resulte accesible a la hora de leer matemáticas con fracciones utilizando productos de apoyo.

Para representar fracciones en MathML, se utiliza la etiqueta <mfrac>, que crea una fracción con un numerador y un denominador.

La estructura de una fracción en MathML es la siguiente:

<math>
<mfrac>
<mi>a</mi> <!-- Numerador -->
<mi>b</mi> <!-- Denominador -->
</mfrac>
</math>

Por ejemplo para escribir una fracción cuyo numerador sea el número 12 y el denominador el número 3 se utilizaría el siguiente código MathML:

<math>
<mfrac>
<mi>12</mi>
<mi>3</mi>
</mfrac>
</math>

Y se leería de la siguiente forma:

12 3

Dependiendo de la configuración del producto de apoyo el usuario podrá leer la fracción de la forma más óptima a sus necesidades de accesibilidad.