ひトリ芸大生

もうすぐ30になる社会人が、芸大のカリキュラム通り独学で勉強してみるブログ

【メモ】!important #04 -特盛!アクセシビリティスペシャル-

先日開催されたセミナー、!important #04に参加できたので、ざっくりメモ。
とても勉強になったセミナーで、本当に特盛の内容でした。

後日もう少し整理してレポートにしたいです。

 

important.doorkeeper.jp

 

 

アウトライン

 

 

あなたの価値を高めるWebアクセシビリティ

アウトライン

アクセシビリティって?

仕様書は見てはいないが感覚的に意識している 55%

障碍者の方に何かするもの=アクセシビリティ

→そうではなんじゃない?

アクセシビリティガイドライン

要は、当たり前のことを当たり前にしようねということ

幅広い状況でのヒューマンリーダビリティ

=niariアクセシビリティ
→全うなデザインをしようとしていると、だいたい達成している

  • マシンリーダビリティはWebならではのアプローチ

  • ヒューマン…→ひとつのものでは対応範囲に限界がある

  • マシン…形を変えても対応できる→ガイドラインではA(必須)

視覚障害者のウェブページ利用方法(youtube

「わけてある」ことで選択肢が広がる→Webの特徴モニター、キーボード、マウスと分かれている

伝わる可能性が一番高いのはテキスト

テキストになっていれば

  • 読み上げられる
  • 字幕にできる
  • 点字に出来る
  • 検索クローラーが読める
  • 自動翻訳使える

仕事と関係あるの?

お金にならない?

マーケティングに効果的、品質向上に役立つ

  • 流入を増やす、入り口をひろくする
  • 制作側でできるマーケアプローチ手段

アクセシビリティは追加コストになる?

  • 長い目で見ればメンテナンスコスト低下
  • ルール>ガイドラインができるとコストが下がる
  • canon スライド

将来に対応するため
新しい技術、マルチデバイスにも対応
例)Flash

先にやろうと決めておく
あとから対応しなおすと大変

JSによるUI

悪セ氏ぶるなじっそうと検証の工数をみる

テキストは重要

logmi
動画をカキオコすサイト→テキスト→検索結果にあがる

テキストがあると翻訳ができる

カーリル
図書館の蔵書を横断検索できるサイト
→てきすとで公開されているからスクリーディングできる

海外ではアクセシビリティは法律で義務化

日本→障碍者差別解消法
   みんなの公共サイト運用ガイドライン
→需要がある!

どうやって取り組むの?

みんな取り組んでいない?
→Webに載せる行為そのものがアクセシビリティ
→みんな取り組んでいる

Webは可能性を広げる、選択肢が広がる

アクセシビリティとはWebそのものなんじゃないか」

アクセシビリティはゼロか1ではない
できることから

方針をたてる!
勝手にやると…
やる気のある人、やりたくない人、興味ない人
人に左右される


制作時、ほんの少しの工夫で確保できるウェブアクセシビリティ

KDDI Web Communications 神森さん
JIMDO、 goat、Canva

事業者側からのアクセシビリティの考え方

「プロの仕事って何?」

  • Webサイト制作のいま
  • 企業がなぜ制作会社に依頼するのか

プロに求めてること

  • 仕様書を当たり前にコーディングすること
  • KDDIコミュニケーションズガイドライン →社内外にむけたものを制作中

ガイドラインを制作するときにワークフローを見直し

  • HTMLの仕様に沿っているか バリデート
  • テンプレートレベルでの簡易チェック
  • ツールをうまく活用する

Photoshopで色覚の簡易チェックができる

現場からの吸い上げは時間がかかる
→日々の仕事に忙殺されている
アクセシビリティの浸透はトップダウン
→経営者は未来をみている

アクセシビリティの確保は、顧客との接点を増やす

→社内のアクセシビリティ事情は?
うちは特に設定されていない
コーディングルールなるものはある

より多くの人へ届けるために、Webコンテンツで「ちょっと」気をつけたいこ

澤田 望さん/SAWADA STANDARD DESIGN デザイナー

大切なことは多様性を知ること、受け入れること

コンテンツのアクセシビリティ

なぜこのお話をするのか?

  • Webアクセシビリティのレイヤーの話
  • レイヤーの1つでも崩れていると全体に影響し、結果うまく伝わらない
  • コンテンツも重要な要素の1つ
  • アクセシブルなCMSワイヤーフレームの増加
  • 制作者が意識しなくてもある程度アクセシブルになる →つまり、より重要になるのがコンテンツ

位置関係で表現しない

どうすればアクセシブルに?
→具体的に。位置関係が分からなくてもボタンのラベルが分かれば操作できる
レスポンシブでは特に注意

色だけに頼らない

  • みんな同じ条件で色を識別できるわけじゃない
  • スクリーンリーダーは色情報を読み上げない
  • 図形やテキストで表現
  • WEI-ARIA arealabel?

ラベルの名称を統一する

  • 同じコンテンツだと思わなければアクセシブルではない
  • 情報にたどり着けない=アクセシビリティ低い

altの付け方

alt…伝える必要のある情報はすべて伝える
  伝える必要ない情報は控える 却って混乱する
  同じ写真でも用途によって書き方を変える

電話の相手に画像を伝えるつもりで書くのがコツ

ユーザビリティテストのすすめ

インフォアクシア植木サン

