Saltar al contenido principalSaltar a la navegaciónSaltar al pie de página
168+ Biblioteca de PrincipiosGuías UX/UI respaldadas por investigaciónValidador de Diseño IAValida diseños IA con principios de investigaciónPrompts de IA600+ prompts con citas académicasChecklists de FlujosValidación pre-diseño y pre-lanzamiento para 5 flujosSeñales de Alerta y Soluciones UXDetecta problemas de interfaz en 2–5 minutos
Ver Todas las Herramientas
Part 1FundamentosPart 2Principios FundamentalesPart 3Sistemas de DiseñoPart 4Patrones de InterfazPart 5Dominios EspecializadosPart 6Centrado en el Humano
Ver Todas las Partes
Acerca de
Iniciar sesión

Obtén las 6 Leyes de UX "Esenciales"

Los principios que arreglan el 80% de los problemas de interfaz. Desglose gratuito + ejemplos reales a tu bandeja de entrada.

PrincipiosAcerca deDesarrolladoresGlosarioTérminosPrivacidadCookiesReembolsos

© 2026 Principios UXUI. Todos los derechos reservados. Diseñado y construido con ❤️ by UXUIprinciples.com

HerramientasMarco
Inicio/Parte VI - Excelencia Centrada en el Humano/Accesibilidad e Inclusión

Principio Perceptible (WCAG)

perceptiblewcagaccesibilidadalternativas-textosubtítulosdiseño-uxexperiencia-usuario
Intermedio
14 min de lectura
Contents
0%

Información y componentes interfaz usuario deben ser presentables a usuarios mediante sentidos disponibles—proporcionando alternativas texto para contenido no-textual, subtítulos para multimedia, estructuras adaptables preservando significado mediante diferentes presentaciones, contenido distinguible facilitando percepción visual/auditiva. Este primer principio POUR (Perceptible, Operable, Comprensible, Robusto) establece acceso sensorial fundamental permitiendo 285 millones usuarios discapacidad visual y 466 millones usuarios sordos percibir contenido digital mediante canales sensoriales alternativos.

Perceptibilidad trasciende simple cumplimiento legal—representa diseño inclusivo fundamental sirviendo audiencias diversas mediante modalidades sensoriales múltiples. Investigación documenta 16% población mundial (1.3 mil millones personas) experimentando discapacidad significativa requiriendo acceso no-visual o no-auditivo a contenido digital. Diseño perceptible beneficia usuarios más allá discapacidad permanente—86% usuarios móviles miran videos silenciados, 80% estudiantes idiomas utilizan subtítulos, 75% trabajadores ambientes sensibles-sonido requieren acceso silencioso demostrando beneficios diseño universal extendiéndose mucho más allá comunidad discapacitada.

La Base de Investigación

Pauta 1.1: Alternativas Texto

Iniciativa Accesibilidad Web W3C's WCAG 2.2 (2023) estableció Perceptible como primer principio POUR requiriendo todo contenido no-textual tenga alternativas texto permitiendo transformación hacia formatos alternativos (braille, voz, símbolos, lenguaje simplificado). Criterio Éxito 1.1.1 (Nivel A): Contenido No-textual—todas imágenes, controles formulario, entrada audio/video requieren alternativas texto comunicando propósito equivalente excepto contenido decorativo, CAPTCHA, o específico-sentido.

Texto alternativo efectivo comunicando contenido completo y función en contexto versus etiquetas genéricas proporcionando cero valor—"Gráfico barras mostrando incremento ingresos 47% Q4 2024 versus Q3 2024 mediante cinco barras azules representando Julio-Noviembre datos ventas mensuales" versus "imagen" o "gráfico". WebAIM investigación (2024) analizando 1 millón páginas inicio encontró 55% imágenes faltando texto alternativo, 32% utilizando texto genérico ("imagen", "foto", "banner") demostrando falla generalizada accesibilidad básica bloqueando usuarios lectores-pantalla.

