アクセシブルなブログ開発、その後どうなったの

アクセシブルなブログ開発、
その後どうなったの
2019/03/08 CA11Y #1

tokimariCyberAgent / Ameba Blog
Frontend Engineer

1. アメブロでやったこと
2. で、その後アメブロどうなったの
3. こえのブログでの実践事例
おはなしすること

アメブロでやったこと
1.
これまでのアクセシビリティの取り組み

アクセシビリティ
勉強会
2017/4〜2018/9
毎週or隔週、輪読・issue出し
勉強会履歴と、輪読した本

PC-Talker
おさわり会
　「えっどこに入力するの！？」
顔を伏せてPC-Talkerを起動した状態で投稿している様子

a11y警察
パトロール
　「こういう実装もできます！」
　「ここは〜なので順序を変えた
いですが、どうでしょ？？」
SlackでアクセシビリティのTIPSについて紹介している様子

Ameba
Accessibility
Guidelines
図解・具体例・実装例つき
WCAG2.1に合わせ更新中
https://openameba.github.io/a11y-guidelines/
ガイドラインのとある項目のスクリーンショット

全職種向け
勉強会
70~80人くらい？
営業、QC、企画、ライターetc
勉強会の様子やスライドなど

で、その後
アメブロどうなったの？
2.

a11y警察
人員拡大
１人で見れる範囲は限られてる
仕様やレビューで考える人が増えた
- ガイドライン編集：6人
- つっこむ人：15人〜？
2. で、その後アメブロどうなったの？
レビューでアクセシビリティ系の
指摘をしているところ
アクセシビリティを考慮した実装の修正例

新規＆改修の
仕様の時点で
相談＆調整
後から変えるのしんどい
ガイドラインにも随時事例追加
リニューアルしたAmeba検索の画面
キー操作に対応したインクリメンタルサーチ機能を提供

初めから気をつければ
できたことも
たくさんあるのでは？？

アクセシブルな
開発知見をつくりたい
Webアプリケーションで
どういうことに気をつけておけばいいのか
あらかじめ挙げておきたい、共有したい

新規開発で
実践してみた

「こえのブログ」の実践事例
3.

喋るだけで
ブログになる
投稿機能
音声＋書き起こしテキスト
をセットで投稿できる
スマホに話しかけると、音声認識技術で書き起こし、
テキスト化してブログ記事にできる
3. 「こえのブログ」の実践事例　›　3.1. 「こえのブログ」って？

こえで書くブログ
こえで聴くブログ
こえで観るブログ
Concept:

「これ、コンセプトが
　アクセシビリティやん…」

アクセシブルな
開発知見をつくりたい
Webアプリケーションで
どういうことに気をつけておけばいいのか
あらかじめ挙げておきたい、共有したい

実験しやすい
小規模プロジェクト
技術的チャレンジも多く、全員未知の領域
仕様 → 開発 → 作り直しのサイクルが速い
フロント
PM デザイナー
フロント

間違えたら
直せばええやん

間違えたら
直せばええやん
「餅つき開発」と呼ばれました
デザイン
実装
仕様

ポップアップを開く前
一覧のアイテムにフォーカスしている
3. 「こえのブログ」の実践事例　›　3.2. 実践したこと
ポップアップを開く/閉じる
3-2-1. 仕様・デザイン・実装
操作対象が変わったら
キー操作性に要注意

ポップアップを開いたとき
ポップアップ内の要素にフォーカスしている
ポップアップを開く/閉じる

ポップアップを開く/閉じる、ドロワー、
SPAのページ遷移、リストの追加読み込み
ポップアップを開いたとき
ポップアップ内の要素にフォーカスしている

投稿完了
しました
オフラインで
す
10%完了
進行中・完了・オフライン通知など
状態の表示・
通知方法を検討する

投稿完了
しました
投稿失敗
しましたオフラインで
す
30%完了
20%完了
10%完了
どのタイミングで、何を通知する？
スクリーンリーダーには、どこまで通知する？
状態の表示・

投稿完了
しました
投稿失敗
しましたオフラインで
す
どのタイミングで、何を通知する？
スクリーンリーダーには、どこまで通知する？
状態の表示・

フォーカス時の
スタイルは必ず表示
3-2-3. デザイン・実装
ドロワーの例
デフォルトのoutlineが適用されている
いくつかパターンを作成
デザインを当ててから標準スタイルを消す
デザイン or 標準スタイルが必ず当たっている状態

ドロワーの例
デザインされたoutlineが適用されている
フォーカス時の
スタイルは必ず表示
いくつかパターンを作成
デザインを当ててから標準スタイルを消す
デザイン or 標準スタイルが必ず当たっている状態
3-2-3. デザイン・実装

代替テキストの検討は
まぁ、やるよね
altの未検討のものはマージしない
アイコンボタンのaria-labelも忘れずに
3-2-4. 仕様・実装
アイコンボタンの例

こえのブログの開発ドキュメント。
アクセシビリティの観点で特に注意すべきことが記載されている
開発者のおやくそく化
ドキュメント
に追加
3-2-5. 実装

開発者のおやくそく化
インターン生にも遵守して
もらってます
iPhoneのVoiceOverの使い方に苦戦しながらも
適切なaria属性を検討するインターン氏
ドキュメント
に追加
3-2-5. 実装

“声のブログなら視覚に障害がある方も声でブログが読
める。文字もあるから、聴覚に障害がある人は読める”
ユーザーのつぶやき（エゴサした）
“私の息子は脳性麻痺で車椅子。その上、視覚障害もあ
るんだけど、こえのブログを聴いてる私を見て、「〜
（好きなタレント）も声のブログやってくんないか
なぁ」とつぶやいている。”
※こえのブログについて呟いている一般ユーザーのツイートの一部を抜粋
3. 「こえのブログ」の実践事例　›　3.3. 結果は？

音声ファイルがなくても
視覚障害者もWebを閲覧できる
「音声つき」だから特別アクセシブルなわけじゃない

「音声つき」だからこそ気づいてもらえたかもしれない
使えることを・使い方を知らない
ユーザーもいるはず

「読めそう」だと感じてもらえたのは大きな一歩、そして責任も
そんなユーザーが
読もうとした時に、
「本当に読める」ブログであるべき

ほかにも

幅広いユーザー、
閲覧スタイルに
- 電車で：見たい
- 家事をしながら：聞きたい
ユーザーが状況に合わせて選べる
ママにも嬉しい！という感想を拾った私のツイート
（自作自演感）

投稿・表現しやすい
→投稿頻度up
→PV増加も？
寝ながらおやすみボイス、料理をしながら、妄想
電話、早口言葉、声でヨガの指導、etc..
妄想電話の投稿

新規ユーザー層の
開拓にも
機械音痴/高齢層なタレントの新規開設
若年層ユーザーの取り込み
アイドルのイメージ

アクセシビリティの高い機能が
障害者に限らず
幅広い＋新しいユーザーに届いた
:yatteiki:つぎは：

アクセシブルなブログ開発、その後どうなったの

Recommandé

Recommandé

Contenu connexe

Similaire à アクセシブルなブログ開発、その後どうなったの

Similaire à アクセシブルなブログ開発、その後どうなったの (7)