JDC丨京东设计中心 - 初探 WAI-ARIA

< i className = "eye-ico J_ping" onClick = { this . toggleInputType } / >

. visually - hidden {

position : absolute ! important ;

clip : rect ( 1px 1px 1px 1px ) ; /* IE6, IE7 */

clip : rect ( 1px , 1px , 1px , 1px ) ;

padding : 0 ! important ;

border : 0 ! important ;

height : 1px ! important ;

width : 1px ! important ;

overflow : hidden ;

}

body : hover . visually - hidden a ,

body : hover . visually - hidden input ,

body : hover . visually - hidden button { display : none ! important ; }

< div role = "button" tabindex = "0" aria - pressed = "false" aria - disabled = "false" > < / div >

< div class = "tabpanel" >

< ul class = "tablist" role = "tablist" >

< li role = "tab" aria - selected = "true" tabindex = "0" > 春天 < / li >

< li role = "tab" aria - selected = "false" tabindex = "-1" > 夏天 < / li >

< li role = "tab" aria - selected = "false" tabindex = "-1" > 秋天 < / li >

< li role = "tab" aria - selected = "false" tabindex = "-1" > 冬天 < / li >

< / ul >

< / div >

< div role = "button" > < / div >

< div > < div >

< div role = "datepicker" > < / div > < ! -- Bad : "datepicker" is not an ARIA role -- >

< div role = "range" > < / div > < ! -- Bad : "range" is an _abstract_ ARIA role -- >

< div role = "" > < / div > < ! -- Bad : An empty ARIA role is not allowed -- >

< div id = "label-element" >

Label for text input

< / div >

< input type = "text" aria - labelledby = "label-element" > < / input >

< div id = "my-label" > Label for text input < / div >

< input type = "text" aria - labelledby = "the-label" > < / input >

< span role = "checkbox" aria - checked = "false" aria - labelledby = "foo" tabindex = "0" > < / span >

< span role = "checkbox" aria - labelledby = "foo" tabindex = "0" > < / span >

< span aria - hidden = "true" > foo < / span >

< span aria - hidden = "yes" > foo < / span >

< input id = "combo1" type = "text" role = "combobox" aria - labelledby = "foo" aria - owns = "list1" / >

< input id = "combo2" type = "text" role = "combobox" aria - labelledby = "foo" aria - owns = "list1" / >

< ul id = "list1" aria - expanded = "true" role = "listbox" >

< li role = "option" tabindex = "-1" > Rainbow Trout < / li >

< li role = "option" tabindex = "-1" > Brook Trout < / li >

< li role = "option" tabindex = "-1" > Lake Trout < / li >

< / ul >

< ul role = "radiogroup" aria - labelledby = "foo" >

< li id = "radio1" tabindex = "-1" role = "radio" aria - checked = "false" > Rainbow Trout < / li >

< li id = "radio2" tabindex = "-1" role = "radio" aria - checked = "false" > Brook Trout < / li >

< li id = "radio3" tabindex = "0" role = "radio" aria - checked = "true" > Lake Trout < / li >

< / ul >

< ul role = "radiogroup" aria - labelledby = "foo" >

< li id = "radio1" tabindex = "-1" > Rainbow Trout < / li >

< li id = "radio2" tabindex = "-1" > Brook Trout < / li >

< li id = "radio3" tabindex = "0" > Lake Trout < / li >

< / ul >

< div role = "list" >

< span role = "listitem" > Rainbow Trout < / span >

< span role = "listitem" > Brook Trout < / span >

< span role = "listitem" > Lake Trout < / span >

< / div >

< div >

< span role = "listitem" > Rainbow Trout < / span >

< span role = "listitem" > Brook Trout < / span >

< span role = "listitem" > Lake Trout < / span >

< / div >

< ul role = "radiogroup" aria - required = "true" aria - labelledby = "foo" >

< li tabindex = "-1" role = "radio" aria - checked = "false" > Rainbow Trout < / li >

< li tabindex = "-1" role = "radio" aria - checked = "false" > Brook Trout < / li >

< li tabindex = "0" role = "radio" aria - checked = "true" > Lake Trout < / li >

< / ul >

< ! -- Bad : the radio role does not support the aria - required property -- >

< ul role = "radiogroup" aria - labelledby = "foo" >

< li aria - required = "true" tabindex = "-1" role = "radio" aria - checked = "false" > Rainbow Trout < / li >

< li aria - required = "true" tabindex = "-1" role = "radio" aria - checked = "false" > Brook Trout < / li >

< li aria - required = "true" tabindex = "0" role = "radio" aria - checked = "true" > Lake Trout < / li >

< / ul >

< div id = "address_label" > Enter your address < / div >

< input aria - labelledby = "address_label" >

< ! -- Bad : Labeled using incorrectly spelled aria - labeledby -- >

