🗂️ Design Materials ＃アクセシビリティ・ツール

近年、閲覧する人の層が広がり、デバイスも多様化したことによって、プロダクトを作る上で、アクセシビリティについて意識することが重視されています。「誰もが、どのデバイスを利用されていても、コンテンツを見やすく、わかりやすくする」ことが重要なミッションとされているようです。アクセシビリティが重視されているサイトは誰もが使いやすいために企業、またプロダクトのイメージアップにもつながります。

2016年に「障害者差別解消法」が施工されたことがきっかけになり、公共機関のWebサイトだけでなく民間のWebサイトにおいてもWebアクセシビリティへの対応が必要とされています。

💡 障害者差別解消法（障害を理由とする差別の解消の推進に関する法律）
これは障がいを持たれているすべての方が、障がいを持っていない方と同じように生活ができるよう、障がいを理由とする差別の解消を推進する法律です。

Webアクセシビリティの日本工業規格である「JIS X 8341-3:2016」に対応するには、Webコンテンツが規格の要件を満たしているかどうかをチェックする必要があります。

💡JIS X 8341-3:2016とは
2004年6月にJIS X 8341-3（高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェア及びサービス－第三部：ウェブコンテンツ）が施行されました。
2010年にそのJIS X 8341-3が改正されました。国際的基準であるWCAG 2.0（Web Content Accessibility Guidelines 2.0）を原案として、国際協調を目指したJIS規格「JIS X 8341-3:2010」となりました。
さらに2016年4月に対応国際規格となった「ISO/IEC40500:2012」の一致規格とするべく改定され、「JIS X 8341-3:2016」になりました。
JIS X8341という番号は「8341＝やさしい」という意味でつけられました。
JIS X 8341-3とWCAG 2.0は対応しています、例えばJIS X 8341-3の「7.1知覚可能に関する原則」は、WCAG 2.0の「1.知覚可能」と同じです。

今回は、アクセシビリティ向上のための主要なチェックポイント、役立つツール、また色々な企業のアクセシビリティに対する取り組みをご紹介したいと思います。

1. チェックポイント　

Webアクセシビリティ対策のポイントと向上のためのチェック 　

→ 情報バリアフリーポータルサイト

情報バリアフリーポータルサイトさんは、日本アクセシビリティ普及ネットワークとして、障害を持つ人や高齢の人の障害特性を活かしてアクセシビリティ検証やユーザー評価を行うことで、社会参加や経済的自立を目指されています。
http://jis8341.net/tool.html

📕 20分でわかるウェブアクセシビリティ
日本アクセシビリティ普及ネットワーク

冊子の内容
1.ごあいさつ・活動内容
2.ウェブアクセシビリティとは？
3.アクセシビリティが必要な人
4.アクセシビリティ 理解のポイント
5.何からはじめたらいいの？
6.実際に簡易チェックしてみましょう

→ ミツエーリンクス

ミツエーリンクスの「アクセシビリティチェックツール（axe Monitor）」は、Webサイトの制作者から管理者までの業務をサポートし、Webアクセシビリティの品質保持をバックアップするチェックツールです。

ニーズに応えるため、Webアクセシビリティのチェックツールでは古くから定評のあるアメリカDeque Systems社（以下、Deque社）と協力し、同社製品である「axe Monitor（旧名称：WorldSpace Comply）」のインターフェースを日本語化し、提供されています。
https://www.mitsue.co.jp/service/accessibility/axe_monitor.html

→ 英語版チェックリスト

a11y checklist
WCA3への準拠を確認しましょう。
https://www.a11yproject.com/checklist/

アクセシビリティは非常に重要ですが、従来のデジタル設計および開発教育では見過ごされがちです。このため、A11Yプロジェクトは、美しく、アクセスしやすく、包括的なデジタル体験を作成する方法の生きた例となるよう努めています。このサイトはオープンソースソフトウェアです。

障害
米国では4人に1人が障害を持っています。多くの人にとって、アクセシビリティを念頭に置いて構築されたテクノロジーは物事を容易にします。障害を持つ人々にとって、テクノロジーは物事を可能にします。

