# data[].attributes.body
Aquí vemos la importación de la accesibilidad en las webs y la cantidad de gente que no puede acceder a dichas webs

# data[].attributes.body
En esta vídeo nos explica mas en detalle que es la accesibilidad y nos pone un ejemplo con un formulario que, es posible de usar pero no es bueno, y nos da unos consejos de como lo mejoraría

# data[].attributes.body
Nos muestra las diferentes discapacidades o problemas que puede tener una persona, con ejemplos reales, y las maneras con las que ellos dan solución o posibles soluciones a esos problemas

# data[].attributes.body
En este video nos muestra como una persona con ceguera, usa el navegador e incluso "lee" sus correos y mansajes gracias a un screen reader y a un teclado braille y así podemos ver como una persona de esa condición de mueve por la web gracias a los short cut

# data[].attributes.body
Aquí nos enseña las "checklist" de WebAIM de las características que debería tener nuestra web,
◉ Perceptible
◉ Usable
◉ Entendible
◉ Robusta

# data[].attributes.headline
14-Gear Shift into Course Practicalities

# data[].attributes.subject
14-Gear Shift into Course Practicalities

# data[].attributes.body
y Ya para acabar nos dan los 3 últimos tips para hacer mas accesible nuestra pagina, que son:
◉ Centrarse en el uso de teclado
◉ Tener una semántica clara
◉ Tener un estilo amigable que no confunda al usuario

# data[].attributes.body
Enseña lo que es el focus y en la manera en la que los usuarios lo usan saltando de campo en campo usando "tab"

# data[].attributes.body
El focus es la capacidad de "centrar la atención" del teclado hacia un apartado, por ejemplo un capo de texto o un botón, haciendo referencia a que cualquier persona debería poder usar todas o casi todas las funcionalidades solo con el teclado

# data[].attributes.body
Aquí lo que explica es que hay que tener en cuenta el orden en el escribimos nuestro código HTML ya que ese es el orden que seguirá el focus al ir haciendo tab y no el que mostrase por pantalla

# data[].attributes.body
es un atributo que se le pone a los elementos en html para darles un orden a la hora de tabular, siendo 0 un orden normal y -1 haciendo que no se tabule a ese objeto

# data[].attributes.body
En este da algunas nociones de como maneja el focus, en un escenario en el que queremos saltar desde el menu superior a navegar por el contenido de esa pagina haciendo uso de tabindex y la funcion focus() de JavaScripts

# data[].attributes.body
Lo que hacemos con esto es poder saltar varios links de golpe sin tener que pasar por todos de uno en uno creando botón oculto con el cual al presionar enter haría referencia al main content y te llevaría ahí directamente

# data[].attributes.headline
13. Keyboard Design Patterns(Roving focus)

# data[].attributes.subject
13. Keyboard Design Patterns(Roving focus)

# data[].attributes.body
Nos explica la técnica roving focus, con la cual podemos ir variando el "focus de los elementos" y nos dan una pequeñas pautas de como usarlo con el tabindex y JavaScript

# data[].attributes.body
Aquí lo que pasa es que al tener un elemento que de normal esta oculto, como un menú latera desplegable, e ir haciendo tab el foco pasara por todos los elementos de ese menú oculto antes de llegar al main content, y que la forma de arreglarlo seria por ejemplo que cuando algún elemento tenga el foco el menú se muestre haciendo así saber al usuario que ahí esta el foco

# data[].attributes.body
Nos da la introducción a este apartado en el que veremos opciones alternativas y tecnologías de asistencia para los usuarios

# data[].attributes.body
Aquí nos explica el problema ya abordado de que ciertas personas no pueden moverse por la web con tanta facilidad y para esto existen estas tecnologías de asistencia, como lectores de pantalla o los teclados braille

# data[].attributes.body
Aquí nos explica lo que nuestra pagina tiene que tener ciertas prestaciones, con las cuales un usuario pueda navegar por nuestra web sin un "estudio" previo

# data[].attributes.body
Esto es usado para los lectores de pantalla, mediante codigo podemos ayudar al programa lector a saber, que Rol tiene ese elemento, cual es su nombre y en que estado esta

# data[].attributes.headline
13. Writing Semantic HTML: The Name Game (Label)

