Mais conteúdo relacionado Semelhante a PHPerでもわかる!実践Webアクセシビリティ (20) PHPerでもわかる!実践Webアクセシビリティ2. 自己紹介
● 有木 詩織 @shiori_pk
● 弁護士ドットコム株式会社
● サーバーサイドエンジニア
○ 基本PHP
○ たまにJavaScript
○ まれにHTML/CSS
12. Webアクセシビリティとは
"The power of the Web is in its universality. Access by everyone
regardless of disability is an essential aspect."
(Webの力はその普遍性にあります。障害の有無に関わらず誰もがアクセスで
きるというのがWebの本質的な側面なのです。)
Tim Berners-Lee, W3C Director and inventor of the World Wide Web
15. WCAG
● Web Content Accessibility Guideline
○ Webコンテンツのアクセシビリティをより高めるためのガイドライン
○ 3つの達成基準
■ レベルA : 最低限の基準
■ レベルAA : 望ましい基準
■ レベルAAA : 発展的な基準
16. レベルA : 最低限の基準の例
● 知覚可能(1.x.x)
○ 利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストに
よる代替が提供されている。(1.1.1 非テキストコンテンツ)
● 操作可能(2.x.x)
○ コンテンツのすべての機能は、個々のキーストロークに特定のタイミングを要することな
く、キーボードインタフェースを通じて操作可能である。ただし、その根本的な機能が利用
者の動作による始点から終点まで続く一連の軌跡に依存して実現されている場合は除
く。(2.1.1 キーボード)
17. レベルA : 最低限の基準の例
● 理解可能(3.x.x)
○ 入力エラーが自動的に検出された場合は、エラーとなっている箇所が特定され、そのエ
ラーが利用者にテキストで説明される。(
3.3.1 エラーの特定)
● 堅牢(4.x.x)
○ マークアップ言語を用いて実装されているコンテンツにおいては、要素には完全な開始タ
グ及び終了タグがあり、要素は仕様に準じて入れ子になっていて、要素には重複した属
性がなく、どの ID も一意的である。ただし、仕様で認められているものを除く。(
4.1.1 構
文解析)
27. WAI-ARIAとは
● Web Accessibility Initiative - Accessible Rich Internet Applications
○ 標準のHTMLの要素や属性で表現することができない意味論を、
HTMLの属性として付
与する
○ 3種類のHTML属性
■ ロール
■ プロパティ
■ ステート
Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳 : https://momdo.github.io/wai-aria-1.2/
46. 完成(≠正解)
<ul>
<li>
<label for="business_trip">
<input type="checkbox" id="business_trip" name="bussiness_trip">
<span>全国出張対応</span>
</label>
<button
type="button"
class="help_icon"
aria-label="全国出張対応の説明"
aria-expanded="false"
aria-controls="business_trip_description"
>
</button>
<div role="tooltip">
<p id="business_trip_description">出張料金を請求する場合でも設定することができます。ユーザー側には「出張には別途料金が
かかる場合がございます。」と注記されます。
</p>
</div>
</li>
</ul>