キホンの「キ」 - CSS...

1

2016年のうちに再確認しておきたい

キホンの「キ」

アクセシビリティ

2

© Infoaxia, Inc. 2016. All rights reserved.

植⽊真（インフォアクシア）千貫りこ（KICKS Web）


2016年の「Webアクセシビリティ」

1. 「JIS X 8341-3」の改定

2. 「障害者差別解消法」の施⾏

3. 「みんなの公共サイト運⽤ガイドライン」の公開

4. 企業におけるWebアクセシビリティの取り組み

5. HTML5とWAI-ARIAによる実装が加速

3


JIS X 8341-3:20162016年3⽉22⽇公⽰

国際規格「ISO/IEC 40500:2012」（= W3C「WCAG 2.0」）と同じ内容の⼀致規格に

「JIS X 8341-3」＝「WCAG 2.0」の⽇本語訳

達成基準には⼀切の変更ナシただし、「WCAG 2.0」の⽇本語訳を⼤幅に⾒直し

JIS X 8341-3:2016 解説 http://waic.jp/docs/jis2016/understanding/201604/


障害者差別解消法2016年4⽉1⽇施⾏

利⽤者からの改善要望があれば個別対応公的機関は法定義務、⺠間事業者は努⼒義務⾃治体のWebサイトに対して改善要望が出され始めている

Webアクセシビリティの確保は、先進国の多くでは法律によって義務化されている

障害を理由とする差別の解消の推進 http://www8.cao.go.jp/shougai/suishin/sabekai.html

4


みんなの公共サイト運⽤ガイドライン

2016年4⽉20⽇公開総務省が作成公的機関職員向けのJIS対応⼿順書

2018年3⽉末までにレベル AA準拠を推奨先進国の多くで義務化されているレベルと同じ

「ウェブアクセシビリティ取組確認・評価表」を新たに提供

⾃⼰採点により毎年取り組み状況を評価し公表

http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/guideline.html


Webアクセシビリティの⽅針や試験結果を公開

5


サイボウズ

https://cybozu.co.jp/efforts/accessibility/


https://havelog.ayumusato.com/develop/a11y/e720-a11y_informal_study.html

サイバーエージェント

6


http://yahoojapanpr.tumblr.com/post/144834658627/accessibility

ヤフーのアクセシビリティ⿊帯の取り組み


HTML5による実装が⼀般化し、WAI-ARIAの実装も加速

コーダー⽩書2016 http://www.slideshare.net/uzuflat/2016-66421027

7


HTML5による実装が⼀般化し、WAI-ARIAの実装も加速



WAI-ARIA

https://www.w3.org/TR/wai-aria-1.1/⽇本語訳︓https://momdo.github.io/wai-aria-1.1/

8


WAI-ARIA

https://www.w3.org/TR/wai-aria-1.1/⽇本語訳︓https://momdo.github.io/wai-aria-1.1/


品質として、アクセシビリティを「感覚的に意識している」 52％


9


個⼈的にはエーイレブンワイ

Webアクセシビリティの情報提供サイト「エーイレブンワイ」http://weba11y.jp/


実例と体験談から学ぶ

アクセシビリティを⾼めるコツ

2016年のうちに再確認しておきたいキホンの「キ」

10


まずはページタイトルHTML5のセクショニング要素等に

ランドマークroleを使う


Webページのセクションをマシンリーダブルに

ヘッダー <header>ナビゲーション <nav>

メインコンテンツ <main>

補⾜ <aside>

フッター <footer>

ホーム → 基礎知識ホーム → 基礎知識

■■■■■■■■■■■■■■■■■■

■■■■■■■■

■■■■■■■■■■

■■■■■■■■

■■■■■■■■■■

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

○○○○○○○○○○○○○○○○○○○○○○○○○○○○

○○○○○○○○○○○○○○○○○○○○○○○○○○○

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

11


スクリーンリーダーでページ内のセクションを移動

NVDA（Windows） VoiceOver（iOS）


当⾯はランドマークroleを併⽤

<header role=“banner”><nav role=“navigation”>{グロナビ}</nav><form role=“search”>｛サイト内検索｝</form>

</header><nav role=“navigation”>｛パンくずリスト｝</nav><main role=“main”>

{ここにメインコンテンツ}</main><nav role=“navigation”>{ローカルナビ}</nav><aside role=“complementary”>｛バナーとか｝</aside><footer role=“contentinfo”>｛フッター｝</footer>

12


参考︓ スクリーンリーダーは「PC-Talker」のシェアが断トツ

