Accesibilidad y diseño

TIPS PARA LA ACCESIBILIDAD Y DISEÑO
Una parte importante del diseño es la accesibilidad. La accesibilidad es la posibilidad de que cualquier persona pueda acceder a la web, no importa la incapacidad que tenga. Esta accesibilidad es obligatoria en todas la Webs.
-. Usar los encabezados correctos en cada lugar.
-. Usar fuentes legibles y visibles fácilmente.
-. Usar el contraste de colores adecuadamente.
-. Garantizar que los colores no sean el único código para relacionar el contenido.
-. Diseña teniendo en cuenta los eventos de la página. No quitar el focus o el active, y que estos sean diferentes.
-. Añade títulos descriptivos a los campos de un formulario.
-. Los ALT y descripciones de en la fotos y videos es vital.
-. Evitar que las animaciones bloqueen el contenido.

Mis notas

Si te sirvio dale conrazoncito 💖

Accesibilidad y diseño

La accesibilidad es necesaria para permitir que cualquier persona independientemente de sus capacidades pueda acceder a la informacion necesaria sin dificultades.

1. HTML estructurado correctamente ⇒ Para que los lectores de pantalla puedan proporcionar un detalle acertado al usuario, la semantica en el HTML es importante, ademas, esto ayuda a la pagina en el SEO.
2. Tamaños de fuente accesibles ⇒ Al utilizar tamaños de fuente demasiado pequeños evita que aquellos con problemas de vista accedan a toda la informacion de nuestra pagina
3. Contrastes adecuados ⇒ Si se utilizan los colores incorrectos puede llevar a informacion, texto o imagenes a que estos no sean visibles por ciertas personas
4. Evitar categorizacion unicamente por colores ⇒ Cuando se categorizan informacion por colores es bonito y facil para ciertas personas, pero si no se le agrega alguna alternativa extra como bordes o separaciones marcadas puede dificultar la comprension para cierta poblacion
5. No dejar a un lado los estados “focus” y “active” (HTML) ⇒ Estos proporcionan una ayuda visual para que el usuario sepa en que parte de la pagina se encuentra.
6. Agregar etiquetas y textos descriptivos a campos de formularios, videos e imagenes
7. Evitar animaciones que bloqueen contenido ⇒ Esto provoca que aquellos que no tengan acceso a un mouse no obtengan la misma cantidad de informacion que uno que si lo tiene.

Aquí unos tips de google para la accesibilidad:
Dan herramientas para implementar entre cualquier discapacidad también, es bastante interesante la herramienta y podemos agrandar la cantidad de personas que usan nuestras apps:

https://developers.google.com/web/fundamentals/accessibility

Todo sobre accesibilidad web desde la parte oficial w3c: https://www.w3.org/WAI/standards-guidelines/wcag/

Lección super importante de esta clase:
La funcionalidad es antes de la estética

Hola, soy diseñadora gráfica desde hace 5 años, con 31 años estoy preparando en desarrollo web teniendo unas bases sólidas en diseño. Les puedo dejar estos tips para desarrollar una habilidad creativa y profesional en diseño.

💡Te comparto 3 pasos importantes que tuve que implementar para educar mi visión y hacer diseños de impacto.

1-. OBSERVACIÓN: Empecé por analizar todas las vallas publicitarias que encontraba en mi camino, páginas web, publicidad impresa, también publicidad digital. Seguí a personas que trabajaban en el área, para ver cómo argumentaban su comunicación visual.

2-. INVESTIGACIÓN: Es parte fundamental de cualquier oficio. El diseño particularmente necesita de una amplia absorción de información, no solo investigar en internet resulta una tarea esencial, también la lectura de libros y revistas; esto para lograr identificar con qué argumentos y herramientas vas a desarrollar el contenido creativo o los proyectos que tienes en mente.

3-. ESTUDIOS: Muchas personas que nos dedicamos al diseño gráfico, iniciamos con tutoriales en YouTube; Pero las plataformas de pago también ofrecen una instrucción muy completa, que además resulta amigable en relación a tiempo de aprendizaje, dado a que puedes ir a tu ritmo y te permiten ver una y otra vez los procesos y pasos a seguir en la ruta de aprendizaje.