Texto alternativo generado-IA mejorando significativamente—visión computacional Apple/Google/Microsoft alcanzando 60-70% calidad-humana descripciones automáticas ("Persona sonriendo vistiendo chaqueta roja exteriores cerca árboles") habilitando acceso fallback cuando autores descuidan texto alternativo. Sin embargo, contexto requiere juicio humano—misma imagen producto requiriendo diferentes alternativas ("Añadir al carrito" versus "Vista detallada" versus "Chaqueta roja disponible en rojo, azul, negro") dependiendo propósito función necesitando revisión humana contexto apropiado.

Pauta 1.2: Medios Basados-Tiempo

WCAG 2.2 requiriendo subtítulos y descripciones audio para contenido multimedia habilitando acceso usuarios sordos (subtítulos) y usuarios ciegos (descripciones audio). Criterios Éxito clave incluyen:

SC 1.2.2 (Nivel A): Subtítulos (Pregrabados)—todo audio pregrabado en medios sincronizados tiene subtítulos excepto cuando medios alternativos para texto claramente etiquetados como tales. Subtítulos profesionales logrando 99%+ precisión con identificación hablante apropiada, notación efectos-sonido, descripciones música versus subtítulos automáticos YouTube logrando 60-80% precisión faltando contexto hablante/sonido.

SC 1.2.4 (Nivel AA): Subtítulos (En Vivo)—subtítulos proporcionados para todo audio en-vivo en medios sincronizados. Transmisiones en-vivo (noticias, deportes, eventos) requiriendo subtitulado profesional tiempo-real mediante estenografía logrando <2 segundos retraso 98%+ precisión versus subtítulos automáticos exhibiendo 5-10 segundos retraso 70-80% precisión.

SC 1.2.5 (Nivel AA): Descripción Audio (Pregrabada)—descripción audio proporcionada para todo contenido video pregrabado en medios sincronizados. Descripciones audio narrando elementos visuales (configuraciones escena, acciones, texto pantalla, chistes visuales) durante pausas diálogo natural habilitando usuarios ciegos comprensión completa.

Investigación documenta beneficios-subtítulos universales—86% usuarios móviles mirando videos silenciados requiriendo subtítulos para comprensión, 80% estudiantes idiomas utilizando subtítulos mejorando adquisición vocabulario 25-40%, 75% usuarios ambientes sensibles-sonido (espacios públicos, oficinas abiertas, bibliotecas) requiriendo acceso silencioso demostrando diseño accesible beneficiando todos usuarios no-solo comunidad sorda.

Pauta 1.3: Adaptable

WCAG requiriendo contenido presentable diferentes formas sin perder información o estructura. Criterios clave incluyen:

SC 1.3.1 (Nivel A): Información y Relaciones—información, estructura, relaciones transmitidas mediante presentación pueden ser programáticamente determinadas o disponibles en texto. HTML semántico (nav, main, aside, h1-h6, ul/ol, table) comunicando estructura significado permitiendo tecnologías-asistivas comprender jerarquía contenido versus divs sin-significado proporcionando cero contexto estructural.

SC 1.3.4 (Nivel AA): Orientación—contenido no restringe vista y operación a orientación pantalla única como retrato o paisaje, excepto donde orientación específica esencial. Aplicaciones móviles forzando orientación (juegos, video-visualización) cuando contenido funciona ambas orientaciones creando barreras accesibilidad para usuarios dispositivos montados o usuarios discapacidades limitando manipulación dispositivo.

SC 1.3.5 (Nivel AA): Identificar Propósito Entrada—propósito cada campo entrada recolectando información sobre usuario puede ser programáticamente determinado cuando propósito identificado en sección Propósitos Entrada para Componentes Interfaz-Usuario, contenido implementado utilizando tecnologías soportando identificación significado esperado entrada-datos formulario. Atributos autocompletar HTML (name, email, address, tel) habilitando navegadores prellenar formularios logrando 30-50% reducción errores entrada.

Pauta 1.4: Distinguible

