こんにちは、RAKSULでデザインインターンをしている川村です。 今回はウェブアクセシビリティに対応したプロダクトをつくるために、デザインする上で達成すべきことについてまとめてみました。 また、自分がウェブアクセシビリティを勉強する上で参考にしているサイトもご紹介します。 ウェブアクセシビリティについて知りたいけど、何から手をつけたらいいかわからない方へ、ぜひ参考になれば幸いです。 ウェブアクセシビリティって何？ウェブアクセシビリティとは何か。デジタル庁が提供している「ウェブアクセシビリティ導入ガイドブック」より引用いたします。 ウェブアクセシビリティは、利用者の障害の有無やその程度、年齢や利用環境にかかわらず、ウェブで提供されている情報やサービスを利用できること、またはその到達度を意味しています。 デジタル庁「ウェブアクセシビリティ導入ガイドブック」アクセシビリティと聞くと、身体障害や知

トグルスイッチとは状態のON/OFFを切り替えるためのUIパーツです。選択肢が明確にわかり直感的に操作できるトグルスイッチは、ユーザビリティを高めるための重要な要素です。しかしそのシンプルさゆえに、不適切な使われ方をしているケースを見かけます。トグルスイッチの機能と適切な使用方法を理解し、ポイントをおさえて設計することが大切です。 トグルスイッチの定義 トグルスイッチはウェブページやアプリケーションのコンポーネントです。同時に選択できない2つのオプションからいずれかを選択し、現在の状態を視覚的に表します。ユーザーがトグルスイッチのON/OFFを切り替えれば、ボタンの操作結果やオプションの変更設定がすぐにシステムに反映されます。 一般的に「トグルボタン」や「トグルスイッチ」と呼ばれることが多く、Material Design（※1）では「スイッチ」、Human Interface Guide

LINEヤフーにおけるこれからのアクセシビリティというスライドで「WCAGはハードルが高い」という文言を見かけました。どうしてハードルが高い、言いかえるならば難しいとされるのか、その難しさはどこから来るのかをちょっと深掘りしてみようと思います。 WCAGという言葉について、改めて見ておきましょう。WCAGはもっぱら、Web Content Accessibility Guidelines（ウェブコンテンツアクセシビリティガイドライン）というW3Cの発行する技術文書を指すわけですけども、現時点でよく参照されるのがウェブアクセシビリティ基盤委員会（WAIC）が公開している日本語訳のWCAG 2.1でしょう。ちなみに本家のW3Cは、WAICが現時点で公開しているWCAG 2.1の改訂版を今年9月に公開し、さらにバージョンの進んだWCAG 2.2を先月に発行したばかりだったりします。 WCAG 2

しかし、実際のデザインではこの表にないフォントサイズやウェイトを使いたい場合もあるでしょう。その場合には、シミュレータやルックアップテーブルを参照することで、より精度の高い確認が可能になります。 ルックアップテーブルでフォントサイズとウェイトから必要なコントラストを確認する シミュレーションの説明の前に、より細かい基準がどのように定められているか見るために、APCAのルックアップテーブルを見てみましょう。 このルックアップテーブルは、WCAG3のシルバーレベルを満たすための基準を示しています。ブロンズレベルに追加して、この基準に準拠することでより精度の高いコントラストの確保が可能になります。 以下は、公式のシミュレーションサイトAPCA Contrast Calculatorにあるルックアップテーブルのスナップショットです。ページの下部、APCA Font Table: Silver Le

先日APCA何もわからないという記事を書きました。 WCAG 3.0において、コントラスト比に関する新しい基準として提唱されているアルゴリズムについて、欧文フォントを基準にフォントサイズとウェイトの基準値が定められているので、日本語のフォントでどうなるのだろう？という問題提起の雑文でした（そうだったのか）。 まぁ、まだAPCAは開発中でもあり、WCAG 3.0が正式にリリースされるまでも結構かかりそうなので焦ることはない気はしますが、気になったものはしょうがないので、日本語フォントでシミュレーションできるツールを作成してみました。 APCAコントラスト日本語フォント検証 https://apca-ja.studio-ito.net/ 使いかた まずテキストカラーとバックグラウンドカラーを設定します。 すると、初期設定されているフォント（Noto Sans JP）とフォントサイズ（18px）