🥇Finalmente, todo depende del tiempo, disciplina y la constancia que le dediques a tu aprendizaje; muchas veces damos por sentado que lo sabemos todo y esto es un error, no sólo de principiantes sino también de personas con mucha experiencia en el área. Estamos en tiempos de innovación constante es por ello que es necesario actualizarnos de forma permanente con las tendencias. Pero si tú estás empezando esmérate por ser diferente y ofrecer la mejor calidad en tu trabajo.

RECUERDEN ALGO, SABER USAR PROGRAMAS DE DISEÑO, NO SIGNIFICA QUE SEPAN DISEÑAR, SABER USAR CSS NO SERVIRÁ DE MUCHO IMPACTO SI NO DESARROLLAN LA HABILIDAD CREATIVA PARA CREAR COSAS PROFESIONALES.

ARIA =

Accessible Rich Internet Applications

Se usa para añadir una etiqueta descriptiva a elementos gráficos o cualquier otro elemento que lo requiera, incluso elementos no etiquetables.

Más sobre ARIA Labels

https://platzi.com/clases/accesibilidad-web/

Accesibilidad
"Poder de la web en la universalidad!

• Encabezados de manera ordenada
• Tamaños de fuente accesibles
• Colores con contraste adecuado
• Código de color no sea la única forma de relacionar contenido
• Estados focus y active
• Etiquetas y textos descriptivos a los campos de formulario (aria-label)
• Contenido descriptivo para las imágenes / videos
  Animaciones no bloqueen el contenido

Este link es parte de mis mejores referencias por cada proyecto que realizo, es sobre roles, estados y atributos de WAI-ARIA. Espero que les sirva y lo apliquen https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques

😮 La importancia de la accesibilidad es indispensable en una aplicación.

Un asunto muy importante y que cuando vas empezando, es un factor que no tomas en cuenta. Excelente, a seguir trabajando y hacer de esto, ya una practica rutinaria a la hora de maquetar 😄

No tienen idea de lo horrible que es ser daltónico y ver páginas, apps que utilizan únicamente colores complementarios para hacer diferenciación. 💔

No sabia que había un curso sobre Accesibilidad, me parece muy útil, para poder brindarles a todos las mismas posibilidades.

Creo que todos los programadores quisieran saltarse esta parte de la accesibilidad, pero sin dudas es algo muy importante. Quédense con esta frase: La web es un derecho para todas las personas

Dejo mis apuntes, espero les sirva 😃

Arduo trabajo la accesibilidad, pero es un plus añadido a nuestros proyectos que marca diferencia. Es pensar en todos y no solo en unos pocos favorecidos. A tenerlo mucho en cuenta y a aplicarlo 🧠

Usar las etiquetas html de acuerdo a la web semántica es el camino ideal para garantizar una buena accesibilidad

Terrible práctica de muchas páginas ahora que segundos después de estar leyendo el articulo te muestran un modal para suscribirte que bloquea la lectura

Valla accesibilidad de la página oficial de Bogotá

En mi opinion debemos tomarnos enserio el tema de accesibilidad, estoy creando mi portafolio, y no había tenido en cuenta que una animacion está bloqueando el acceso a un contenido… Excelentes consejos

ACCESIBILIDAD Y DISEÑO

• Usar fuentes accesibles
• contrastar colores
• usar "active y “focus”
• usar texto descriptivo
• animaciones moderadas
• describir la imagen o video “alt”

Aquí todo junto 😄

Mis apuntes sobre: Accesibilidad y diseño

Tips básicos:

• Utiliza los encabezados de manera ordenada para organizar la estructura del contenido (HMTL5 semántico).
• Utiliza tamaños de fuente accesibles.
• Utiliza colores que tengan un contraste adecuada.
• Garantiza que el código de color no sea la única forma de relacionar el contenido.
• Diseña teniendo en cuenta los estados “focus” y “active”.
• Añade etiquetas y textos descriptivos a los campos de formularios.
• Escribe contenido descriptivo que pueda reemplazar videos e imágenes.
• Garantiza que las animaciones no bloqueen el acceso al contenido.

Jmm esto de poner texto descriptivo me suena a subtitulos de Netflix

Sobre los Area Labels que menciona, era la primera vez que escuché de ellos y es un tema muy interesante. Les dejo un enlace a un video donde lo explican y experimentan con el. El video está en inglés, pero bueno, dos pájaros de un tiro.

