Accessibilidad

 

Chaals, Yandex

Léonie, The Paciello Group

Accessibilidad

Chaals, Yandex
Léonie, The Paciello Group

Temas

¿Dónde estamos?

Estado del arte
HTML5, longdesc, ARIA 1.0
En desarollo
SVG2, ARIA 1.1/2, HTML "next", schema.org
¿Componentes Web, panelset, transcripciones?
¿Y qué tal?
MathML, ChemML, MusicXML, …

¿Qué funciona?

Bien
tabindex={-1,0}, role/aria-*, longdesc
Más o menos
video/audio con track
main/article/etc…
No rompe mucho
input type="..."

"Niños dificiles"

accesskey
Horrible en navegadores, pero importante
figure/figcaption, SVG
canvas, MathML
No juegan para accesibilidad todavía
¿summary, details?
¿sin futuro?

ARIA

Platform accessibility APIs

Expose semantic information to assistive technologies

Platform controls

Delete browsing history checkbox

Web controls

<input type="checkbox"
 title="Delete browsing history on exit" checked>

HTML to platform mapping

Most HTML maps to platform counterparts

W3C spec HTML to Platform Mapping

Window tree

Browser DOM tree

Browser Accessibility tree

Role

Defines the purpose of an element or control

<input type="checkbox">

Name

Identifies a particular element or control

<input type="checkbox"
   title="Delete browsing history on exit">

State

Describes the state of an element or control

<input type="checkbox"
   title="Delete browsing history on exit" checked>

Custom controls


<span>Delete browsing history on exit</span>

ARIA 1.0

W3C ARIA 1.0 specification

Custom controls with ARIA

<span tabindex="0" role="checkbox"
  aria-checked="true">Delete browsing history on exit</span>

Composite widgets

When no appropriate HTML element exists

Tab widget

<ul id="tablist">
<li><a href="#panel1" id="tab1">Blanco</a></li>
<li><a href="#panel3" id="tab3">Reposado</a></li>
</ul>

<div id="panel1">Blanco tequila is...</div>
<div id="panel3">Reposado tequila is...</div>

Add tablist role

<ul id="tablist" role="tablist">
<li><a href="#panel1" id="tab1">Blanco</a></li>
<li><a href="#panel3" id="tab3">Reposado</a></li>
</ul>

Add tab roles

<ul id="tablist" role="tablist">
<li><a href="#panel1" id="tab1" role="tab">Blanco</a></li>
<li><a href="#panel3" id="tab3" role="tab">Reposado</a></li>
</ul>

Add presentation roles

<ul id="tablist" role="tablist">
<li role="presentation"><a href="#panel1" id="tab1"
 role="tab">Blanco</a></li>
<li role="presentation"><a href="#panel3" id="tab3"
 role="tab">Reposado</a></li>
</ul>

Add tabpanel roles

<div id="panel1" role="tabpanel">Blanco tequila is...</div>
<div id="panel3" role="tabpanel">Reposado tequila is...</div>

Add selected state

<ul id="tablist" role="tablist">
<li role="presentation"> <a href="#panel1" id="tab1"
 role="tab" aria-selected="true">Blanco</a></li>
<li role="presentation"> <a href="#panel3" id="tab3"
 role="tab" aria-selected="false">Reposado</a></li>
</ul>

Add hidden state

<div id="panel1" role="tabpanel"
 aria-hidden="false">Blanco tequila is...</div>
<div id="panel3" role="tabpanel"
 aria-hidden="true">Reposado tequila is...</div>

Add control state

<li role="presentation"><a href="#panel1" id="tab1"
 role="tab" aria-selected="true"
 aria-controls="panel1">Blanco</a></li>

<!-- . . . -->
<div id="panel1" role="tabpanel"
 aria-hidden="false">Blanco tequila is...</div>

Add name

<ul id="tablist" role="tablist">
<li role="presentation"> <a href="#panel1" id="tab1"
 role="tab" aria-selected="true"
 aria-controls="panel1">Blanco</a></li>
<!-- . . . -->

<div id="panel1" role="tabpanel" aria-hidden="false"
   aria-labelledby="tab1"t;Blanco tequila is...</div>

Managing focus

Roving focus

Roving focus example

<li role="presentation"> <a href="#panel1" id="tab1"
 role="tab" aria-selected="true" aria-controls="panel1"
 tabindex="0">Blanco</a></li>
<li role="presentation"> <a href="#panel3" id="tab3"
 role="tab" aria-selected="false" aria-controls="panel3"
 tabindex="-1">Reposado</a></li>
</ul>

Active focus

Active focus example

<ul id="tablist" role="tablist"
 tabindex="0" aria-activedescendant="tab1">
<li role="presentation"><a href="#panel1" id="tab1"
 role="tab" aria-selected="true"
 aria-controls="panel1">Blanco</a></li>