視覚障害者の携帯電話・スマートフォン・タブレット・パソコン利⽤状況調査 2013http://dspace.lib.niigata-u.ac.jp/dspace/bitstream/10191/27807/1/TAF_Report_H26.pdf


HTML5のセクションを⽰す主な要素＆対応するランドマーク role

Webページにあるセクション HTML5の要素ランドマークrole

ヘッダー header banner

ナビゲーション nav navigation

メインコンテンツ main main

補足情報 aside complementary

フッター footer contentinfo

13


スクリーンリーダーのユーザーは旧バージョンを使い続ける説

Results of the 2016 GOV.UK assistive technology surveyhttps://accessibility.blog.gov.uk/2016/11/01/results-of-the-2016-gov-uk-assistive-technology-survey/


まずはページタイトルナビゲーションに

ラベルを付ける

14


ナビゲーションの区別がつかない

NVDA（Windows）


ラベルを付けてそれぞれの違いをマシンリーダブルに

<nav role=“navigation” aria-label=“メインメニュー”>｛ここにナビゲーションバー｝

</nav>

<nav role=“navigation” aria-label=“現在位置”>｛ここにパンくずリスト｝

</nav>

<nav role=“navigation” aria-labelledby=“local-nav”><h2 id=“local-nav”>注⽬の⽤語</h2>

