ウェブディレクタ`のための Web A11Y 茶氏 (Season 2) #04
?
0 likes?245 views
ウェブ崙恬氏芙のディレクタ`さんを鵑砲靴拭▲▲セシビリティ茶氏です。(畠12指コ`スの及4指) 念磯で WCAG 2.0 _撹児 (レベルAA) を僥び、瘁磯で仝インクル`シブなペルソナ々シ`トを喘いた UI uワ`クショップを佩なっています。 インクル`シブなペルソナ : https://github.com/caztcha/Inclusive-Persona-Extension
![[喘Z] _撹児 2.4.6 竃し式びラベル
ラベル
ウェブコンテンツ坪の UI コンポ`ネントをReするためにユ`ザ`に戻幣されている、
徭隼冱Zによる秤鵝](https://image.slidesharecdn.com/weba11yseminars204-180721212914/85/Web-A11Y-Season-2-04-9-320.jpg)
![[まとめ] _撹児 2.4.6 竃し式びラベル
コンテンツ云猟において、坪否がわかる竃しを原けましょう。
UI コンポ`ネントにおいて、坪否や朕議がわかるラベルを原けましょう。
ユ`ザ`のJ岑塞、塞を和げることが豚棋できます。
蒙に、J岑/僥嬾墾を隔つユ`ザ`、勸の崙sで匯業に函誼できる秤鸛燭泙蕕譴襯踪`
ビジョンのユ`ザ`、荷恬ミスを軟こすと仝佩ったり栖たり々の荷恬が中宜な\嗾郎Δ
隔つユ`ザ`、にとって寄きなメリットがあります。](https://image.slidesharecdn.com/weba11yseminars204-180721212914/85/Web-A11Y-Season-2-04-10-320.jpg)
![[喘Z ] _撹児 2.4.7 フォ`カスの辛晒
(蒙にありません )](https://image.slidesharecdn.com/weba11yseminars204-180721212914/85/Web-A11Y-Season-2-04-12-320.jpg)
![[まとめ] _撹児 2.4.7 フォ`カスの辛晒
UI コンポ`ネントがキ`ボ`ド荷恬によるフォ`カスを鞭けとったときは、CSS によ
って燕幣を議に筝させましょう。
デザイン貧の崙sから貧がyしい栽は、富なくとも、ユ`ザ`エ`ジェント (ブラ
ウザなど) が覆婆畊する議な森 (フォ`カスリング) をo燭砲靴覆い茲Δ
しましょう。
キ`ボ`ド荷恬に卆贋するユ`ザ`は、鮫中貧を岷俊ポインティングできないので、
フォ`カス了崔が議にわからないと、どこが荷恬鵑覆里払ってしまいます。](https://image.slidesharecdn.com/weba11yseminars204-180721212914/85/Web-A11Y-Season-2-04-13-320.jpg)
ウェブディレクタ`のための Web A11Y 茶氏 (Season 2) #04
- 1. ウェブディレクタ`のための? Web A11Y 茶氏? Season 2 #04 (2018-07-19)
- 2. 徭失B初 @caztcha ? ウェブユ`ザビリティ / アクセシビリティ / 秤鵐〒`キテクチャ (IA) HCD-Net J協 繁g嶄伉OT社 ウェブアクセシビリティ児P溜T氏 (WAIC) 鍬Uワ`キンググル`プ https://website-usability.info
- 3. 書晩のメニュ` ? WCAG 2.0 (Level AA) をiもう ? 2.4.6 竃し式びラベル ? 2.4.7 フォ`カスの辛晒 ? UI ケ`ススタディ
- 4. WCAG 2.0 (Level AA) をiもう
- 5. WCAG (Web Content Accessibility Guidelines) の児云撹 圻t (4) ガイドライン (12) _撹児 (61) 1. 岑辛嬬 (Perceivable) 2. 荷恬辛嬬 (Operable) 3. 尖盾辛嬬 (Understandable) 4. 埓 (Robust) 3つのレベルに蛍かれている ? A (シングルエ`) ? AA (ダブルエ`) ? AAA (トリプルエ`) おさらい
- 6. 圻t 2. 荷恬辛嬬 (Operable) ユ`ザインタフェ`ス コンポ`ネント式びナビゲ`ションは荷恬 辛嬬でなければならない。 おさらい
- 8. _撹児 2.4.6 ? 竃し式びラベル 竃し式びラベルは、麼}嗽は朕議をh苧している。(レベル AA) _撹児 2.4.6 を尖盾する | WCAG 2.0盾h https://waic.jp/docs/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html
- 9. [喘Z] _撹児 2.4.6 竃し式びラベル ラベル ウェブコンテンツ坪の UI コンポ`ネントをReするためにユ`ザ`に戻幣されている、 徭隼冱Zによる秤鵝
- 10. [まとめ] _撹児 2.4.6 竃し式びラベル コンテンツ云猟において、坪否がわかる竃しを原けましょう。 UI コンポ`ネントにおいて、坪否や朕議がわかるラベルを原けましょう。 ユ`ザ`のJ岑塞、塞を和げることが豚棋できます。 蒙に、J岑/僥嬾墾を隔つユ`ザ`、勸の崙sで匯業に函誼できる秤鸛燭泙蕕譴襯踪` ビジョンのユ`ザ`、荷恬ミスを軟こすと仝佩ったり栖たり々の荷恬が中宜な\嗾郎Δ 隔つユ`ザ`、にとって寄きなメリットがあります。
- 11. _撹児 2.4.7 ? フォ`カスの辛晒 キ`ボ`ド荷恬が辛嬬なあらゆるユ`ザインタフェ`スには、フォ`カスイ ンジケ`タがえる荷恬モ`ドがある。(レベル AA) _撹児 2.4.7 を尖盾する | WCAG 2.0盾h https://waic.jp/docs/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html
- 12. [喘Z ] _撹児 2.4.7 フォ`カスの辛晒 (蒙にありません )
- 13. [まとめ] _撹児 2.4.7 フォ`カスの辛晒 UI コンポ`ネントがキ`ボ`ド荷恬によるフォ`カスを鞭けとったときは、CSS によ って燕幣を議に筝させましょう。 デザイン貧の崙sから貧がyしい栽は、富なくとも、ユ`ザ`エ`ジェント (ブラ ウザなど) が覆婆畊する議な森 (フォ`カスリング) をo燭砲靴覆い茲Δ しましょう。 キ`ボ`ド荷恬に卆贋するユ`ザ`は、鮫中貧を岷俊ポインティングできないので、 フォ`カス了崔が議にわからないと、どこが荷恬鵑覆里払ってしまいます。
- 14. UI ケ`ススタディ
- 16. 1. 光徭、それぞれ1旦、お挫きな仝ペルソナシ`ト々をxびます。 2. xんだシ`トのQ泣に羨って、鵐擧`ジを聞ってみましょう。 3. ひとことずつ、仝櫃鼎々をk燕してください。 ? 答登 (¢¢ができていないからアクセシビリティ議に音) ではなく。 ? こうすれば、こういう旋喘彜rを隔つユ`ザ`の悶Yが鯢呂垢襪里任錬燭 いう徊櫃如 ? 醤悶議な個鋲圭隈がわからなくても仝なんとなくここが櫃砲覆襦垢任 OK です。
- 17. ツ`ルB初WAVE アクセシビリティ編^ツ`ルです。竃しレベルや鮫颪隆紋テキストなど、朕にえない 勣殆 (嬾墾宀にとって寄俳な勣殆) も_Jできます。https://wave.webaim.org/
- 18. ツ`ルB初NoCoffee Vision Simulator ロ`ビジョン (樋) や弼蒙來に育う仝えにくさ々を？なパラメ`タ`でシミュレ` ションできる Chrome C嬬です。 https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl
- 21. 肝指嚠御
- 22. ? WCAG 2.0 (Level AA) をiもう ? 3.1.2 匯何蛍の冱Z ? 3.2.3 匯したナビゲ`ション ? 3.2.4 匯したRe來 ? UI ケ`ススタディ
- 23. To be continued´