Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Take into Accessibility in React
Search
usagi-f
August 25, 2017
Programming
1
630
Take into Accessibility in React
usagi-f
August 25, 2017
Tweet
Share
More Decks by usagi-f
See All by usagi-f
フロントエンド実装から見たAtomic Design開発のポイント
usagif
3
6.8k
platoを使ったコードメトリクス生成
usagif
0
260
How Github works and How Google works
usagif
0
99
良いUIをエンジニアに作ってもらうために、デザイナーができること
usagif
1
78
DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話 - DMM Study night
usagif
0
110
Frontend summary in 2015 summer
usagif
0
48
なるべく噛み砕いたGit基礎講習
usagif
1
76
position: fixed;を上手に飼う方法
usagif
2
290
Other Decks in Programming
See All in Programming
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
技術を根付かせる / How to make technology take root
kubode
1
240
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
『品質』という言葉が嫌いな理由
korimu
0
160
AHC041解説
terryu16
0
590
SwiftUI Viewの責務分離
elmetal
PRO
0
150
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Site-Speed That Sticks
csswizardry
3
370
Docker and Python
trallard
44
3.3k
KATA
mclloyd
29
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
We Have a Design System, Now What?
morganepeng
51
7.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Designing for Performance
lara
604
68k
The Language of Interfaces
destraynor
156
24k
Transcript
Take into Accessibility in React @usagi-f 2017-08-25 We Are JavaScripters!
@10th 1 / 26
Who are you ? 石橋 啓太 (Ishibashi Keita) @usagi-f Frontend
Engineer ( Technical Lead ) / UI Designer DMM.com Labo Co., Ltd. 2 / 26
アクセシビリティ、意識してますか? Accessibility, are you conscious now ? 3 / 26
Webアクセシビリティの重要な原則は、さまざまなユーザーのニ ーズ、好み、状況に柔軟に対応できるWebサイトとソフトウェア を設計すること https://www.w3.org/WAI/intro/accessibility.php 俗に a11y と表記されます。 4 / 26
現在Webは様々な領域で活用されている重要なリソースです。 アクセシブルなWebは、障がいを持つ人がより積極的に社会に参加 することを手助けします。 5 / 26
Reactでつくるアクセシブルコンポーネント Accessible component made with React 6 / 26
実は相性が良いReactとアクセシビリティ Controlable state/propsによるUIの容易な制御 Scalable ex. ) Higher Order Components Testable
状況に応じた表示を担保してくれる 7 / 26
ex. 1 : 画像コンポーネント image component 8 / 26
ex. 1 : 画像コンポーネント 見出しによるテキスト補助がある場合は、imgには alt="" という空 の指定をして、無視しても良い要素ということを伝える必要があ る。 <img
src="img/male.png" alt=" 男性の写真" /> <h3> 女性の写真</h3> <img src="img/female.png" /> // 空alt を忘れる。。 9 / 26
ex. 1 : 画像コンポーネント こんなReactコンポーネントをつくってみる const ImgComponent = (props) =>
{ return <img src={props.src} alt={props.alt} />; }; ImgComponent.defaultProps = { alt: '', }; export default ImgComponent; 10 / 26
ex. 1 : 画像コンポーネント defaultPropsのaltにあらかじめ '' が入ってるので気にする必要が なくなる。 <ImgComponent src="img/male.png"
alt=" 男性の写真"> <h3> 女性の写真</h3> <ImgComponent src="img/female.png"> 11 / 26
ex. 2 : WAI-ARIAを活用したコンポーネント use WAI-ARIA 12 / 26
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
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
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
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
ex. 2 : WAI-ARIAを活用したコンポーネント WAI-ARIAはCSSも簡潔にできる .message[aria-busy=true] { ... } .tabpanel[aria-checked=true]
{ ... } .selectElement[aria-hidden=true] { ... } is-*** のようなclassを付与しなくても、UIの状態ごとのスタイル を指定可能 17 / 26
ex. 3 : プレースホルダーアンカーリンク placeholder anchorlink 18 / 26
ex. 3 : プレースホルダーアンカーリンク href attribute この属性は、プレースホルダーリンクを生成するために省略でき ます (HTML5)。プレースホルダーリンクは従来のハイパーリンク に似ていますが、どこにも移動しません。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/a 19 / 26
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
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
まとめ Summary (という名の主張) 22 / 26
アクセシビリティを意識することは決して特別なこ とじゃない To be conscious of accessibility is never a
advanced things. 例えば、WAI-ARIAはW3Cが策定している仕様の一つです。 これはヘッダーを <header> でマークアップしましょうという考え となんら違いはない。 23 / 26
アクセシビリティ ≠ セマンティックマークアップ Accessibility ≠ Semantic markup セマンティックなマークアップは、アクセシビリティを高める方法 の一つですが、 アクセシビリティはHTMLの分野だけの話ではない。
正しく情報にアクセスするにはもっと上流からのアプローチが不可 欠。 24 / 26
アクセシビリティはデザインから考えてみよう 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
Thank you 26 / 26