SlideShare a Scribd company logo
1
自己紹介
2
3
澤田 望
4
中年男性
パーマ
メガネ(老眼)
ガリガリ
5
岡山で独立(2014) Webアクセシビリティ検証/
イラスト制作/
岡山情報ビジネス学院 非常勤講師
などなど
キヤノン (〜2013) サイトデザイン監修/
Webアクセシビリティ対応
WAIC  (2011〜)(ウェブアクセシビリティ基盤委員会)
今日の目標
6
7
アクセシブルではないマークアップ
に対して、WAI-ARIAの何を足せば
アクセシブルになるの?
⇧
ここの解決
WAI-ARIAとは
8
9
Web
Accessibility
Initiative
Accessible
Rich
Internet
Applications
WAI-ARIAとは
の略
×10
わい・エリア
WAI-ARIA
○ 11
ウェイ・アリア
WAI-ARIA
12
WAI
https://www.w3.org/WAI/
13
W3Cにおいてアクセシビリティ関連の活動を行って
いる部門のWAIによって作成された、
アクセシブルな
リッチ・
インターネット・
アプリケーション
を制作するための
(要素と属性を追加する)仕様
大藤さんの説明
わかりやすい「WAI-ARIA 1.0」仕様解説書
14
HTMLは元々文書をマークアップするための言語
なぜ仕様を追加する必要があるのか?
•JavaScript/CSS等で複雑になったWebアプ
リケーションの構造
•「何が/いつ/どう」変化したかという情報
HTMLの要素や属性だけでは表現しきれない
なぜ仕様を追加する必要があるのか?
15
16
WAI-ARIAの○○○属性を付加
構造/変化をUAに伝えられるようになる
なぜ仕様を追加する必要があるのか?
role属性
aria-○○○属性
tabindex属性
(tabindex自体はHTMLの仕様)
17
WAI-ARIAのイメージ
<div role="dialog">動画プレーヤー</div>
<div>動画プレーヤー</div>
<dialog>動画プレーヤー</dialog>
UAが解釈するイメージ
role属性の追加
18
•UAが正しく解釈し、正しく振る舞うようになる
•スクリーンリーダー利用者に正しく伝わる
•CSSやJavaScriptを使った開発が楽になる*
WAI-ARIAを使うと何が変わるのか?
19
ちなみに電子書籍にも応用可能(らしい)
https://www.w3.org/TR/dpub-aria-1.0/
WAI-ARIAの仕様
20
21
WAI-ARIA 1.0:勧告
https://momdo.github.io/wai-aria/
22
WAI-ARIA 1.1:勧告候補
https://momdo.github.io/wai-aria-1.1/
23
WAI-ARIAで定義されている仕様
role属性           :82種
(WAI-ARIAロール)         (70種使用可)
aria-○○○属性       :67種
(WAI-ARIAステートおよびプロパティ)
tabindex属性
(tabindex自体はHTMLの仕様)
24
role属性
• cell
• feed
• figure
• none
• searchbox
• switch
• table
• term
WAI-ARIA 1.0から1.1へのおもな変更点
aria-○○○属性
• aria-colcount
• aria-colindex
• aria-colspan
• aria-current
• aria-details
• aria-errormessage
• aria-keyshortcuts
• aria-modal
• aria-placeholder
• aria-roledescription
• aria-rowcount
• aria-rowindex
• aria-rowspan
aria-○○○属性
• aria-grabbed • aria-dropeffect
追加
非推奨
role属性
(WAI-ARIAロール)
25
26
•要素の意味や役割を定義するための属性
•既存の要素の役割も上書きして変更できる
role属性
27
•ランドマーク・ロール  : 8種
•文書構造ロール     :26種
•ウィジェット・ロール   :36種
•抽象ロール(使用禁止)  :12種
role属性の分類
28
•UAや支援技術が行うナビゲーションの重要な
目印(ランドマーク)として使用するためのロー
ル
ランドマーク・ロール
29
• banner(header要素)
• complementary(aside要素)
• contentinfo(footer要素)
• form(form要素)
ランドマーク・ロール
• main(main要素)
• navigation(nav要素)
• region
• search
※applicationは文書構造ロールへ移動
30
•HTML5の場合は同じロールの要素が既に存在
するため(regionとsearchを除く)、そのまま使う
のが○
•banner/main/contentinfoはdocumentロー
ルまたはapplicationロールの内部にひとつしか
配置できない
ランドマーク・ロールの注意点など
31
ランドマーク・ロールの例
http://d2draft.net/
32
mainロールの実装例
<div>〜</div>
<div role="main">〜</div>
<main>〜</main>
<main role="main">〜</main>
33
VoiceOverで聞いてみよう
http://sawada-std-design.com/works/d2d-study/accessibility/wai-aria/role-landmark.html
34
•文書構造を示すためのロール
•文書構造的なセマンティクス(意味)を持たな
い要素にセマンティクスを定義したいとき、も
しくは元の要素のセマンティクスを変えたいと
きに使用
•あくまで「定義」だけなので、見た目の変更は
CSSが必要
文書構造ロール
35
• application
• article(article要素)
• cell
• columnheader
• definition
• directory
• document(body要素)
• feed
• figure
• group
• heading(h1〜6要素)
• img(img要素)
• list(ul・ol要素)
文書構造ロール
• listitem(li要素)
• math
• none
• note
• presentation
• region(section要素)
• row(tr要素)
• rowgroup(thead・tbody・tfoot要素)
• rowheader
• separator(hr要素)
• table
• term
• toolbar
36
•applicationロールは必ずアプリケーション全体
を含む領域に対して設定(アクセシブルネームが必要)
•directoryロールは静的なリスト(動的:treeロール)
•presentation/noneロールはセマンティクスを
削除(今後はnoneに移行)
•アプリケーション内に複数のtoolbarロールを含
む場合はラベルが必要
文書構造ロールの注意点など
37
文書構造ロールの例
https://www.google.co.jp/
38
文書構造ロールの例
https://www.google.co.jp/
39
•ユーザーインターフェイス部品として機能する
各種ウィジェットを示すためのロール
•あくまで「示す」ものなので、機能させるため
にはJavaScriptが必要
ウィジェット・ロール
40
• alert
• alertdialog
• button
• checkbox
• combobox
• dialog
• grid(table要素)
• gridcell(td要素)
• link
• listbox(select要素)
• log
• marquee
ウィジェット・ロール
• menu
• menubar
• menuitem
• menuitemcheckbox
• menuitemradio
• option(option要素)
• progressbar
• radio
• radiogroup
• scrollbar
• searchbox
• slider
• spinbutton
• status
• switch
• tab
• tablist
• tabpanel
• textbox
• timer
• tooltip
• tree
• treegrid
• treeitem
41
•textboxロールはENTER時の改行/送信に注
意(aria-multiline属性)
•comboboxロールのコンボボックスを編集可能
にする場合はaria-autocomplete属性を指定
•tabとtabpanelの関連付けには、tab側にaria-
controls属性を指定するか、またはtabpanel側
にaria-labelledby属性を指定
ウィジェット・ロールの注意点など
42
•ページ遷移かフォーカスが移動する場合:link
それ以外の場合:button
•dialogロールのダイアログにはラベルが必須
(aria-label属性やaria-labelledby属性でも可)
•アラートを閉じない場合:alert
アラートを閉じる場合:alertdialog
ウィジェット・ロールの注意点など
43
ウィジェット・ロールの例
http://d2draft.net/
44
menuロールの実装例
<ul>
 <li>〜</li>
 <li>〜</a></li>
 <li>〜</li>
