Accesibilidad by Raúl Rodríguez Cebrián https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk en-us 2022-10-14 07:49:00 UTC 2023-01-13 12:50:50 UTC hello@padlet.com Introduction to Accessibility rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2340041459 Aquí vemos la importación de la accesibilidad en las webs y la cantidad de gente que no puede acceder a dichas webs]]> 2022-10-14 08:19:45 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2340041459 2-What is Accessibility raulcebriansmr https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2346848222 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]]> 2022-10-19 11:47:53 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2346848222 3-Accessibility Overview raulcebriansmr https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2346876302 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]]> 2022-10-19 12:10:01 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2346876302 10-Using a Screen Reader raulcebriansmr https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2346893994 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]]> 2022-10-19 12:22:29 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2346893994 12-Checklists raulcebriansmr https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2346907859 Aquí nos enseña las "checklist" de WebAIM de las características que debería tener nuestra web,
◉ Perceptible
◉ Usable
◉ Entendible
◉ Robusta]]> 2022-10-19 12:31:14 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2346907859 14-Gear Shift into Course Practicalities raulcebriansmr https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2346917456 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]]> 2022-10-19 12:37:25 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2346917456 1. Introduction to Focus rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435495661 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"]]> 2023-01-06 09:34:50 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435495661 2. What is Focus? rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435497620 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 ]]> 2023-01-06 09:38:31 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435497620 4. DOM Order Matters rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435498575 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]]> 2023-01-06 09:40:09 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435498575 6. Using Tabindex rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435500905 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 ]]> 2023-01-06 09:44:13 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435500905 9. Managing Focus rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435505725 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]]> 2023-01-06 09:52:05 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435505725 11. Skip Links rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435507289 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 ]]> 2023-01-06 09:55:05 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435507289 13. Keyboard Design Patterns(Roving focus) rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435510492 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]]> 2023-01-06 10:01:06 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435510492 15. Offscreen Content rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435513225 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]]> 2023-01-06 10:06:22 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435513225 1. Semantics Introduction rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435516261 Nos da la introducción a este apartado en el que veremos opciones alternativas y tecnologías de asistencia para los usuarios ]]> 2023-01-06 10:11:25 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435516261 2. Assistive Technology rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435519219 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]]> 2023-01-06 10:15:30 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435519219 3. Affordances rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435522819 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]]> 2023-01-06 10:21:38 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435522819 7. Role, Name, Value rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435524335 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]]> 2023-01-06 10:24:24 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435524335 13. Writing Semantic HTML: The Name Game (Label) rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435526418 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]]> 2023-01-06 10:28:01 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435526418 1. Semantics - Navigating content - Intro rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435528143 En este apartado del curso nos muestra como usar los lectores de pantalla por nuestra web, para que así podamos luego optimizarla para ello]]> 2023-01-06 10:31:11 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435528143 2. Navigating with a screen reader rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435530364 Aquí nos enseña como es navegar con un lector de pantalla y lo personalizable e intuitivo que puede llegar a ser ]]> 2023-01-06 10:35:47 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435530364 4. Using Headings rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435532267 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 ]]> 2023-01-06 10:39:01 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435532267 8. Link Text rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435533277 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]]> 2023-01-06 10:41:11 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435533277 10. Landmarks rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435534626 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"
]]> 2023-01-06 10:44:13 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435534626 1. Intro to Semantics: ARIA rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435554694 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.]]> 2023-01-06 11:22:14 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435554694 5. Roleplaying rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435556566 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]]> 2023-01-06 11:25:51 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435556566 7. More Ways to Label rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435559135 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]]> 2023-01-06 11:30:09 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435559135 10. Default Semantics and Landmarks rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435560633 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]]> 2023-01-06 11:33:25 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435560633 11. ARIA Relationships rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435561341 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

]]> 2023-01-06 11:34:49 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435561341 Mas ARIA rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435567860 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)



]]> 2023-01-06 11:47:43 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435567860 1. Introduction to Style rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435568824 Aquí nos explicaran la importancia del estilo, los colores y cómo se comportan con las acciones de la página ]]> 2023-01-06 11:49:21 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435568824 2. Working with focus styles rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435569853 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]]> 2023-01-06 11:50:42 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435569853 4. Input Modality rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435571173 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]]> 2023-01-06 11:52:57 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435571173 8. Responsive design for multi-device rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435572606 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]]> 2023-01-06 11:55:54 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435572606 14. Meeting Contrast Requirements rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435574044 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 ]]> 2023-01-06 11:58:37 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435574044 17. High Contrast Mode rrodceb3005 https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435575027 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 ]]> 2023-01-06 12:00:28 UTC https://padlet.com/rrodceb3005/hi4aj4xyw5yjghjk/wish/2435575027