Take into Accessibility in React

Transcript

1. Take into Accessibility in React @usagi-f 2017-08-25 We Are JavaScripters! @10th 1 / 26
2. Who are you ? 石橋 啓太 (Ishibashi Keita) @usagi-f Frontend Engineer ( Technical Lead ) / UI Designer DMM.com Labo Co., Ltd. 2 / 26
3. アクセシビリティ、意識してますか？ Accessibility, are you conscious now ? 3 / 26
4. Webアクセシビリティの重要な原則は、さまざまなユーザーのニ ーズ、好み、状況に柔軟に対応できるWebサイトとソフトウェア を設計すること https://www.w3.org/WAI/intro/accessibility.php 俗に a11y と表記されます。 4 / 26
5. 現在Webは様々な領域で活用されている重要なリソースです。 アクセシブルなWebは、障がいを持つ人がより積極的に社会に参加 することを手助けします。 5 / 26
6. Reactでつくるアクセシブルコンポーネント Accessible component made with React 6 / 26
7. 実は相性が良いReactとアクセシビリティ Controlable state/propsによるUIの容易な制御 Scalable ex. ) Higher Order Components Testable 状況に応じた表示を担保してくれる 7 / 26
8. ex. 1 : 画像コンポーネント image component 8 / 26
9. ex. 1 : 画像コンポーネント 見出しによるテキスト補助がある場合は、imgには alt="" という空 の指定をして、無視しても良い要素ということを伝える必要があ る。 <img src="img/male.png" alt=" 男性の写真" /> <h3> 女性の写真</h3> <img src="img/female.png" /> // 空alt を忘れる。。 9 / 26
10. ex. 1 : 画像コンポーネント こんなReactコンポーネントをつくってみる const ImgComponent = (props) => { return <img src={props.src} alt={props.alt} />; }; ImgComponent.defaultProps = { alt: '', }; export default ImgComponent; 10 / 26
11. ex. 1 : 画像コンポーネント defaultPropsのaltにあらかじめ '' が入ってるので気にする必要が なくなる。 <ImgComponent src="img/male.png" alt=" 男性の写真"> <h3> 女性の写真</h3> <ImgComponent src="img/female.png"> 11 / 26
12. ex. 2 : WAI-ARIAを活用したコンポーネント use WAI-ARIA 12 / 26
13. ex. 2 : WAI-ARIAを活用したコンポーネント What's WAI-ARIA ? 支援技術が障害をもつ人に対し適切な情報を伝えられるようにす るために、ウェブコンテンツのアクセシビリティーは、ウィジェ ット、構造、動作に関するセマンティック情報を要求する。 Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳 https://momdo.github.io/wai-aria-1.1/ 13 / 26
14. ex. 2 : WAI-ARIAを活用したコンポーネント aria-busy にbool値をpropsで渡すことで、状態が明示的になる <Message loading={this.state.loading} /> // Message Component <p aria-busy={props.loading}> {props.loading ? 'Now Loading...' : 'Done!'} </p> <p aria-busy="true">Now Loading...</p> 14 / 26
15. ex. 2 : WAI-ARIAを活用したコンポーネント 選択項目と合致している場合、aria-checked にtrueを渡す const selected = (value === current); <li role="radio" aria-checked={selected}>...</li> <ul> <li role="radio" aria-checked="true">...</li> <li role="radio" aria-checked="false">...</li> </ul> 15 / 26
16. ex. 2 : WAI-ARIAを活用したコンポーネント 隠しておきたい要素に aria-hidden や tabindex="-1" を指定する ことにも使える const selected = (value === current); <div aria-hidden={!selected}> // 非選択時にtrue を指定 <button tabindex={selected ? 0 : '-1'}> // focus 対象外に ... </button> </div> 16 / 26
17. ex. 2 : WAI-ARIAを活用したコンポーネント WAI-ARIAはCSSも簡潔にできる .message[aria-busy=true] { ... } .tabpanel[aria-checked=true] { ... } .selectElement[aria-hidden=true] { ... } is-*** のようなclassを付与しなくても、UIの状態ごとのスタイル を指定可能 17 / 26
18. ex. 3 : プレースホルダーアンカーリンク placeholder anchorlink 18 / 26
19. ex. 3 : プレースホルダーアンカーリンク href attribute この属性は、プレースホルダーリンクを生成するために省略でき ます (HTML5)。プレースホルダーリンクは従来のハイパーリンク に似ていますが、どこにも移動しません。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/a 19 / 26
20. ex. 3 : プレースホルダーアンカーリンク ナビゲーションのマークアップ例（Aboutページにいる場合） <li><a href="/top">Top</a></li> <li><p>About</p></li> <!-- Bad... --> <li><a href="/help">Help</a></li> <li><a href="/top">Top</a></li> <li><a>About</a></li> <!-- Good! --> <li><a href="/help">Help</a></li> 20 / 26
21. ex. 3 : プレースホルダーアンカーリンク // Bad... if (props.href) { return <a href={props.href}>{props.label}</a>; } else { return <p>{props.label}</p>; } // Good! <a href={props.href || null}>{props.label}</a> 21 / 26
22. まとめ Summary （という名の主張） 22 / 26
23. アクセシビリティを意識することは決して特別なこ とじゃない To be conscious of accessibility is never a advanced things. 例えば、WAI-ARIAはW3Cが策定している仕様の一つです。 これはヘッダーを <header> でマークアップしましょうという考え となんら違いはない。 23 / 26
24. アクセシビリティ ≠ セマンティックマークアップ Accessibility ≠ Semantic markup セマンティックなマークアップは、アクセシビリティを高める方法 の一つですが、 アクセシビリティはHTMLの分野だけの話ではない。 正しく情報にアクセスするにはもっと上流からのアプローチが不可 欠。 24 / 26
25. アクセシビリティはデザインから考えてみよう To think from design. Accessibility according to actual people with Disabilities https://axesslab.com/accessibility-according-to-pwd/ 大量のテキストが含まれている (large chunks of text) フォントサイズが小さい (small font size) 低コントラスト (low contrast) 色でしか状態を判別できない (relying only on color) 25 / 26
26. Thank you 26 / 26