WCAG requiriendo contenido fácil-ver y fácil-escuchar incluyendo separación primer-plano de fondo. Criterios clave incluyen:

SC 1.4.3 (Nivel AA): Contraste (Mínimo)—presentación visual texto e imágenes-texto tiene proporción contraste al-menos 4.5:1 excepto texto-grande (18pt+ o 14pt+ negrita) requiriendo 3:1, texto/imágenes texto parte componente interfaz-usuario inactivo o puramente decorativo, logotipos. Investigación WebAIM encontrando 83.6% páginas inicio fallando cumplir contraste mínimo demostrando falla sistemática accesibilidad básica afectando usuarios baja-visión y usuarios daltónicos.

SC 1.4.11 (Nivel AA): Contraste No-textual—presentación visual componentes interfaz-usuario e objetos gráficos tiene proporción contraste al-menos 3:1 contra colores adyacentes. Botones, campos formulario, iconos, elementos-gráfico requiriendo contraste suficiente habilitando usuarios baja-visión percibir controles interactivos versus fondos.

SC 1.4.12 (Nivel AA): Espaciado Texto—en contenido implementado utilizando lenguajes marcado soportando propiedades estilo texto siguiente, ninguna pérdida contenido o funcionalidad ocurre configurando todo siguiente sin cambiar otras propiedades estilo: altura-línea al-menos 1.5x tamaño-fuente, espaciado después párrafos al-menos 2x tamaño-fuente, espaciado-letra al-menos 0.12x tamaño-fuente, espaciado-palabra al-menos 0.16x tamaño-fuente.

SC 1.4.13 (Nivel AA): Contenido Hover o Foco—donde hover o foco teclado hace contenido visible después invisible, contenido permanece visible hasta trigger hover/foco removido, usuario descarta, información ya-no-válida. Tooltips, menús desplegables requiriendo persistencia habilitando usuarios baja-visión/motor-discapacidad tiempo suficiente percibir contenido revelado.

Por Qué Importa

Para Usuarios: Usuarios con discapacidades permanentes, temporales, situacionales obtienen acceso-igual contenido digital mediante modalidades sensoriales alternativas—usuarios ciegos accediendo sitios mediante lectores-pantalla, usuarios sordos comprendiendo videos mediante subtítulos, usuarios baja-visión leyendo texto mediante ampliación/alto-contraste, usuarios motor-discapacidad navegando teclado-solo. Diseño perceptible permitiendo participación-plena economía-digital, educación-online, servicios-gobierno, conexiones-sociales previamente inaccesibles mediante interfaces visuales-solo o auditivas-solo. Investigación mostrando diseño accesible logrando tasas-conversión 30-50% mejores desde usuarios discapacidades mediante reducción fricción y barreras-completitud.

Para Diseñadores: Negocios beneficiando mediante expansión alcance-mercado sirviendo 1.3 mil millones personas discapacidades globalmente (16% población-mundial) representando $8 billones ingreso-disponible anual. Sitios accesibles logrando tasas-conversión 30-50% mejores desde usuarios discapacidades mediante fricción-reducida barreras-completitud. Comercio-electrónico implementando texto-alternativo comprensivo, subtítulos, contraste-apropiado reporta incrementos-ingresos 15-25% desde mejoras-accesibilidad mediante servicio clientes previamente-excluidos. Servicios bancarios/financieros logrando adopción-digital 40-60% mejor entre usuarios discapacidades mediante interfaces accesibles reduciendo requerimientos servicio-asistido costoso.

Para Product Managers: Mitigación riesgo-regulatorio: multas GDPR totalizando €4.5 mil millones (2018-2023), penalidades FTC para patrones-oscuros, violaciones-privacidad, prácticas-engañosas promediando $50-500 millones, próxima Acta-IA UE penalidades hasta €30 millones o 6% ingresos-globales haciendo diseño-ético-proactivo más-barato que cumplimiento-reactivo. A-prueba-futuro mientras regulaciones continúan expandiendo: organizaciones con frameworks éticos establecidos adaptando nuevos-requerimientos 60-80% más-rápido que competidores reactivos. Protección reputación: escándalo Cambridge-Analytica Facebook destruyendo $100+ mil millones valor-mercado, crisis-cultural Uber costando renuncia-CEO y $4.4 mil millones subvaluación IPO demostrando fallas-éticas como riesgos-negocio existenciales.