</ul>
<ul role="menu">
 <li role="menuitem">〜</li>
 <li role="menuitem">〜</li>
 <li role="menuitem">〜</li>
</ul>
45
VoiceOverで聞いてみよう
sawada-std-design.com/works/d2d-study/accessibility/wai-aria/role-menu.html
46
•ロール全体の分類・定義を行うために用意され
た特殊なロールで、実際の制作においてrole属
性の値として指定することはできない
抽象ロール
47
role属性があれば何でもできそう!
48
(何度も言うけど)
HTMLに元々ある要素は役割を変えず
そのまま使うのが原則ね。
49https://momdo.github.io/html-aria/
HTMLの要素に対するrole属性利用の可否
50
HTMLの要素に対するrole属性利用の可否
https://momdo.github.io/html-aria/#docconformance
51
HTMLの要素に対するrole属性利用の可否
aria-○○○属性
(WAI-ARIAステートおよびプロパティ)
52
53
•オブジェクトの状態(state)や性質/特性
(property)を示す属性
•ロールとの組み合わせで、ユーザーに「何が/
いつ/どう」変化したのかを通知できる
aria-○○○属性
54
•グローバル・ステート&プロパティ属性:21種
•関係属性             :16種
•ウィジェット属性          :24種
•ライブ領域属性          : 4種
•ドラッグアンドドロップ属性    : 2種
aria-○○○属性の分類
55
•すべてのHTML要素に使用可能
•すべてのロールに使用可能
グローバル・ステート&プロパティ属性
56
• aria-atomic
• aria-busy(ステート)
• aria-controls
• aria-current(ステート)
• aria-describedby
• aria-details
• aria-disabled(ステート)
• aria-dropeffect
• aria-errormessage
• aria-flowto
• aria-grabbed(ステート)
グローバル・ステート&プロパティ属性
• aria-haspopup
• aria-hidden(ステート)
• aria-invalid(ステート)
• aria-keyshortcuts
• aria-label
• aria-labelledby
• aria-live
• aria-owns
• aria-relevant
• aria-roledescription
57
グローバル・ステート&プロパティ属性の例
https://www.mitsue.co.jp/service/
58
•要素と要素の関係を明確に示すために使用され
る属性
•文書構造からだけでは解釈しにくい関係性を定義
(例:マークアップ順ではない読み上げ順)
関係属性
59
• aria-activedescendant
• aria-colcount
• aria-colindex
• aria-colspan
• aria-controls
• aria-describedby
• aria-details
• aria-errormessage
関係属性
• aria-flowto
• aria-labelledby
• aria-owns
• aria-posinset
• aria-rowcount
• aria-rowindex
• aria-rowspan
• aria-setsize
60
•aria-labelledby属性は複数指定可能(半角スペー
ス区切り)
•ラベルを画面に表示できる場合:aria-labelledby
ラベルを画面に表示できない場合:aria-label
•短いラベルの場合:aria-labelledby
文章で説明する場合:aria-describedby
関係属性の注意点など
61
aria-describedby属性を追加した例
http://d2draft.net/
62
aria-labelledby属性を追加した実装例
<svg role="img" aria-labelledby="ttlOko dscOko"
xmlns=“〜">
<title id="ttlOko">タイトル</title>
<desc id="dscOko">説明文</desc>
63
•ウィジェット・ロールの要素で使用される各種
属性
•ユーザーからの入力やアクションを受け取る
ユーザーインターフェイス要素に固有の属性
•あくまで「示す」ものなので、機能させるため
にはJavaScriptが必要(HTML5の属性で同等なもの
はそちらを使うのがオススメ)
ウィジェット属性
64
• aria-autocomplete
• aria-checked
• aria-disabled
• aria-errormessage
• aria-expanded
• aria-haspopup
• aria-hidden
• aria-invalid
• aria-label
• aria-level
• aria-modal
• aria-multiline
ウィジェット属性
• aria-multiselectable
• aria-orientation
• aria-placeholder
• aria-pressed
• aria-readonly
• aria-required
• aria-selected
• aria-sort
• aria-valuemax
• aria-valuemin
• aria-valuenow
• aria-valuetext
65
•aria-hidden属性の使用は、見えているコンテン
ツを支援技術(スクリーンリーダーなど)から隠すこ
とで、支援技術利用者とそうでない利用者の体
験価値が同等になる場合に限る(訳:気軽に隠すなよ)
•HTML5のrequired属性が使えるなら(スクリーン
リーダーでの対応状況も)aria-required属性は不要
ウィジェット属性の注意点など
66
aria-hidden属性の実装例
<del>〜</del>
<del aria-hidden="true">〜</del>
※ del要素に対応していないスクリーンリーダーが多いため、読み上げさせない
ためにaria-hiddenを設置している例
67
VoiceOverで聞いてみよう
sawada-std-design.com/works/d2d-study/accessibility/wai-aria/aria-hidden.html
68
•aria-multiline属性:ENTER時の改行/送信に
注意
•aria-haspopup属性でポップアップさせる場合
は要素またはaria-owns属性で親子関係にする
•aria-expanded属性で展開/折り畳み行う場合
は要素またはaria-controls属性で親子関係にする
ウィジェット属性の注意点など
69
aria-checked属性の実装例
<ul role="menu">
 <li role="menuitem checkbox" aria-checked="false">〜</li>
 <li role="menuitem checkbox" aria-checked="true">〜</li>
 <li role="menuitem checkbox" aria-checked="false">〜</li>
