pensando en accesibilidad - shift7 - córdoba, argentina
TRANSCRIPT
![Page 1: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/1.jpg)
Pensando en accesibilidad
Hernán Garzón de la Roza
![Page 2: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/2.jpg)
Agenda● Definición y contexto
● Cómo afectan las diferentes discapacidades el acceso a la web
● Principios de diseño accesible (wcag)
● Prácticas de frontend (wai-aria)
![Page 3: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/3.jpg)
“The power of the web is in its universality. Access by everyone
regardless of disability is an essential aspect.”
Tim Berners-Lee
![Page 4: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/4.jpg)
AccesibilidadPercibir, entender, navegar, e interactuar con la web
![Page 5: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/5.jpg)
Percibir: comprender o conocer algo.
![Page 6: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/6.jpg)
Entender: tener idea clara de las cosas.
![Page 7: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/7.jpg)
Navegar: desplazarse a través de una red informática.
![Page 8: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/8.jpg)
Interaccionar: ejercer una interacción.
![Page 10: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/10.jpg)
Contexto
![Page 11: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/11.jpg)
Opinión de los profesionales de
Accesibilidad Web
![Page 12: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/12.jpg)
http://webaim.org/projects/practitionersurvey/
Región
![Page 13: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/13.jpg)
http://webaim.org/projects/practitionersurvey/
Universo
![Page 14: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/14.jpg)
http://webaim.org/projects/practitionersurvey/
Uso de Browsers
![Page 15: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/15.jpg)
http://webaim.org/projects/practitionersurvey/
¿Que tendría un mayor impacto sobre la accesibilidad?
![Page 16: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/16.jpg)
http://webaim.org/projects/practitionersurvey/
¿Porque los sitios web no son accesibles?
● Falta de conciencia sobre el tema (36%)
● Falta de conocimiento (36%)
● Falta de dinero o recursos (14%)
● Miedo a que la accesibilidad arruine el diseño o la
funcionalidad (13%)
![Page 17: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/17.jpg)
¿Cómo usan la web las personas con discapacidad?
![Page 18: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/18.jpg)
¡Igual que todos!
![Page 19: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/19.jpg)
Tipos de discapacidad
![Page 20: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/20.jpg)
Sensorial: visual y auditiva
![Page 21: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/21.jpg)
Lectores de vozteclados braille
Subtítulos
Sensorial: visual y auditiva
![Page 22: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/22.jpg)
Discapacidad física o motora
![Page 23: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/23.jpg)
Incapacidad del habla
![Page 24: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/24.jpg)
Incapacidad neurológica, intelectual o cognitiva
![Page 25: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/25.jpg)
Situaciones relacionadas con el envejecimiento
![Page 26: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/26.jpg)
![Page 27: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/27.jpg)
Principios de diseño accesible
![Page 28: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/28.jpg)
WCAG
eb
ontent
ccessibility
uidelines
![Page 29: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/29.jpg)
Requisitos de conformidadvisibilidad, operatividad, comprensividad y robustez.
![Page 30: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/30.jpg)
WCAGconformance requirements
Level A
http://www.w3.org/WAI/WCAG2-Conformance
![Page 31: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/31.jpg)
WCAGconformance requirements
Level AA
http://www.w3.org/WAI/WCAG2-Conformance
![Page 32: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/32.jpg)
WCAGconformance requirements
Level AAA
http://www.w3.org/WAI/WCAG2-Conformance
![Page 33: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/33.jpg)
Texto alternativo para imagenes
http://webaim.org/techniques/alttext/
<img src="cart.jpg" alt="Proceed to checkout" />
![Page 34: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/34.jpg)
Accesible con teclado
<h1 role=”button”> text </h1>Name: <input name="name" tabindex="1" />
Age: <input name="age" tabindex="3" />
Email: <input name="email" tabindex="2" />
![Page 35: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/35.jpg)
Legible
<html lang="en">
…
</html>
![Page 36: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/36.jpg)
Distinguible
![Page 37: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/37.jpg)
Distinguible
![Page 38: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/38.jpg)
Distinguible
![Page 39: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/39.jpg)
Adaptable
![Page 40: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/40.jpg)
● características de navegación
● navegar al contenido principal
● <title>
● orden del foco de elementos
● propósito de los links
● <headings> y <labels>
● foco de los elementos visible
Navegable
![Page 41: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/41.jpg)
WAI-ARIA
![Page 42: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/42.jpg)
WAi
ARiA
eb
ccessibility
nitative
ccesible
ich
nternet
pplications
![Page 43: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/43.jpg)
WAI ARIA ¿Como agregar información accesible a elementos HTML usando la
especificación WAI-ARIA?
![Page 44: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/44.jpg)
WAI ARIA Primera regla de ARIA
Usar elementos HTML5 nativos
![Page 45: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/45.jpg)
WAI ARIA Segunda regla de uso de ARIA
No modificar la semántica nativa
![Page 46: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/46.jpg)
NO<h1 role="button">heading button</h1>
![Page 47: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/47.jpg)
MEJOR HACE ESTO...<h1><span role="button">heading button</span></h1>
![Page 48: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/48.jpg)
O MEJOR, ¡ESTO!<h1><button>heading button</button></h1>
![Page 49: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/49.jpg)
WAI ARIA Tercera regla de uso de ARIA
Todos los elementos interactivos deben tener un nombre accesible
![Page 50: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/50.jpg)
<!-- elemento que está etiquetado, pero no esta
asociado al control que debería etiquetar -->
user name <input type="text">
<label>user name</label> <input type="text">
![Page 51: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/51.jpg)
<!-- Si usamos for/id envolviendo la etiqueta
alrededor del texto y el control, vamos a tener un
nombre accesible -->
<label>user name <input type="text"></label>
<label for="username">user name</label> <input
type="text" id="username">
![Page 53: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/53.jpg)
WAI ARIA ¿Que ocurre al agregar un role sobre la semántica
nativa de un elemento HTML?
![Page 54: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/54.jpg)
<h1 role=”button”> text </h1>
<button> text </button>
![Page 55: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/55.jpg)
WAI ARIA ¿Que NO hace?
![Page 56: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/56.jpg)
<button role=”heading”> text </heading>
<heading> text </heading>
![Page 57: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/57.jpg)
● Abstractos
● Componente (widget)
● Documento (document)
● de marca (Landmark)
Categorización de los Roles
![Page 58: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/58.jpg)
ROLES de componentes (widgets)WAI ARIA
http://www.w3.org/TR/wai-aria/roles#widget_roles
![Page 59: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/59.jpg)
- alert- alertdialog- button- checkbox- dialog- gridcell- link- log- marquee- menuitem- menuitemcheckbox- menuitemradio- option
- progressbar- radio- scrollbar- slider- spinbutton- status- tab- tabpanel- textbox- timer- tooltip- treeitem
![Page 60: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/60.jpg)
<img id="lbrb" alt="" src="ninja.png" width="150" class="ch-
shownby-pointerenter" data-title="This is a tooltip"
title="" aria-owns="ch-layer-23" aria-haspopup="true" data-side="
right" data-align="bottom" />
<div class="ch-popover ch-tooltip ch-cone" role="tooltip" id="ch-
layer-23" style="z-index: 1070; width: auto; height: auto;
position: absolute; top: 4751px; left: 1112px; display: block;"
data-side="right" data-align="bottom" aria-hidden="false">
<div class="ch-popover-content">This is a tooltip</div>
</div
www.chico-ui.com.ar
examplewidget roles: tooltip
![Page 61: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/61.jpg)
ROLES de componentes que actúan como contenedoresWAI ARIA
http://www.w3.org/TR/wai-aria/roles#widget_roles
![Page 62: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/62.jpg)
- combobox- grid- listbox- menu- menubar- radiogroup- tablist- tree- treegrid
![Page 63: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/63.jpg)
examplewidget roles: tablist
![Page 64: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/64.jpg)
examplewidget roles: tablist
<ul class="ch-tabs-triggers" role="tablist">
<li><a href="#tab1-a" class="ch-tab ch-user-no-select ch-
expandable-trigger-on" aria-controls="tab1-a" role="tab"
>Tab1</a></li>
<li><a href="#tab2-a" class="ch-tab ch-user-no-select" aria-
controls="tab2-a" role="tab">Tab2</a></li>
<li><a href="#tab3-a" class="ch-tab ch-user-no-select" aria-
controls="tab3-a" role="tab">Tab3</a></li>
<li><a href="/src/assets/ajax.html#ajax-a" class="ch-tab ch-
user-no-select" aria-controls="ajax-a" role="tab">Tab4</a></li>
</ul>
www.chico-ui.com.ar
![Page 65: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/65.jpg)
examplewidget roles: tabpanel
<div class="ch-box-lite ch-tabs-panel" role="presentation">
<div id="tab1-a" class="ch-tabpanel" aria-expanded="true" role="tabpanel" aria-hidden="false">
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div id="tab2-a" class="ch-hide ch-tabpanel" aria-expanded="false" role="tabpanel">
<p>content...</p>
</div>
<div id="tab3-a" class="ch-hide ch-tabpanel" aria-expanded="false" role="tabpanel">
<p>content...</p>
</div>
<div id="ajax-a" class="ch-tabpanel ch-hide" aria-expanded="false" role="tabpanel"></div>
</div>
www.chico-ui.com.ar
![Page 66: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/66.jpg)
ROLES de documento (document)WAI ARIA
http://www.w3.org/TR/wai-aria/roles#document_structure_roles
![Page 67: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/67.jpg)
- article- columnheader- definition- directory- document- group- heading- img- list
- listitem- math- note- presentation- region- row- rowgroup- rowheader- separator- toolbar
Document ROLES
![Page 68: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/68.jpg)
ROLES de marca (landmarks)WAI ARIA
http://www.w3.org/TR/wai-aria/roles#landmark_roles
![Page 69: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/69.jpg)
role=”banner”
role=”main”
role=”contentinfo”
role
=”na
viga
tion”
![Page 70: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/70.jpg)
”application”
”banner”
“complementary”
“contentinfo”
”form”
“main”
“navigation”
“search”
Aria Landmark Role HTML5 sectioning element
No HTML5 equivalent
No HTML5 equivalent
<aside>
Recommended <footer>
Recommended neutral element
<main>
<nav>
No HTML5 equivalent
Use Application ROLE wisely!
![Page 71: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/71.jpg)
WAI ARIA
● Atributos de componente
● Atributos de live region
● Atributos de drag and drop
● Atributos de relaciones
Estados & Propiedades
![Page 72: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/72.jpg)
WAI ARIA
Atributos de componente
- aria-autocomplete- aria-checked (state)- aria-disabled (state)- aria-expanded (state)- aria-haspopup- aria-hidden (state)- aria-invalid (state)- aria-label
- aria-level- aria-multiline- aria-multiselectable- aria-orientation- aria-pressed (state)- aria-readonly- aria-required- aria-selected (state)
- aria-sort- aria-valuemax- aria-valuemin- aria-valuenow- aria-valuetext
Estados & Propiedades
![Page 73: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/73.jpg)
<input
id=”product”
type=”text”
name=”as_word”
placeholder=”iphone 5”
class=”autocomplete”
data-side=”bottom”
data-align=”left”
aria-autocomplete=”list”
aria-haspopup=”false”
aria-owns=”ch-popover-2”
aria-describedby=”autocomplete-info”>
ejemploestados y propiedades: autocomplete
www.chico-ui.com.ar
![Page 74: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/74.jpg)
<input
id=”product”
type=”text”
name=”as_word”
placeholder=”iphone 5”
class=”autocomplete”
data-side=”bottom”
data-align=”left”
aria-autocomplete=”list”
aria-haspopup=”true”
aria-owns=”ch-popover-2”
aria-describedby=”autocomplete-info”>
ejemploestados y propiedades: autocomplete
www.chico-ui.com.ar
![Page 75: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/75.jpg)
<ul aria-expanded=”false” aria-hidden=”true”
id=”ch-expandable”>
<li>Collapsible</li>
<li>Collapsible</li>
<li>Link</li>
<li>Collapsible</li>
<li>Collapsible</li>
</ul>
ejemploestados y propiedades: aria-hidden y aria-expanded
www.chico-ui.com.ar
![Page 76: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/76.jpg)
<ul aria-expanded=”true” aria-hidden=”false”
id=”ch-expandable”>
<li>Collapsible</li>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<li>Collapsible</li>
<li>Link</li>
<li>Collapsible</li>
<li>Collapsible</li>
</ul>
ejemploestados y propiedades: aria-hidden y aria-expanded
www.chico-ui.com.ar
![Page 77: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/77.jpg)
Atributos de regiones “en vivo”
- aria-atomic- aria-busy (state)- aria-live- aria-relevant
WAI ARIA Estados & Propiedades
![Page 78: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/78.jpg)
Atributos de Drag and drop
- aria-dropeffect- aria-grabbed (state)
Drag and drop interaction ideas
WAI ARIA Estados & Propiedades
![Page 79: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/79.jpg)
Atributos de relaciones
- aria-activedescendant- aria-controls- aria-describedby- aria-flowto- aria-labeledby- aria-owns- aria-posinset- aria-setsize
Estados & PropiedadesWAI ARIA
![Page 80: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/80.jpg)
<input
id=”product”
type=”text”
name=”as_word”
placeholder=”iphone 5”
class=”autocomplete”
data-side=”bottom”
data-align=”left”
aria-autocomplete=”list”
aria-haspopup=”true”
aria-owns=”ch-popover-2”
aria-describedby=”autocomplete-info”>
<p class=”ch-form-hint” id=”autocomplete-info”> This is working with the MercadoLIbre API</p>
ejemploestados y propiedades: autocomplete
![Page 81: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/81.jpg)
Soporte de Browsershttp://stevefaulkner.github.io/html-mapping-tests/
![Page 82: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/82.jpg)
![Page 83: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/83.jpg)
Recursos
![Page 84: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/84.jpg)
Questions?
![Page 85: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/85.jpg)
Thank you :)
![Page 86: Pensando en Accesibilidad - Shift7 - Córdoba, Argentina](https://reader030.vdocuments.net/reader030/viewer/2022032617/55abbf6f1a28ab247f8b4634/html5/thumbnails/86.jpg)
Hernán Garzón de la Roza
@chertopjanov