ウェブディレクタ`のための Web A11Y 茶氏 (Season 2) #03
?
1 like?287 views
ウェブ崙恬氏芙のディレクタ`さんを鵑砲靴拭▲▲セシビリティ茶氏です。(畠12指コ`スの及3指) 念磯で WCAG 2.0 _撹児 (レベルAA) を僥び、瘁磯で仝インクル`シブなペルソナ々シ`トを喘いた UI uワ`クショップを佩なっています。 インクル`シブなペルソナ : https://github.com/caztcha/Inclusive-Persona-Extension
![[喘Z] _撹児 1.4.5 猟忖鮫
テキスト
プログラムによる盾が辛嬬な猟忖のKびで、徭隼冱Zで採かを燕Fしているもの。
猟忖鮫
掲テキスト侘塀 (鮫) で戻幣された猟忖秤鵝
駅勣音辛之
もし函り茅いてしまうと、コンテンツの秤鵑C嬬を功云議に笋┐討靴泙ぁ△つ、麿の圭
隈では秤鵑よびC嬬をgFできないこと。
議なカスタマイズ
フォント、サイズ、弼、および嘘尚をO協できること。](https://image.slidesharecdn.com/weba11yseminars203-180622214301/85/Web-A11Y-Season-2-03-9-320.jpg)
![[まとめ] _撹児 1.4.5 猟忖鮫
猟忖秤鵑蓮∋云議に、テキストで燕Fしましょう。參和のメリットがあるからです。
?ユ`ザ`が販吭で、猟忖サイズやフォント、弼、佩gなどを笋┐襪海箸できる。(ロ`ビ
ジョンやディスレクシアなどのユ`ザ`にとって廁かる。)
?鮫中寄しても猟忖がぼやけたりジャギ`にならない。
?スクリ`ンリ`ダ`で咄蕗iみ貧げができる。(猟忖鮫颪世抜紋テキストを秘れなければ
ならないが、テキストではその駅勣がない。)
?C亠鍬Uに鬉靴笋垢ぁ
テキストの燕Fのコントロ`ルは CSS で。タイポグラフィにこだわりがあるコンテンツ
ではウェブフォントの聞喘も辛嬬です。
ロゴタイプなど仝駅勣音辛之々である栽は箭翌です。](https://image.slidesharecdn.com/weba11yseminars203-180622214301/85/Web-A11Y-Season-2-03-10-320.jpg)
![[喘Z ] _撹児 2.4.5 }方の返粁
ウェブペ`ジ匯塀
慌宥の朕議を慌嗤し、揖じコンテンツ崙恬宀、グル`プ、またはMにより崙恬されたウェ
ブペ`ジの鹿栽。ウェブサイトなど。
プロセス
ある試咾鰺蠢砲気擦襪燭瓩鳳慴なユ`ザ`の匯Bの嘛。](https://image.slidesharecdn.com/weba11yseminars203-180622214301/85/Web-A11Y-Season-2-03-14-320.jpg)
![[まとめ] _撹児 2.4.5 }方の返粁
サイト坪をナビゲ`トする返粁を、}方喘吭し、？なユ`ザ`のニ`ズに鬉任る
ようにしましょう。
?メニュ` (グロ`バルメニュ`、ロ`カルメニュ`)
?サイトマップ (恍書ではビッグフッタ`もあり)
?サイト坪碧
?念瘁ペ`ジへの卞 (ペ`ジネ`ション)
?パンくずリスト
?猟}議なリンク (vB秤鵑悗離螢鵐や Call To Action など)
?etc ´](https://image.slidesharecdn.com/weba11yseminars203-180622214301/85/Web-A11Y-Season-2-03-15-320.jpg)
ウェブディレクタ`のための Web A11Y 茶氏 (Season 2) #03
- 1. ウェブディレクタ`のための? Web A11Y 茶氏? Season 2 #03 (2018-06-21)
- 2. 徭失B初 @caztcha ? ウェブユ`ザビリティ / アクセシビリティ / 秤鵐〒`キテクチャ (IA) HCD-Net J協 繁g嶄伉OT社 ウェブアクセシビリティ児P溜T氏 (WAIC) 鍬Uワ`キンググル`プ https://website-usability.info
- 3. 書晩のメニュ` ? WCAG 2.0 (Level AA) をiもう ? 1.4.5 猟忖鮫 ? 2.4.5 }方の返粁 ? 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 1. 岑辛嬬 (Perceivable) 秤鷦阿咼罘`ザインタフェ`ス コンポ`ネントは、旋喘宀が岑 できる圭隈で旋喘宀に戻幣辛嬬でなければならない。 おさらい
- 8. _撹児 1.4.5 ? 猟忖鮫 聞喘している室gで吭蹐靴尋議戻幣が辛嬬である栽、猟忖鮫颪任呂覆テキ ストが秤止_に喘いられている。ただし、肝にい欧栽を茅く: (レベル AA) ? カスタマイズ辛嬬 : 猟忖鮫颪蓮∪喘宀の勣箔に鬉犬尋議なカスタマイズが できる。 ? 駅勣音辛之 : テキストの蒙協の燕Fが、擦┐茲Δ箸垢詛鵑砲箸辰同慴音辛之 である。 _撹児 1.4.5 を尖盾する | WCAG 2.0盾h https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-text-presentation.html
- 9. [喘Z] _撹児 1.4.5 猟忖鮫 テキスト プログラムによる盾が辛嬬な猟忖のKびで、徭隼冱Zで採かを燕Fしているもの。 猟忖鮫 掲テキスト侘塀 (鮫) で戻幣された猟忖秤鵝 駅勣音辛之 もし函り茅いてしまうと、コンテンツの秤鵑C嬬を功云議に笋┐討靴泙ぁ△つ、麿の圭 隈では秤鵑よびC嬬をgFできないこと。 議なカスタマイズ フォント、サイズ、弼、および嘘尚をO協できること。
- 10. [まとめ] _撹児 1.4.5 猟忖鮫 猟忖秤鵑蓮∋云議に、テキストで燕Fしましょう。參和のメリットがあるからです。 ?ユ`ザ`が販吭で、猟忖サイズやフォント、弼、佩gなどを笋┐襪海箸できる。(ロ`ビ ジョンやディスレクシアなどのユ`ザ`にとって廁かる。) ?鮫中寄しても猟忖がぼやけたりジャギ`にならない。 ?スクリ`ンリ`ダ`で咄蕗iみ貧げができる。(猟忖鮫颪世抜紋テキストを秘れなければ ならないが、テキストではその駅勣がない。) ?C亠鍬Uに鬉靴笋垢ぁ テキストの燕Fのコントロ`ルは CSS で。タイポグラフィにこだわりがあるコンテンツ ではウェブフォントの聞喘も辛嬬です。 ロゴタイプなど仝駅勣音辛之々である栽は箭翌です。
- 11. 圻t 2. 荷恬辛嬬 (Operable) ユ`ザインタフェ`ス コンポ`ネント式びナビゲ`ションは荷恬 辛嬬でなければならない。 おさらい
- 13. _撹児 2.4.5 ? }方の返粁 ウェブペ`ジ匯塀の嶄で、あるウェブペ`ジをつける}方の返粁が旋喘で きる。ただし、ウェブペ`ジが匯Bのプロセスの嶄の1ステップ嗽はY惚で ある栽は茅く。(レベル AA) _撹児 2.4.5 を尖盾する | WCAG 2.0盾h https://waic.jp/docs/UNDERSTANDING-WCAG20/navigation-mechanisms-mult-loc.html
- 14. [喘Z ] _撹児 2.4.5 }方の返粁 ウェブペ`ジ匯塀 慌宥の朕議を慌嗤し、揖じコンテンツ崙恬宀、グル`プ、またはMにより崙恬されたウェ ブペ`ジの鹿栽。ウェブサイトなど。 プロセス ある試咾鰺蠢砲気擦襪燭瓩鳳慴なユ`ザ`の匯Bの嘛。
- 15. [まとめ] _撹児 2.4.5 }方の返粁 サイト坪をナビゲ`トする返粁を、}方喘吭し、？なユ`ザ`のニ`ズに鬉任る ようにしましょう。 ?メニュ` (グロ`バルメニュ`、ロ`カルメニュ`) ?サイトマップ (恍書ではビッグフッタ`もあり) ?サイト坪碧 ?念瘁ペ`ジへの卞 (ペ`ジネ`ション) ?パンくずリスト ?猟}議なリンク (vB秤鵑悗離螢鵐や Call To Action など) ?etc ´
- 16. UI ケ`ススタディ
- 18. 1. 光徭、それぞれ1旦、お挫きな仝ペルソナシ`ト々をxびます。 2. xんだシ`トのQ泣に羨って、鵐擧`ジを聞ってみましょう。 3. ひとことずつ、仝櫃鼎々をk燕してください。 ? 答登 (¢¢ができていないからアクセシビリティ議に音) ではなく。 ? こうすれば、こういう旋喘彜rを隔つユ`ザ`の悶Yが鯢呂垢襪里任錬燭 いう徊櫃如 ? 醤悶議な個鋲圭隈がわからなくても仝なんとなくここが櫃砲覆襦垢任 OK です。
- 19. ツ`ルB初WAVE アクセシビリティ編^ツ`ルです。竃しレベルや鮫颪隆紋テキストなど、朕にえない 勣殆 (嬾墾宀にとって寄俳な勣殆) も_Jできます。https://wave.webaim.org/
- 20. ツ`ルB初NoCoffee Vision Simulator ロ`ビジョン (樋) や弼蒙來に育う仝えにくさ々を？なパラメ`タ`でシミュレ` ションできる Chrome C嬬です。 https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl
- 23. 肝指嚠御
- 24. ? WCAG 2.0 (Level AA) をiもう ? 2.4.6 竃し式びラベル ? 2.4.7 フォ`カスの辛晒 ? UI ケ`ススタディ
- 25. To be continued´