files/ja/web/accessibility/mobile_accessibility_checklist/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

---
title: モバイルアクセシビリティのチェックリスト
slug: Web/Accessibility/Mobile_accessibility_checklist
tags:
  - Accessibility
  - Guidelines
  - Mobile
  - checklist
translation_of: Web/Accessibility/Mobile_accessibility_checklist
---
<div class="summary">
<p><span class="seoSummary">このドキュメントは、モバイルアプリ開発者向けのアクセシビリティ要件の簡潔なチェックリストを提供します。 それはより多くのパターンが生じるにつれて絶えず進化することを意図しています。</span></p>
</div>

<h2 id="Colour" name="Colour">色</h2>

<ul>
 <li>カラーコントラストは、<a href="http://www.w3.org/TR/WCAG/">WCAG 2.0</a>（英語）の AA レベルの要件に準拠<strong>しなければならない</strong>。

  <ul>
   <li>通常のテキストでは、4.5:1 のコントラスト比（18 ポイント未満または 14 ポイント未満の太字）。</li>
   <li>大きなテキストでは、3:1 のコントラスト比（少なくとも 18 ポイントまたは 14 ポイントの太字）。</li>
  </ul>
 </li>
 <li>色で伝えられる情報は、他の方法でも利用可能<strong>でなければならない</strong>（リンクのための下線付きテキストなど）。</li>
</ul>

<h2 id="Visibility" name="Visibility">可視性</h2>

<ul>
 <li>{{cssxref("opacity")}} がゼロ、{{cssxref("z-index")}} 順、画面外配置のようなコンテンツ非表示テクニックは、可視性を扱うためだけに使用<strong>してはいけない</strong>。</li>
 <li>現在の表示画面以外のものは、本当に見えないもの<strong>でなければならない</strong>（特に複数のカードを含む単一ページのアプリに関連します）。
  <ul>
   <li>{{htmlattrxref("hidden")}} 属性、{{cssxref("visibility")}} スタイルプロパティ、または {{cssxref("display")}} スタイルプロパティを<strong>使用します</strong>。</li>
   <li>絶対に避けられない場合を除いて、<code>aria-hidden</code> 属性は使用<strong>するべきではない</strong>（SHOULD NOT）。</li>
  </ul>
 </li>
</ul>

<h2 id="Focus" name="Focus">フォーカス</h2>

<ul>
 <li>全てのアクティブ化可能要素はフォーカス可能<strong>でなければならない</strong>。

  <ul>
   <li> リンク、ボタン、フォームフィールドのような標準コントロールは、デフォルトでフォーカス可能です。</li>
   <li>非標準コントロールには、<code>button</code>、<code>link</code>、<code>checkbox</code> のような適切な <a href="https://www.w3.org/TR/wai-aria/#roles">ARIA のロール</a>（英語）が割り当てられて<strong>いなければならない</strong>。</li>
  </ul>
 </li>
 <li>フォーカスは、論理的な順序と一貫した方法で扱われるべきです。</li>
</ul>

<h2 id="Text_Equivalents" name="Text_Equivalents">同等のテキスト</h2>

<ul>
 <li>アプリ内の全ての非厳密で提示的な非テキスト要素には、同等のテキストを提供<strong>しなければならない</strong>。

  <ul>
   <li>必要に応じて {{htmlattrxref("alt","img")}} と {{htmlattrxref("title")}} を使用してください（良いガイドについては、<a href="http://blog.paciellogroup.com/2013/01/using-the-html-title-attribute-updated/">HTML の title 属性の使用</a>（英語）に関する Steve Faulkner の投稿を参照してください）。</li>
   <li>上記の属性が適用できない場合は、<code>aria-label</code>、<code>aria-labelledby</code>、<code>aria-describedby</code> のような適切な <a href="https://www.w3.org/TR/wai-aria/#global_states">ARIA のプロパティ</a>（英語）を使用してください。</li>
  </ul>
 </li>
 <li>テキストの画像は避け<strong>なければならない</strong>。</li>
 <li>スクリーンリーダーを使用するユーザーのために、全てのフォームコントロールにラベル（{{htmlelement("label")}} 要素）を持た<strong>なければならない</strong>。</li>
</ul>

<h2 id="Handling_State" name="Handling_State">ステートの取り扱い</h2>

<ul>
 <li>ラジオボタンやチェックボックスのような標準コントロールは、オペレーティングシステムによって処理されます。 ただし、他のカスタムコントロールでは、<code>aria-checked</code>、<code>aria-disabled</code>、<code>aria-selected</code>、<code>aria-extended</code>、および <code>aria-press</code> のような <a href="https://www.w3.org/TR/wai-aria/#attrs_widgets">ARIA のステート</a>（英語）を介してステートの変更を提供する必要があります。</li>
</ul>

<h2 id="General_Guidelines" name="General_Guidelines">一般的なガイドライン</h2>

<ul>
 <li>アプリのタイトルを提供<strong>しなければならない</strong>。</li>
 <li>見出しは階層構造を壊<strong>してはならない</strong>。
  <pre class="brush: html">&lt;h1&gt;最上位の見出し&lt;/h1&gt;
  &lt;h2&gt;副見出し&lt;/h2&gt;
  &lt;h2&gt;別の副見出し&lt;/h2&gt;
    &lt;h3&gt;下位の見出し&lt;/h3&gt;</pre>
 </li>
 <li><code>banner</code>、<code>complementary</code>、<code>contentinfo</code>、<code>main</code>、<code>navigation</code>、<code>search</code> のような <a href="https://www.w3.org/TR/wai-aria/#landmark_roles">ARIA のランドマークロール</a>（英語）は、アプリやドキュメントの構造を説明するために使用<strong>するべきです</strong>（SHOULD）。</li>
 <li>タッチイベントハンドラは、<code>touchend</code> イベントでのみトリガ<strong>されなければならない</strong>。</li>
 <li>タッチターゲットは、ユーザーが対話するのに十分な大きさ<strong>でなければならない</strong>（有用なタッチターゲットサイズのガイドラインについては、<a href="http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size">BBC モバイルアクセシビリティ・ガイドライン</a>（英語）を参照してください）。</li>
</ul>

<div class="note">
<p><strong>メモ</strong>: <a href="http://yzen.github.io/firefoxos/2014/04/30/mobile-accessibility-checklist.html">この文書のオリジナル版</a>（英語）は、<a href="http://yzen.github.io/">Yura Zenevich</a> によって書かれました。</p>
</div>

<p> </p>