_-El poder de la web esta en su universalidad, el acceso de todas las personas independientemente de la discapacidad es un aspecto esencial- _
Tim Berners-Lee, científico de la computación británico, es el padre de la World Wide Web. Estableció la primera comunicación entre un cliente y un servidor usando el protocolo HTTP en noviembre de 1989. Se le atribuye la creación original del URL (Uniform Resource Locator, Localizador Uniforme de Recursos), del HTTP (HyperText Transfer Protocol, Protocolo de Transferencia de HiperTexto) y del HTML (Hyper Text Markup Language, Lenguaje de Marcado de HiperTexto). También es fundador y director del World Wide Web (W3C) con sede en el MIT, este consorcio es el encargado de supervisar y estandarizar el desarrollo de las tecnologías sobre las que se fundamenta la Web y que permiten el funcionamiento de Internet.

siempre pensar en la accesibilidad

Funcionalidad ante todo, no solo es meter 1000 lineas de diseño en css.

Tips básicos:

1. Utiliza los encabezados de manera ordenada para organizar la estructura
2. Utiliza tamaños de fuentes accesibles
3. Utiliza colores que contengan un contraste adecuado
4. Garantiza que el código de colo no sea la única forma de relacionar contenido
5. Diseña teniendo en cuenta los estados “focus” y “active” de los componentes.
6. Añade etiquetas y textos descriptivos a campos de formulario
7. Escribe contenido descriptivo que pueda reemplazar vídeos
   e imágenes
8. Garantiza que las animaciones no bloqueen el acceso al contenido

El atributo aria-label se utiliza para definir una cadena que etiqueta el elemento actual. Úsenlo en los casos en que no haya una etiqueta de texto visible en pantalla.

Este atributo puede ser utilizado con cualquier elemento HTML típico; no se limita a los elementos que tienen un papel ARIA asignado.

Accesibilidad en el diseño, asegurarte que el contenido de tus páginas pueda ser visto, leído y escuchado por todos, sin importar quien.

Importante tocar el tema de la accesibilidad porque es un tema que tocan poco los programadores pero que sin duda tiene tanta ayuda e importancia.

“La accesibilidad es básicamente darle a la web la capacidad de ser usada por cualquier persona independientemente de su discapacidad.”

De acuerdo con ello!

Uff cuánto camino nos falta por recorrer en temas de accesibilidad. Lo bueno es que estamos aprendiendo para tomarlo en serio.

Cuando habla de usar tamaños de fuentes accesibles. Nos referimos a usar medidas relativas como rem o em.
Lo mejor es usar rem combinada con la propiedad en CSS

<code> 
html{
 font-size: 62.5%;
}

Entonces todo el codigo tendra 10px de tamaño de fuente. Y si usamos

<code> 
.selector{
  font-size: 2rem;
}

El tamaño de fuente seria 20px.

La accesibilidad es una parta fundmental para el buen funcionamiento de cualquier sitio web, por muy simple y/o sencillo que se vea.

• El poder de la Web es su universalidad.

• Encabezados de manera ordenada.
• Tamaños de fuente accesible.
• Colores de contraste adecuado.
• No solo agrupar con el código de color.
• focus y active.
• Etiquetas descriptivas en los formularios.
• Garantiza que las animaciones no bloqueen el contenido.

Muy buena clase !

ACCESIBILIDAD Y DISEÑO

La accesibilidad es un aspecto primordial para nuestras aplicaciones y sitios web puesto que el acceso a la información es un derecho para todas las personas sin importar la discapacidad que tenga.
Tips para garantizar la accesibilidad a nuestro contenido:

• Utilizar los encabezados de manera ordenada para organizar nuestro contenido es decir utilizar HTML Semántico.

• Utilizar tamaños de fuente accesibles.

• Utilizar controles que tengan contraste adecuado.

• Garantizar que el código de color no sea la única forma de relacionar contenido.

• Diseñar teniendo en cuenta los estados “Focus” y “Active”

• Añadir etiquetas y textos descriptivos a los formularios. En los Labels en HTML

• Añadir contenido descriptivo que pueda remplazar videos e imágenes.

