Guias de Accesibilidad - MedTime

Identificador: MTS-UI-A11Y Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Aprobado Nivel de Conformidad: WCAG 2.1 AA

---

1. Proposito

Este documento establece las guias de accesibilidad obligatorias para todas las interfaces de usuario de MedTime. El objetivo es garantizar que la aplicacion sea usable por personas con diversas capacidades, incluyendo discapacidades visuales, auditivas, motoras y cognitivas.

Compromiso de MedTime: "La salud no discrimina. Nuestra tecnologia tampoco."

---

2. Marco Normativo

2.1. Estandares de Referencia

Estandar	Version	Nivel	Obligatoriedad
WCAG	2.1	AA	Obligatorio
WCAG	2.2	A/AA	Recomendado
Section 508	2017	-	Referencia (USA)
EN 301 549	2021	-	Referencia (EU)
iOS HIG Accessibility	Current	-	Obligatorio
Android Accessibility	Current	-	Obligatorio

2.2. Regulaciones Aplicables

Region	Regulacion	Implicacion
Mexico	NOM-024-SSA3-2012	Sistemas de informacion en salud
USA	ADA + Section 508	Accesibilidad digital obligatoria
Brasil	LGPD + Lei 13.146	Inclusion digital
EU	European Accessibility Act	Requisitos de accesibilidad

---

3. Principios POUR

MedTime implementa los 4 principios fundamentales de WCAG:

3.1. Perceptible

El contenido debe ser presentable de formas que los usuarios puedan percibir.

Criterio	Requisito	Implementacion MedTime
1.1.1	Alternativas de texto	Todas las imagenes tienen alt/contentDescription
1.3.1	Informacion y relaciones	Estructura semantica con headings y landmarks
1.3.3	Caracteristicas sensoriales	No depender solo de color, forma o posicion
1.4.1	Uso del color	Color + icono + texto para estados
1.4.3	Contraste minimo	4.5:1 para texto, 3:1 para UI
1.4.4	Cambio de tamano de texto	Soporte hasta 200% sin perdida
1.4.10	Reflow	Sin scroll horizontal a 320px
1.4.11	Contraste no textual	3:1 para componentes UI

3.2. Operable

Los componentes de interfaz deben ser operables por todos los usuarios.

Criterio	Requisito	Implementacion MedTime
2.1.1	Teclado	Toda funcionalidad accesible via teclado
2.1.2	Sin trampa de teclado	Focus siempre puede salir
2.4.3	Orden de foco	Secuencia logica de navegacion
2.4.4	Proposito del enlace	Links descriptivos
2.4.6	Encabezados y etiquetas	Headings descriptivos
2.4.7	Foco visible	Indicador de 2dp outline
2.5.5	Tamano del objetivo	Minimo 44x44dp

3.3. Comprensible

El contenido y operacion debe ser comprensible.

Criterio	Requisito	Implementacion MedTime
3.1.1	Idioma de la pagina	lang declarado
3.2.1	Al recibir foco	No cambios de contexto inesperados
3.2.2	Al recibir entrada	Cambios predecibles
3.3.1	Identificacion de errores	Errores claramente indicados
3.3.2	Etiquetas o instrucciones	Labels en todos los inputs
3.3.3	Sugerencia de error	Correccion sugerida
3.3.4	Prevencion de errores	Confirmacion para acciones criticas

3.4. Robusto

El contenido debe ser robusto para diversas tecnologias de asistencia.

Criterio	Requisito	Implementacion MedTime
4.1.2	Nombre, rol, valor	Todos los componentes tienen rol semantico
4.1.3	Mensajes de estado	Anuncios via aria-live / accessibility announcements

---

4. Requisitos por Categoria

4.1. Contraste de Colores

4.1.1. Ratios Minimos

Elemento	Ratio Minimo	Herramienta de Verificacion
Texto normal (< 18sp)	4.5:1	WebAIM Contrast Checker
Texto grande (>= 18sp bold, >= 24sp)	3:1	WebAIM Contrast Checker
Iconos funcionales	3:1	WebAIM Contrast Checker
Bordes de inputs	3:1	WebAIM Contrast Checker
Focus indicator	3:1	WebAIM Contrast Checker

4.1.2. Paleta Validada

COMBINACIONES APROBADAS:

Texto sobre fondo claro (#FFFFFF):
- #212121 (neutral.900) - Ratio 16.1:1 OK
- #424242 (neutral.800) - Ratio 10.4:1 OK
- #616161 (neutral.700) - Ratio 5.9:1 OK
- #1976D2 (primary.dark) - Ratio 5.5:1 OK
- #388E3C (success.dark) - Ratio 5.1:1 OK
- #D32F2F (error.main) - Ratio 5.0:1 OK

Texto sobre fondo oscuro (#212121):
- #FFFFFF - Ratio 16.1:1 OK
- #E0E0E0 (neutral.300) - Ratio 11.3:1 OK
- #64B5F6 (primary.light) - Ratio 7.3:1 OK

COMBINACIONES RECHAZADAS (no usar):
- #9E9E9E sobre #FFFFFF - Ratio 3.5:1 FAIL
- #BDBDBD sobre #FFFFFF - Ratio 2.2:1 FAIL
- #FF9800 sobre #FFFFFF - Ratio 3.0:1 FAIL

4.1.3. Indicadores de Estado

OBLIGATORIO: Nunca usar solo color para indicar estado.

CORRECTO:
+------------------------------------------+
| [Check Icon] Toma completada             |
| Color verde + icono check + texto        |
+------------------------------------------+

| [X Icon] Toma omitida                    |
| Color rojo + icono X + texto             |
+------------------------------------------+

INCORRECTO:
+------------------------------------------+
| [Circulo verde]  [Circulo rojo]          |
| Solo color, sin icono ni texto           |
+------------------------------------------+

4.2. Tamano de Objetivos Tactiles

4.2.1. Requisitos de Tamano

Tipo de Control	Tamano Minimo	Tamano Recomendado
Botones principales	44x44dp	48x48dp
Iconos interactivos	44x44dp	48x48dp
Items de lista	44dp height	56dp height
Checkboxes/Radios	44x44dp	48x48dp
Elementos de calendario	44x44dp	48x48dp

4.2.2. Espaciado Entre Objetivos

+------------------------------------------+
|                                           |
|   [Boton 1]      [Boton 2]               |
|                                           |
|   <- 8dp minimo entre botones ->          |
|                                           |
+------------------------------------------+

Espaciado minimo entre objetivos tactiles: 8dp
Esto previene toques accidentales.

4.2.3. Excepciones Permitidas

Excepcion	Justificacion	Compensacion
Teclado numerico PIN	Estandar del sistema	44dp por tecla
Links inline en texto	Flujo natural	Padding vertical extra
Complicaciones Watch	Limitacion de espacio	Usar gestos adicionales

4.3. Navegacion con Teclado

4.3.1. Orden de Foco

FLUJO DE NAVEGACION EN PANTALLA DE MEDICAMENTO:

1. Top App Bar (Back button)
2. Titulo
3. Nombre del medicamento (input)
4. Dosis (input)
5. Frecuencia (selector)
6. Horarios (time picker trigger)
7. Instrucciones (textarea)
8. Boton Cancelar
9. Boton Guardar

El orden debe ser logico y predecible.
Tab navega hacia adelante, Shift+Tab hacia atras.

4.3.2. Indicador de Foco

ESTILO DE FOCO:

+------------------------------------------+
|  [Guardar Medicamento]                    |
|  ============================             |
|  ^ Outline azul 2dp cuando tiene foco     |
+------------------------------------------+

Especificaciones:
- Color: primary (#2196F3)
- Grosor: 2dp
- Offset: 2dp del elemento
- Contraste: 3:1 minimo contra fondo

4.3.3. Atajos de Teclado (con teclado externo)

Atajo	Accion	Contexto
Enter	Confirmar / Seleccionar	Botones, items
Escape	Cerrar / Cancelar	Dialogs, menus
Space	Toggle	Checkboxes, switches
Arrow keys	Navegacion	Listas, tabs, sliders
Tab	Siguiente elemento	Global
Shift+Tab	Elemento anterior	Global

4.4. Screen Readers

4.4.1. Soporte Requerido

Plataforma	Screen Reader	Estado
iOS	VoiceOver	Obligatorio
Android	TalkBack	Obligatorio
watchOS	VoiceOver	Obligatorio
Wear OS	TalkBack	Obligatorio

4.4.2. Labels y Descripciones

4.4.3. Reglas de etiquetado

COMPONENTE: Boton de confirmar toma

iOS (Swift):
button.accessibilityLabel = "Marcar como tomado"
button.accessibilityHint = "Registra que tomaste tus medicamentos"

Android (Kotlin):
button.contentDescription = "Marcar como tomado"
// Hint se configura via AccessibilityDelegate

RESULTADO PARA USUARIO:
VoiceOver: "Marcar como tomado, boton. Registra que tomaste tus medicamentos."
TalkBack: "Marcar como tomado, boton"

4.4.4. Anuncios Dinamicos

Evento	Anuncio	Prioridad
Toma confirmada	"Toma registrada exitosamente"	Alta
Error de validacion	"[Campo] es invalido. [Sugerencia]"	Alta
Carga completada	"Contenido cargado"	Media
Nuevo recordatorio	"Recordatorio: [medicamento] en [tiempo]"	Alta
Modo offline	"Sin conexion. Trabajando en modo offline"	Media

4.4.5. Agrupacion de Contenido

TARJETA DE MEDICAMENTO - LECTURA AGRUPADA:

En lugar de leer elemento por elemento:
- "Metformina"
- "850mg"
- "2 veces al dia"
- "Proxima toma: 14:00"

Agrupar como unidad semantica:
- "Metformina 850mg, 2 veces al dia. Proxima toma a las 2 de la tarde"

iOS: accessibilityElements / isAccessibilityElement
Android: android:importantForAccessibility + contentDescription agregado

4.5. Texto y Tipografia

4.5.1. Escalado de Texto

MedTime debe soportar escalado de texto del sistema hasta 200%.

Tamano Base	100%	150%	200%
12sp	12sp	18sp	24sp
14sp	14sp	21sp	28sp
16sp	16sp	24sp	32sp
20sp	20sp	30sp	40sp

4.5.2. Requisitos de layout

• Texto debe hacer wrap, no truncarse
• Contenedores deben expandirse verticalmente
• No debe haber overflow horizontal a 320dp de ancho

4.5.3. Fuentes

FUENTES PERMITIDAS:

Familia primaria:
- iOS: SF Pro Display, SF Pro Text
- Android: Roboto

Caracteristicas requeridas:
- Soportar caracteres acentuados (espanol)
- Soportar numeros tabulares para datos
- Regular y Medium/Bold como minimo

NUNCA usar:
- Fuentes decorativas para texto funcional
- Fuentes de ancho variable para datos numericos
- Fuentes con peso menor a 400 para cuerpo

4.5.4. Espaciado de Linea

Tipo de Texto	Line Height
Cuerpo de texto	1.5 (150%)
Titulos	1.25 (125%)
Labels compactos	1.3 (130%)
Listas	1.5 (150%)

4.6. Movimiento y Animaciones

4.6.1. Preferencias de Movimiento Reducido

DETECCION DE PREFERENCIA:

iOS:
UIAccessibility.isReduceMotionEnabled

Android:
Settings.Global.ANIMATOR_DURATION_SCALE

COMPORTAMIENTO CUANDO REDUCIDO:
- Desactivar animaciones decorativas
- Transiciones instantaneas o muy cortas (< 100ms)
- Mantener feedback tactil
- Sin parallax ni scroll effects

4.6.2. Animaciones Permitidas

Animacion	Normal	Movimiento Reducido
Transicion de pantalla	300ms ease	Instant / 100ms
Loading spinner	Rotacion continua	Estatico con cambio de opacidad
Pull to refresh	Spring physics	Linear, rapido
Card expansion	200ms ease	Instant
Haptic feedback	Si	Si (mantener)

4.6.3. Contenido que Parpadea

PROHIBIDO: Contenido que parpadea mas de 3 veces por segundo.

RIESGO: Puede provocar convulsiones en personas con epilepsia fotosensible.

CHECKLIST:
[ ] No hay elementos que parpadeen > 3Hz
[ ] Alertas usan color solido, no intermitente
[ ] LED notifications son pulsos suaves, no flashes
[ ] Animaciones de loading son rotaciones suaves

4.7. Audio y Contenido Multimedia

4.7.1. Control de Audio

Requisito	Implementacion
No autoplay de audio	Audio solo inicia por accion del usuario
Control de volumen	Usar volumen del sistema
Opcion de silenciar	Todas las alertas configurables
Subtitulos	Si hay video tutorial, subtitulos obligatorios

4.7.2. Notificaciones Sonoras

CONFIGURACION DE ALERTAS:

Cada tipo de alerta debe poder configurarse:
- Sonido: Seleccionable de lista + opcion silencio
- Vibracion: On/Off
- Visual: Siempre presente (no opcional)

Para usuarios con discapacidad auditiva:
- Enfasis en notificaciones visuales
- Vibracion como feedback principal
- LED/Flash de pantalla disponible

4.8. Formularios y Errores

4.8.1. Labels de Campos

ESTRUCTURA CORRECTA:

+------------------------------------------+
| Nombre del medicamento *                  |  <- Label visible
| +--------------------------------------+  |
| | Metformina                           |  |  <- Input
| +--------------------------------------+  |
| Ej: Paracetamol 500mg                     |  <- Helper text
+------------------------------------------+

REQUISITOS:
- Label siempre visible (no solo placeholder)
- Indicador de campo obligatorio (*)
- Helper text para instrucciones
- Error text para validaciones

4.8.2. Mensajes de Error

Componente	Requisito
Ubicacion	Junto al campo con error
Estilo	Color error + icono + texto
Contenido	Describir error + sugerir correccion
Anuncio	Automatico para screen readers

EJEMPLO DE ERROR:

+------------------------------------------+
| Dosis *                                   |
| +--------------------------------------+  |
| | -5                                   |  |
| +--------------------------------------+  |
| [X] La dosis debe ser un numero positivo  |
+------------------------------------------+

- Borde del input cambia a color error
- Icono de error junto al mensaje
- Mensaje especifico y accionable
- Screen reader anuncia el error

4.8.3. Prevencion de Errores

Para acciones criticas, implementar confirmacion:

ACCIONES QUE REQUIEREN CONFIRMACION:

- Eliminar medicamento
- Eliminar cuenta
- Enviar alerta de emergencia
- Cambiar datos de salud criticos
- Revocar permisos de cuidador

PATRON DE CONFIRMACION:

+------------------------------------------+
| Eliminar Metformina?                      |
|                                           |
| Esta accion no se puede deshacer.         |
| El historial de tomas se mantendra.       |
|                                           |
| [Cancelar]              [Eliminar]        |
+------------------------------------------+

- Titulo claro de la accion
- Descripcion de consecuencias
- Boton destructivo visualmente diferenciado
- Boton de cancelar como opcion principal

---

5. Guias por Rol de Usuario

5.1. Pacientes con Discapacidad Visual

Necesidad	Solucion MedTime
Leer medicamentos	VoiceOver/TalkBack completo
Identificar hora de toma	Anuncios de voz de alarmas
Distinguir medicamentos	Color + icono + nombre leido
Navegar la app	Gestos estandar de screen reader
Confirmar toma	Boton grande + feedback tactil

5.2. Pacientes con Discapacidad Auditiva

Necesidad	Solucion MedTime
Recibir alertas	Vibracion + notificacion visual + LED
Entender instrucciones	Texto claro, sin dependencia de audio
Tutoriales	Subtitulos si hay video
Feedback de acciones	Visual (cambio de color/icono)

5.3. Pacientes con Discapacidad Motora

Necesidad	Solucion MedTime
Objetivos tactiles	Minimo 44x44dp
Gestos complejos	Alternativas de un toque
Tiempo de respuesta	Sin timeouts estrictos
Navegacion	Soporte teclado externo
Precisision	Spacing adecuado entre elementos

5.4. Pacientes con Discapacidad Cognitiva

Necesidad	Solucion MedTime
Lenguaje simple	Textos claros, sin jerga
Consistencia	Mismos patrones en toda la app
Memoria	No requerir recordar info entre pantallas
Foco	Una tarea principal por pantalla
Errores	Mensajes constructivos, no tecnicos

5.5. Adultos Mayores

Necesidad	Solucion MedTime
Tamano de texto	Escalable hasta 200%
Contraste	Ratios altos por defecto
Touch targets	Generosos (48dp+)
Navegacion	Simple, pocos niveles
Terminologia	Familiar, no tecnica
Feedback	Claro y confirmatorio

---

6. Testing de Accesibilidad

6.1. Herramientas Automatizadas

Herramienta	Plataforma	Uso
Accessibility Inspector	iOS/macOS	Auditoria de VoiceOver
Accessibility Scanner	Android	Auditoria de TalkBack
axe DevTools	Web	Si hay componente web
Lighthouse	Web	Auditoria general

6.2. Testing Manual

6.2.1. Checklist de testing manual

SCREEN READER:
[ ] Toda la pantalla es navegable con VoiceOver/TalkBack
[ ] El orden de lectura es logico
[ ] Todos los elementos tienen labels
[ ] Las acciones son anunciadas
[ ] Los errores son anunciados

VISION:
[ ] Contraste verificado con herramienta
[ ] Funcional con texto al 200%
[ ] Color no es unico indicador de estado
[ ] Funcional con alto contraste del sistema

MOTOR:
[ ] Touch targets de 44dp+
[ ] Funcional con teclado externo
[ ] Sin gestos obligatorios complejos
[ ] Tiempo suficiente para completar tareas

COGNITIVO:
[ ] Lenguaje claro y simple
[ ] Una tarea principal por pantalla
[ ] Errores son comprensibles
[ ] Navegacion consistente

6.3. Testing con Usuarios

Recomendacion: Realizar testing de usabilidad con usuarios que usen tecnologias de asistencia al menos una vez por release major.

Grupo	Frecuencia	Tamano Muestra
Usuarios de screen reader	Cada release major	3-5 personas
Adultos mayores	Cada release major	5-8 personas
Usuarios con baja vision	Cada 2 releases	3-5 personas

---

7. Documentacion de Componentes

Cada componente en la biblioteca debe documentar:

TEMPLATE DE DOCUMENTACION A11Y:

## Componente: [Nombre]

### Roles y Estados
- Role: button / checkbox / slider / etc.
- Estados anunciados: pressed, selected, disabled, expanded

### Labels
- accessibilityLabel: "[texto descriptivo]"
- accessibilityHint: "[instrucciones de uso]" (si aplica)

### Navegacion
- Focusable: si/no
- Orden en grupo: [posicion]
- Acciones custom: [lista]

### Contraste
- Texto: [ratio verificado]
- Iconos: [ratio verificado]
- Focus: [ratio verificado]

### Touch Target
- Tamano: [width x height]dp
- Spacing: [valor]dp

### Testing
- [ ] VoiceOver iOS verificado
- [ ] TalkBack Android verificado
- [ ] Teclado externo verificado
- [ ] Contraste verificado

---

8. Criterios de Aceptacion de Accesibilidad

8.1. Criterios Bloqueantes (Release Blocker)

ID	Criterio	Verificacion
A11Y-001	Toda funcionalidad es accesible via screen reader	Manual
A11Y-002	Contraste minimo 4.5:1 para texto	Automatizado
A11Y-003	Touch targets minimo 44x44dp	Automatizado
A11Y-004	No hay trampas de teclado	Manual
A11Y-005	Errores son anunciados para screen readers	Manual

8.2. Criterios Importantes (Fix en siguiente sprint)

ID	Criterio	Verificacion
A11Y-010	Orden de foco es logico	Manual
A11Y-011	Texto escala hasta 200% sin perdida	Manual
A11Y-012	Movimiento reducido respetado	Manual
A11Y-013	Labels descriptivos en todos los campos	Automatizado

8.3. Criterios Deseables (Backlog)

ID	Criterio	Verificacion
A11Y-020	Atajos de teclado documentados	Manual
A11Y-021	Skip links implementados	Manual
A11Y-022	Alto contraste como opcion	Manual

---

9. Recursos y Referencias

9.1. Documentacion Oficial

• WCAG 2.1 Guidelines
• Apple Accessibility Programming Guide
• Android Accessibility Overview
• WebAIM Contrast Checker

9.2. Herramientas

• Stark - Plugin para diseno
• axe DevTools - Testing automatizado
• Color Oracle - Simulador de daltonismo

9.3. Referencias MedTime

• 02-component-library.md
• patterns/component-inventory.json
• MTS-PRI-001 - Privacidad

---

10. Historial de Cambios

Version	Fecha	Cambios
1.0.0	2025-12-05	Version inicial - WCAG 2.1 AA completo

---

Documento generado por MobileUxUiDrone (Eight of Eight) "La accesibilidad no es una caracteristica opcional. Es un derecho."