デジタルコンテンツにおけるアクセシビリティ、特にコントラストの基準について解説する連載の第2回目です。前回の記事では、現在のWCAG2のコントラスト基準と課題について解説しました。今回はWCAG3で採用が検討されている新しいコントラスト基準、APCAについて解説します。 APCAとは WCAG 2.0でコントラストの基準が策定されて以降、ディスプレイやWebコンテンツ、CSSの機能、および視覚科学の進歩など様々な状況が変化しました。WCAGの基準についても、コントラストや視認性についてより知覚を正しくモデル化するガイドラインが求められるようになりました。 APCA（Advanced Perceptual Contrast Algorithm）はWCAG3にて現行のコントラストに代わる基準として開発・検討されている、新しいコントラスト基準です。前回紹介したようなWCAG2の基準の課題に応える

Click on a color patch next to "Text" or "Background" above to use the HTML5 color-picker (modern browsers). Otherwise enter color values in the text-box as a three or six digit hex value, the '#' is not necessary. Other valid entries are integer rgb(r,g,b) or an HTML color name (see bottom of page for list). PROBLEMS? Try a "Forced Reload" on your browser, and/or clear the cache. This is the APCA

There’s a growing demand for designers to make their interfaces accessible to all users. It’s important to accommodate users with disabilities, but there are many myths to color contrast accessibility being perpetuated by misinformed people. They often parrot these myths to discredit a design, without understanding in which situations a color contrast standard applies. Not only that, but they assu

はじめに サイオステクノロジーの伊藤と申します。今回から数回にわたりデジタルコンテンツのコントラストというテーマで、WCAG2のコントラスト基準とWCAG3で検討が進められている新しい基準APCAについて解説していきます。 対象読者としては、ウェブサイトやアプリケーションなどデジタルコンテンツの制作に携わるデザイナーやエンジニア、アクセシビリティに関心のある方を想定しています。 現在勧告されているWCAG2の達成基準では、テキストや視覚要素のコントラストが一定の基準を満たす必要があります。たとえば、レベルAAでは文字色と背景色のコントラスト比が4.5:1以上であることが要求されます。 図1 テキストとの視認性を確保するために、背景色とのコントラスト比を考える必要がある しかし、人間の目は明るい色と暗い色のコントラストを認識する際に、明るい色の相対輝度が高いほど視認性が高くなるという特性があ

W3Cからアナウンスされたように、WCAG 2.2が2023年10月5日付けで勧告（Recommendation）となりました。 WCAG 2.1の最初の勧告が2018年ですから、そこから5年が経って達成基準（Success Criterion）が追加されたことになります。 WCAG 2.1の勧告について「最初の」とわざわざ言っているのは、WCAG 2.1が先月に更新されたことによります（W3Cのアナウンス）。 WCAG 2.1の更新の内容はもっぱらエラッタの適用ですが（WCAG 2.1のChange Logも参照）、その中でも達成基準4.1.1について注記が追加されたのが目立った変更点と言えます。 この追記は、端的にはWCAG 2.2では達成基準 4.1.1が削除されているように、達成基準 4.1.1についての評価は別の達成基準で行うようにするという内容です。 さて、WCAG 2.2の話

入力フォームがあるページの設計をする際はフロントエンドでもバリデーションを実装することが多くあります。代表的なバリデーションは例えば以下のようなものです。 必須の入力欄に値が入力されていなければエラーとする メールアドレス入力欄に入力された値がメールアドレス形式でなければエラーとする パスワードとして使用できない文字が入力されればエラーとする 入力内容が不適切な場合は、入力欄に装飾を施すために:validと:invalidの2つの擬似クラスを利用してきました。 :validと:invalidは、主にフォームコントロール要素に関連する擬似クラスで、以下のような基準にしたがって各要素の状態がマッチするかどうかを判定します。 required属性付きの入力欄が空でなければ:valid、空であれば:invalid type属性がemailである入力欄に入力された値がメールアドレス形式であれば:va

社内向けにまとめていたものを加筆修正して公開します。 アクセシビリティの学習を始める人の助けになれば嬉しいです。 YouTube freee アクセシビリティ研修動画～全職種対象～ freee アクセシビリティ研修動画～技術職対象（Basic） freee アクセシビリティ研修動画～技術職対象（Advance） a11ygogo A11yTokyoMeetup Webコンテンツ 全般 WCAG WAI-ARIA HTML/CSS デザインシステム、ガイドライン その他 書籍 アクセシビリティ全般 HTML

