―HOMEABOUTSERVICEWORKSRECRUITBLOGACCESSCONTACTBLOGTOPBLOG2019/10/09いま知っておきたい「アクセシビリティ」の基本と便利な確認ツールはじめまして!4月に入社したデザイナーの竹田です。今回は初めてのブログということで緊張していますが、最後までお付き合いいただけると嬉しいです!早速ですが、デザイナーチームでは以前「アクセシビリティ」というテーマでチーム発表をしました。今回はその内容について触れていきたいと思います。アクセシビリティとは?最近よく耳にする「アクセシビリティ」という言葉ですが、皆さんはその意味をご存知でしょうか?私は漠然と「障がいを持つ方や高齢の方のためにあるもの」といったイメージを持っていました。それも間違いではないのですが、アクセシビリティという言葉はもっと広範囲も含みます。「全ての人が、どんな利用環境でも情報にアクセスしやすくすること。」それがアクセシビリティの持つ本当の意味であると、私自身今回の発表を通じて初めて知りました。Web制作にまつわるアクセシビリティアクセシビリティの言葉の意味を理解していただいたところで、次に我々にとって大切な「Web制作にまつわるアクセシビリティ」について触れていきたいと思います。アクセシビリティとは、ユーザビリティよりも前段階の本当に基本のところ。日常的に触れているとその「基本」を見失いがちです。WCAGまずはじめに、皆さんは「WCAG」という言葉を聞いたことがあるでしょうか?WCAGとは、Web技術・仕様の標準化を推進するW3Cが提唱しているWebページのアクセシビリティに関するガイドラインのことです。2.0)は、その後2012年にISO/IECによって国際規格にもなり、広く世界中で利用されています。2.1が勧告されました。ご覧いただくと、アクセシビリティについてものすごい数の取り決めがあることが分かります。「実際にAAを満たすためにはどうすればいいのだろう?」そう思われる方もいらっしゃることでしょう。アクセシビリティ確認ツールアクセシビリティに優れたページを作成しようとすると、「これはアクセシビリティに優れてる?」「これは基準に足りてないかな?」と不安になることもあると思います。そんな方におすすめしたい、便利なアクセシビリティ確認ツールをいくつかご紹介いたします。色の確認ツールContrastMacのツールバーに常駐させることができるアプリケーション。準拠した色のコントラストになっているか教えてくれる便利ツールです。GridWebブラウザ上で使うことができるコントラストチェックツール。背景色と文字色の複数組み合わせた場合の、色のコントラストチェックが可能。Guidelines(WCAG)2.0に準拠。選択することができます。viewerChromeの拡張ツール。閲覧しているページのすべての画像にツールチップが表示され、alt属性や画像サイズなどの情報が表示されます。ブラウザ右上にある「Altなし」タブをクリックすると、alt属性が設定されていない画像が並んで表示されます。CSS無効化確認ツールCSS無効化くんChromeの拡張ツール。意味のあるテキストやアイコンをCSSだけで表示していないか、CSSを無効化した場合でも情報が伝わるかどうかを確認してくれます。アクセシビリティに優れたサービス私たちシナップもお世話になっているアルファサードさんでは、「伝えるウェブ」という外国人や知的障害者にわかりやすい日本語サービスを使っています。「やさしい日本語」モードにすると、「経営理念」は「経営の考えかた」に、「会社概要」は「会社の大まかな説明」に...という形で誰にとっても伝わる表現に変わります。「漢字のふりがな」「音声読み上げ」モードにすると、文字通りふりがなをつけてくれたり、音声で読み上げてくれます。vol.2」など、最近はアクセシビリティに関する非常に大きなイベントが数多く行われています。このことからも、アクセシビリティに対しての世間の注目度の高さが伺えます。余談ですが、東京オリンピック2020公式サイトにあるアクセシビリティガイドラインが非常に細かく定められていて面白かったので、時間のある方はぜひご覧になってみてください。(ちなみにアクセシビリティ・ガイドラインは157ページあって、概要版は8ページです。概要版だけでも面白いです!)どのプロセスにもアクセシビリティのポイントがあって、Webに関わる全ての人に関係があり、Webに関わるどんな人にもできることがあります。目の見えない方に100%全てを伝えるのはほとんど不可能に近く、とても難しいことです。アクセシビリティは、0か100かではありません。ほんの少しでも、より多くの人に伝わるのならば、それは意味があることなのです。この記事を読んで、少しでもアクセシビリティに興味を持っていただけたら幸いです。カメラ専門店でWebデザイナーを経験後、より様々なデザインに携わりたいという思いからシナップに入社。カメラと日本酒と柴犬が好き。公式アカウントブログの更新情報やシナップからのお知らせを配信しています。SINAPシナップの活動報告や、IT業界のトレンド情報などを発信しています。ご相談・お問い合わせお仕事のご依頼やご相談など、お気軽にお問い合わせください。