このセッションは、今年3月に米国で開催された「CSUNカンファレンス」で登壇したセッション「Designing Accessible Web Content for Older Users」をバージョンアップしてお届けします。

older users 高齢者やシニアというわけではない

older usersがWebを使うときの特徴

  • 身体能力のおとろえで使うことが困難になる
  • 面倒くさい

ユーザーのコンピュータースキルはあなたが思う以上に低い

  • Webの仕事をしている時点で一般usersとは違う
  • userのニーズの推測は失敗の要因の1つ

Older users対象のユーザーテストから分かったこと

アクセシビリティの達成基準
A(シングルA)…一番基本
AA(ダブルA)…世界基準 
AAA…とても高い基準

ページタイトル

A

  • Older usersは検索大好き
  • PDFのタイトルも検索結果にあがる
  • .pdfも検索対象!

テキストリンクの文言

「詳細はこちら」、とか「続き」とかののテキストリンクは、

  • 遷移先の内容がよく分からん
  • 前後を読んで把握しないと行けないからストレス
  • 人にもマシンにも不親切 →テキストリンクの内容は具体的に

見出し

Older usersは見出しを拾い読みする
適切でない見出しは飛ばされてしまう

色のコントラスト

AA
見えづらいナビゲーション
http://egao-saku.com/

カラーコントラストアナライザー

文字サイズ

AA
支援技術なしで200 %に変更できるように

Older usersが押しているとこをまだ見たことがない

アイコン

  • ユーザーにとってなじみのあるものか?

スペースの節約

  • カルーセルは使うべき?
  • 切り替わるスピードが速いのに文字がたくさんあると全部読めない
  • 画面を拡大して見るユーザーは特に
  • 停止ボタンを用意しているからって全て解決なわけではない
  • スライドのページネーションが小さいのもストレス →サムネイルなどにして大きくしたり

ターゲットの大きさ

  • 小さいとストレス
  • 一度で押せないから
  • 隣のターゲットとの距離が近いのもストレス
  • 誤動作に繋がりやすい

エラーメッセージ

  • エラーメッセージをみてもどう修正すればいいか分からないのが多い
  • エラーメッセージの文言まで精査できていない

動画のキャプション 

言葉だけを鵜呑みにしないこと

  • 特に"Older users"
  • 無理して「大丈夫です」といってしまう
  • ユーザーの言葉は尊重したいけど、客観的に動画や画面操作も含め判断する

W3Cのアクセシビリティ動画

 

パネルディスカッション

最近リニューアルされた福岡市Webサイトの素直な感想

https://www.city.fukuoka.lg.jp/

気になるところ

  • 文字サイズ変更ボタン
  • 大 押し続けることができるのはいい
  • 大きくしたときに、小と中どちらを押せば良い?
  • 標準とかほしい
  • ルーセルはもういいかも
  • 止めるボタンがあるのはいい
  • アクセシビリティ方針がふったーにある
  • ガイドラインを達成しているかといって、アクセシビリティを満たしているかどうか…
  • スマホサイトへボタンの挙動が?
  • PCでスマホサイトへボタンを押すと「スマホで見てください」アラートが出て意味分からない
  • 本文へジャンプボタンは必要?
  • HTML5でmainタグが出てきた、land mark roleつけておけば、マシンリーダーで同じことができる
  • アクセシビリティの取り組みに対象外とするものがある
  • 2010年以降は、適応外の要素があると、部分適応であって、(全)適応ではない
  • アクセシビリティの試験結果は2010以前の古いものかも

いいところ

  • すでに試験を実施しているところが素晴らしい
  • みんなの公共サイト運用ガイドライン(2016年版)
  • 使えないと感じたときの案内がある
  • 画像とテキストにまとめて1つのaタグにしている
  • 画像とテキストそれぞれにすると、キーボードでの移動が2倍かかる

どのスクリーンリーダーをサポートするかの判断

最新のHTML5で対応していない古いスクリーンリーダーへの対応はどう考えればいい?

  • いま過渡期
  • 最新技術の順応にスクリーンリーダーが全て追いついていない
  • どこまで保証、対象にするか
  • ポリシーを決めるしかない
  • でもノリで決めない
  • 実装を確認した上で決めるのがプロの仕事
  • 最適な落としどころを探す
  • 1つの判断基準 WAIC アクセシビリティサポーテッド情報

検索結果にpdfが出たときのタイトルはどこからひろってきているのか?

  • 必ずしもPDFのファイル名やプロパティの中を拾っているわけではない
  • 植木サン捜索中
  • PDF内のテキストを拾ってきてるっぽい
  • PDFのテキスト化も大切

制作のときにアクセシビリティの抜けを防ぐには

文脈に関係ないaltの記述はどうすればいい?

  • altを空にすると無視する
  • 空やのにいちいち読み上げられるとうっとうしい
  • 真っ当な作り方をしてれば、画像がありますということをaltでいれてもいいのでは
  • 賑やかしや装飾にaltをいれない→altの付け方に悩むなら、作り方を見直すほうがいいのでは
  • コンテンツの理解に差し支えないときはaltが空でもOK
  • コンテンツに差し支えがあるなら空でもOK

やっててよかったと思うとき 仕事編

  • 反応をいただけるとき
  • クライアントの満足が得られたとき
  • 成果があがったとき
  • ユーザーの役に立ったとき