# data[].attributes.subject
13. Writing Semantic HTML: The Name Game (Label)

# data[].attributes.body
Aquí nos explica la importancia y la necesidad del uso de las <label> para nuestro código html, con el uso de esta etiqueta podemos "etiquetar" objetos dándole así unos nombres para facilitar al lector de pantalla

# data[].attributes.headline
1. Semantics - Navigating content - Intro

# data[].attributes.subject
1. Semantics - Navigating content - Intro

# data[].attributes.body
En este apartado del curso nos muestra como usar los lectores de pantalla por nuestra web, para que así podamos luego optimizarla para ello

# data[].attributes.body
Aquí nos enseña como es navegar con un lector de pantalla y lo personalizable e intuitivo que puede llegar a ser

# data[].attributes.body
El uso de las cabeceras es super importante ya que es lo que da el inicio de un contenido además de "marcarlo" con un titulo, haciendo así mas fácil encontrarlo para el lector de pantalla

# data[].attributes.body
los links son las etiquetas que contienen un hreft, y son eso, links, no podemos usarlos como botones, ya que el lector de pantalla lo segura detectando como un link y eso podría liar al usuario

# data[].attributes.body
Nos explican la importacia de las "landsmarks", que son:

article

aside

main

nav

section

ya que con estas etiquetas podemos dividir la pagina en las secciones que toca y darle mas facilidades a los lectores, para que sepan como esta distribuida la pagina a la hora de usar los lectores de pantalla y el "focus"

# data[].attributes.body
Nos explican que aria es una colección de atributos que definen como realizar contenido y aplicaciones web  más accesibles para las personas con discapacidades.

# data[].attributes.body
Los roles son importantes para asignar un tipo a un elemento html, y gracias a aria, que nos ofrece una gran variedad de ellos, ponemos darles roles personalizados a todos los elementos haciendo así la pagina mas accesible

# data[].attributes.body
Aqui nos introduce las "etiquetas de aria",
aria-label y aria-labelledby.
aria-label es para dar una etiqueta-nombre a un elemento para identificarlo mejor y
aria-labelledby es mas como un referenciador de un "id", un identificador único para ese elemento

# data[].attributes.body
ya conocemos las landmarks que vienen con html básico, pero aria añade la posibilidad de crear tus propias landmarks con el uso de los roles

# data[].attributes.body
Aria cuanta con muchos atributos que podemos usar tales como:
aria-owns: Para idicar herencia, si un elemento es hijo de otro
aria-activeddescendant: Para hacer listas
aria-describedby: Para hacer descripciones
aria-posinset: Para la posicion de un elemento
aria-setisize: Para su tamaño

# data[].attributes.body
En el resto del curso nos explican más atributos de aria:
aria-hidden: Para ocultar elementos a los lectores de pantalla, por ejemplo si ocultamos un elemento de la vista del usuario, pero no del lector de pantalla, el usuario puede seguir pensando que está ahí

aria-live: Sirve para dar actualizaciones al usuario o notificaciones

aria-atomic: sirve para unificar muchos elementos en uno solo, como por ejemplo todos los campos de texto son un único formulario
aria-relevant: (no lo entendi)

# data[].attributes.body
Aquí nos explicaran la importancia del estilo, los colores y cómo se comportan con las acciones de la página

# data[].attributes.body
Se trata en dar un estilo diferente al objeto con el foco, haciendo así mas fácil si seguimiento y hacer que el usuario se centre mas en ese mismo foco

# data[].attributes.body
Da mas pautas de lo explicado anteriormente, de como un botón cambia al tener el foco y como personalizarlo y usarlo con las herramientas de html y css

# data[].attributes.body
Aqui nos dan pautas sobre los diseños responsive, y como usarlos, con el uso de la etiqueta meta en la cavecera o las diferentes unidades de medida usada en css como elos em y rem

# data[].attributes.body
Aqui llegamos al tema del color y el contraste, por que puede pasar que 2 colores como el del fondo y el del texto se vean genial para una persona nomarl, pero para una persona con daltonismo se puedan ver demasiado iguales o incluso ni verse

# data[].attributes.body
Como su nombre indica es un modo en el cual los elementos y el fondo usan colores que hace mucho contraste, con lo cual para personas con daltonismo o poca visibilidad puede ser de mucha ayuda