Soumettre la recherche
Mettre en ligne
チームで取り組む!アクセシビリティコーディング&デザイン
•
0 j'aime
•
3,235 vues
K
Kobayashi Daisuke
Suivre
2017/11/11に開催されたJapan Accessibility Conferenceの登壇資料です。
Lire moins
Lire la suite
Internet
Signaler
Partager
Signaler
Partager
1 sur 43
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
力也 伊原
171111 nishimoto-nvdajp-v2
171111 nishimoto-nvdajp-v2
Takuya Nishimoto
ヤフー株式会社はアクセシビリティ対応を なぜ始めたのか、どう進めているのか
ヤフー株式会社はアクセシビリティ対応を なぜ始めたのか、どう進めているのか
Yahoo!デベロッパーネットワーク
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Chihiro Tomita
AbemaTVのUIデザイン 僕なりの運用の心得
AbemaTVのUIデザイン 僕なりの運用の心得
Shunsuke Matsumoto
UI要素を動的に利用する
UI要素を動的に利用する
HideoMiyake
2018/01/17 第3回 HoloLens 参考書読み会発表資料
2018/01/17 第3回 HoloLens 参考書読み会発表資料
Yusuke Furuta
Indigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプ
インフラジスティックス・ジャパン株式会社
Recommandé
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
力也 伊原
171111 nishimoto-nvdajp-v2
171111 nishimoto-nvdajp-v2
Takuya Nishimoto
ヤフー株式会社はアクセシビリティ対応を なぜ始めたのか、どう進めているのか
ヤフー株式会社はアクセシビリティ対応を なぜ始めたのか、どう進めているのか
Yahoo!デベロッパーネットワーク
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Chihiro Tomita
AbemaTVのUIデザイン 僕なりの運用の心得
AbemaTVのUIデザイン 僕なりの運用の心得
Shunsuke Matsumoto
UI要素を動的に利用する
UI要素を動的に利用する
HideoMiyake
2018/01/17 第3回 HoloLens 参考書読み会発表資料
2018/01/17 第3回 HoloLens 参考書読み会発表資料
Yusuke Furuta
Indigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプ
インフラジスティックス・ジャパン株式会社
アクセシビリティの祭典2021:みんなで創ろうアクセシブルなグループウェア インクルーシブな製品開発
アクセシビリティの祭典2021:みんなで創ろうアクセシブルなグループウェア インクルーシブな製品開発
Kobayashi Daisuke
チームで取り組む!サイボウズのアクセシビリティ 開発プロセスにアクセシビリティをインクルードする | GAAD Japan 2021
チームで取り組む!サイボウズのアクセシビリティ 開発プロセスにアクセシビリティをインクルードする | GAAD Japan 2021
Kobayashi Daisuke
CSUN2018 参加報告
CSUN2018 参加報告
Kobayashi Daisuke
kintoneとカラーユニバーサルデザイン
kintoneとカラーユニバーサルデザイン
Kobayashi Daisuke
すべての人にチームワークを kintoneとアクセシビリティ
すべての人にチームワークを kintoneとアクセシビリティ
Kobayashi Daisuke
すべての人にチームワークを サイボウズのアクセシビリティ
すべての人にチームワークを サイボウズのアクセシビリティ
Kobayashi Daisuke
サイボウズはアクセシビリティになぜ取り組む?どう取り組む?
サイボウズはアクセシビリティになぜ取り組む?どう取り組む?
Kobayashi Daisuke
Webアクセシビリティポリシーのつくりかた・ひろめかた
Webアクセシビリティポリシーのつくりかた・ひろめかた
Kobayashi Daisuke
あなたの言葉で伝えるWebアクセシビリティ
あなたの言葉で伝えるWebアクセシビリティ
Kobayashi Daisuke
Contenu connexe
Plus de Kobayashi Daisuke
アクセシビリティの祭典2021:みんなで創ろうアクセシブルなグループウェア インクルーシブな製品開発
アクセシビリティの祭典2021:みんなで創ろうアクセシブルなグループウェア インクルーシブな製品開発
Kobayashi Daisuke
チームで取り組む!サイボウズのアクセシビリティ 開発プロセスにアクセシビリティをインクルードする | GAAD Japan 2021
チームで取り組む!サイボウズのアクセシビリティ 開発プロセスにアクセシビリティをインクルードする | GAAD Japan 2021
Kobayashi Daisuke
CSUN2018 参加報告
CSUN2018 参加報告
Kobayashi Daisuke
kintoneとカラーユニバーサルデザイン
kintoneとカラーユニバーサルデザイン
Kobayashi Daisuke
すべての人にチームワークを kintoneとアクセシビリティ
すべての人にチームワークを kintoneとアクセシビリティ
Kobayashi Daisuke
すべての人にチームワークを サイボウズのアクセシビリティ
すべての人にチームワークを サイボウズのアクセシビリティ
Kobayashi Daisuke
サイボウズはアクセシビリティになぜ取り組む?どう取り組む?
サイボウズはアクセシビリティになぜ取り組む?どう取り組む?
Kobayashi Daisuke
Webアクセシビリティポリシーのつくりかた・ひろめかた
Webアクセシビリティポリシーのつくりかた・ひろめかた
Kobayashi Daisuke
あなたの言葉で伝えるWebアクセシビリティ
あなたの言葉で伝えるWebアクセシビリティ
Kobayashi Daisuke
Plus de Kobayashi Daisuke
(9)
アクセシビリティの祭典2021:みんなで創ろうアクセシブルなグループウェア インクルーシブな製品開発
アクセシビリティの祭典2021:みんなで創ろうアクセシブルなグループウェア インクルーシブな製品開発
チームで取り組む!サイボウズのアクセシビリティ 開発プロセスにアクセシビリティをインクルードする | GAAD Japan 2021
チームで取り組む!サイボウズのアクセシビリティ 開発プロセスにアクセシビリティをインクルードする | GAAD Japan 2021
CSUN2018 参加報告
CSUN2018 参加報告
kintoneとカラーユニバーサルデザイン
kintoneとカラーユニバーサルデザイン
すべての人にチームワークを kintoneとアクセシビリティ
すべての人にチームワークを kintoneとアクセシビリティ
すべての人にチームワークを サイボウズのアクセシビリティ
すべての人にチームワークを サイボウズのアクセシビリティ
サイボウズはアクセシビリティになぜ取り組む?どう取り組む?
サイボウズはアクセシビリティになぜ取り組む?どう取り組む?
Webアクセシビリティポリシーのつくりかた・ひろめかた
Webアクセシビリティポリシーのつくりかた・ひろめかた
あなたの言葉で伝えるWebアクセシビリティ
あなたの言葉で伝えるWebアクセシビリティ
チームで取り組む!アクセシビリティコーディング&デザイン
1.
チームで取り組む! アクセシビリティコーディング&デザイン ⼩林⼤輔 & 伊敷
政英
2.
⾃⼰紹介 ⼩林⼤輔 サイボウズ kintoneチーム @sukoyakarizumu 伊敷 政英 Cocktailz
3.
アクセシビリティの広がり ひとりで取り組む チームで取り組む 全社で取り組む
4.
アクセシブルな コーディング&デザイン
5.
今回テストするWebサービス
6.
ユーザビリティテスト
7.
キーボード操作に要注意! キーボード操作不能 ハイライト視認不能
8.
div要素やspan要素をボタンに⾒せかけていませんか? キーボード操作 <div onClick=...>さらに表示</div>
9.
div要素やspan要素のままで対応するとしたら… キーボード操作 <div onClick=... tabindex=“0” onKeyup=... role=“button” >さらに表示</div>
10.
ボタンにはbutton要素を使おう キーボード操作 <button onClick=...>さらに表示</button>
11.
⾒出しやリスト ⾒出しとしてマークアップ リストとしてマークアップ
12.
キーボードフォーカス順序 ▌CSSで要素の位置を変えた場合は要注意 ▌Tabキーを使って検証しよう
13.
コントラスト⽐ ▌Color Contrast Checkerなどで確認しよう
14.
1. 適切なマークアップをしよう 2. 多様なユーザに注意をはらってデザインしよう スクリーンリーダー、ロービジョン、拡⼤… 3.
百聞は⼀⾒に如かず!ユーザを観察しよう アクセシブルコーディング&デザインのポイント
15.
チームで アクセシビリティに取り組む⽅法
16.
▌ ヘッダーのキーボードフォーカス順序を改修! ▌ 「さらに読む」をキーボード操作できるように改修! ▌
「+」ボタンをキーボード操作できるように改修! ▌ プルダウンのフォーカスが⾒えるように改修! 11/12 アップデートでアクセシビリティを改善!
17.
チームで取り組むための2つの要素 ま マインドルール
18.
ルールづくりの観点1 どの程度の厳密さを求めるか?
19.
20.
25項⽬(A基準)
21.
コンテンツのすべての機能は、個々のキーストロークに特定の タイミングを要することなく、キーボードインタフェースを通じ て操作可能である。ただし、その根本的な機能が利⽤者の動作に よる始点から終点まで続く⼀連の軌跡に依存して実現されている 場合は除く。 (レベル A) WCAG2.0の例
2.1.1 キーボード
22.
▌ ⽂書の分量が多い ▌ ⽂書が難解で抽象的 ▌
プロダクトによっては関係ない項⽬が書かれている (動画、⾳声、閃光、アニメーションなど) WCAG2.0をいきなり適⽤しようとすると…
23.
24.
ルールづくりの観点2 ルールを誰に守ってもらうか?
25.
他の職能に説明することから逃げない 上流も下流も巻き込まないと、アクセシビリティ対応できない 要件定義 デザイン 実装
テスト
26.
kintoneのアクセシビリティチェックリスト デザイン チェックリスト 実装 チェックリスト 実装 チェックリスト 詳説
27.
1. ⾒出し 2. キーボード操作 3.
画像 4. 感覚⾮依存(⾊、位置、形など) 5. 拡⼤と縮⼩ 6. 動きのあるコンテンツ kintone デザインチェックリスト⽬次
28.
デザインチェックリストの例 l 複雑な画像を使っていない (画像を⾮表⽰にしても、周囲の⽂章や代替テキストによって 同等の情報を伝えることができる) l ⽂字を画像で表現していない 画像
29.
kintone アクセシビリティ実装チェックリスト⽬次 1. マークアップの原則 2. 画像 3.
ボタンとリンク 4. ⼊⼒フォーム 5. ⾒出し 6. ホバーとフォーカス
30.
実装チェックリストの例 ボタンとリンク l キーボードのみで操作可能にする l ページ遷移する場合:
a要素を使う.必ずhref属性をつける l ページ遷移しない処理を⾏う場合: button要素を使う (div要素やspan要素を使わない)
31.
チームで取り組むための2つの要素 ま マインドルール
32.
当事者が使っている様⼦をみんなで観察する
33.
外部の⽅による講演
34.
他に優先すべきタスクがある 今のプロダクトにとって重要?
35.
Accessibility = Access
+ Ability
36.
ユーザは、わたしたちの製品にアクセスすることで 何にアクセスしようとしているのか?
37.
サイボウズの理想 チームワークあふれる社会を創る
38.
ユーザ サイボウズ製品 チーム
39.
サイボウズにとって、アクセシビリティとは 「ユーザがチームにアクセスできる能⼒」
40.
アクセシビリティを確保することは 「チームに参加したい」というユーザのねがいを 尊重すること
41.
42.
チームでアクセシビリティに取り組むために ü当事者の使い⽅をみんなで観察しよう üアクセシビリティに取り組む意味を考えよう ま ü無理のない項⽬数からスタートしよう ü多くの職能を巻き込もう
43.
おわり
Télécharger maintenant