あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年と同じく、2025年のWebアクセシビリティに関連する出来事を振り返りつつ、2026年のWebアクセシビリティの展望について俯瞰していきたいと思います。 WCAG 2.2と関連文書 Webアクセシビリティの国際規格であるISO/IEC 40500について、WCAG 2.0であったISO/IEC 40500:2012から実に13年ぶりに、WCAG 2.2と同等の内容となるISO/IEC 40500:2025に改訂されたというのが昨年のWebアクセシビリティに関する大きなトピックでした。 WCAG 2.2のエラッタ 細かい話になるのですが、ISO/IEC 40500:2025のベースとなったのは、2023年版のWCAG 2.2であり、その後エラッタ（正誤表）の内容を反映して発行された2024年版のWCAG 2.2ではあ

公開日 : 2021年8月12日 カテゴリー : アクセシビリティ ここ最近、米国を中心とする海外のウェブアクセシビリティ関連サイトで、アクセシビリティオーバーレイ (accessibility overlay) がホットな話題になっています。アクセシビリティオーバーレイとは、サードパーティ製のプログラム (基本的には JavaScript) で、ウェブサイトに適用することによってアクセシビリティを即座に高めることができるという (まるで魔法のような) 触れ込みのソリューションです。 アクセシビリティオーバーレイが適用されたウェブサイトにはウィジェットが追加され、そこに用意された機能を選んで実行することで、あたかもアクセシビリティが改善されたかのように、ウェブページの表示を変更することができます。 アクセシビリティオーバーレイの例 アクセシビリティオーバーレイを提供するサービスはいくつかあ

公開日 : 2025年11月11日 カテゴリー : アクセシビリティ いつからでしょうか、X (旧 Twitter) の iPhone アプリでタイムラインをスクロールしていると、唐突に無関係なウェブページが開いてタイムラインの閲覧が阻害されることがあります。タイムライン上の広告ポストにたまたま指が触れただけで、特にそれをタップしよういう意図がないにもかかわらずリンクが実行されてしまうという挙動です。 ユーザーは、見たいと思っていなかったコンテンツに強制的に誘導され、そのうえ、自分で元のコンテンツに戻る操作をしなければならないので面倒です。広告効果を狙った実装かとは思いますが、ユーザー体験としては問題があるような気がします。 さらにこの実装は、アクセシビリティの観点でも問題であると指摘しておきたいと思います。 W3C 勧告の Web Content Accessibility Guidel

公開日 : 2025年6月13日 (2025年6月14日 更新) カテゴリー : アクセシビリティ / ユーザビリティ EC サイトやクチコミなどで、商品やサービスに対するユーザー評価を、星の数で示すユーザーインターフェース (UI) があります。端的な日本語表現はなさそうですが、英語では「star rating」と言うようです。 白地の背景に黄色い星印という外観が一般的ですが、それだとコントラストが低すぎて (特にロービジョンや高齢者などにとって) 星が視認しにくい可能性があります。こうした問題をはじめ、星の数による評価 (star rating) の UI は、アクセシビリティがおざなりにされることが少なくないように (実際に EC サイトなどのアクセシビリティ診断をしていて) 感じます。 この記事では、星の数による評価 (star rating) をアクセシブルにする方法について、解

About this translation ボランティアによる本翻訳は原文（英語）の内容を正確に反映できていない可能性があります。 翻訳者 Hiroya UGA. 寄稿者 Naoki Nakamura. WAIは全ての翻訳者に感謝し、また他のtranslationsも歓迎します その画像はテキストを含んでいますか？ Yes: かつ、そのテキストが実際のテキストとして近くに記載されている場合 空のalt属性を利用します。詳細は装飾目的の画像 (英語版)を参照してください。 かつ、そのテキストが視覚効果のためだけに表示されている場合 空のalt属性を利用します。詳細は装飾目的の画像 (英語版)を参照してください。 かつ、そのテキストがアイコンなど特定の機能を持つ場合 alt属性を、画像の機能を伝えるために利用します。詳細は機能を持つ画像 (英語版)を参照してください。 かつ、画像内のテキスト

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Cardのマークアップでもう悩まない！NestedでClickableなUIを実現する、Link Area Delegationとは Table of Contents Table of Contents はじめに Link Area Delegationとは Link Area Delegation 提案の背景 - マークアップの制限 クリッカブルなコンテナを実現する既存の方法 既存方法とその問題 現状検討されている4つの実装方法 1. Link delegation attributes 2. <linkarea> Element 3. Use CSS pointer-area Property 4. Use Invokers おわりに Appendix はじめに Open UI Community Groupで、仕様の策定が検討されている Proposal の一つに、Link Are

ちょっと良いUIおれおれAdvent Calendar 2024 – 11日目 普通にフォームをマークアップすれば Enter キーで送信できるようになるんですが、なんかそうなってない場合があります。しときましょう。 デモ： https://codepen.io/ginpei/pen/MYgjgXP <form> で括る Enter キーで送れるようにするには、単に <form> 要素で括るだけです。簡単です。やらない理由がない。 JavaScript からは submit イベントを使う ボタンのクリックではなくフォーム送信 submit のイベントを使います。ボタンはイベント管理する必要ありません。 JS で全部管理する場合は HTML レベルでの送信を event.preventDefault() で止めます。 逆に送信しないボタンは type="button" にする フォーム内の