</ul>
70
VoiceOverで聞いてみよう
sawada-std-design.com/works/d2d-study/accessibility/wai-aria/aria-checked.html
71
•リッチインターネットアプリケーションにおけ
るライブ領域(勝手に更新されるエリア)に固有の
属性
•フォーカスの当たっていない要素に発生したコ
ンテンツの更新情報も支援技術に提供できる
ライブ領域属性
72
• aria-atomic
• aria-busy
• aria-live
• aria-relevant
ライブ領域属性
73
•aria-live属性値assertive:即座に更新を通知す
べき重要度の高い情報
ライブ領域属性の注意点など
74
ライブ領域属性の例
http://d2draft.net/
75
•支援技術がドラッグ&ドロップ機能をサポート
できるようにするための属性
•とはいえ、WAI-ARIA 1.1で非推奨に. . .
(WAI-ARIAの将来のバージョンで新しい機能に置き換わ
ることが期待される)
ドラッグアンドドロップ属性
76
• aria-dropeffect(非推奨)
• aria-grabbed(非推奨)
ドラッグアンドドロップ属性
77https://momdo.github.io/html-aria/
ロールに対するステート&プロパティ利用の可否
78https://momdo.github.io/html-aria/#allowed-aria-roles-states-and-properties
ロールに対するステート&プロパティ利用の可否
79
ロールに対するステート&プロパティ利用の可否
tabindex属性
80
81
•インタラクティブなオブジェクトはすべて
フォーカス可能にしなければいけない
•要素にフォーカスを与える属性としてtabindex
属性を使用
•HTML5ではすべての要素にtabindexの指定が
可能
tabindex属性
82
•tabindex=“正の整数”:tabキーの移動順序
•tabindex=“0”    :フォーカス可能
 (順序はマークアップ順)
