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
290
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
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
TypeScriptでDXを上げろ! Hono編
yusukebe
3
770
効率的な開発手段として VRTを活用する
ishkawa
0
160
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
530
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7k
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
11
1.3k
What's new in AppKit on macOS 26
1024jp
0
150
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
200
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
How to Ace a Technical Interview
jacobian
278
23k
Balancing Empowerment & Direction
lara
1
450
Art, The Web, and Tiny UX
lynnandtonic
299
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Code Reviewing Like a Champion
maltzj
524
40k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Designing for Performance
lara
610
69k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building Adaptive Systems
keathley
43
2.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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