Para Desarrolladores: Beneficios diseño-universal extendiéndose más-allá discapacidad—subtítulos beneficiando estudiantes-idiomas, viajeros, ambientes sensibles-sonido (80%+ usuarios mirando videos silenciados), texto-alternativo sirviendo conexiones-lentas contextos limitados-datos, alto-contraste mejorando legibilidad luz-brillante o iluminación-tenue, estructura-semántica habilitando modos-lectura navegador y extracción-contenido. Investigación mostrando diseño-accesible mejorando usabilidad-general 25-35% para todos-usuarios mediante arquitectura-información más-clara, mejor estructura-contenido, carga-cognitiva reducida validando diseño-inclusivo beneficiando todos.

Cómo Funciona en la Práctica

Implementación Alternativas-Texto

Texto alternativo descriptivo comunicando contenido completo y función mediante elementos contexto—imágenes productos requiriendo descripciones características-visibles ("Zapatilla-correr Nike Air Zoom Pegasus 40 azul-real con swoosh blanco, amortiguación visible talón, cordones azul-marino"), botones funcionales describiendo acción ("Añadir carrito", "Enviar formulario", "Reproducir video"), imágenes complejas-datos proporcionando descripciones largas mediante aria-describedby o texto-adyacente ("Gráfico líneas mostrando tendencias temperatura 2020-2024 revelando incremento 2.3°C promedio global mediante cinco líneas representando continentes").

Imágenes decorativas utilizando atributo alt vacío (alt="") ocultando desde tecnologías-asistivas evitando desorden—fondos decorativos, iconos-acompañamiento (texto-adyacente proporcionando misma-información), separadores visuales proporcionando cero información-adicional. Texto alternativo generado-IA proporcionando fallback donde autores descuidan descripciones—Apple/Google/Microsoft visión-computacional logrando 60-70% calidad-humana habilitando acceso básico requiriendo revisión-humana apropiación-contexto.

Implementación técnica mediante atributo alt HTML para imágenes, etiquetas formulario asociando texto-descriptivo con controles, roles-ARIA comunicando propósitos widgets-personalizados, propiedades aria-label/aria-labelledby proporcionando nombres-accesibles donde texto-visible inadecuado. Validación mediante pruebas lectores-pantalla (NVDA, JAWS, VoiceOver) verificando descripciones comunicando significado-completo contexto.

Implementación Subtítulos y Descripciones-Audio

Subtítulos profesionales logrando 99.5%+ precisión con identificación-hablante apropiada, notación efectos-sonido, descripciones-música versus subtítulos-automáticos logrando 60-80% precisión. Transmisiones en-vivo requiriendo estenografía profesional logrando <2 segundos retraso versus subtítulos-automáticos exhibiendo 5-10 segundos retraso afectando sincronización comprensión.

Descripciones-audio narrando elementos-visuales durante pausas diálogo-natural—configuraciones-escena ("Oficina moderna con ventanas piso-techo con-vista ciudad"), acciones-visuales ("Sarah señala gráfico proyectado"), texto pantalla ("Título: Resultados-Trimestrales Q4"), chistes-visuales ("Reacciones faciales-exageradas John") habilitando usuarios-ciegos comprensión-completa. Implementación mediante pistas-separadas DASH/HLS reduciendo ancho-banda usuarios no-necesitando características-accesibilidad mientras asegurando disponibilidad cuando-necesario.