ウェブサイトやアプリは、スクリーンリーダー、点字ディスプレイ、拡大鏡などの支援技術で理解できるように機能させることができます。多くの障害者は、食べ物の注文、税金の支払い、仕事への応募、友人や家族との会話などを行うために、このようなデバイスに依存しています。さらに、WebサイトとWebアプリは、可能な限り幅広いユーザーに理解されるように設計できます。これには、色覚異常、失読症、発作および片頭痛の引き金、読解レベルおよび認知負荷などの適応が含まれます。

インクルージョン
アクセシビリティは重要、またインクルージョンは不可欠です。表現がなければ、理解することは不可能であり、アクセス可能なデジタル体験を効果的に作成することははるかに困難です。さらに、アクセシビリティの作業は、多くの場合、事後に多額の費用をかけて行われます。包括性は、デジタルエクスペリエンスを作成する人々に、人々が存在することを妨げる可能性のある障壁やバイアスと、それに対して何ができるかを早期に、そしてしばしば検討するように求めます。

法律
多くの国では、アクセシビリティは法律によって保護されている権利であり、人種、宗教、性別の保護が支持されているのと同じ方法です。誰かからアクセスを奪うことは違法で不道徳です。

機会
物事をアクセシブルにすることは、より多くの人々がそれらを使用できることを意味するため、より良い機会につながります。アクセス可能なデジタルエクスペリエンスも障壁を取り除きます。これは、障害者が歴史的に差別に直面してきた地域である雇用などにとって非常に重要です。

さらに、最近の調査（PDF）は、アクセシビリティのニーズに対応した場合、潜在的な収益が数十億ドルになることを明らかにしています。たとえば、すべてのデスクトップおよびラップトップコンピューター、タブレット、スマートフォンに搭載されているキーボードは、1800年代初頭に発明された支援技術であるハンセン・ライティングボールから派生しています。

💡 ハンセン・ライティングボールは1865年に発明され、特許取得後の1870年に生産が開始された世界初の商業生産タイプライターです。

2. フリーツール

→ イトラ

イトラさんでは、アクセシビリティに注意すべきコンテンツとは？ 入力フォーム、 音声コンテンツと動画コンテンツ、デザインとアクセシビリティのバランス、Webアクセシビリティチェックに便利なツールをご紹介されています。
https://www.itra.co.jp/webmedia/accessibility_tool.html

→ アーティス: Webアクセシビリティチェックに役立つフリーツール

アーティスさんではアクセシビリティチェック時に役立つ無償で使えるツールをいくつかご紹介されています。

→ コントラスト比チェック「ColorTester」

JIS X 8341-3:2016では、色覚障がい者への配慮として背景色と文字色のコントラストに下記の基準が設けられています。
1.4.3 コントラスト（最低限レベル）の達成基準（レベルAA）
テキスト及び文字画像の視覚的提示には，少なくとも4.5:1 のコントラスト比があることが必要で、サイズの大きなテキスト及びサイズの大きな文字画像には、少なくとも3:1のコントラスト比があることが必要です。ただ、コントラスト比「4.5:1」「3:1」と言われても満たしているかどうかを目視で判断することは不可能なので、「ColorTester」を使用し、コントラスト比チェックしましょう。ColorTesterは、寄附歓迎のフリーソフトです。基本無償で使うことができます。

→ alt属性チェック 「Alt & Meta viewer」

JIS X 8341-3:2016では、画像などの非コンテンツテキストに対して下記の基準が設けられています。

＊1.1.1 非テキストコンテンツの達成基準（レベルA）
利用者に提示される全ての非テキストコンテンツには、同等の目的を果たす代替テキストが提供されている必要があります。

💡 代替テキストとは、Webサイト内に含まれている画像や動画が何らかの原因で表示されなかったときや、視覚障がい者などが音声ブラウザを使用するときに読み上げをするテキストのことです。画像の場合、img要素にalt属性をつけて代替テキストを記述します。

alt属性は、画面上に表示されません。そのため、alt属性が設定されているかを確認するにはソースコードを目視でチェックする必要があります。そのような時に便利なのが、Alt属性チェック 「Alt & Meta viewer」です。Alt & Meta viewerは、Chormeの拡張機能です。Chromeウェブストアから無償でダウンロードできます。

そのほかにも様々なツールをご紹介されています。

→ CSS無効化チェック 
→ ページタイトル・リンク切れチェック
→ みんなのアクセシビリティ評価ツール「miChecker」
→ スクリーンリーダー「NVDA日本語版」

→ 総務省｜情報バリアフリー環境の整備