•tabindex=“-1”   :フォーカス不可
tabindex属性の値
83
tabindex属性の例
http://d2draft.net/
※ span要素なので元々フォーカスは当たりません。
ここではあくまで「明示的に」です。
CSSの属性セレクタでの利用
84
85
WAI-ARIAを活用したJavaScriptによるDOM操作
https://speakerdeck.com/maepon/wai-ariawohuo-yong-sitajavascriptniyorudomcao-zuo
86
CSSの属性セレクタについて
https://speakerdeck.com/maepon/wai-ariawohuo-yong-sitajavascriptniyorudomcao-zuo
•属性セレクタでrole属性やaria-○○○属性が使
用できる
CSS/JSの開発が楽になる?
87
CSSの属性セレクタについて
li[ aria-checked="true" ] { 〜 ; }
sawada-std-design.com/works/d2d-study/accessibility/wai-aria/aria-checked-css.html
まとめ
88
89
大切なのはセマンティクス
↓
要素の意味
↓
正しい要素が使えない時にWAI-ARIA
90
では、次は
グループワークの説明です!
91
楽しいワークショップ
92
人数が多いので、
5人/5チーム(A〜E)
に分かれてもらいます。
グループ分け
93
JavaScriptを使ったサンプルコード
(jQueryですが)
•アコーディオンメニュー
•タブナビゲーション
にWAI-ARIAの属性を追加して、
さらにアクセシブルな状態にする
何をするのか?
94
1. jsdo.it にあるサンプルコードを
2. フォークして
3. みんなで相談して
4. 編集(WAI-ARIA付加)して
5. チーム代表のアカウントで保存して
6. 発表
作業手順
95
(今回目指す)アクセシブルな状態とは?
1. 知覚/理解できること
• 視覚でもスクリーンリーダーでも認識できる
• そのUIオブジェクトは何なのか
• 開/閉、選択/非選択の状態
• コントローラ(ラベル)とパネル(コンテンツ)の関係
2. キーボードで操作できること
• フォーカスインジケータが見える
• 正しいフォーカス順序
• キーボードトラップされない
• onfocusやhoverでは実行しない
96
サンプルコードの状態(まぁまぁアクセシブル)
1. 知覚/理解できる
• 見える(テキストと背景色のコントラストは4.5:1以上)
• そのUIオブジェクトは何なのかは分からない
• 開/閉、選択/非選択状態は視覚でのみ伝わる状態
• コントローラ(ラベル)とパネル(コンテンツ)の関係も不明
2. キーボードで操作できる
• フォーカスインジケータが見える
• 正しいフォーカス順序(tabindex属性付加済)
• キーボードトラップされない
• onfocusやhoverでは実行しない
97
ついでに
3. より仕様に則した実装に変更
• 独自のclassを使ったロジック
→ role属性/aria-○○○属性を使用したロジック
• 独自のclassを使ったスタイルの定義
→ CSSの属性セレクタを使用したスタイルの定義
98
WCAG 2.0 達成方法集(2017年4月20日更新!)
http://waic.github.io/wcag20/Techniques/Overview.html
99http://waic.github.io/wcag20/Techniques/aria.html
WCAG 2.0 達成方法集(2017年4月20日更新!)
100https://www.w3.org/TR/wai-aria-practices-1.1/
W3Cオススメの使い方
101
サンプルコードは、
この本をコピって作りました。
参考にして
102
http://amzn.asia/3XvRLYO
103
•アコーディオンメニュー:bit.ly/2rEAWUf
•タブナビゲーション :bit.ly/2rEAZ2n
•このスライド :bit.ly/2rTUGSi
サンプルコード置き場
104
出来上がったら
スクリーンリーダーで聞いてみよう!
(おまけ)サポート状況など
105
106
アクセシビリティ・サポーテッド(AS)情報
http://waic.jp/docs/as/
107
アクセシビリティ・サポーテッド情報
の整備はまだまだ(未着手)
108
WAI-ARIAのサポート状況(参考)
http://caniuse.com/#feat=wai-aria
109
WAI-ARIAのサポート状況(参考)
https://www.powermapper.com/tests/screen-readers/aria/
110
WAI-ARIAのサポート状況(参考)
https://www.powermapper.com/tests/screen-readers/aria/
111
WAI-ARIAのサポート状況(参考)
https://www.powermapper.com/tests/screen-readers/aria/
112
とはいえ、日本での状況はまた
 違います(PC-Talker一人勝ち)ので、
 試しながら導入していきましょう。
