1. Introducción
En la era digital actual, la web es el principal medio de acceso a la información y los servicios en numerosos ámbitos, incluyendo la sanidad, la administración pública y la educación. Por ello, es fundamental garantizar que todas las personas, independientemente de sus capacidades físicas, cognitivas o tecnológicas, puedan acceder y utilizar los servicios digitales sin barreras.
El Servicio Andaluz de Salud (SAS) debe garantizar que sus plataformas digitales, como los sistemas de gestión de citas médicas, la historia clínica electrónica o los portales de información sanitaria, sean accesibles y usables para pacientes, profesionales sanitarios y administrativos.
Los conceptos clave en este ámbito incluyen:
✅ Accesibilidad Web: Diseño web que permite a personas con discapacidades interactuar sin dificultades.
✅ Usabilidad Web: Creación de interfaces fáciles de usar, intuitivas y eficientes.
✅ Diseño Universal: Enfoque de desarrollo que garantiza accesibilidad sin necesidad de adaptaciones específicas.
✅ Diseño Web Adaptativo: Técnica que optimiza la visualización en distintos dispositivos y tamaños de pantalla.
Estos elementos son esenciales para cumplir con los estándares internacionales de accesibilidad y usabilidad y garantizar una experiencia de usuario óptima.
2. Accesibilidad Web
2.1 Definición
La accesibilidad web es el conjunto de principios, normativas y técnicas que permiten a todas las personas, incluidas aquellas con discapacidades físicas, sensoriales o cognitivas, navegar e interactuar con sitios web y aplicaciones sin restricciones.
La accesibilidad web beneficia a:
✔ Personas con discapacidad visual (ciegos, baja visión, daltonismo).
✔ Personas con discapacidad auditiva (sordos o con pérdida de audición).
✔ Personas con discapacidad motora (usuarios que no pueden usar un ratón o teclado convencional).
✔ Personas con discapacidad cognitiva (dificultades de aprendizaje o trastornos neurológicos).
✔ Usuarios en entornos adversos (iluminación deficiente, conexiones lentas, dispositivos antiguos).
2.2 Normativas y Estándares
- W3C (World Wide Web Consortium): Organismo internacional que desarrolla estándares para la web.
- WCAG (Web Content Accessibility Guidelines): Directrices internacionales de accesibilidad web.
- Ley 11/2007 de Acceso Electrónico de los Ciudadanos a los Servicios Públicos: Exige accesibilidad en portales públicos en España.
2.3 Principios Fundamentales de las WCAG
Las Pautas de Accesibilidad para el Contenido Web (WCAG) establecen cuatro principios clave (POUR):
🔹 Perceptible: Toda la información debe presentarse de manera clara para todos los usuarios.
🔹 Operable: Los elementos interactivos (formularios, botones, menús) deben poder usarse sin barreras.
🔹 Comprensible: El contenido debe ser fácil de entender, con navegación clara y coherente.
🔹 Robusto: Compatible con múltiples navegadores y tecnologías de asistencia.
2.4 Tecnologías de Asistencia
Para garantizar la accesibilidad, se utilizan herramientas como:
✔ Lectores de pantalla (NVDA, JAWS, VoiceOver).
✔ Navegación por teclado para usuarios con movilidad reducida.
✔ Subtítulos y transcripciones para contenido multimedia.
✔ Modos de alto contraste y ajuste de tamaño de fuente.
3. Usabilidad Web
3.1 Definición
La usabilidad web es la facilidad con la que los usuarios pueden navegar, comprender e interactuar con una interfaz digital de manera eficiente, intuitiva y sin frustraciones.
3.2 Características de la Usabilidad
✅ Eficiencia: El usuario debe alcanzar sus objetivos con el menor esfuerzo posible.
✅ Aprendizaje Rápido: Debe ser fácil de usar sin necesidad de formación previa.
✅ Memorabilidad: Los usuarios deben recordar cómo usar la web en visitas futuras.
✅ Satisfacción: La experiencia debe ser fluida y sin dificultades técnicas.
3.3 Factores que influyen en la Usabilidad
🔹 Diseño de la interfaz: Debe ser intuitiva y consistente.
🔹 Tiempo de carga: Los sitios deben cargar en menos de 3 segundos.
🔹 Accesibilidad en múltiples dispositivos: Compatible con móviles, tablets y ordenadores.
3.4 Métodos de Evaluación de la Usabilidad
Para medir la usabilidad, se utilizan pruebas como:
✔ Test de usuario (evaluación directa con usuarios reales).
✔ Análisis de clics y tiempo de navegación.
✔ Eye-tracking (seguimiento de la mirada para analizar la interacción con la interfaz).
4. Diseño Universal
4.1 Concepto
El Diseño Universal busca desarrollar interfaces accesibles para todas las personas, sin necesidad de adaptaciones específicas.
4.2 Principios del Diseño Universal
✔ Uso equitativo: Apto para personas con y sin discapacidad.
✔ Flexibilidad: Admite múltiples formas de interacción.
✔ Uso simple e intuitivo: Evita interfaces complejas.
✔ Tolerancia a errores: Minimiza los efectos de acciones incorrectas.
✔ Bajo esfuerzo físico: Reduce la fatiga en usuarios con limitaciones motoras.
4.3 Aplicaciones en el SAS
Ejemplos de Diseño Universal en sanidad:
✅ Citas médicas online accesibles para personas mayores.
✅ Plataformas de teleconsulta con compatibilidad para lectores de pantalla.
✅ Interfaces simplificadas para evitar confusión en pacientes con dificultades cognitivas.
5. Diseño Web Adaptativo (Responsive Design)
5.1 Definición
El Diseño Web Adaptativo permite que los sitios web se ajusten automáticamente a distintos tamaños de pantalla y dispositivos.
5.2 Características Clave
🔹 Uso de Media Queries: Modifican estilos según la resolución del dispositivo.
🔹 Diseño Flexible: Emplea unidades relativas (%, em, rem) en lugar de píxeles fijos.
🔹 Imágenes Responsivas: Se redimensionan automáticamente.
5.3 Beneficios
✅ Mejora la experiencia del usuario en móviles y tablets.
✅ Optimiza el SEO, ya que Google favorece sitios adaptativos.
✅ Evita la necesidad de desarrollar versiones separadas para móvil y escritorio.
6. Conclusión
📌 Accesibilidad, usabilidad, diseño universal y diseño web adaptativo son principios fundamentales en la web moderna.
📌 Implementar estos estándares garantiza una experiencia digital óptima para todos los usuarios, independientemente de sus capacidades o dispositivos.
📌 En el contexto del Servicio Andaluz de Salud (SAS), aplicar estos conceptos en plataformas sanitarias mejora la interacción con pacientes, médicos y administrativos.
CUESTIONARIO – TEMA 48: ACCESIBILIDAD Y USABILIDAD. W3C. DISEÑO UNIVERSAL. DISEÑO WEB ADAPTATIVO
1. ¿Qué es la accesibilidad web?
A) La capacidad de acceder a una página web sin conexión a Internet.
B) Un conjunto de técnicas para que las páginas sean rápidas.
C) La capacidad de una página web para ser utilizada por todas las personas, incluidas aquellas con discapacidades.
D) Un método para mejorar la seguridad en los sitios web.
✅ Respuesta correcta: C) La capacidad de una página web para ser utilizada por todas las personas, incluidas aquellas con discapacidades.
💡 Explicación: La accesibilidad web garantiza que todos los usuarios, incluidas las personas con discapacidades, puedan interactuar con los sitios web sin barreras.
2. ¿Qué organización establece los estándares de accesibilidad web?
A) W3C
B) IEEE
C) ISO
D) ICANN
✅ Respuesta correcta: A) W3C
💡 Explicación: El World Wide Web Consortium (W3C) define estándares como WCAG (Web Content Accessibility Guidelines) para garantizar la accesibilidad web.
3. ¿Qué significa WCAG?
A) Web Certified Accessibility Guidelines
B) Web Content Accessibility Guidelines
C) World Computer Accessibility Group
D) Wireless Communication and Accessibility Guidelines
✅ Respuesta correcta: B) Web Content Accessibility Guidelines
💡 Explicación: Las WCAG son las pautas internacionales de accesibilidad web establecidas por el W3C para garantizar sitios accesibles.
4. ¿Cuáles son los cuatro principios básicos de las WCAG?
A) Seguro, Operativo, Flexible y Accesible.
B) Rápido, Estable, Perceptible y Universal.
C) Perceptible, Operable, Comprensible y Robusto.
D) Seguro, Modular, Confiable y Adaptable.
✅ Respuesta correcta: C) Perceptible, Operable, Comprensible y Robusto.
💡 Explicación: Las WCAG se basan en los principios POUR: Perceptible, Operable, Comprensible y Robusto, garantizando accesibilidad universal.
5. ¿Cuál de los siguientes NO es un criterio de accesibilidad?
A) Contraste adecuado de colores para usuarios con discapacidad visual.
B) Uso de subtítulos en videos.
C) Bloqueo de usuarios con software de asistencia.
D) Compatibilidad con lectores de pantalla.
✅ Respuesta correcta: C) Bloqueo de usuarios con software de asistencia.
💡 Explicación: La accesibilidad busca facilitar el acceso, no bloquear el uso de herramientas como lectores de pantalla o software de asistencia.
6. ¿Qué tecnología ayuda a la accesibilidad web?
A) CSS
B) ARIA
C) XML
D) SEO
✅ Respuesta correcta: B) ARIA
💡 Explicación: WAI-ARIA (Accessible Rich Internet Applications) proporciona atributos para hacer accesibles elementos dinámicos en la web.
7. ¿Qué aspecto mejora la usabilidad en una página web?
A) Tener muchos efectos visuales complejos.
B) Diseñar la navegación de forma intuitiva.
C) Hacer que los usuarios memoricen rutas complicadas.
D) Incluir elementos en movimiento sin control.
✅ Respuesta correcta: B) Diseñar la navegación de forma intuitiva.
💡 Explicación: Una buena usabilidad permite que los usuarios naveguen y comprendan la web fácilmente, sin esfuerzo ni confusión.
8. ¿Qué es el Diseño Universal?
A) Un conjunto de normas exclusivas para personas con discapacidad.
B) Un método de desarrollo que permite el acceso a todas las personas, sin importar sus capacidades.
C) Un tipo de diseño gráfico para logotipos.
D) Un estándar de seguridad web.
✅ Respuesta correcta: B) Un método de desarrollo que permite el acceso a todas las personas, sin importar sus capacidades.
💡 Explicación: El Diseño Universal busca que cualquier persona, sin importar su condición, pueda acceder y usar una interfaz sin restricciones.
9. ¿Qué principio NO pertenece al Diseño Universal?
A) Uso equitativo
B) Flexibilidad en el uso
C) Barreras de acceso intencionadas
D) Bajo esfuerzo físico
✅ Respuesta correcta: C) Barreras de acceso intencionadas.
💡 Explicación: El Diseño Universal busca eliminar barreras, no crearlas, para que todas las personas puedan acceder a la web.
10. ¿Cuál de los siguientes NO es un beneficio del Diseño Web Adaptativo?
A) Mejora la experiencia del usuario.
B) Optimiza el SEO en buscadores.
C) Evita la necesidad de desarrollar aplicaciones web separadas.
D) Hace que la web sea más lenta.
✅ Respuesta correcta: D) Hace que la web sea más lenta.
💡 Explicación: El Diseño Web Adaptativo optimiza la web para distintos dispositivos, mejorando velocidad y experiencia de usuario.
11. ¿Qué tecnología permite adaptar un sitio web a distintos tamaños de pantalla?
A) FTP
B) API REST
C) Media Queries
D) XML
✅ Respuesta correcta: C) Media Queries
💡 Explicación: Las Media Queries en CSS permiten definir estilos según el tamaño del dispositivo para lograr un diseño responsivo.
12. ¿Qué significa que un sitio web sea «perceptible» según las WCAG?
A) El contenido debe ser presentado de manera que todos los usuarios puedan acceder a él, incluyendo aquellos con discapacidades visuales y auditivas.
B) El contenido debe estar optimizado para dispositivos móviles.
C) El sitio debe ser visualmente atractivo y moderno.
D) El contenido debe estar disponible en múltiples idiomas.
✅ Respuesta correcta: A) El contenido debe ser presentado de manera que todos los usuarios puedan acceder a él, incluyendo aquellos con discapacidades visuales y auditivas.
💡 Explicación: Perceptible significa que el contenido debe ser presentado de una manera que los usuarios con diversas capacidades sensoriales puedan percibirlo, por ejemplo, mediante subtítulos o lectores de pantalla.
13. ¿Qué característica tiene un diseño web adaptativo?
A) Solo usa imágenes estáticas.
B) Los elementos de la página cambian dinámicamente según el tamaño de la pantalla del dispositivo.
C) La web solo funciona en dispositivos de escritorio.
D) Exige usar un diseño fijo para cada tipo de dispositivo.
✅ Respuesta correcta: B) Los elementos de la página cambian dinámicamente según el tamaño de la pantalla del dispositivo.
💡 Explicación: El diseño web adaptativo permite que la interfaz se ajuste automáticamente en función de las dimensiones de la pantalla, mejorando la experiencia en móviles, tabletas y ordenadores.
14. ¿Qué es un ejemplo de tecnología de asistencia utilizada para la accesibilidad web?
A) JavaScript
B) CSS
C) Lector de pantalla
D) PHP
✅ Respuesta correcta: C) Lector de pantalla
💡 Explicación: Los lectores de pantalla son herramientas tecnológicas que leen en voz alta el contenido de la web para personas con discapacidad visual.
15. ¿Cuál de los siguientes es un ejemplo de un sistema de gestión de contenido (CMS)?
A) JavaScript
B) WordPress
C) Python
D) SQL
✅ Respuesta correcta: B) WordPress
💡 Explicación: WordPress es un CMS (Content Management System) utilizado para crear, gestionar y editar contenido web de forma accesible, sin necesidad de conocimientos técnicos avanzados.
16. ¿Qué es una media query en CSS?
A) Un comando para agregar imágenes a la web.
B) Una regla que aplica estilos diferentes dependiendo de la resolución de pantalla del dispositivo.
C) Un script en JavaScript para verificar la compatibilidad de un sitio web.
D) Un tipo de archivo de imagen usado en la web.
✅ Respuesta correcta: B) Una regla que aplica estilos diferentes dependiendo de la resolución de pantalla del dispositivo.
💡 Explicación: Las media queries permiten aplicar estilos específicos en función de las características del dispositivo, como el tamaño de pantalla.
17. ¿Qué es el principio de «robusto» en las WCAG?
A) El contenido web debe ser accesible solo en ciertos navegadores.
B) La web debe ser compatible con tecnologías de asistencia y funcionar bien en navegadores actuales.
C) El diseño debe ser visualmente atractivo.
D) Solo los dispositivos modernos deben poder acceder a la web.
✅ Respuesta correcta: B) La web debe ser compatible con tecnologías de asistencia y funcionar bien en navegadores actuales.
💡 Explicación: El principio robusto garantiza que el contenido siga siendo accesible a través de navegadores y tecnologías de asistencia actuales y futuras.
18. ¿Cuál es el objetivo principal del diseño universal?
A) Crear una web que sea exclusivamente para personas con discapacidades.
B) Diseñar una web que sea accesible y usable para todas las personas sin necesidad de modificaciones.
C) Hacer que la web sea exclusivamente visual.
D) Crear una web con contenido únicamente en texto.
✅ Respuesta correcta: B) Diseñar una web que sea accesible y usable para todas las personas sin necesidad de modificaciones.
💡 Explicación: El diseño universal busca crear productos digitales accesibles para todos los usuarios, sin requerir adaptaciones especiales.
19. ¿Qué significa «flexibilidad» en el contexto del diseño universal?
A) Ofrecer una única forma de interactuar con el contenido.
B) Permitir que el sitio web se pueda utilizar de diferentes maneras, adaptándose a las necesidades del usuario.
C) Crear interfaces con solo texto.
D) Usar un solo tipo de dispositivo para interactuar con la web.
✅ Respuesta correcta: B) Permitir que el sitio web se pueda utilizar de diferentes maneras, adaptándose a las necesidades del usuario.
💡 Explicación: La flexibilidad permite que los usuarios tengan múltiples opciones para interactuar con el contenido, adaptándose a sus necesidades y capacidades.
20. ¿Cuál de los siguientes beneficios tiene un sitio web con diseño adaptativo?
A) Solo es accesible desde un dispositivo móvil.
B) Mejora la experiencia de usuario en cualquier dispositivo, optimizando la visualización y la funcionalidad.
C) Solo es accesible en dispositivos de escritorio.
D) No es compatible con navegadores antiguos.
✅ Respuesta correcta: B) Mejora la experiencia de usuario en cualquier dispositivo, optimizando la visualización y la funcionalidad.
💡 Explicación: El diseño adaptativo permite que un sitio web se ajuste automáticamente para ofrecer la mejor experiencia de usuario en múltiples dispositivos (móviles, tabletas, escritorios).
Otro cuestionario:
1. ¿Qué organización establece los estándares de accesibilidad web?
A) ISO
B) IEEE
C) W3C
D) IETF
✅ Respuesta correcta: C) W3C
💡 Explicación: El World Wide Web Consortium (W3C) es el organismo que define los estándares web, incluyendo las Pautas de Accesibilidad para el Contenido Web (WCAG).
❌ Otras opciones incorrectas:
- A) La ISO regula estándares internacionales, pero no específicos de accesibilidad web.
- B) IEEE se centra en estándares de ingeniería eléctrica y electrónica.
- D) IETF desarrolla protocolos de comunicación en Internet, pero no accesibilidad web.
2. ¿Cuál es el objetivo principal de la accesibilidad web?
A) Hacer que los sitios web carguen más rápido.
B) Garantizar que todas las personas puedan usar la web sin barreras.
C) Diseñar sitios atractivos para los motores de búsqueda.
D) Implementar solo compatibilidad con dispositivos móviles.
✅ Respuesta correcta: B) Garantizar que todas las personas puedan usar la web sin barreras.
💡 Explicación: La accesibilidad web busca que usuarios con discapacidades o limitaciones tecnológicas puedan interactuar con sitios web sin dificultades.
3. ¿Qué significa WCAG?
A) Web Code Accessibility Guidelines
B) World Content Accessibility Group
C) Web Content Accessibility Guidelines
D) Web Consortium for Accessibility Governance
✅ Respuesta correcta: C) Web Content Accessibility Guidelines
💡 Explicación: Las WCAG (Pautas de Accesibilidad para el Contenido Web) son las directrices establecidas por el W3C para garantizar la accesibilidad en la web.
4. ¿Cuáles son los cuatro principios de accesibilidad según las WCAG?
A) Simplicidad, Adaptabilidad, Compatibilidad y Seguridad
B) Perceptible, Operable, Comprensible y Robusto
C) Rápido, Versátil, Inclusivo y Eficiente
D) Accesible, Seguro, Inteligente y Adaptativo
✅ Respuesta correcta: B) Perceptible, Operable, Comprensible y Robusto
💡 Explicación: Estos principios garantizan que un sitio web sea fácil de percibir, interactuar, entender y compatible con tecnologías de asistencia.
5. ¿Qué tecnología de asistencia utilizan las personas con discapacidad visual para navegar en la web?
A) Trackpad avanzado
B) Lectores de pantalla
C) Reconocimiento facial
D) Captcha interactivo
✅ Respuesta correcta: B) Lectores de pantalla
💡 Explicación: Herramientas como NVDA, JAWS y VoiceOver permiten que los usuarios escuchen el contenido de la web en voz alta.
6. ¿Cuál de los siguientes es un beneficio del diseño universal?
A) Necesita menos pruebas de usabilidad.
B) Se enfoca solo en usuarios con discapacidad.
C) Evita la necesidad de adaptaciones específicas.
D) Solo es útil en aplicaciones móviles.
✅ Respuesta correcta: C) Evita la necesidad de adaptaciones específicas.
💡 Explicación: El diseño universal permite que los sitios web sean accesibles para todas las personas, sin requerir ajustes específicos según cada usuario.
7. ¿Cuál de estos principios forma parte del diseño universal?
A) Uso equitativo
B) Complejidad máxima
C) Exclusividad del usuario
D) Dificultad para acceder a los contenidos
✅ Respuesta correcta: A) Uso equitativo
💡 Explicación: El uso equitativo garantiza que todos los usuarios puedan acceder a la web sin barreras, independientemente de sus capacidades.
8. ¿Qué elemento ayuda a mejorar la accesibilidad para usuarios con discapacidad auditiva?
A) Subtítulos en videos
B) Enlaces ocultos
C) Uso de GIFs animados
D) Bloqueo de teclado
✅ Respuesta correcta: A) Subtítulos en videos
💡 Explicación: Los subtítulos permiten que personas con discapacidad auditiva comprendan el contenido multimedia.
9. ¿Cuál es una característica del diseño web adaptativo?
A) Usa tamaños de fuente fijos
B) Se adapta automáticamente a cualquier dispositivo
C) Funciona solo en dispositivos móviles
D) Solo permite navegación mediante teclado
✅ Respuesta correcta: B) Se adapta automáticamente a cualquier dispositivo
💡 Explicación: El diseño web adaptativo (Responsive Design) permite que un sitio web ajuste su estructura y contenido según el tamaño de pantalla.
10. ¿Qué lenguaje se usa comúnmente para aplicar diseño web adaptativo?
A) HTML
B) CSS con Media Queries
C) Java
D) SQL
✅ Respuesta correcta: B) CSS con Media Queries
💡 Explicación: CSS con Media Queries permite modificar estilos según la resolución del dispositivo, ajustando tamaños y disposición de elementos.
11. ¿Qué técnica se usa para hacer imágenes responsivas en un sitio web?
A) Uso de px en dimensiones de imagen
B) Aplicación de max-width: 100% en CSS
C) Bloqueo de tamaño de imágenes
D) Compresión extrema de imágenes
✅ Respuesta correcta: B) Aplicación de max-width: 100% en CSS
💡 Explicación: max-width: 100% permite que las imágenes se ajusten dinámicamente al ancho del contenedor sin distorsionarse.
12. ¿Cuál es la principal ventaja de un sitio web accesible?
A) Mejora la experiencia del usuario para todas las personas
B) Permite cargar más publicidad
C) Es más difícil de desarrollar
D) Solo funciona en dispositivos específicos
✅ Respuesta correcta: A) Mejora la experiencia del usuario para todas las personas
💡 Explicación: La accesibilidad web mejora la usabilidad y el acceso a la información para cualquier usuario, con o sin discapacidad.
