Platform controls
- Role is "check box"
- Name is "Delete browsing history on exit"
- State is "FOCUSED CHECKED FOCUSABLE"
longdesc, ARIA 1.0panelset, transcripciones?tabindex={-1,0}, role/aria-*, longdescvideo/audio con trackmain/article/etc…input type="..."figure/figcaption, SVGcanvas, MathMLsummary, details?Expose semantic information to assistive technologies
<input type="checkbox"
title="Delete browsing history on exit" checked>Defines the purpose of an element or control
<input type="checkbox">Identifies a particular element or control
<input type="checkbox"
title="Delete browsing history on exit">Describes the state of an element or control
<input type="checkbox"
title="Delete browsing history on exit" checked>
<span>Delete browsing history on exit</span>
W3C ARIA 1.0 specification
<span tabindex="0" role="checkbox"
aria-checked="true">Delete browsing history on exit</span>
When no appropriate HTML element exists
<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>
<ul id="tablist" role="tablist">
<li><a href="#panel1" id="tab1">Blanco</a></li>
<li><a href="#panel3" id="tab3">Reposado</a></li>
</ul>
<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>
<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>
<div id="panel1" role="tabpanel">Blanco tequila is...</div>
<div id="panel3" role="tabpanel">Reposado tequila is...</div><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><div id="panel1" role="tabpanel"
aria-hidden="false">Blanco tequila is...</div>
<div id="panel3" role="tabpanel"
aria-hidden="true">Reposado tequila is...</div>
<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><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>.focus() to move focus<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>.scrollIntoView() to manage visual focus<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>Update the title element when views are rendered
Move focus to the h1 when a view is rendered
Make sure role, name and state are available
Provides support for common ARIA attributes
Supports aria-disabled
<md-checkbox ng-disabled="disabled">Becomes
<md-checkbox disabled aria-disabled="true">Support aria-hidden
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>Support tab index, key press events, and the button role
<div ng-click="toggleMenu()"></div>Becomes
<div ng-click="toggleMenu()" tabindex="0"
role="button"></div>Supports aria-live
<div ng-messages="myForm.myName.$error">
<div ng-message="required">field?</div>
<div ng-message="maxlength">field is too long</div>
</div><div ng-messages="myForm.myName.$error" aria-live="assertive"> <div ng-message="required">field?</div>
Supports aria-checked, aria-required, aria-invalid,
aria-valuenow, aria-valuemin and aria-valuemax, and input roles
Buscar mejor
<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">. . .
<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">
. . .
<script type="application/ld+json"> {
"@context" : "http://schema.org/" ,
"@type" : "CreativeWork" ,
"accessibilityHazard" : [
"FlashingHazard" , "noSoundHazard" ,
"noMotionSimulationHazard" ] , "accessibilityFeature" : [
"alternativeText" , "longDescription" ] ,
"fileFormat" : [
"text/html" , "image/png" ,
"text/javascript" , "text/css" ] ,
// . . . "accessibilityAPI" : [
"ARIA" , "UIA" ]
"accessibilityControl" : [
"fullKeyboardControl" , "fullTouchControl" ,
"fullVoiceControl" , "fullMouseControl" ]
} </script>accessModepanelset, transcripciones?paneltitlepanel>panelset¿Un panel y summary / details?
Un borrador más
describedat, aria-current