WAI-ARIA Best Practices

콘텐츠연합플랫폼
클라이언트개발부 지성봉

What is WAI-ARIA

WAI: Web Accessibility Initiative
ARIA: Accessible Rich Internet Application

Why use?

supplement for native language semantics, not a replacement

Role, Property, State

Role

Attaching a role gives assistive technologies information about how to handle each element

<tag role="keyword">

<div role="navigation">

list of role keywords

Property, State

Both provide specific information about an object, and both form part of the definition of the nature of roles.

<tag aria-*="value">

<button aria-expanded="false" aria-controls="sect1">

How to improve a11y with WAI-ARIA

Step 1

use native HTML

then, when use WAI-ARIA?

the feature is available in HTML but it is not implemented or it is implemented, but accessibility support is not.
visual design constraints rule out the use of a particular ative element
feature is not currently available in HTML

Step 2

Add ARIA

inline or via Script?

If the ARIA role or aria-* attribute does not rely on scripting to provide interaction behavior, then inline.
If the content and interaction is only supported in a scripting-enabled browsing context, then inline.
If the ARIA role or aria-* attribute can be inserted, changed and removed ARIA via scripting, then via script.

Step 3

developing keyboard interface

requirements

All interactive ARIA controls must be usable with the keyboard.
If can click or tap or drag or drop or slide or scroll, must also be able to perform an equivalent action using the keyboard
All interactive widgets must be scripted to respond to standard key strokes or key stroke combinations where applicable

Best Practices

Landmark

legecy

<div class="header">
  <h1>ARIA Landmarks Example</h1>
</div>
<div class="navigation">
  <ul><li><a>...</a></li>...</ul>
</div>
<div class="main">
  <h2>Banner Landmark</h2>
  <div class="tab-container">
	  ...
  </div>
</div>
<div class="sidebar">
  <h2>Landmarks</h2>
</div>
<div class="sidebar">
  <h2>Related W3C Documents</h2>
</div>
<div class="footer">
  Copyright
</div>

use Native Language

<header>                                                  <!-- banner landmark -->
  <h1>ARIA Landmarks Example</h1>
</header>
<nav>                                                       <!-- navigation landmark -->
  <ul>...</ul>
</nav>
<main>                                                     <!-- main landmark -->
  <h2>Banner Landmark</h2>
  <section>                                               <!-- region landmark -->
    ...
  </section>
</main>
<aside>                                                    <!-- complementary landmark -->
  <h2>Landmarks</h2>
</aside>
<aside>                                                    <!-- complementary landmark -->
  <h2>Related W3C Documents</h2>
</aside>
<footer>                                                   <!-- contentinfo landmark -->
  Copyright
</footer>

Use ARIA Techniques

<div class="header" role="banner">
  <h1>ARIA Landmarks Example</h1>
</div>
<div class="navigation" role="navigation">
  <ul><li><a>...</a></li>...</ul>
</div>
<div class="main" role="main">
  <h2>Banner Landmark</h2>
  <div class="tab-container" role="region" aria-label="Coding Tequniques">
	  ...
  </div>
</div>
<div class="sidebar" role="complementary" aria-labelledby="id3">
  <h2 id="id3">Landmarks</h2>
</div>
<div class="sidebar" role="complementary" aria-labelledby="id4">
  <h2 id="id4">Related W3c Documents</h2>
</div>
<div class="footer" role="contentinfo">
  Copyright
</div>

Tab Contents

legacy

<div class="tab-menu">
  <a href="#tab-panel1">HTML</a>
  <a href="#tab-panel2">CSS</a>
  <a href="#tab-panel3">JavaScript</a>
</div>
<div class="tab-panels">
  <div id="tab-panel1">
    <h3>HTML</h3>
    ...
  </div>
  <div id="tab-panel2">
    <h3>CSS</h3>
    ...
  </div>
  <div id="tab-panel3">
    <h3>JavaScript</h3>
    ...
  </div>
</div>

Use ARIA Techniques - add roles

<div class="tab-menu" role="tablist">
  <a href="#tab-panel1" role="tab">HTML</a>
  <a href="#tab-panel2" role="tab">CSS</a>
  <a href="#tab-panel3" role="tab">JavaScript</a>
</div>
<div class="tab-panels">
  <div id="tab-panel1" role="tabpanel">
    ... 
  </div>
  <div id="tab-panel2" role="tabpanel">
    ... 
  </div>
  <div id="tab-panel3" role="tabpanel">
    ... 
  </div>
</div>

Use ARIA Techniques - add properties, states

<div class="tab-menu" role="tablist">
  <a id="tab1" href="#tab-panel1" role="tab" 
      aria-controls="tab-panel1" aria-selected="true">HTML</a>
  <a id="tab2" href="#tab-panel2" role="tab" 
      aria-controls="tab-panel2" aria-selected="false">CSS</a>
  <a id="tab3" href="#tab-panel3" role="tab" 
      aria-controls="tab-panel3" aria-selected="false">JavaScript</a>
</div>
<div class="tab-panels">
  <div id="tab-panel1" role="tabpanel" 
         aria-labelledby="tab1">
    ... 
  </div>
  <div id="tab-panel2" role="tabpanel" 
         aria-labelledby="tab2" aria-hidden="true">
    ... 
  </div>
  <div id="tab-panel3" role="tabpanel" 
         aria-labelledby="tab3" aria-hidden="true">
    ... 
  </div>
</div>

Use ARIA Technique - developing keyboard interface

Keyboard Support
Key	Function
`Tab`	when focus moves into the tab list, place focus on active `tab` element When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the tabpanel element
`Right Arrow`	Moves focus to the next tab. If focus is on the last tab, moves focus to the first tab. Activates the newly focused tab
`Left Arrow`	Moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Activates the newly focused tab
`Home`	Moves focus to the first tab and activates it
`End`	Moves focus to the last tab and activates it

Should I implement it myself?

Yes, if you can.

WAI-ARIA Authoring Practices 1.1

WAI-ARIA 사례집

otherwise

you can use jQueryUI, github, wai-aria 사례집, etc...

jQueryUI 아코디언 위젯에 aria가 적용된 것을 코드 상에서 확인 할 수 있다.

NIA github

References

감사합니다.

PDF 다운로드 / Transcript 보기
publisher@publisher.name