ウェブディレクタ`のための Web A11Y 茶氏 (Season 2) #11
?
1 like?395 views
ウェブ崙恬氏芙のディレクタ`さんを鵑砲靴拭▲▲セシビリティ茶氏です。(畠12指コ`スの及11指) 念磯で、2018定6埖に畍罎気譴 WCAG 2.1 について僥び、瘁磯で仝インクル`シブなペルソナ々シ`トを喘いた UI uワ`クショップを佩なっています。 インクル`シブなペルソナ : https://github.com/caztcha/Inclusive-Persona-Extension
![書晩のメニュ`
? WCAG 2.1 とは (おさらい)
? WCAG 2.1 で弖紗された_撹児覆鰌iむ
(Level A & AA)
? 2.5.2 Pointer Cancellation (A) [モバイル]
? 2.5.3 Label in Name (A) [モバイル]
? UI ケ`ススタディ](https://image.slidesharecdn.com/weba11yseminars211-190222214152/85/Web-A11Y-Season-2-11-3-320.jpg)
![WCAG 2.1 とは
? WCAG (Web Content Accessibility Guidelines) の仟
バ`ジョン。2018定6埖5晩に畍罅
https://www.w3.org/TR/WCAG21/
? 症バ`ジョン (2.0) で噴蛍にカバ`できていなかったI囃
(ロ`ビジョン 、モバイル 、J岑/僥嬾墾 への塘]) が
晒されている。
? 17の仟しい_撹児覆弖紗。愔瓦累_撹児覆呂修里泙
(桑催の筝はなし)。](https://image.slidesharecdn.com/weba11yseminars211-190222214152/85/Web-A11Y-Season-2-11-5-320.jpg)
![_撹児 2.5.2 ?
Pointer Cancellation /
ポインタのキャンセル (レベル A) [モバイル]
シングルポインタを聞って荷恬できるC嬬は、參和の勣周の富なくとも 1 つを困燭后
? ダウンイベントがない : C嬬をg佩する朕議でポインタのダウンイベントを聞喘していない。
? 嶄峭または圷にすことができる : C嬬の頼阻にはアップイベントを聞喘し、かつC嬬の頼
阻念に嶄峭する、嗽はC嬬の頼阻瘁に圷にすためのメカニズムが旋喘できる。
? アップイベントですことができる : アップイベントによって、枠佩したダウンイベントのY
惚を圷にすことができる。
? 駅勣音辛之 : ダウンイベントによってC嬬を頼阻させることが駅勣音辛之である。
_撹児 2.5.2 圻猟 : https://www.w3.org/TR/WCAG21/#pointer-cancellation](https://image.slidesharecdn.com/weba11yseminars211-190222214152/85/Web-A11Y-Season-2-11-7-320.jpg)
![[まとめ] _撹児 2.5.2 Pointer Cancellation
ユ`ザ`がある佩蕕鬚靴茲Δ箸靴董△Δ辰りg`ったボタンに乾れてしまうことがあります。タッ
チジェスチャでスクロ`ル荷恬をしようとしたH、たまたま UI コンポ`ネントに乾れてしまう、と
いうこともあるでしょう。
UI コンポ`ネントに峺が乾れたとき (down イベント) に軸そのC嬬をg佩にするのではなく、峺が
鮫中からxれたとき (up イベント) にC嬬をg佩にするようにしましょう。
どうしても down イベントでC嬬をg佩する駅勣があるときは、峺を鮫中からxす、峺を錆らせて
UI コンポ`ネントI囃翌に咾す、といった荷恬でアンドゥできるようなo浸貨を戻工しましょう。
* 匯違議なウェブコンテンツのg廾では、リンクやボタン、光Nフォ`ム勣殆の荷恬 (チェックボックス/ラジオ
ボタンのxk、テキストフィ`ルドへのフォ`カス、など) は down イベントではなく up イベントでg佩され
るので、蒙に櫃砲垢覬慴はありません。](https://image.slidesharecdn.com/weba11yseminars211-190222214152/85/Web-A11Y-Season-2-11-9-320.jpg)
![_撹児 2.5.3 ?
Label in Name / 兆念 (name) のラベル?
(レベル A) [モバイル]
ユ`ザインタフェ`ス コンポ`ネントがテキストまたは猟忖鮫颪鮑むラベ
ルを隔つ栽、 議に戻幣されたテキストが兆念 (name) に根まれている。
_撹児 2.5.3 圻猟 : https://www.w3.org/TR/WCAG21/#label-in-name](https://image.slidesharecdn.com/weba11yseminars211-190222214152/85/Web-A11Y-Season-2-11-10-320.jpg)
![[まとめ] _撹児 2.5.3 Label in Name
UI コンポ`ネントで議に燕幣されているラベルと、ソ`スコ`ド坪のアクセシブルな兆念
(accessible name) の峰が匯崑していないと、咄蕗コマンドで輝 UI コンポ`ネントを荷
恬しようとしても、郡鬉靴覆た屬譴あります。
參和のようなg廾で、議に燕幣されているラベルを貧きしたり蛍僅したりしないよう、
廣吭しましょう。
? <button aria-label=＾僕佚￣>Go</button>
´ 咄蕗コマンドで仝Go々とkしてもボタンがg佩されない。
? <a href=＾´￣>Download <span class=＾sr-only￣>Product A</span> Specifications</a>
´ 咄蕗コマンドで仝Download Specifications (碧をダウンロ`ド)々とkしてもリンクがg佩されない。
ご歌深 : Accessible Name and Description Computation 1.1 https://www.w3.org/TR/accname-1.1/](https://image.slidesharecdn.com/weba11yseminars211-190222214152/85/Web-A11Y-Season-2-11-12-320.jpg)
![? WCAG 2.1 で弖紗された_撹児覆鰌iむ
(Level A & AA)
? 2.5.4 Motion Actuation (A) [モバイル]
? 4.1.3 Status Messages (AA) [J岑/僥]
? この茶氏のまとめ
いよいよ恷K指](https://image.slidesharecdn.com/weba11yseminars211-190222214152/85/Web-A11Y-Season-2-11-21-320.jpg)
ウェブディレクタ`のための Web A11Y 茶氏 (Season 2) #11
- 1. ウェブディレクタ`のための? Web A11Y 茶氏? Season 2 #11 (2019-02-21)
- 2. 徭失B初 @caztcha ? ウェブユ`ザビリティ / アクセシビリティ / 秤鵐〒`キテクチャ (IA) HCD-Net J協 繁g嶄伉OT社 ウェブアクセシビリティ児P溜T氏 (WAIC) 鍬Uワ`キンググル`プ https://website-usability.info
- 3. 書晩のメニュ` ? WCAG 2.1 とは (おさらい) ? WCAG 2.1 で弖紗された_撹児覆鰌iむ (Level A & AA) ? 2.5.2 Pointer Cancellation (A) [モバイル] ? 2.5.3 Label in Name (A) [モバイル] ? UI ケ`ススタディ
- 4. WCAG 2.1 とは (おさらい)
- 5. WCAG 2.1 とは ? WCAG (Web Content Accessibility Guidelines) の仟 バ`ジョン。2018定6埖5晩に畍罅 https://www.w3.org/TR/WCAG21/ ? 症バ`ジョン (2.0) で噴蛍にカバ`できていなかったI囃 (ロ`ビジョン 、モバイル 、J岑/僥嬾墾 への塘]) が 晒されている。 ? 17の仟しい_撹児覆弖紗。愔瓦累_撹児覆呂修里泙 (桑催の筝はなし)。
- 6. WCAG 2.1 で弖紗された _撹児覆鰌iむ (Level A & AA)
- 7. _撹児 2.5.2 ? Pointer Cancellation / ポインタのキャンセル (レベル A) [モバイル] シングルポインタを聞って荷恬できるC嬬は、參和の勣周の富なくとも 1 つを困燭后 ? ダウンイベントがない : C嬬をg佩する朕議でポインタのダウンイベントを聞喘していない。 ? 嶄峭または圷にすことができる : C嬬の頼阻にはアップイベントを聞喘し、かつC嬬の頼 阻念に嶄峭する、嗽はC嬬の頼阻瘁に圷にすためのメカニズムが旋喘できる。 ? アップイベントですことができる : アップイベントによって、枠佩したダウンイベントのY 惚を圷にすことができる。 ? 駅勣音辛之 : ダウンイベントによってC嬬を頼阻させることが駅勣音辛之である。 _撹児 2.5.2 圻猟 : https://www.w3.org/TR/WCAG21/#pointer-cancellation
- 8. たまたま鮫中の蒙協何蛍に乾れ ただけで、down イベントがk伏 して (ユ`ザ`の嚠豚しない) C 嬬がg佩されてしまう´
- 9. [まとめ] _撹児 2.5.2 Pointer Cancellation ユ`ザ`がある佩蕕鬚靴茲Δ箸靴董△Δ辰りg`ったボタンに乾れてしまうことがあります。タッ チジェスチャでスクロ`ル荷恬をしようとしたH、たまたま UI コンポ`ネントに乾れてしまう、と いうこともあるでしょう。 UI コンポ`ネントに峺が乾れたとき (down イベント) に軸そのC嬬をg佩にするのではなく、峺が 鮫中からxれたとき (up イベント) にC嬬をg佩にするようにしましょう。 どうしても down イベントでC嬬をg佩する駅勣があるときは、峺を鮫中からxす、峺を錆らせて UI コンポ`ネントI囃翌に咾す、といった荷恬でアンドゥできるようなo浸貨を戻工しましょう。 * 匯違議なウェブコンテンツのg廾では、リンクやボタン、光Nフォ`ム勣殆の荷恬 (チェックボックス/ラジオ ボタンのxk、テキストフィ`ルドへのフォ`カス、など) は down イベントではなく up イベントでg佩され るので、蒙に櫃砲垢覬慴はありません。
- 10. _撹児 2.5.3 ? Label in Name / 兆念 (name) のラベル? (レベル A) [モバイル] ユ`ザインタフェ`ス コンポ`ネントがテキストまたは猟忖鮫颪鮑むラベ ルを隔つ栽、 議に戻幣されたテキストが兆念 (name) に根まれている。 _撹児 2.5.3 圻猟 : https://www.w3.org/TR/WCAG21/#label-in-name
- 11. ユ`ザ`の咄蕗コマンド (リンク やボタンのg佩など ) がシステム 箸擦錣蕕此郡鬉靴覆ぁ
- 12. [まとめ] _撹児 2.5.3 Label in Name UI コンポ`ネントで議に燕幣されているラベルと、ソ`スコ`ド坪のアクセシブルな兆念 (accessible name) の峰が匯崑していないと、咄蕗コマンドで輝 UI コンポ`ネントを荷 恬しようとしても、郡鬉靴覆た屬譴あります。 參和のようなg廾で、議に燕幣されているラベルを貧きしたり蛍僅したりしないよう、 廣吭しましょう。 ? <button aria-label=＾僕佚￣>Go</button> ´ 咄蕗コマンドで仝Go々とkしてもボタンがg佩されない。 ? <a href=＾´￣>Download <span class=＾sr-only￣>Product A</span> Specifications</a> ´ 咄蕗コマンドで仝Download Specifications (碧をダウンロ`ド)々とkしてもリンクがg佩されない。 ご歌深 : Accessible Name and Description Computation 1.1 https://www.w3.org/TR/accname-1.1/
- 13. UI ケ`ススタディ
- 15. 1. 光徭、それぞれ1旦、お挫きな仝ペルソナシ`ト々をxびます。 2. xんだシ`トのQ泣に羨って、鵐擧`ジを聞ってみましょう。 3. ひとことずつ、仝櫃鼎々をk燕してください。 ? 答登 (¢¢ができていないからアクセシビリティ議に音) ではなく。 ? こうすれば、こういう旋喘彜rを隔つユ`ザ`の悶Yが鯢呂垢襪里任錬 という徊櫃如 ? 醤悶議な個鋲圭隈がわからなくても仝なんとなくここが櫃砲覆襦垢任 OK です。
- 16. ツ`ルB初WAVE アクセシビリティ編^ツ`ルです。竃しレベルや鮫颪隆紋テキストなど、朕にえない 勣殆 (嬾墾宀にとって寄俳な勣殆) も_Jできます。https://wave.webaim.org/
- 17. ツ`ルB初NoCoffee Vision Simulator ロ`ビジョン (樋) や弼蒙來に育う仝えにくさ々を？なパラメ`タ`でシミュレ` ションできる Chrome C嬬です。 https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl
- 20. 肝指嚠御
- 21. ? WCAG 2.1 で弖紗された_撹児覆鰌iむ (Level A & AA) ? 2.5.4 Motion Actuation (A) [モバイル] ? 4.1.3 Status Messages (AA) [J岑/僥] ? この茶氏のまとめ いよいよ恷K指
- 22. To be continued´