ユニバーサルマナー検定 ユニバーサルマナー検定とは？ ユニバーサルマナーの実践に必要な「マインド」と「アクション」を学び、身につけるための検定です。 高齢者や障害者、ベビーカー利用者、外国人など、多様な方々を街で見かける現代。私たちにとって、“自分とは違う誰かの視点に立ち行動すること”は、特別な対応ではなく、「こころづかい」の一つです。 11 users 1474 universal-manners.jp

In the spirit of “everything old is new again,” browsers are once again supporting the ability to style the scrollbar. Much like custom CSS mouse cursors, I feel this is also a mistake. When you style things on the web, you get control over almost the entire experience. From ten thousand feet up, your scope of concern is this: The scope of concern for the browser is this: The browser’s UI is infor

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

公開日 : 2022年2月17日 カテゴリー : アクセシビリティ マウスなどのポインティングデバイスの代わりにキーボードを用いてウェブを利用する人や、ロービジョンのユーザーにとって、ウェブコンテンツ上で (キーボード操作による) フォーカス位置が視覚的に明示されることは、とても重要であり、大きな助けになります。 W3C が勧告している WCAG (Web Content Accessibility Guidelines) には「Focus Visible (フォーカスの可視化)」という達成基準があります (参考 : WCAG 2.1 解説書 達成基準 2.4.7 Focus Visible / 日本語訳)。また、WCAG の次期バージョン (2.2) では「Focus Appearance (フォーカスの外観)」という達成基準が新たに追加される見込みです (参考 : WCAG 2.2 解

サイボウズ デザイン&リサーチ の西藤（さいとう）です。 私は、Poca11y（ポカリ）というチームで、全盲やロービジョンの方と一緒に、プログラミングをはじめいろんな活動をしています。 Poca11y（ポカリ）チームとは サイボウズ デザイン&リサーチの中にあるチームの1つで、「アクセシビリティ（A11y）」や「研究開発（PoC）」に関する活動を専門的に行うチームです。 （PoC + A11y  = Poca11y = ポカリ）というネーミングですこの記事は、一緒にプログラミングをする中で、気づいたことをまとめてみました。 「視覚障害のある方と一緒にプログラミングをする」と言われたら、あなたはどのようなことを考えますか？私は、こんなことを考えていました。 『専用エディタを用意しないといけない？』 『自分が書いている内容を全部読み上げないと伝わらない？』 実際働いてみると、この考えていたこと

公開日 : 2021年10月14日 (2023年10月11日 更新) カテゴリー : アクセシビリティ / ユーザビリティ ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化する UI があります。たとえば、利用規約などの文書を読んで同意する旨のチェックを入れないと、あるいは、入力必須フィールドにすべて正しく情報を入れないと、ボタンがアクティブにならない、というものです。 サブミットボタンがデフォルトで無効化されているフォームの例。 このような UI は、アクセシビリティやユーザビリティの観点で、以下の問題があります。 そこに存在しているはずのサブミットボタンが使用できないことに対して、その理由をユーザーが理解できずに、混乱してしまう恐れがある。(ユーザーの側に誤っているという自覚がなくても、ちょっとした見落としや入

公開日 : 2021年4月17日 (2021年6月6日 更新) カテゴリー : アクセシビリティ / ユーザビリティ ナビゲーションメニューがデフォルトでは折り畳まれていて、いわゆる「ハンバーガーアイコン」を押すとメニューを展開表示するインタラクションを備えたウェブサイトを、昨今よく目にします。もともとはスマートフォンのように画面の大きさが限られたデバイス向けの UI でしたが、多くのウェブユーザーにとって馴染みのある UI になってきたからでしょうか、PC 向けのウェブサイトにおいても、採用される例が増えてきたように思います。そしてこれらは、ほとんどがオーバーレイ (overlay : ページの上に重ねる形での情報提示) でメニューを展開表示する仕様になっています。 オーバーレイでのメニュー展開 オーバーレイの問題 オーバーレイでメニューを展開するインタラクションは、一見、問題なさそうに

公開日 : 2020年10月11日 カテゴリー : 情報設計 (IA) ユーザーはウェブサイトやアプリケーションの利用時、そこにある情報を通じて、自らの目的 (課題を解決したり、楽しんだり、など) を達成することができます。その意味で、情報を、見つけやすく、理解しやすくする設計技術である情報アーキテクチャ (Information Architecture : IA) は、ウェブデザインの要であると言えるでしょう。 ところで、この IA によってユーザーにもたらされる「情報」とは、何でしょうか？「情報」と「情報でないもの」があるとして、その違いは何なのでしょうか？ 「情報」を意味する英語の「information」という語は「in + form」の名詞形で、「(人の頭の) 中に形づくられるもの」というニュアンスが含まれています (参考 : inform | Online Etymology

公開日 : 2020年8月30日 (2020年9月6日 更新) カテゴリー : アクセシビリティ / ユーザビリティ フォームのテキスト入力を補完するインタラクションとして、「オートコンプリート」があります。テキストボックスに文字をタイプし始めると、それに呼応して、タイプされた文字列と部分一致する入力値候補が一覧として提示され、ユーザーはその中から入力値を選択できるという、コンボボックス型のインターフェースです。ミスタイプ (TYPO) の軽減、情報のファインダビリティの向上、といった効果が期待できます。 オートコンプリートのコンボボックス ちょっと文字入力するとすぐに入力値候補のオプションが出てきて、あとはマウスでクリックする (または指でタップする) だけで入力ができてしまうのがオートコンプリートの特長です。とても便利で有用なだけに、この UI を採用する際には、より多様なユーザーが利