113
PC-Talkerについてはこちら...
114
WAI-ARIAのサポート状況(参考)
https://white-stage.com/staticpages/index.php/a11y-tabmenu-sr1
115
ARIA Validator
https://chrome.google.com/webstore/detail/aria-validator/oigghlanfjgnkcndchmnlnmaojahnjoc
116
ありがとうございました
@SawadaStdDesign

More Related Content

What's hot

あなたの価値を高めるWebアクセシビリティ
あなたの価値を高めるWebアクセシビリティあなたの価値を高めるWebアクセシビリティ
あなたの価値を高めるWebアクセシビリティ
力也 伊原
 
受託開発の会社が自社サービスを開発・運営する中で見つけた自分たちにあったスタンス
受託開発の会社が自社サービスを開発・運営する中で見つけた自分たちにあったスタンス受託開発の会社が自社サービスを開発・運営する中で見つけた自分たちにあったスタンス
受託開発の会社が自社サービスを開発・運営する中で見つけた自分たちにあったスタンス
Yusuke Tamukai
 
サイトをアクセシブルにするための受発注のセオリー
サイトをアクセシブルにするための受発注のセオリーサイトをアクセシブルにするための受発注のセオリー
サイトをアクセシブルにするための受発注のセオリー
力也 伊原
 
Webアクセシビリティ なぜ?どうやって?
Webアクセシビリティ なぜ?どうやって?Webアクセシビリティ なぜ?どうやって?
Webアクセシビリティ なぜ?どうやって?
Mitsue-Links Co.,Ltd. Accessibility Department
 
受託開発をやりながらboardを軌道に乗せるまで
受託開発をやりながらboardを軌道に乗せるまで受託開発をやりながらboardを軌道に乗せるまで
受託開発をやりながらboardを軌道に乗せるまで
Yusuke Tamukai
 
一般企業におけるWebアクセシビリティの進め方
一般企業におけるWebアクセシビリティの進め方一般企業におけるWebアクセシビリティの進め方
一般企業におけるWebアクセシビリティの進め方
Web Accessibility Infrastructure Committee (WAIC)
 
Webアクセシビリティ 海外の最新動向 2018
Webアクセシビリティ 海外の最新動向 2018Webアクセシビリティ 海外の最新動向 2018
Webアクセシビリティ 海外の最新動向 2018
Makoto Ueki
 
Webアクセシビリティセミナー2:なぜ企業はWebアクセシビリティに取り組むのか?
Webアクセシビリティセミナー2:なぜ企業はWebアクセシビリティに取り組むのか?Webアクセシビリティセミナー2:なぜ企業はWebアクセシビリティに取り組むのか?
Webアクセシビリティセミナー2:なぜ企業はWebアクセシビリティに取り組むのか?
Web Accessibility Infrastructure Committee (WAIC)
 
これだけは知っておきたい「Webアクセシビリティ」のこと
これだけは知っておきたい「Webアクセシビリティ」のことこれだけは知っておきたい「Webアクセシビリティ」のこと
これだけは知っておきたい「Webアクセシビリティ」のこと
Makoto Ueki
 
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディプロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
力也 伊原
 
クラウドサービスを運営する上で活用している可視化のためのサービス・ツール
クラウドサービスを運営する上で活用している可視化のためのサービス・ツールクラウドサービスを運営する上で活用している可視化のためのサービス・ツール
クラウドサービスを運営する上で活用している可視化のためのサービス・ツール
Yusuke Tamukai
 
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
Yusuke Tamukai
 
受託開発脳から自社開発脳への切り替えの7つの壁 x スマホアプリCMS「Patto」
受託開発脳から自社開発脳への切り替えの7つの壁 x スマホアプリCMS「Patto」受託開発脳から自社開発脳への切り替えの7つの壁 x スマホアプリCMS「Patto」
受託開発脳から自社開発脳への切り替えの7つの壁 x スマホアプリCMS「Patto」
Yusuke Tamukai
 
アクセシビリティ対応をプロジェクトに取り入れるには?
アクセシビリティ対応をプロジェクトに取り入れるには?アクセシビリティ対応をプロジェクトに取り入れるには?
アクセシビリティ対応をプロジェクトに取り入れるには?
力也 伊原
 
業務系クラウドサービスが取り組んでいるセキュリティ対策
業務系クラウドサービスが取り組んでいるセキュリティ対策業務系クラウドサービスが取り組んでいるセキュリティ対策
業務系クラウドサービスが取り組んでいるセキュリティ対策
Yusuke Tamukai
 
Webディレクター~強みを活かすディレクション術~
Webディレクター~強みを活かすディレクション術~Webディレクター~強みを活かすディレクション術~
Webディレクター~強みを活かすディレクション術~
INI株式会社
 
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選びWeb制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Seiko Kuchida
 
こうすればできる!ウェブアクセシビリティ試験実施のポイント
こうすればできる!ウェブアクセシビリティ試験実施のポイントこうすればできる!ウェブアクセシビリティ試験実施のポイント
こうすればできる!ウェブアクセシビリティ試験実施のポイント
Web Accessibility Infrastructure Committee (WAIC)
 