• Garantizar que las animaciones no bloquen el contenido

Es importante crear contenido que sea accesible a todo tipo de persona. Los tips básicos son esenciales.

Garantizar la accesibilidad es esencial en nuestro sitio web, tener en cuenta a todos los usuarios

Yo voy a adicionar un tip aquí:
El Dark Mode NO es sólo una moda.
Darle la opción al usuario para seleccionar de qué forma puede ver tu contenido es muy importante. En lo personal, tengo discapacidad visual y es terrible entrar a una web que no me permite ajustar esa opción, termino invirtiendo colores de pantalla y eso, en muchas ocasiones, no funciona.

Espero les sirva mi experiencia personal para mejorar sus diseños.

Hoy por hoy es muy importante que los productos que le brindamos a la web cuenten con accesibilidad, no solo para tener un producto bueno sino para que no discriminé a las personas que lamentablemente tienes ciertas discapacidades.

profe, utiliza colores. no controles, ja,ja,ja…

La web no es un derecho!!! NO ES ALGO INDISPENSABLE PARA LA VIDA O DIGNIDAD HUMANA ❤💓🈹

5. Accesibilidad y Diseño

Vamos a ver algunos tips básicos de accesibilidad:

1. Utiliza encabezados de manera ordenada para organizar la estructura de contenido (HTML5 Semántico).
2. Utilizar tamaños de fuente accesibles.
3. Utiliza colores que tengan un contraste adecuado.
4. Garantiza que el código de color no sea la única formad e relacionar contenido.
5. Diseña teniendo en cuenta los estados “focus” y “active” de los componentes (Eso en CSS).
6. Añade etiquetas y textos descriptivos a los campos del formulario (arealabels HTML).
7. Garantiza que las animaciones no bloqueen el acceso al contenido.
8. Escribe contenido descriptivo que pueda reemplazar videos e imágenes. Si hay necesariamente una imagen, agregar un alt (HTML) con la descripción de lo que hay en la imagen.

5.-Accesibilidad y diseño

Tips básicos de accesibilidad:

• Utiliza los encabezados de manera ordenada para organizar la estructura del contenido (HTML5 semántico).
• Utiliza tamaños de fuentes accesibles.
• Utiliza colores que tengan un contraste adecuado.
• Garantiza que el código de color no sea la única forma de relacionar contenido (borde, icono, etc).
• Diseña teniendo en cuenta los estados “focus” y “active” de los componentes.
• Añade etiquetas y textos descriptivos a los campos de formulario.
• Escribe contenido descriptivo que pueda reemplazar videos e imágenes.
• Garantiza que las animaciones no bloqueen el acceso al contenido.

Web semantica.

-Accesibilidad y diseño

	El poder de la web est+a en su univerdalidad.
	El acceso de todas las personas independientemente de la 
	discapacidad es un aspecto esencial

	Tim Bernes-Lee. W3C Director

La web es un derecho para todas las personas

Tips básicos de accesibilidad

| utiliza los encabezados de manera ordenada para organizar la
 estructura del contentenido (HTML5 semántico).
| Utiliza tamaños de fuentes accesibles.
| Utiliza colores que tengan un contraste adecuado 
| garantiza que el código de color no sea la única forma de relacionar contenido

| diseña teniendo en cuenta los estados "focus" y "active" de los componentes.
| Añade etiquetas y textos descriptivos a los campos de formulario
| escribe contenido descriptivo que pueda remplazar videos e imágenes
| Garantiza que las animacion no bloqueen acceso al contenido.

Es cierto que es una buena práctica trabajar el tamaño de las letras en REM para que las personas puedan cambiar el tamaño si lo necesitan en las opciones del navegador.

Importante que lo que creemos sea amigable para todos los usuarios y que todos podamos tener acceso a el independiente de la discapacidad que se tenga

No todas las personas ven los colores de la misma manera, por lo cual no uses jerarquía unicamente por colores

No rellenes de puros Divs tu web. Usa las etiquetas semánticas más adecuadas para cada sección.
Les comparto una pagina donde pueden ver todas las etiquetas HTML y sus descripción:
https://www.htmlquick.com/es/reference/tags.html

Nuestras webs deben ser accedidas por cualquier persona sin importar sus capacidades diferentes

