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
アクセシビリティを意識したReact開発
Search
Ryo Ofusa
October 29, 2021
Technology
0
1.7k
アクセシビリティを意識したReact開発
【READYFOR×コミューン】業務に活かせるReact LT & 座談会 資料
Ryo Ofusa
October 29, 2021
Tweet
Share
More Decks by Ryo Ofusa
See All by Ryo Ofusa
デザインシステムの課題あれこれ
3randy9
2
2.2k
Other Decks in Technology
See All in Technology
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
440
2025年になってもまだMySQLが好き
yoku0825
8
4.8k
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
290
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
250
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
190
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
0
240
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
200
Modern Linux
oracle4engineer
PRO
0
150
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
A better future with KSS
kneath
239
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Transcript
アクセシビリティを意識した React 開発 大房 稜 2021/10/29 1
自己紹介 2 READYFOR株式会社 プロダクトエンジニア /フロントエンドエンジニア 名前:大房 稜 趣味:ボカロP、DJ、ダンス ← 最近液タブ買ってインターネットお絵かきマ
ンデビュー #ReactLT
前提 アクセシビリティとは? 3 #ReactLT
前提 Accessibility • Access(アクセス)+ -bility(可能性) • アクセスのしやすさ • 利用のしやすさ 4
#ReactLT
前提 Accessibility • Access(アクセス)+ -bility(可能性) • アクセスのしやすさ • 利用のしやすさ →「障害のある人がWebを使えるようにすること」を指すことではない
色々な人間が居て色々なニーズがあることを理解する(環境,言語,デバイス) 5 #ReactLT
前提 アクセシビリティには2つの観点がある • ヒューマンリーダブル • マシンリーダブル 6 #ReactLT
前提 今回はマシンリーダブルの観点について 7 #ReactLT
マシンリーダブルにしよう Webブラウザが解釈しやすいコンテンツということ • SEO対策 • アクセシビリティ対応 ◦ 音声読み上げ ◦ キーボード操作
8 #ReactLT
マシンリーダブルにしよう Webブラウザが解釈しやすいコンテンツということ • SEO対策 • アクセシビリティ対応 ◦ 音声読み上げ ◦ キーボード操作
9 #ReactLT
マシンリーダブルにしよう セマンティックなマークアップが まず大事 CSS-in-JSで宣言的なUIを作っ ているとマークアップ意識しなく なりぎみ 10 #ReactLT
マシンリーダブルにしよう 通常のHTMLで表現できないUIについてしっかり考える → WAI-ARIAの使用を検討しましょう 11 #ReactLT
WAI-ARIA(ウェイ アリア)とは WAI-ARIAはWeb Accessibility Initiative Accessible Rich Internet Applicationsの略です。 W3Cによって定められた追加
仕様で、HTMLだけでは表すことのできない構造や状態などを明 示することができます。(wiki引用) 12 #ReactLT
マシンリーダブルにしよう Reactドキュメント「アクセシビリティ」より 13 #ReactLT
マシンリーダブルにしよう UIコンポーネントを作る時、W3CのWAI-ARIA オーサリング・プラ クティスやAdobeのデザインシステムからreact-ariaやアクセシブ ルが売りのchakra-uiなどを参考にしてみましょう 14 #ReactLT
マシンリーダブルにしよう • StorybookでのUIコンポーネント集を管理しよう ◦ 汎用化したコンポーネントでマークアップミスを無くす、作 るUIについての設計を考えられる → WAI-ARIAを使ったUIをしっかり汎用化する 15 #ReactLT
マシンリーダブルにしよう • storybook-addon-a11yの活用をする ◦ コンポーネントごとにアクセシビリティチェックを表示してく れる ◦ クリティカルになりえそうな部分の早めの発見ができる 16 #ReactLT
17
テストが書きやすくなる • マシンリーダブルにコンポーネントを作成しておくとテストが書 きやすくなる • 振る舞い駆動開発(BDD)しやすい 18 #ReactLT
テストが書きやすくなる 19 #ReactLT
テストが書きやすくなる • 状態を持っているコンポーネントの判断などWAI-ARIAを使う と解決するパターンが多くある • テストも書きやすくなってアクセシブルにもなり一石二鳥 20 #ReactLT
まとめ アクセシビリティを意識して開発すると • UI設計を意識してコードを書けるようになり、情報を より多くの人に届けることができる • テストが書きやすくなり開発スピードUP → より価値のあるプロダクトを提供できる! 21
#ReactLT
プロダクトをより多くの人に届けるというのを意識して コードを書いていきましょう!
None