Web制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイントWeb制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイント
高本 徹
 
アクセシビリティ対応をプロジェクトに取り入れるには?
アクセシビリティ対応をプロジェクトに取り入れるには?アクセシビリティ対応をプロジェクトに取り入れるには?
アクセシビリティ対応をプロジェクトに取り入れるには?
力也 伊原
 

What's hot (20)

あなたの価値を高めるWebアクセシビリティ
あなたの価値を高めるWebアクセシビリティあなたの価値を高めるWebアクセシビリティ
あなたの価値を高めるWebアクセシビリティ
 
受託開発の会社が自社サービスを開発・運営する中で見つけた自分たちにあったスタンス
受託開発の会社が自社サービスを開発・運営する中で見つけた自分たちにあったスタンス受託開発の会社が自社サービスを開発・運営する中で見つけた自分たちにあったスタンス
受託開発の会社が自社サービスを開発・運営する中で見つけた自分たちにあったスタンス
 
サイトをアクセシブルにするための受発注のセオリー
サイトをアクセシブルにするための受発注のセオリーサイトをアクセシブルにするための受発注のセオリー
サイトをアクセシブルにするための受発注のセオリー
 
Webアクセシビリティ なぜ?どうやって?
Webアクセシビリティ なぜ?どうやって?Webアクセシビリティ なぜ?どうやって?
Webアクセシビリティ なぜ?どうやって?
 
受託開発をやりながらboardを軌道に乗せるまで
受託開発をやりながらboardを軌道に乗せるまで受託開発をやりながらboardを軌道に乗せるまで
受託開発をやりながらboardを軌道に乗せるまで
 
一般企業におけるWebアクセシビリティの進め方
一般企業におけるWebアクセシビリティの進め方一般企業におけるWebアクセシビリティの進め方
一般企業におけるWebアクセシビリティの進め方
 
Webアクセシビリティ 海外の最新動向 2018
Webアクセシビリティ 海外の最新動向 2018Webアクセシビリティ 海外の最新動向 2018
Webアクセシビリティ 海外の最新動向 2018
 
Webアクセシビリティセミナー2:なぜ企業はWebアクセシビリティに取り組むのか?
Webアクセシビリティセミナー2:なぜ企業はWebアクセシビリティに取り組むのか?Webアクセシビリティセミナー2:なぜ企業はWebアクセシビリティに取り組むのか?
Webアクセシビリティセミナー2:なぜ企業はWebアクセシビリティに取り組むのか?
 
これだけは知っておきたい「Webアクセシビリティ」のこと
これだけは知っておきたい「Webアクセシビリティ」のことこれだけは知っておきたい「Webアクセシビリティ」のこと
これだけは知っておきたい「Webアクセシビリティ」のこと
 
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディプロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
 
クラウドサービスを運営する上で活用している可視化のためのサービス・ツール
クラウドサービスを運営する上で活用している可視化のためのサービス・ツールクラウドサービスを運営する上で活用している可視化のためのサービス・ツール
クラウドサービスを運営する上で活用している可視化のためのサービス・ツール
 
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
 
受託開発脳から自社開発脳への切り替えの7つの壁 x スマホアプリCMS「Patto」
受託開発脳から自社開発脳への切り替えの7つの壁 x スマホアプリCMS「Patto」受託開発脳から自社開発脳への切り替えの7つの壁 x スマホアプリCMS「Patto」
受託開発脳から自社開発脳への切り替えの7つの壁 x スマホアプリCMS「Patto」
 
アクセシビリティ対応をプロジェクトに取り入れるには?
アクセシビリティ対応をプロジェクトに取り入れるには?アクセシビリティ対応をプロジェクトに取り入れるには?
アクセシビリティ対応をプロジェクトに取り入れるには?
 
業務系クラウドサービスが取り組んでいるセキュリティ対策
業務系クラウドサービスが取り組んでいるセキュリティ対策業務系クラウドサービスが取り組んでいるセキュリティ対策
業務系クラウドサービスが取り組んでいるセキュリティ対策
 
Webディレクター~強みを活かすディレクション術~
Webディレクター~強みを活かすディレクション術~Webディレクター~強みを活かすディレクション術~
Webディレクター~強みを活かすディレクション術~
 
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選びWeb制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
 
こうすればできる!ウェブアクセシビリティ試験実施のポイント
こうすればできる!ウェブアクセシビリティ試験実施のポイントこうすればできる!ウェブアクセシビリティ試験実施のポイント
こうすればできる!ウェブアクセシビリティ試験実施のポイント
 
Web制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイントWeb制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイント
 
アクセシビリティ対応をプロジェクトに取り入れるには?
アクセシビリティ対応をプロジェクトに取り入れるには?アクセシビリティ対応をプロジェクトに取り入れるには?
アクセシビリティ対応をプロジェクトに取り入れるには?
 