Estilización subtítulos-personalizable (fuente, tamaño, color, fondo, posición) sirviendo preferencias-individuales—usuarios baja-visión prefiriendo fuentes-grandes fondos alto-contraste, usuarios dislexia beneficiando desde fuentes sans-serif espaciado-generoso, usuarios preferencias-idioma seleccionando traducciones-subtítulos. Implementación técnica mediante elemento track HTML, formato WebVTT soportando estilización, reproducción-sincronización, metadatos-temporales.

Implementación Contraste-Color

Proporciones contraste cumpliendo WCAG AA mínimo 4.5:1 texto-normal, 3:1 texto-grande, 3:1 componentes-interfaz-usuario habilitando usuarios baja-visión y usuarios-daltónicos mientras reduciendo fatiga-visual 40-60% todos-usuarios ambientes brillantes/tenues. Herramientas validación-contraste verificando todos pares-colores antes publicación sistema-diseño—analizadores contraste WebAIM, plugins Figma Stark, herramientas automatizadas-CI/CD previniendo regresiones-contraste.

Paletas colores diseñadas combinaciones accesibles-prevalidadas—sistemas-diseño especificando pares texto/fondo cumpliendo requisitos-contraste, componentes-UI utilizando tokens-color validados-contraste, modos alto-contraste proporcionando alternativas cumpliendo AAA 7:1. Implementación mediante variables-CSS especificando combinaciones-accesibles, tokens-diseño documentando requisitos-contraste, pruebas-automatizadas pipeline-CI/CD validando cumplimiento-contraste.

Diseño daltónico-seguro evitando significado transmitido color-solo—formularios utilizando etiquetas-texto más indicadores-color, gráficos aplicando patrones/texturas diferenciando elementos-datos, estados utilizando iconos/formas más cambios-color. Herramientas simulación (Coblis, Color Oracle) validando diseños mediante tipos-visión múltiples (protanopia, deuteranopia, tritanopia) asegurando diferenciación-percibible.

Obtén 6 Principios UX Gratis

Te enviaremos 6 principios respaldados por investigación con prompts de IA.

  • 168 principios con 2,098+ citas académicas
  • 600+ prompts IA para Cursor, V0, Claude
  • Defiende cada decisión de diseño con investigación
o desbloquea todo
Obtener Biblioteca de Principios — Era $49, ahora $29 por año$29/yr

¿Ya eres miembro? Iniciar sesión

Era $49, ahora $29 por año$49 → $29/yr — Garantía de devolución de 30 días

También incluye:

Cómo Funciona en la Práctica

Guía de implementación paso a paso

Premium

Ejemplos Modernos

Ve cómo los mejores equipos aplican este principio

Premium
LinearStripeNotion

Guía por Rol

Recomendaciones específicas para diseñadores, devs y PMs

Premium

Prompts de IA

Copia y pega prompts para Cursor, V0, Claude

Premium
3 prompts disponibles

Conclusiones Clave

Resumen de referencia rápida

Premium
5 puntos clave

Continúa Aprendiendo

Continúa tu viaje de aprendizaje con estos principios conectados

Parte I - FundamentosPremium

Principio de Figura-Fondo

El Principio de Figura-Fondo (Rubin 1915) demuestra la segregación perceptual automática en objetos de primer plano y fo...

Intermedio
Parte II - Principios Fundamentales

Consistencia y Estándares

La heurística de consistencia de Nielsen (1990) demuestra que la consistencia interna y externa reduce la carga cognitiv...

Principiante
Parte V - Dominios EspecializadosPremium

Ley de Mejora Progresiva

La mejora progresiva (Champeon 2003, Keith 2016) construye desde línea base HTML universal con mejoras CSS/JavaScript en...

Avanzado

Licenciado bajo CC BY-NC-ND 4.0 • Solo uso personal. Redistribución prohibida.

Anterior
Todos los Principios
Siguiente
Principio Operable (WCAG)
Validar Principio Perceptible (WCAG) con el Validador de Diseno IAObtener prompts de IA para Principio Perceptible (WCAG)Ver flujos de diseno UXDetectar problemas de UX con el detector de malos oloresExplorar el glosario de terminos UX/UI