みんなのアクセシビリティ評価ツール：miChecker (エムアイチェッカー)Ver.2.0「みんなのアクセシビリティ評価ツール：miChecker」（以下、「miChecker」という。）は、JIS X 8341-3:2016（高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第3部：ウェブコンテンツ）に基づくウェブアクセシビリティ対応の取組を支援するために、総務省が開発し、提供するアクセシビリティ評価ツールです。その第一の目的は検証作業の支援です。加えて、付属文書等に沿って検証作業を行うことで、関連する知識の習得が可能です。
https://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker.html

アクセシビリティに対する取り組み

→ Microsoft

→ アクセシビリティに対する Microsoft の取り組み
https://www.microsoft.com/ja-jp/trust-center/compliance/accessibility

Microsoft は、障碍者の方を含む、すべての人が使用できるようにデザインされたプロダクトとサービスを提供できるよう日々取り組んでいます。

Microsoft アクセシビリティ仕様適合レポートには、アクセシビリティに対する Microsoft の取り組みが示されています。これらのレポートは、企業、教育機関、および政府の専門家が、組織内で調達決定や製品統合を行うのに役立ちます。
聴覚、視覚、可動性、および学習障害を持つ人々のためのソリューションの詳細については、Microsoft Accessibilityにアクセスしてください。

Microsoft Accessibility Conformance Reports - Microsoft Industry Blogs

→ インクルーシビティを意識して設計する

インクルーシブ デザインの実践は、障壁を認識したうえでそれを実装することであり、人間の多様性が持つ働きを支える構造を作ることを目的としています。 さまざまな障碍があり、さまざまな背景を持つ人々が、テクノロジを利用して、自身の、そして他のユーザーたちの生活を進歩させることができるように支援します。 基本的な原則を考慮することで、システムとユーザーのつながりを理解し、強力なインクルージョンのサイクルを創出します。

インクルーシビティを意識して設計する - Learn

目的
→ インクルーシブな製品デザインについて。
→ インクルーシブ デザインの原則について。
→ インクルーシブ デザインを実践する場合に、人間の多様性の要因を考慮します。

→ Microsoft Inclusive Design Activity Cards

マイクロソフト・インクルーシブ・デザイン・アクティビティ・カード

ダウンロード»
英語版になりますがアクティビティカードとサポートカードは、設計プロセスに統合されるように設計されています。

→ IBM Accessibility Requirements

さまざまなテクノロジーのアクセシビリティ要件のリストが徹底的に記載されています。

https://www.ibm.com/able/requirements/requirements/

情報アクセシビリティ技術

IBM東京基礎研究所では、およそ30年間に渡り、情報技術の力で多様なニーズを持つ人々の社会参加をサポートするための様々な技術を生み出してきました。1980年代に開発した点字ワープロやデジタル点字共有システムは、現在もデファクトスタンダードとして広く使われています。1997年には世界初の実用的な音声Webブラウザである「IBMホームページ・リーダー」を、2000年代にはWeb開発者向けツール「aDesigner」やインターネット閲覧支援ツール「Easy Web Browsing」を開発しました。現在は、インターネットを介して多くの人々の力を集める「クラウドソーシング」によってアクセシビリティ向上を目指す「クラウド・アクセシビリティ」の考え方を軸に、視覚や聴覚に障害を持つ人々の情報アクセスを支援するための新たなサービスの開発に取り組んでいます。

アクセシビリティ - IBM

今、求められる共感力

優れたデザインとテクノロジーの組み合わせは、より良い世界を作り出す可能性があります。ユーザーにとって、シームレスな体験をデザインすることはデジタル・プロダクトの成功の鍵を握っています。

プロダクト・デザイナーは、エンパシー（共感力）という感性を育てていく必要性があります。ユーザーの立場に立って、彼らの感情と行動を理解することが大切です。

これから様々なプロジェクトを進める上で、常にアクセシビリティを考えプラットフォーム全体とページ単位の使いやすさなど、ユーザー体験を意識してデザインを進め、ユーザーがプラットフォームから離脱するのを防ぎ、また効率的に情報を取得し、満足していただくために精一杯の努力をしたいと思います。

私も、色々勉強中なので、皆さまの、ご意見・ご感想をお聞かせください。お読み頂きまして、ありがとうございました。

メルボルンを拠点にプロダクトデザイナーとして働いています。 主にデジタル・プロダクトの制作に携わっています。