Muy buenos todos los tips de accesibilidad. De seguro los voy a estar implementado en futuros proyectos.
Gran clase Samanta 😄

Algo que me molesta actualmente cuando ingreso a una pagina web es que sale el anuncio de acaptacion de cookies. Tengo que darle aceptar para que me deje ver el contenido de la pagina. Es molesto…

Tips basicos de accesibilidad
- Utilizar los encabezados de manera ordenada para organizar la estructura del contenido ( HTML5 semantico)
○ Garantiza a las personas que navegan con el teclado saber que tan importante es un titulo con relacion a otro , para agrupar contenido, etc
○ Fuentes accessibles
○ Utiliza colores con contrastes adecuados
§ Piensa mas alla de la estetica
○ Garantiza que el codigo de color no sea la unica forma de relacionar el contenido
○ Diseña teniendo en cuenta los estados “focus” y “active” de los componentes
§ Se usa como guia visual para quienes navegan con teclados
○ Añade etiquetas y titulos descriptivos a los campos de formularios
§ Investigar los “area labels”
§ Garantiza que en un error en un formulario no solo sea alertado por color, un mensaje que pueda ser leido ayuda
○ Garantizar que las animaciones no bloqueen contenidos
○ Escribe contenido descriptivo que pueda reemplazar videos e imágenes
Mantener el video por fuera de las imágenes y videos

Excelente !

Tips básicos de accesibilidad

En el curso de Frontend Developer hay un modulo sobre accesibilidad: https://platzi.com/clases/frontend-developer/

Además del curso de accesibilidad que esta en ´Archivos y Enlaces´

Excelente !

Gracias por los aportes!!!

Gracias !!!

¡La accesibilidad de la web es nuestro deber como desarrolladores!
El curso de frontend developer de la escuela de Javascript tiene unas clases buenísimas de este tema.

Muy buena clase.

GENIAL

Esta clase es fundamental! Gracias!

" El poder de la web esta en su universalidad. El acceso de todas las personas independientemente de la discapacidad es un aspecto esencial ." Tim Berners-Lee

Tips básicos de accesibilidad.
● Utiliza los encabezados de manera
ordenada para organizar la estructura
del contenido (HTML5 semántico).
● Utiliza tamaños de fuente accesibles.
● Utiliza colores que tengan un contraste
adecuado.
● Garantiza que el código de color no sea
la única forma de relacionar contenido.
● Diseña teniendo en cuenta los estados
“focus” y “active” de los componentes.
● Añade etiquetas y textos descriptivos a
los campos de formulario.
● Escribe contenido descriptivo que
pueda reemplazar videos e imágenes.
● Garantiza que las animaciones no
bloqueen el acceso al contenido.

Muy buenos tips 👌🏼

Excelente tema, la accesibilidad es muy importante para que muchas personas puedan acceder al conocimiento en la web.

Accesibilidad y diseño
Todas las paginas deben ser accesibles incluyendo para las personas con discapacidad ya que la web es un derecho

Gracias por el vídeo!

Honestamente, cuando comencé a programar no consideraba éste tema de accesibilidad.

Nunca había pensado en esa “accesibilidad” o inclusión dentro de las paginas web. Muy interesante. Y por ejemplo las personas que no ven todos los colores, ese tema también esta para analizar.

“Se busca que todo el contenido sea accesible”

Gracias por los tips, son datos que al programador se le pasan en el camino y son de vital importancia. 😄

arial label es una propiedad que viene en los controles del bootstrap y es para los casos en que el usuario usa lectores de pantalla.

Tener presente los conceptos de accesibilidad realmente es muy práctico.

Excelente, muchas gracias.

La accesibilidad es muy importante para que cualquier persona independientemente de una discapacidad pueda acceder de una manera correcta y fácil, la web es para todos 🌎 .
Este artículo les puede ayudar para complementar la clase.

Hablando de NAVEGAR CON EL TECLADO, les recomiendo la extension para chrome y firefox llamada vimium, es excelente hace que te olvides del raton en la web, aumenta tu productividad

https://material.io/

Accesibilidad significa que todas las personas puedan ver el contenido de forma sencilla, lo que significa que tenemos que procurar que nuestra pagina o aplicación pueda ser usada por personas con discapacidades o con algún tipo de limitación física