{ここにローカルナビゲーション｝</nav>

15


スクリーンリーダーでページ内のセクションを移動

Before After

aria-labelaria-label

aria-labelledby


まずはページタイトル写真だと分かる

代替テキストにする

16


代替テキストによって、画像と同等の情報をマシンリーダブルに

画像にある⽂字情報をalt属性に記述する

<img src=“banner.png” alt=“CSS Nite Shift2016-2017 2016.12.17”>


代替テキストによって、画像と同等の情報をマシンリーダブルに

そのページに写真があることも “情報”

<img src=“photo.jpg” alt=“写真︓⼩林製薬の⽷ようじ 60本⼊り”>

17


まずはページタイトル画像リンクとテキストリンク

リンク先が同じなら1つにまとめる


リンク先が同じなら⼀つのリンクにまとめる

キーボード操作回数が半分に減る

<a href="http://amzn.to/2bCe8ep"><img src=“book.jpg" alt=""><span>デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ</span></a>

18


まずはページタイトルSVGファイルを使うなら

<img> に role=“img” をつける


<img>要素でSVGファイルを指定するとき

<img src="logo.svg" alt="エーイレブンワイ" role="img">

<img>要素に role=“img” をあえて指定Safariの旧バージョンにあるバグ対策

スクリーンリーダー「VoiceOver」が読み上げないMac版 9.1.1以上、iOS版 9.3.2以上だけが対象なら不要

19


まずはページタイトルキーボードフォーカス見えてる？


フォーカスインジケータは常に表⽰させる

キーボード操作時にフォーカスの現在位置を⽰す

デフォルトでの表⽰ドットや⽔⾊の矩形 = 分かりづらいこともある

CSSで outline:none の指定があると⾮表⽰にキーボード操作時には致命的

20


フォーカスインジケータの表⽰を強調してみた


まずはページタイトル文字色と背景色の

コントラスト比は 4.5:1以上

21


場所を選ばないからこそ、⾊のコントラストは重要


まずはページタイトルWAI-ARIAを

手軽に賢く実装してみる

22


Accessibility Plugin for Bootstrap 3

https://paypal.github.io/bootstrap-accessibility-plugin/demo.html


Bootstrap Accessibility Plugin を使ってみた

タブとタブパネル

23


Bootstrap Accessibility Plugin を使ってみた

アコーディオン


まずはページタイトルパンくずリストに

正解はある？

24


パンくずリストは「＞」ではなく「→」で

https://momdo.github.io/html5/common-idioms.html#rel-up


パンくずリスト

25


まずはページタイトルその他、押さえておきたい

キホンの「キ」


さらにこれらも実践できればだいぶアクセシブル

ページの内容が分かるページタイトルを記述する

⾒出しやリストなどの⽂書構造をマークアップする

リンク先が分かるリンクテキストにする

ユーザーがコンテンツを拡⼤表⽰できるようにする

フォーム・コントロールのラベルをマークアップする

26


実例と体験談から学ぶアクセシビリティを⾼めるコツ

1. ランドマークroleを使う

2. ナビゲーションにラベルをつける

3. 写真だと分かる代替テキスト

4. 画像リンクとテキストリンクを1つにまとめる

5. SVGファイルには role=“img” をつける

6. キーボードフォーカス⾒えてる︖

7. ⾊のコントラスト⽐は4.5:1以上

8. WAI-ARIAを⼿軽に賢く実装する

9. パンくずリストに正解はある︖

10. その他のキホンの「キ」ページタイトル、⽂書構造、リンクテ

キスト、拡⼤表⽰、フォームのラベル


今取り組んでいるのは…

フォーム

27


⼼強い味⽅。

たにぐちまことさん（ H2O space ）


MACO FormMore Accessible for Customers Online

MAKOTO MAKOTO RICO

28


MACO Form 2つの開発コンセプト

1. あえてWAI-ARIAを使わない

WAI-ARIAのサポートが⼗分ではない利⽤環境でも使えること

できるかぎりユーザーの利⽤環境を限定しない


MACO Form 2つの開発コンセプト

1. あえてWAI-ARIAを使わない

WAI-ARIAのサポートが⼗分ではない利⽤環境でも使えること

できるかぎりユーザーの利⽤環境を限定しない

2. ユーザビリティテストでよく⾒つかる問題点を解決

ユーザーの利⽤環境は多種多様

画⾯を⾒ているスクリーンリーダーを使⽤しているマウス＆キーボードで操作しているキーボードだけで操作しているタッチ操作している

しかし、問題点には共通点が意外と多い︕

29


1. 必須項⽬を分かりやすく⽰す

必須 or 任意が分かりにくい⾚字で【必須】と明⽰した

お問い合わせ

（例）⼭⽥太郎

（例）ヤマダタロウ

（例）株式会社⼭⽥製作所

（例）総務部総務課

名前 *

フリガナ（カタカナ） *

会社名

所属部署

お問い合わせ





名前［必須］

フリガナ（カタカナ）［必須］

会社名

所属部署


2. プレースホルダーをラベルにしない

ラベルがplaceholder属性の場合⼀度⼊⼒するとラベルが消えてしまう…

ラベルはラベル（label要素）プレースホルダーの⽂字⾊を指定して

コントラスト⽐を確保

お問い合わせ

名前

フリガナ（カタカナ）

会社名

所属部署

Eメールアドレス

問い合わせ内容

お問い合わせ





名前［必須］

フリガナ（カタカナ）［必須］

会社名

所属部署

30


3. ⼊⼒エラーはエラー項⽬の場所で⽰す

エラーの説明とエラー項⽬が離れていて修正しにくい

⼊⼒エラーであることを該当箇所で⽰す

お問い合わせ

⼭⽥太郎


名前 *


⼊⼒エラーフリガナが⼊⼒されていません。都道府県が選択されていません。 Eメールアドレスの⼊⼒に誤りが

あります。

ヤマダタロウ

taro.yamada@example

株式会社⼭⽥製作所


Eメールアドレス *

会社名

⼭⽥太郎

メールアドレスの書式になっていません。正しく入力してください。

所属部署


4. エラー画⾯を出してエラーの項⽬だけ表⽰する

⼊⼒中にエラーをリアルタイムで通知しても気づかない

エラー画⾯でエラー項⽬だけを表⽰して修正しやすくする

ヤマダタロウ

taro.yamada@example

株式会社⼭⽥製作所



会社名

⼭⽥太郎

入力内容に誤りがあります。

所属部署

taro.yamada@example


メールアドレスの書式になっていません。正しく入力してください。

⼊⼒エラーの修正次の項⽬が⼊⼒エラーです。⼊⼒内容を修正して［⼊⼒内容の確認］ボタンを押してください。

⼊⼒内容の確認

エラー項目 →

31


5. エラーメッセージは具体的かつ簡潔な内容にする

エラーメッセージを読んでも修正⽅法が分からない

ユーザーを困らせないエラーメッセージ 3つの条件︕

1. どこがエラー（Where）2. なぜエラー（Why）3. どのように修正（How）

⽂⾔の⾒直しだけで離脱率が下がることも

お届け先の⼊⼒

⼭⽥太郎


宛名 *


⼊⼒エラー住所が正しくありません。電話番号が正しくありません。⽇付が正しくありません。

郵便番号 *


MACO FormMore Accessible for Customers Online

MAKOTO MAKOTO RICO

32


2017年のアクセシビリティ


TBD (To Be Developed)

WCAG 2.1CognitiveLow VisionMobile

障害者差別解消法

33


仙台

秋田

東京

浜松

名古屋

大阪岡山

高松

福岡

札幌

横浜詳しくは Webで :-)

http://bit.ly/2gh4D8j

キホンの「キ」 - CSS...

Documents

Transcript of キホンの「キ」 - CSS...