Share
Embed
Slide 1
Slide 1 text
社内にアクセシビリティ改善を
広める際に意識したこと
id:miki_bene/@benevolent0505
2023/06/06 Hatena Engineer Seminer #25
1
Slide 2
Slide 2 text
自己紹介
● id:miki_bene / @benevolent0505
● マンガ投稿チーム Webアプリケーションエンジニア
○ フロントエンド・バックエンド両方やる人
2
Slide 3
Slide 3 text
今日の話
● アクセシビリティ改善を広める際に意識したこと
○ 2020年頃から社内に発信して
エンジニアセミナーの1テーマに出来る程になった
● 以下の人に参考になるように
○ アクセシビリティ改善を始めようとしている人
○ 自分以外にも改善活動を広めたいと思っている人
3
Slide 4
Slide 4 text
今日の前提
● 今日の話は Web アクセシビリティが前提
○ 「Web アクセシビリティの改善を広めるには」という話
● モバイルアプリ等にも活かせる部分はあると思う
4
Slide 5
Slide 5 text
アジェンダ
● アクセシビリティについて
● 社内にアクセシビリティについて広める理由
● アクセシビリティ改善を広める際に行ったこと
● 改善を広める際に意識して伝えたこと
5
Slide 6
Slide 6 text
アクセシビリティについて
6
Slide 7
Slide 7 text
アクセシビリティについて
● accessibility = アクセスのしやすさ
● 全ての人がどんな状況でも利用できるようにするもの
● 障害のある方など、特定の人に向けたものではない
7
Slide 8
Slide 8 text
8
W3C - Accessibility (MDN日本語訳)
> 「ハードウェア、ソフトウェア、言語、文化、所在地、物理的/精神的
能力にかかわらず、ウェブは基本的にすべての人に向けて設計されてい
ます。ウェブがこの目的を達成できると、さまざまな聴力、視力、認知
能力をもつ人々がウェブにアクセスできるようになります。」
8
● https://developer.mozilla.org/ja/docs/Web/Accessibility
● https://www.w3.org/standards/webdesign/accessibility
Slide 9
Slide 9 text
誰でも不自由な状況になりうる
● メガネのフレームが割れた
○ → 拡大出来ないページは読めない
● 利き手を骨折した
○ → マウスのみで操作する UI が利用できない
● 通信量制限で低速回線になった
○ → 読み込み容量の大きいサイトが開けない
9
Slide 10
Slide 10 text
社内にアクセシビリティに
ついて広める理由
10
Slide 11
Slide 11 text
アクセシビリティ改善が必要
● 不自由な状況でもアクセシブルな作りならば利用できる
● 様々な理由でアクセシビリティの問題は発生する
○ 適切でないHTML要素の利用
○ UI設計時の考慮漏れ
○ チェックが漏れてしまう
● アクセシビリティ改善が必要になってくる
11
Slide 12
Slide 12 text
アクセシビリティ改善を広めたい
● 周りを巻き込んで少しずつ改善を進めたい
○ 1人で行うのは無理筋
● しかしアクセシビリティを認識する人は少ない
○ 知っていても誤解していたり
● 知らなければ改善できないので人を増やしたい
12
Slide 13
Slide 13 text
自分が広め始めた当時の状況
● 自分が知り始めたのは 2020年頃
● 今ほどアクセシビリティの認識は高くなかった
○ 2017年にエンジニアブログを出しているが、
それ以降の入社の人にはあまり認識されていなかったり
○ 少しずつアクセシビリティ意識する - Hatena Developer Blog
13
Slide 14
Slide 14 text
自分が広め始めた時の状況
14
"アクセシビリティ - 調べる - Google トレンド"
Slide 15
Slide 15 text
アクセシビリティ改善を広
める際に行ったこと
15
Slide 16
Slide 16 text
広める際に行ったこと
● チーム内でアクセシビリティ改善を実践し共有する
● チーム外にもアクセシビリティの話題を共有する
● グループウェアにアクセシビリティのページを作る
16
Slide 17
Slide 17 text
チーム内で改善を実践し共有する
● まずは自分の手の届く範囲で改善して事例を積む
○ 自分が担当した部分
○ Lighthouse等で自動検知した箇所
● この改善をチーム内に共有
○ 具体例を元に認識してもらう
● 認識が広がってきたら徐々に
コードレビューでコメントを入れていく
17
Slide 18
Slide 18 text
チーム外にも話題を共有する
● フロントエンドについて話す場で話題に出す
○ MTG や Slack チャンネルなど
○ 話題に関連させたり、自分が実践したことを共有
● 話題が増えてきたらSlackチャンネルを作る
○ なんでも話せる場を作る
○ アプリエンジニアや他職種の方も気軽に参加できるように
18
Slide 19
Slide 19 text
チーム外にも話題を共有する
● 面白工夫: Slackの通知設定の My keywords に
「アクセシビリティ」と入れる
● 話題や質問にすぐ反応できるようにする
19
Slide 20
Slide 20 text
グループウェアにページを作る
● Scrapbox にアクセシビリティのページを作り始めた
● 自分の知識をまとめたり共有のため
● 自分以外にも情報や知識を書いてくれる人がいた
○ 思っていなかった効果
○ 自分以外にも関心を持つ人を知れた
20
Slide 21
Slide 21 text
行ったことをふりかえる
● 特別なことはやっていない
● 実践・共有・仲間探しを行っていた
○ 実践
■ 改善を実践
○ 共有
■ 話題を共有する
○ 仲間探し
■ グループウェアにページを作る
21
Slide 22
Slide 22 text
改善を広める際に
意識して伝えたこと
22
Slide 23
Slide 23 text
改善を広める際に意識して伝えたこと
23
● ユーザーは機能を利用できていない
● アクセシビリティ改善による嬉しさ
● アクセシビリティ改善を難しく捉えすぎない
Slide 24
Slide 24 text
ユーザーは機能を利用できていない
● 知らないと「利用できない」ことがわからない
○ なんとなく困っているといった理解で終わってしまう
○ ユーザービリティ・おもてなしとの混同
● 困っている状況をはっきりさせる
○ ユーザーの状況についての認識を揃える
○ コンテンツは読めていない・機能は利用できない
● ここを揃えてアクセシビリティの考え方に繋げる
24
Slide 25
Slide 25 text
ユーザーは機能を利用できていない
● これだけでは改善のモチベーションになりづらい
○ 道徳的な訴えで個人に依存してしまう
○ 現実の難しさ
■ 改善のコスパ, 要件や仕様にない,
他の不具合や開発との優先順位
● モチベーションを高める他の視点も必要
25
Slide 26
Slide 26 text
アクセシビリティ改善による嬉しさ
● 支援技術を必要とする人以外にもメリットがある
● アクセシビリティがユーザビリティに繋がるケース
○ キーボード操作可能になることは色々と嬉しい
○ 特にエンジニアにウケがいい
● マシンリーダブルになることによるメリット
○ テストの壊れにくさ / SEO
○ もっとウケがよい
● 様々な品質を向上できるもの
26
Slide 27
Slide 27 text
改善を難しく捉えすぎない
● 実際にやろうとすると知識の膨大さに面を食らう
● WAI-ARIA を意識しすぎない
○ ボタンなら button を使うなど、HTMLに元からある要素を使う
○ セマンティクスを意識する
● わかりやすいガイドラインにあたる
○ WCAG のガイドラインは難しい
○ freee さん / CyberAgent さんなどわかりやすいガイドラインへ
■ https://a11y-guidelines.freee.co.jp/
■ https://a11y-guidelines.ameba.design/
27
Slide 28
Slide 28 text
まとめ
28
Slide 29
Slide 29 text
まとめ (1/2)
● アクセシビリティ改善を広める際意識したことを話した
● 広めていった結果
○ エンジニアセミナーで1テーマに出来るくらいになった
○ 多くのチームで改善を行う人が出てきた
29
Slide 30
Slide 30 text
まとめ (2/2)
● 広め方は色々あるが、特別なことはない
○ 意識して伝えたことの方が大切
● 今日の発表が改善をスタートする人の参考になれば幸い
● 使ってもらえるユーザーの幅が広がることを素直に喜ぶ
30
Slide 31
Slide 31 text
参考
● Webエンジニアとしていま知っておきたいWebアクセシビリティ
● 少しずつアクセシビリティ意識する - Hatena Developer Blog
31