Similar to 第7回 okayama-js 実践 WAI-ARIA

岡山をリーダブルな世界に
岡山をリーダブルな世界に岡山をリーダブルな世界に
岡山をリーダブルな世界に
Nozomi Sawada
 
中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
Nozomi Sawada
 
Webアクセシビリティ向上のためのマインドセット変革
Webアクセシビリティ向上のためのマインドセット変革Webアクセシビリティ向上のためのマインドセット変革
Webアクセシビリティ向上のためのマインドセット変革
Mitsue-Links Co.,Ltd. Accessibility Department
 
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーションWAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
Yoshinori OHTA
 
Word fesnagoya2017 oyabu2
Word fesnagoya2017 oyabu2Word fesnagoya2017 oyabu2
Word fesnagoya2017 oyabu2
takuya oyabu
 
キヤノンのウェブサイトにおけるアクセシビリティへの取り組み(2013年12月10日版)
キヤノンのウェブサイトにおけるアクセシビリティへの取り組み(2013年12月10日版)キヤノンのウェブサイトにおけるアクセシビリティへの取り組み(2013年12月10日版)
キヤノンのウェブサイトにおけるアクセシビリティへの取り組み(2013年12月10日版)
Web Accessibility Infrastructure Committee (WAIC)
 
Webデザインにおけるアクセシビリティへの取組み
Webデザインにおけるアクセシビリティへの取組みWebデザインにおけるアクセシビリティへの取組み
Webデザインにおけるアクセシビリティへの取組み
Mitsue-Links Co.,Ltd. Accessibility Department
 
Dspを活用したアプリ向けリターゲティング広告について
Dspを活用したアプリ向けリターゲティング広告についてDspを活用したアプリ向けリターゲティング広告について
Dspを活用したアプリ向けリターゲティング広告について
Kazuya.Naraoka
 
Webアクセシビリティ最新動向 ~JIS X 8341-3:2016と障害者差別解消法~
Webアクセシビリティ最新動向 ~JIS X 8341-3:2016と障害者差別解消法~Webアクセシビリティ最新動向 ~JIS X 8341-3:2016と障害者差別解消法~
Webアクセシビリティ最新動向 ~JIS X 8341-3:2016と障害者差別解消法~
Web Accessibility Infrastructure Committee (WAIC)
 
サイトマップ(サイトストラクチャ)を考える
サイトマップ(サイトストラクチャ)を考えるサイトマップ(サイトストラクチャ)を考える
サイトマップ(サイトストラクチャ)を考えるkousuke inamoto
 
The way of_study_meeting_not_failing
The way of_study_meeting_not_failingThe way of_study_meeting_not_failing
The way of_study_meeting_not_failing
Takayuki Masaki
 
ウェブディレクターのための Web A11Y 勉強会 #01
ウェブディレクターのための Web A11Y 勉強会 #01ウェブディレクターのための Web A11Y 勉強会 #01
ウェブディレクターのための Web A11Y 勉強会 #01
Kazuhiko Tsuchiya
 
受託の会社が自社サービスをやる中で取り組んだ開発・運用の工夫
受託の会社が自社サービスをやる中で取り組んだ開発・運用の工夫受託の会社が自社サービスをやる中で取り組んだ開発・運用の工夫
受託の会社が自社サービスをやる中で取り組んだ開発・運用の工夫
Yusuke Tamukai
 
if-up 2019 | A4. 「進化し続けるプロダクトを作るための開発チーム」
if-up 2019 | A4. 「進化し続けるプロダクトを作るための開発チーム」if-up 2019 | A4. 「進化し続けるプロダクトを作るための開発チーム」
if-up 2019 | A4. 「進化し続けるプロダクトを作るための開発チーム」
SORACOM,INC
 
20190723 jawsug sales
20190723 jawsug sales20190723 jawsug sales
20190723 jawsug sales
Shinya Yamada
 
自動応答Q&A作って比較、ENOKIとWatsonとDialogFlow
自動応答Q&A作って比較、ENOKIとWatsonとDialogFlow自動応答Q&A作って比較、ENOKIとWatsonとDialogFlow
自動応答Q&A作って比較、ENOKIとWatsonとDialogFlow
Junichi Ito
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
 

Similar to 第7回 okayama-js 実践 WAI-ARIA (17)

岡山をリーダブルな世界に
岡山をリーダブルな世界に岡山をリーダブルな世界に
岡山をリーダブルな世界に
 
中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
 
Webアクセシビリティ向上のためのマインドセット変革
Webアクセシビリティ向上のためのマインドセット変革Webアクセシビリティ向上のためのマインドセット変革
Webアクセシビリティ向上のためのマインドセット変革
 
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーションWAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
 
Word fesnagoya2017 oyabu2
Word fesnagoya2017 oyabu2Word fesnagoya2017 oyabu2
Word fesnagoya2017 oyabu2
 