報道資料 ここに掲載されている情報は、発表日現在の情報です。 検索日と情報が異なる可能性がございますので、 あらかじめご了承ください。 2023年2月21日 ロービジョン者※1の創作意欲に寄り添う網膜投影カメラキットを発売 ソニーのイメージング技術が、"見えづらい"を"見える"に変えるプロジェクト「With My Eyes」をサポート ソニーは、デジタルスチルカメラ サイバーショット®『DSC-HX99』と、株式会社QDレーザ（以下、QDレーザ社）のレーザ網膜投影技術を応用したビューファインダー『RETISSA NEOVIEWER （レティッサ ネオビューワ）』※2を組み合わせた、網膜投影カメラキット『DSC-HX99 RNV kit』を、数量限定で発売します。 本商品の発売は、当社が主要賛同企業として参加している、QDレーザ社が展開するロービジョン者の"見えづらい"を"見える"に変えるプ

この記事は STUDIO アクセシビリティ委員会のマガジンvol.8 です。 こんにちは！STUDIO株式会社 フロントエンドエンジニアのjimbouです。 私からはSTUDIO アクセシビリティ委員会マガジンにて、主にエンジニア/デザイナーさん向けに技術的な記事を発信しています。 STUDIOに限らずWebサイト、Webアプリに携わる全ての方々に読んでいただければと思います🌟 今回は「アコーディオンUI」についての記事になります💡 Webサイト、WebアプリでアコーディオンUIをデザイン/実装する方に向けて、少しでも役に立つ記事になれば幸いです☺️ 何のためにアクセシビリティを向上させるのか？ではこのアコーディオンUIを実装する上で、アクセシビリティを向上させるとどんな良いことが起こるのでしょうか。 例として、アクセシビリティを特に意識せず主にdivタグを用いてマークアップしたアコー

以前にも少し書いたのですが、ウェブブラウザーで使えるページ内検索による体験が阻害されるのが本当にストレスで、その例を残しておこうと思います。 採用側の気持ちも分かりますので、どうなると皆が幸せになるのか分からないという種類のものなので困ったところです。 省略されたテキストoverflow: hiddenとtext-overflow: ellipsisまたは-webkit-line-clampによってテキストが省略された場合、その省略部分がページ内検索にヒットすると非常に探しづらいです。 特に、グリッドで区切られたアイテムが複数列・複数行で並んでいる際に顕著です。 以前の記事のとおり、わたしはYouTubeでよく遭遇します。 下記のデモは、1000個のアイテムを並べたものです。 このうち、「Red Rose」というワードは12個のアイテムに含まれています。 デモを開いて「Red Rose」で

ツッコミが追いつかないというのは、こういうことを指すの…？ ハザードマップのユニバーサルデザインに関する検討会 - 国土交通省水管理・国土保全局 障害等に対応する一人ひとりのニーズに応じた水害リスク情報提供のあり方を検討する有識者会議を開催します！ ～ハザードマップのユニバーサルデザインに関する検討会（第１回）の開催～ - 国土交通省 ハザードマップは、主に地図上に水害リスクに関する情報を示すものですが、視覚等に障害を有する場合は紙面等の情報を取得することが困難であること、また、自身のリスクが把握しづらく、避難行動に役立ちにくいという意見もあることから、一人ひとりの環境やニーズに合ったリスク情報提供のあり方を整理するため、「ハザードマップのユニバーサルデザインに関する検討会」を設置し、令和３年１２月２３日（木）に第１回検討会を開催します。 という趣旨らしいです。これまで検討会は4回開催され

デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま

現在上映中のブラッド・ピットさん主演の映画「ブレット・トレイン」（字幕版）で、日本語のセリフに字幕が付いていなかったことを問題提起する聴覚障害を持つ人の投稿に約1万6000いいねが集まり、その結果（？）公式が対応したという感動的な展開に注目が集まっています。 「ブレット・トレイン」は、ブラッド・ピットさん演じる世界で最も運の悪い運び屋（殺し屋）のレディバグが、東京発の超高速列車で大騒動に見舞われるアクション・コメディ・スリラー映画。伊坂幸太郎さんの小説『マリアビートル』を原作としているため、真田広之さんやマシ・オカさんなど日本のキャストも出演しており、一部日本語のセリフが含まれます。 ブラッド・ピットさん（左），真田広之さん（右）　画像はジャパンプレミア試写会inKYOTOより マシ・オカさん（中央），デヴィッド・リーチ監督（右）　画像はジャパンプレミア試写会inKYOTOより 生まれつき