<li role="presentation"><a href="#panel3" id="tab3"
 role="tab" aria-selected="false"
 aria-controls="panel3">Reposado</a></li>

Una pausa…

Single Page Applications (SPA)

View (page) title

Update the title element when views are rendered

View (page) focus

Move focus to the h1 when a view is rendered

Provide basic semantics

Make sure role, name and state are available

ngARIA in Angular

Provides support for common ARIA attributes

ngDisabled

Supports aria-disabled

ngDisabled example

<md-checkbox ng-disabled="disabled">

Becomes


<md-checkbox disabled aria-disabled="true">

ngShow and ngHide

Support aria-hidden

ngShow example

ng-hide { display: block; opacity: 0; }
<div ng-show="false" class="ng-hide"
 aria-hidden="true"></div>

Becomes

<div ng-show="true" aria-hidden="false"></div>

ngClick and ngDblclick

Support tab index, key press events, and the button role

ngClick example

<div ng-click="toggleMenu()"></div>

Becomes

<div ng-click="toggleMenu()" tabindex="0"
 role="button"></div>

ngMessages

Supports aria-live

ngMessages example

<div ng-messages="myForm.myName.$error">
  <div ng-message="required">field?</div>
  <div ng-message="maxlength">field is too long</div>
</div>
Becomes
<div ng-messages="myForm.myName.$error"
 aria-live="assertive">
  <div ng-message="required">field?</div>

ngModel

Supports aria-checked, aria-required, aria-invalid,
aria-valuenow, aria-valuemin and aria-valuemax, and input roles

ngARIA information

Schema.org

Buscar mejor

¿Qué buscas?

Lugares, eventos
Restaurantes, Conciertos, Vulcanes
Empresas, productos
Ofertas, Oficinas, Organisaciones
Obras creativas
Documentos, series, esculpturas…

Un evento…

ЯКЯк

A ver…

<div vocab="http://schema.org/" typeof="Event">
 <div property="name">
  <h2><a property="url"
 href="http://yandex.ru/yakyak">ЯКЯк</a></h2>
  <p>для разработчиков для разработчиков</p>
 </div> <!-- <hgroup> no vale -->
 <meta property="inLanguage" content="en">
. . .

Etc…

ЯКЯк

Ещё Конференция для разработчиков

  • ЦФШ Якутск, 9 Декябр 2025
  • С Чаалзом Яндекса
  • Регистация безплатний

Con µdata…

<div itemscope itemtype="http://schema.org/Event">
 <div itemprop="name">
  <h2><a itemprop="url"
 href="http://yandex.ru/yakyak">ЯКЯк</a></h2>
  <p>Ещё Конференция для разработчиков</p>
 </div> <!-- no hgroups… -->
 <meta itemprop="inLanguage" content="en">
. . .

¡¿Eh?!

Estandares son cómo cepillos de dientes. Estamos de acuerdo que son buena cosa,
      que debemos usar siempre. Pero cada uno prefiere usar su proprio…
xkcd.com/927

Accessibilidad?

<script type="application/ld+json"> {
 "@context" :  "http://schema.org/" ,
 "@type" : "CreativeWork" ,
 "accessibilityHazard" :  [
        "FlashingHazard" , "noSoundHazard" ,
        "noMotionSimulationHazard" ] , 

...accessibilidad...

 "accessibilityFeature" : [
        "alternativeText" , "longDescription" ] ,

 "fileFormat" : [
        "text/html" , "image/png" ,
        "text/javascript" , "text/css" ] ,
  // . . .

...accessibilidad...

 "accessibilityAPI" : [ 
        "ARIA" , "UIA" ]
 "accessibilityControl" : [
        "fullKeyboardControl" , "fullTouchControl" ,
        "fullVoiceControl" , "fullMouseControl" ]
} </script>

¿Qué buscar?

Y ¿ahora qué?

accessMode
¿Eso es visual? ¿Textual? ¿Texto Audiovisual?
Precisión
Letra cuanto de grande? Cuanto de Contraste?
Lugares reales
¿Puedo entrar? ¿Llegar al bar? ¿y al aseo?

¿Dónde vamos?

HTML
¿Componentes Web, panelset, transcripciones?
SVG, MathML
Navegación, ¿más aria?, …
ARIA
Limpiar, nuevos atributos (DPub), …

Panelset

¿Un panel y summary / details?

Transcripciones

Un borrador más

ARIA

HTML
describedat, aria-current
SVG, MathML
Tipos de información ("STEM")
"DPub"
Libros electrónicos…

¿Y despues?

MathML
Contenido y presentación
ChemML, MusicXML
Se usan. Pero…
¿Y más?
La web es un proyecto en marcha…

Gracias

Нет глупого вопроса
Глупность - не спрашивать

chaals@yandex-team.ru

Yandex.com - schema.org