Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Take into Accessibility in React

E2cf5639ac745df3c96b49c64db8123c?s=47 usagi-f
August 25, 2017

Take into Accessibility in React

E2cf5639ac745df3c96b49c64db8123c?s=128

usagi-f

August 25, 2017
Tweet

More Decks by usagi-f

Other Decks in Programming

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