Un blog sobre accesibilidad, usabilidad, diseño para todos y nuevas tecnologías
Hoy, 18 de mayo, es el Día Mundial para Promover la Concienciación sobre la Accesibilidad Web.
A lo largo del día se realizarán multitud de eventos onLine como en el que participo de la Expo+Accesible.
En la web oficial del Global Accessibility Awareness Day se recoge más información sobre estos eventos.
En la web en castellano del Global Accessibility Awareness Day se recoge información en español.
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.
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.
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.
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.
El uso de certificados SSL en las páginas webs es practicamente de uso obligatorio. De esta forma podemos navegar con confianza por Internet.
En muchos casos la empresa que aloja un proyecto web ofrece certificados SSL a sus clientes estos, en la mayoría de los casos, implican un aumento en el precio del servicio de alojamiento web. Hay organizaciones como Let’s encrypt que ofrecen certificados SSL de forma gratuita y renovables cada 3 meses pero su interfaz web puede resultar confusa o inaccesible.
Para agilizar estos procesos de creación de certificados SSL se han desarrollado herramientas de certificación para Let’s Encrypt para que cualquier persona pueda encontrar la que le resulte más cómoda y accesible.
Una de estas herramientas es Certbot para Mac que resulta totalmente accesible al tratarse de una aplicación de Terminal.
Esta aplicación es fácil de instalar si estamos utilizando Homebrew en nuestro mac.
Simplemente debemos abrir una Terminal y ejecutar:
brew install certbot
Tras la instalación tendremos disponible Certbot en nuestro Mac.
Para poder usar Certbot con garantías es necesario saber utilizar la Terminal de Mac y saber crear ficheros desde la Terminal de Mac.
Una vez instalado Certbot deberemos ejecutar el siguiente comando:
sudo certbot certonly --manual
En la Terminal nos aparecerán diversas instrucciones a seguir. Lo primero que se nos pedirá es el dominio a certificar. Deberemos introducir el nombre de nuestro dominio, por ejemplo, programaraciegas.net
En la terminal se nos indicará que debemos crear un fichero de texto con una serie de números y letras y subirlos a una ruta URL de nuestro sitio web. Podemos copiar toda la pantalla de la Terminal y leerla cómodamente e un editor de textos. De esta forma podremos seleccionar y pegar en el nuevo fichero los datos que Certbot nos indica.
Una vez subido el fichero con el validador de certificado podemos probar en nuestro navegador web que la URL que utilizará Let’s Encrypt funciona. Una vez comprobado podemos pulsar enter en la Terminal para que Certbot continúe con su trabajo.
Tras el proceso de validación Certbot habrá creado unos ficheros en la carpeta /etc/letsencrypt/live/nuestro-dominio-registrado donde estarán los distintos datos del certificado.
Para ver estos ficheros debemos utilizar el comando cat desde la Terminal.
Visitando la página de gestión de nuestro dominio, normalmente CPanel, deberemos buscar la sección de SSL/TLS para introducir nuestro certificado SSL.
Dependiendo de cada compañía el proceso cambia por lo que es recomendable consultar la documentación que ofrece la compañía de alojamiento web para este proceso.
Una vez terminado el proceso nuestro certificado SSL garantizará que nuestro sitio web es seguro para todas las personas que navegan por Internet.
Este último artículo sobre Web Speech API resuelve un problema que podíamos encontrarnos cuando un usuario visitase nuestra página web: su navegador no soporta Web Speech API.
Continuar leyendo «Cómo saber si el navegador web del usuario soporta Web Speech API»
En artículos anteriores hemos visto cómo utilizar Web Speech API para que nuestro navegador verbalice mensajes pero a veces necesitamos que esa verbalización se pause.
Continuar leyendo «Cómo pausar y reanudar la locución con Web Speech API»
En el artículo Haz hablar a tu web con Web Speech API aprendimos a utilizar mediante Javascript la tecnología Web Speech API y ahora aprenderemos a crear un botón para nuestra web que al pulsarlo lea todo el contenido principal de la página.
Continuar leyendo «Como leer el contenido principal de una página con Web Speech API»