La accesibilidad web tiene mala fama de tema aburrido y caro, y suele quedarse en la lista de «cuando tengamos tiempo». Merece la pena replantearlo por tres motivos muy concretos: afecta a mucha más gente de la que parece, buena parte de lo que arreglas mejora la web para todos, y desde hace unos años hay obligaciones legales que alcanzan a bastantes empresas privadas en España.
La buena noticia: la mayor parte de los problemas de accesibilidad de un WordPress normal son cuatro o cinco cosas repetidas, se detectan en una tarde y se arreglan sin rehacer nada.
Antes de empezar: qué detecta una máquina y qué no
Esto marca todo el enfoque, así que va primero.
Las herramientas automáticas —y la IA entre ellas— detectan de forma fiable en torno a un tercio de los problemas reales de accesibilidad. Son excelentes en lo medible: contraste de color insuficiente, una imagen sin atributo alt, un campo de formulario sin etiqueta, una jerarquía de encabezados rota.
Lo que no pueden juzgar es el sentido. Una imagen puede tener un alt que diga «imagen1.jpg» y la máquina lo dará por correcto porque el atributo existe. Un enlace que dice «haz clic aquí» pasa cualquier validador y es inútil para alguien que navega saltando de enlace en enlace.
Conclusión práctica: usa las herramientas para el barrido inicial y reserva media hora para probar a mano. Las dos partes juntas cubren la gran mayoría; ninguna de las dos sola basta.
Paso 1: barrido automático
Empieza con dos extensiones de navegador gratuitas: WAVE y axe DevTools. Las dos analizan la página abierta y señalan los problemas sobre el propio diseño.
Pásalas por cuatro páginas representativas: la portada, una entrada del blog, una página con formulario y —si vendes— una ficha de producto. No hace falta más para el diagnóstico inicial: los problemas de un WordPress son casi siempre del tema y de las plantillas, así que se repiten.
Apunta lo que salga. Verás que se agrupa en muy pocas categorías.
Paso 2: contraste de color
Es el problema número uno, con diferencia, y el más fácil de arreglar.
La norma pide una relación de contraste de al menos 4,5:1 entre texto y fondo para texto normal, y 3:1 para texto grande. En la práctica, los sospechosos habituales son siempre los mismos: el texto gris claro sobre blanco que queda tan elegante, los botones de color de marca con texto blanco encima, el texto sobre una imagen de cabecera y los enlaces del pie de página.
Aquí la IA ayuda de una forma muy concreta: dale tu paleta de marca y pídele combinaciones válidas.
«Mi paleta de marca es: [lista de colores en hexadecimal]. Calcula la relación de contraste de cada combinación de texto sobre fondo y dime cuáles cumplen WCAG AA (4,5:1 para texto normal). Para las que no cumplan, propón el ajuste mínimo del color de texto que sí cumpla manteniendo el tono lo más parecido posible al original.»
Ese «ajuste mínimo manteniendo el tono» es la clave para que el diseñador no se eche las manos a la cabeza: no se trata de cambiar la marca, sino de oscurecer un gris lo justo.
Paso 3: textos alternativos que sirvan
这个 alt de una imagen es lo que oye alguien que usa un lector de pantalla. También es lo que Google usa para entender la imagen, así que esto es accesibilidad y SEO a la vez.
Tres reglas que resuelven el noventa por ciento de los casos:
- Describe la función, no la imagen. Si la foto ilustra un paso de un tutorial, el
altdebe decir qué se ve en ese paso, no «captura de pantalla». - Si la imagen es decorativa, deja el
altvacío. Vacío de verdad (alt=""), no ausente. Así el lector de pantalla la salta en lugar de leer el nombre del fichero. - Si la imagen es un enlace o un botón, el
altdescribe el destino, no el dibujo. Un icono de carrito que lleva al carrito es «Ver carrito», no «icono de carrito».
Para revisar el estado actual, en Medios > Biblioteca puedes ir viendo el campo de texto alternativo. Si tienes cientos de imágenes, prioriza: las de las páginas con más visitas y las que son enlaces.
La IA puede proponer textos alternativos a partir de las imágenes, y lo hace razonablemente bien. Pero revísalos: describe lo que ve, sin saber para qué está puesta la imagen en tu página, y esa diferencia es justo la que importa.
Paso 4: navegación por teclado
Esta prueba no la hace ninguna herramienta por ti y es la que más problemas destapa. Cuesta cinco minutos.
Abre tu web, deja el ratón quieto y recórrela solo con el tabulador:
- ¿Ves siempre dónde estás? Debe haber un indicador visible en el elemento enfocado. Muchos temas lo eliminan por estética con un
outline: none, y eso deja a ciegas a quien navega así. - ¿El orden tiene sentido? 它必须遵循视觉顺序。
- 你能打开下拉菜单吗？ 仅响应鼠标悬停的菜单无法通过键盘访问。
- 你能关闭弹出窗口吗？ 尝试使用Escape键。一个无法用键盘关闭的Cookie通知或订阅窗口会阻塞整个网站。
- 你是否被困在某个地方？ 一个嵌入式播放器或一个捕获焦点但不释放的地图是一个陷阱。
第4点值得特别关注，因为它影响几乎所有网站：在Cookie通知、一些邮件收集窗口和一些聊天工具之间，有很多可能阻碍键盘导航的候选者。
第5步：表单
表单集中了许多问题，因为它们是互动性最强的部分。
检查每个字段是否都有一个真正的关联标签——而不仅仅是字段内的示例文本，该文本在输入时会消失——错误消息要解释如何修正，而不是只说“错误”，错误也要通过文本提示，而不仅仅是把边框涂成红色，并且必填字段的指示方式要不仅仅是一个彩色星号。
如果你使用表单插件，大部分问题都会默认解决。如果表单是主题自带的或手动创建的，请完整检查。我们的指南关于 WordPress中的联系表单 回顾最常见的选项。
第6步：标题结构
很多人根据字体大小使用标题：“我想要这个文本大一点，就用H2”。对于使用屏幕阅读器浏览的用户来说，标题是文档的目录，从一个标题跳到另一个标题是主要的移动方式。
规则：只有一个 H1 每页一个，即标题；不要跳过级别（从 H2 a H4 直接跳过，不行）；并且标题文本要描述该部分。
为了快速检查，WAVE扩展有一个大纲视图，可以让你一目了然地看到层级结构。你也可以将页面的HTML粘贴给AI，并要求它提供带有级别跳跃标记的标题树。
关于自动“可访问性覆盖层”
值得提醒，因为它们广告很多。
它们是插件或脚本，承诺通过添加一行代码和一个带有对比度和字体大小选项的浮动按钮，使你的网站可访问并符合规范。
值得注意的是，这些解决方案受到了残疾用户协会和可访问性专家的严重批评，并且在多个国家成为诉讼对象，正是因为它们未能解决所承诺的问题。在许多情况下，它们会添加一个干扰用户已配置的屏幕阅读器的层。
没有捷径：可访问性是在网站的HTML和CSS中解决的，而不是通过一个覆盖层。如果你要投资，请投资于修正主题，而不是掩盖问题。
常见问题
我有法律义务吗？
在西班牙，公共部门多年来一直有义务。对于私营企业，第11/2023号法律转化了欧洲可访问性指令，并将义务扩展到某些数字服务——包括电子商务、银行、交通等——自2025年6月起实施，微型企业除外。如果你的网站销售或提供所涵盖的服务，建议咨询顾问，因为具体范围取决于你的活动和规模。
需要多长时间才能使其达到合格水平？
像这样的审计，一下午。修正检测到的问题，根据主题的修改程度，需要几小时到几天。大部分通常是对比度和替代文本，这些是大量的机械工作，但没有技术难度。
会改善SEO吗？
不直接，但许多修正与确实重要的良好实践相符：描述性替代文本、连贯的标题层级、有意义的链接文本和语义化HTML。属于那种修复一件事会附带改善另一件事的情况。
我可以直接让AI修正代码吗？
对于有限的更改——添加一个 aria-label，修正标题层级，调整颜色——效果很好。要重写主题模板，不行：它没有你网站的上下文，会破坏一些东西。如果你修改主题文件，请务必在 子主题 并带有备份。
总结
多年来，可访问性一直被宣传为一个庞大而昂贵的项目，对于复杂的网站可能确实如此。对于普通的WordPress网站则不然：它涉及对比度、替代文本、键盘、表单和标题。五个类别，一下午的审查和一些时间进行修正。
AI是可计算部分和生成草稿的好副驾驶，但它不适用于最能揭示问题的测试，那就是用Tab键浏览你自己的网站。那个测试你自己做：只需五分钟，它是所有测试中最具启发性的。
如果你喜欢这类实用审查，在我们的 免费工具库 你有一些工具可以在浏览器中完全运行，无需上传任何内容到服务器。