キヤノンのウェブサイトにおけるアクセシビリティへの取り組み(2013年12月10日版)
キヤノンのウェブサイトにおけるアクセシビリティへの取り組み(2013年12月10日版)キヤノンのウェブサイトにおけるアクセシビリティへの取り組み(2013年12月10日版)
キヤノンのウェブサイトにおけるアクセシビリティへの取り組み(2013年12月10日版)
 
Webデザインにおけるアクセシビリティへの取組み
Webデザインにおけるアクセシビリティへの取組みWebデザインにおけるアクセシビリティへの取組み
Webデザインにおけるアクセシビリティへの取組み
 
Dspを活用したアプリ向けリターゲティング広告について
Dspを活用したアプリ向けリターゲティング広告についてDspを活用したアプリ向けリターゲティング広告について
Dspを活用したアプリ向けリターゲティング広告について
 
Webアクセシビリティ最新動向 ~JIS X 8341-3:2016と障害者差別解消法~
Webアクセシビリティ最新動向 ~JIS X 8341-3:2016と障害者差別解消法~Webアクセシビリティ最新動向 ~JIS X 8341-3:2016と障害者差別解消法~
Webアクセシビリティ最新動向 ~JIS X 8341-3:2016と障害者差別解消法~
 
サイトマップ(サイトストラクチャ)を考える
サイトマップ(サイトストラクチャ)を考えるサイトマップ(サイトストラクチャ)を考える
サイトマップ(サイトストラクチャ)を考える
 
The way of_study_meeting_not_failing
The way of_study_meeting_not_failingThe way of_study_meeting_not_failing
The way of_study_meeting_not_failing
 
ウェブディレクターのための Web A11Y 勉強会 #01
ウェブディレクターのための Web A11Y 勉強会 #01ウェブディレクターのための Web A11Y 勉強会 #01
ウェブディレクターのための Web A11Y 勉強会 #01
 
受託の会社が自社サービスをやる中で取り組んだ開発・運用の工夫
受託の会社が自社サービスをやる中で取り組んだ開発・運用の工夫受託の会社が自社サービスをやる中で取り組んだ開発・運用の工夫
受託の会社が自社サービスをやる中で取り組んだ開発・運用の工夫
 
if-up 2019 | A4. 「進化し続けるプロダクトを作るための開発チーム」
if-up 2019 | A4. 「進化し続けるプロダクトを作るための開発チーム」if-up 2019 | A4. 「進化し続けるプロダクトを作るための開発チーム」
if-up 2019 | A4. 「進化し続けるプロダクトを作るための開発チーム」
 
20190723 jawsug sales
20190723 jawsug sales20190723 jawsug sales
20190723 jawsug sales
 
自動応答Q&A作って比較、ENOKIとWatsonとDialogFlow
自動応答Q&A作って比較、ENOKIとWatsonとDialogFlow自動応答Q&A作って比較、ENOKIとWatsonとDialogFlow
自動応答Q&A作って比較、ENOKIとWatsonとDialogFlow
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
 

More from Nozomi Sawada

「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada
 
UDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみようUDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみよう
Nozomi Sawada
 
色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)
Nozomi Sawada
 
コントラスト高めでいこう
コントラスト高めでいこうコントラスト高めでいこう
コントラスト高めでいこう
Nozomi Sawada
 
代替テキストの基本から応用まで
代替テキストの基本から応用まで代替テキストの基本から応用まで
代替テキストの基本から応用まで
Nozomi Sawada
 
こんなとき実感!代替テキストと字幕の大切さ
こんなとき実感!代替テキストと字幕の大切さこんなとき実感!代替テキストと字幕の大切さ
こんなとき実感!代替テキストと字幕の大切さ
Nozomi Sawada
 
Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
Nozomi Sawada
 
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいことより多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
Nozomi Sawada
 
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
Nozomi Sawada
 
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/WebアクセシビリティチェックのポイントJIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
Nozomi Sawada
 
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada
 
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
 第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」 第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
Nozomi Sawada
 
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
Nozomi Sawada
 

More from Nozomi Sawada (13)

「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
 
UDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみようUDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみよう
 
色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)
 
コントラスト高めでいこう
コントラスト高めでいこうコントラスト高めでいこう
コントラスト高めでいこう
 
代替テキストの基本から応用まで
代替テキストの基本から応用まで代替テキストの基本から応用まで
代替テキストの基本から応用まで
 
こんなとき実感!代替テキストと字幕の大切さ
こんなとき実感!代替テキストと字幕の大切さこんなとき実感!代替テキストと字幕の大切さ
こんなとき実感!代替テキストと字幕の大切さ
 
Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
 
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいことより多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
 
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
 
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/WebアクセシビリティチェックのポイントJIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
 
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
 
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
 第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」 第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
 
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
 

第7回 okayama-js 実践 WAI-ARIA