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
660
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
280
How Github works and How Google works
usagif
0
110
良いUIをエンジニアに作ってもらうために、デザイナーができること
usagif
1
81
DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話 - DMM Study night
usagif
0
110
Frontend summary in 2015 summer
usagif
0
50
なるべく噛み砕いたGit基礎講習
usagif
1
78
position: fixed;を上手に飼う方法
usagif
2
310
Other Decks in Programming
See All in Programming
WindowInsetsだってテストしたい
ryunen344
1
230
5つのアンチパターンから学ぶLT設計
narihara
1
150
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
610
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
440
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
470
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
7k
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
710
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
Deep Dive into ~/.claude/projects
hiragram
12
2.3k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
680
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.1k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Documentation Writing (for coders)
carmenintech
72
4.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Adopting Sorbet at Scale
ufuk
77
9.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Language of Interfaces
destraynor
158
25k
The World Runs on Bad Software
bkeepers
PRO
69
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
KATA
mclloyd
30
14k
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