Migración de PDFs incrustados en sitio web a HTML accesible, si
1. Extraer el contenido del PDF
- Abrir el PDF en programas como Adobe Acrobat Pro, Preview o Microsoft Word.
- Copiar el contenido bruto (texto, encabezados, imágenes, tablas).
- Exportar a Word o a texto plano si es necesario, evitando errores de formato innecesarios en el HTML.
2. Estructuración el contenido de forma semántica
Utilizar elementos semánticos de HTML5:
- <h1>, <h2>, etc. Para los encabezados
- <p> para párrafos
- <ul> o <ol> para listas
- <table> con <th> y <caption> para tablas de datos
- <section>, <article>, <aside>, <nav> y <main> según sea necesario
⚠️ No copiar y pegar el diseño visual del PDF directamente. Reestructurar el contenido con base en la jerarquía de la información y la claridad para el usuario, no en cómo se veía el PDF.
3. Asegurarse de que las imágenes tengan texto alternativo
- Toda imagen (por ejemplo, gráficos, logotipos, diagramas) debe incluir un atributo alt descriptivo.
- Si la imagen contiene texto, incluirlo en el alt o proporcionar una descripción extensa acerca de la imagen.
4. Preservar las características de accesibilidad
Utilizar:
- aria-label o aria-describedby si es necesario
- Textos de enlace descriptivos y claros (evitar "haz clic aquí")
- Colores con contraste adecuado
- Un diseño navegable con teclado (sin acciones exclusivas del mouse)
5. Hacerlo responsive (adaptable)
- Asegurarse de que el contenido se adapte al tamaño de la pantalla usando media queries de CSS o frameworks responsivos como Bootstrap o Tailwind.
- Evitar diseños con anchos fijos que no se adapten en dispositivos móviles.
6. Probar con herramientas de accesibilidad
Usar herramientas como:
- WAVE – Evaluador de accesibilidad web
- axe DevTools
- Lectores de pantalla del navegador (Voiceover, nvda, jaws)
- verifica: navegación con teclado, orden de encabezados, contraste de colores y claridad de etiquetas.
7. Reemplazar el pdf incrustado por una sección o página html
sustituir el pdf por una:
- página web dedicada (por ejemplo, /resumen-del-informe)
- dejar el pdf solo como descarga opcional, claramente indicada.
Contexto general del proyecto
- El sitio está montado en DIVI, por lo que el trabajo tendría que hacerse en ese ambiente.
- Ejemplo de una de las páginas en cuestión: https://www.1in4coalition.org/access-coordinator/
Plazo de Entrega: No definido