Resize y reflow

Clase 24 de 26 • Curso de Accesibilidad Web: Auditoría de Proyectos

Cristian Diaz

student•

Con el tema de reflow, un error que puede pasar mucho es que tienes márgenes tan grandes entre elemento y elemento que da la impresión que no hay más contenido y puede ser confuso, o paddings que son muy anchos y hacen que el texto se vea estrecho.

Stephanie Eckles mostró una buena solución para el tema usando CSS moderno con las funciones de min y max, la pueden ver aquí: Scaling CSS Layout beyond pixels

Jaime Acosta

student•

Resize | 1366 x 768 px | 200% | Reflow | 1282 x 800 px | 400% | Reflow | 320 x 256 px | 100% |

silvia marquez

student•

Aqui cuando el texto no se redimensiona por que tiene una medida absoluta ¿en ese caso no lo reportarias?

David Flores

teacher•

Lo importante es que los textos no se pierdan/corten al momento de usar otra resolución, de lo contrario si se debe reportar el issue.

Daniel Andres Rojas Paredes

student•

¿ alguien entiende y me puede explicar por que esas resoluciones y niveles de zoom, y que es exactamente el reflow?

Luis Ángel Morales Hernández

student•

El reflow es la capacidad de un sitio web para adaptarse a diferentes tamaños de pantalla y dispositivos sin perder legibilidad o funcionalidad. Es como cuando un texto se ajusta automáticamente para que puedas leerlo cómodamente en tu teléfono o tableta, sin necesidad de hacer zoom o moverte hacia los lados.

Daniel Andres Rojas Paredes

student•

hola , ¿que es el reflow? no me quedo claro

Jaime Acosta

student•

Resize | 1366 x 768 px | 200% | Reflow | 1282 x 800 px | 400% | Reflow | 320 x 256 px | 100% |

Resize y reflow

Definición de alcance

¿Quién audita la accesibilidad de un sitio web?

¿Cómo se definen los lineamientos de accesibilidad web?

¿Qué es un VPAT (Voluntary Product Accessibility Template)?

¿Cómo se ve un VPAT?

Importancia de las estadísticas de accesibilidad web

Errores de a11y más comunes a nivel mundial

Preparando el entorno

Virtualización de Windows en macOS y Linux con VirtualBox

Configuración de herramientas de a11y

Screen reader, mi mejor amigo

Lectores de pantalla

Trabajar con NVDA

Comportamientos especiales del screen reader

Detectar y reportar issues (automáticos)

Conociendo la WCAG

Plantillas y guías oficiales para reportar issues de a11y

Análisis automático de accesibilidad web

Issues y best practices de accesibilidad web

Intervención manual para detectar issues de a11y

Detectar y reportar issues (manuales)

Navegar con NVDA

Conocer la estructura de una página

Deshabilitar CSS

Meaningful Labels

Navegar en el header

Escuchar imágenes

Conocer botones y links

Resize y reflow

Reportes

Reportes de accesibilidad web

Cierre

Continúa creciendo tus proyectos de a11y