< div id = "address_label" > Enter your address < / div >

< input aria - labeledby = "address_label" >

< meta charset = "UTF-8" >

< meta charset = "UTF-8" aria - hidden = "false" >

< ! DOCTYPE html >

< html lang = "fr" >

< ! DOCTYPE html >

< html >

< div id = "address_label" > Enter your address < / div >

< input aria - labelledby = "address_label" >

< input aria - label = "Enter your address" >

< label for = "address" > Enter your address < / label >

< input id = "address" >

< label >

Address :

< input >

< / label >

< input title = "Enter your address" >

< video controls id = "video" >

< source src = "video.webm" type = "video/webm" / >

< / video >

< label for = "video" > Video of ducklings < / label >

< div >

Enter your address :

< input id = "address" > < ! -- Bad : label not associated with control -- >

< / div >

< button class = "enter_site" > < / button > < ! -- Bad : button has no text description -- >

< input placeholder = "Enter your address" > < ! -- Bad : placeholder is used in place of a label -- >

- aria - labelledby attribute

- aria - label attribute

- HTML < label >

- alt attribute , for < img > or < input type = 'img' > elements

- title attribute as a last resort .

< img src = "flowers.jpg" alt = "A vase containing a dozen red roses" >

< img src = "line.png" alt = "" >

< img src = "dot.png" role = "presentation" >

< img src = "stateDiagram.jpg" >

< span onclick = "doSomething();" tabindex = "0" > Click me ! < / span >

< span onclick = "doSomething();" tabindex = "-1" > Click me too ! < / span >

< button id = "button" > Click me as well ! < / button >

!-- Bad: span with onclick attribute has no tabindex -->

<span onclick="submitForm();">Submit</span>

<!-- Bad: anchor element without href is not focusable -->

<a onclick="showNextPage();">Next page</a>

- <input>, <button>, <select> and <textarea> elements which are not disabled

- <a> or <area> elements with an href attribute

<video controls>

    <source src="video.webm" type="video/webm" />

    <track kind="captions" src="captions.vtt" type="text/vtt" srclang="en" label="English Captions" default />

</video>

<table>

  <tr>

    <th>Header</th >

    <th>Header</th>

    <th>Header</th>

  </tr>

  <tr>

    <td>Cell</td>

    <td>Cell</td>

    <td>Cell</td>

  </tr>

</table>

<table>

  <tr>

    <td>Cell</td>

    <td>Cell< /td>

    <td>Cell</td>

  </tr>

  <tr>

    <td>Cell</td>

    <td>Cell</td>

    <td>Cell</td>

  </tr>

</table>

<table role="presentation">

  <tr>

    <td>Cell</td>

    <td>Cell</td>

     <td>Cell</td>

  </tr>

  <tr>

    <td>Cell</td>

    <td>Cell</td>

    <td>Cell</td>

  </tr>

</table>

<table role="presentation">

  <tr>

    <th>Header</th>

    <th>Header</th>

    <th >Header</th>

  </tr>

  <tr>

    <td>Cell</td>

    <td>Cell</td>

    <td>Cell</td>

  </tr>

</table>

<p style="color: gray">  <!-- Contrast ratio 3.95:1 -->

Warning: this product should not be used by any minor without adult supervision.

<h1 style="color: #BBB">Very subtle heading</h1>  <!-- Contrast ratio 1.92:1 -->

<img data-lazy-img="done" width="100" height="100" alt="" src="//img10.360buyimg.com/N7/s100x100_jfs/t7471/271/57601213/250196/b7b1a11c/598e7c2dN2377a3d3.jpg">

<input type="text" onkeydown="javascript:if(event.keyCode==13) search('quan-key');" autocomplete="off" id="quan-key" accesskey ="s" class="text" aria-label="搜索框">

<html lang="en">

<div id="logo-2014">

<h1><a href="http://www.jd.com/" class="logo">京东</a></h1>

<div class="extra">

    <h2 id="channel">领券中心</h2>

</div>

</div>

<a href="#none" class="btn btn-def" index="0"  ><span class="txt">立即领取</span></a>

<a href="javascript:;" class="btn btn-def" role="button" tabindex="0"><span class="txt">立即领取</span></a>

.cate-more:focus + .list-more {

  visibility: visible;

   opacity: 1;

  top: 39px;

}

<a href="javascript:;" class="cate-more"   data-target="listmore">全部分类<span class="ci-right"><s>◇</s></span></a>

<div class="q-type" tabindex="0"><div class="q-price"><em>¥</em><strong>30</strong><span class="q-limit"> 满100可用</span></div><div class="q-range"><span class="superimposed">可叠加</span>纤诗月旗舰店</div><div class="q-progress"><span class="txt">已抢85%</span><span class="progress-wrap"><span class="progress-bg"></span><span class="progress" style="width:85%"></span></span></div></div>