あるいは必要十分条件について1。 Nu Html Checkerの場合 Nu Html Checkerは、HTMLをチェックするツールである。Nu Html Checkerで特定の（種類の）エラーを0にすることは、「構文解析」のWCAGの達成基準を満たすための必要十分条件となる。 達成基準 4.1.1 構文解析 (レベル A): マークアップ言語を用いて実装されているコンテンツにおいては、要素には完全な開始タグ及び終了タグがあり、要素は仕様に準じて入れ子になっていて、要素には重複した属性がなく、どの ID も一意的である。ただし、仕様で認められているものを除く。 筆者による上記引用のハイライト部分“どのIDも一意的であること”について見てみる。たとえば以下のHTML断片のように、1つのページに同じid属性値が2回出現することはHTMLのエラーであり、かつ、WCAGの達成基準の違反となる：
報道資料 ここに掲載されている情報は、発表日現在の情報です。 検索日と情報が異なる可能性がございますので、 あらかじめご了承ください。 2023年2月21日 ロービジョン者※1の創作意欲に寄り添う網膜投影カメラキットを発売 ソニーのイメージング技術が、"見えづらい"を"見える"に変えるプロジェクト「With My Eyes」をサポート ソニーは、デジタルスチルカメラ サイバーショット®『DSC-HX99』と、株式会社QDレーザ（以下、QDレーザ社）のレーザ網膜投影技術を応用したビューファインダー『RETISSA NEOVIEWER （レティッサ ネオビューワ）』※2を組み合わせた、網膜投影カメラキット『DSC-HX99 RNV kit』を、数量限定で発売します。 本商品の発売は、当社が主要賛同企業として参加している、QDレーザ社が展開するロービジョン者の"見えづらい"を"見える"に変えるプ
APCA Contrast Calculator
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
この記事はミツエーリンクスアドベントカレンダー2019 - Qiitaの23日目の記事です。 私はWebページの検証やコンサルティングの業務を多々行っており、開発者とやり取りすることもあります。その際、開発者に「フォーカスを受け取れるように、要素のtabindex属性に-1を設定してください」と伝えると、高い確率で「tabindex属性に-1を設定するとフォーカスを受け取らなくなるのでは？」と返されます。実際のところ、tabindex="-1"はフォーカスを受け取ります。 なぜ、そのような認識の違いが起こるかというと、ある要素がフォーカスを受け取るかどうかや、受け取るかどうかを制御する方法が複雑なためだと考えています。この記事ではその複雑性と、複雑性がどう整理されようとしているかを述べます。 フォーカスを受け取る経路 Webページでは要素がフォーカスを受け取る経路は、ユーザーの利便性や歴史
Webアクセシビリティ提訴件数、米国では昨年の2.8倍に。法律で義務づけられる海外の現状［CSUNレポート］【第2回】 | イベント・セミナー | Web担当者Forum
「アクセシビリティ」をテーマに、年に1度開催されているグローバルカンファレンス「CSUN（シーサン）」。今年の参加メンバーがレポートする本連載記事の第1回では、インフォアクシアの植木氏がCSUNの全体像をレポートしました。 第2回ではコンセントのディレクター中村が、CSUNで参加してきたセッションから、アクセシビリティの提訴コストに関するセッションと ADHD （注意欠如多動性障害）の当事者の方によるセッションをご紹介します。 アメリカでWebアクセシビリティ関連の提訴件数が、激増している第1回で触れたように、先進国のほとんどではWebアクセシビリティの確保が法律で義務付けられています。CSUNでも法律をテーマとしたセッションが多く開催されており、6つあるセッション分類カテゴリの1つとなっています。 海外ではこれらの法律を根拠として、訴訟に発展する事例が出ており、グローバル展開する企業の担
あなたの声を、 聞かせて ください。 「大人の発達障害ナビ」は、当事者や周囲の方の 悩みに寄り添う“大人の”発達障害の専門サイトです。 当事者の声に耳を傾けながら運営していきます。 こだわりや 決まったルーティーンじゃないと仕事ができないんです。 あわてんぼう 思いつきで行動してしまい、いつも失敗してしまうんです。 散らかしや やりかけのことで部屋がいっぱい！どうしても片付けられないんです。 わすれんぼう 大事な約束をすっかり忘れて遅刻してしまいます。 超マイペース なんとなく場違いな発言や リアクションをしているみたいです。 コミュ下手 取引先の人と雑談になると どう話していいのかわからなくなります。 一点集中 ひとつのことに夢中になるとなかなか切り替えができません。 一方通行 友達や家族とおしゃべりを するとき、自分のことばかり話してしまいます。 段取り下手 優先順位がつけられなくて
Webアプリケーションアクセシビリティ
伊原 力也、小林 大輔、桝田 草一、山本 伶（著）／技術評論社／ISBN-13: 978-4297133665／3,960円（税込）／576ページ／2023年2月27日 発売（ほぼ同時に電子版も発売予定）
GitHub - tailwindlabs/headlessui: Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
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
iOSDC Japan 2019 すべての人のためのアクセシビリティ対応【省略版】
年末に【独自】障害者配慮、民間も義務化へ...スロープ設置や手話対応 : 社会 : ニュース : 読売新聞オンラインという報道を目にした方も中にはいるかと思いますが、障害者差別解消法でこれまで民間では努力義務であった「合理的配慮」が義務化される公算が出てきました。 実際に、昨年12月に開催された第53回障害者政策委員会の議事次第での資料8 障害者差別解消法の改正に盛り込む事項（案）では、「事業者による合理的配慮の提供を義務化」が挙げられていることが確認できます。 ここでWebアクセシビリティと「合理的配慮」にはどのような関係があるのかおさらいをしてみたいと思います。総務省が公開しているみんなの公共サイト運用ガイドライン（2016年版）では、「障害者差別解消法を踏まえて求められる対応」として、以下のような記述があります。 2.2.2. 障害者差別解消法を踏まえて求められる対応 障害者差別解消
わたしは「Webアクセシビリティ」というものに、ライフワーク的に取り組んでいる。 と、言い切っていいはず。少し気恥ずかしいけれども、これまでそんなことを触れ回ったことはないので、そろそろ改めて記録するべきだと思って書いている。 これはポートフォリオの一部のようなものでもある。 というのも、イベントやセミナーにお呼びいただいて登壇などの機会が、ありがたいことに増えてきている（後述）。あるいは、何らかの場でコメントを求められたり、Twitterでイベント中のリアルタイムレポートを（偉そうに！）したり。 そんな時にふと、「出自のわからないヤツが四の五の言ってて、周りの人はどう思うのだろう……」と考えてしまうからだ。 更に今まで、個人事業主などでもないことをいいことに「自分の情報」をまとめることを避けてきた。 そろそろきちんと考え方などまとめる時期ではないかと、画面に向かっている。 わたしにとって
W3C Accessibility Guidelines (WCAG) 3.0の初期公開作業草案が発行されました | アクセシビリティBlog | ミツエーリンクス
2021年1月22日 W3C Accessibility Guidelines (WCAG) 3.0の初期公開作業草案が発行されました アクセシビリティ・エンジニア 中村（直） Web Content Accessibility Guidelines (WCAG) 2.0とそのマイナーバージョンの後続として開発されている、W3C Accessibility Guidelines (WCAG) 3.0がFirst Public Working Draft（初期公開作業草案）として発行されました。 元の言葉はWeb ContentからW3Cに変更されているものの、略称は同じWCAGになっているのは、WCAGという語がWebアクセシビリティを取り巻く世界ではよく知られている証左と捉えることもできそうです。 そんなWCAG 3.0ですが、Abstract（概要）には以下の1文が記載されています。
アクセシビリティ Advent Calendar 2020 の記事です。https://adventar.org/calendars/5011 よし分かった！アクセシビリティって大事だよねって思って取り組むじゃないですか。これ読んでる人って、最初から関心があって読んでる、もうすでに取り組んでいる人たちなわけでしょ？こういう人をAチームって呼びましょうか。 Aチームメンバーって、たいていある種のダブルバインド状態に陥るのですよ。でもそれって、日本固有の現象なんじゃないかなぁって思うのです。そこを掘り下げてみようといというのが、本稿の狙いです。 アクセシビリティについて、よくこんな説明を受けませんか？「アクセシビリティは障害者の（交通、建築、情報）アクセスを確保していく取り組みである」「と同時に、高齢者などのより広い人たちにも役立ちます」って。これって、JIS X8341-1 あたりから意図的
アクセシビリティについて
アクセシビリティについて ウェブアクセシビリティ方針 誰もがいつでも、迷わず「書く」「読む」「応える」ができる状態を目指す Amebaはこれまでもユーザーの生活に寄り添ってきました。 「人と情報をつむぎ 暮らしが豊かに育ちつづけるための機会をつくる。」をミッションに掲げ、ユーザーの「変化」にも寄り添っていきます。 今利用しているユーザーが歳をとっても、怪我や眼鏡を忘れてしまったときにも、ユーザーが日々遭遇するあらゆる環境や状況の変化が障害になるデザインであってはいけません。 アクセシビリティを高めると、障害者や高齢者、子どもも含めた誰もが使えるようになります。 そしてそれは、いつでも使いやすいにつながります。 Amebaはミッションの追求のために「誰もがいつでも、迷わずコンテンツを楽しむことができる」サービスを目指し、これからもアクセシビリティの向上に取り組みつづけていきます。 アクセシビ
Overlay Fact Sheet
What is a web accessibility overlay?Overlays are a broad term for technologies that aim to improve the accessibility of a website. They apply third-party source code (typically JavaScript) to make improvements to the front-end code of the website. Website add-on products claiming to improve accessibility go back to the late 1990s with products like Readspeaker and Browsealoud. They added text-to-s
国立国会図書館 図書館におけるアクセシブルな電子書籍サービスに関する検討会 令和5年7月 ※本書は、クリエイティブ・コモンズ・ライセンス 表示 4.0 国際（CC BY 4.0）に従って利用が可能です （本ガイドラインのPDF版（1.95MB）は国立国会図書館デジタルコレクションからご覧いただけます。） 令和元年6月、「視覚障害者等の読書環境の整備の推進に関する法律」（令和元年法律第49号。以下「読書バリアフリー法」という。）が施行された。令和2年7月には、同法第7条の規定に基づき、文部科学省及び厚生労働省において「視覚障害者等の読書環境の整備の推進に関する基本的な計画」（以下「基本計画」という。）が策定された。基本計画では「音声読み上げ機能（TTS）等に対応したアクセシブルな電子書籍等を提供する民間電子書籍サービスについて、関係団体の協力を得つつ図書館における適切な基準の整理等を行い、図
GitHub - yamanoku/awesome-japanese-a11y-companies: アクセシビリティに取り組む・推進している日本企業まとめ（随時更新）
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
Don't disable buttons
One of the most common accessibility issues I find (and fix) on client projects is dynamically disabled form buttons when a form is being submitted. Today I want to talk about why developers do it, why it’s bad, and what you can do instead. Let’s dig in! Why developers disable buttons Typically, I see the pattern used to prevent a form from being submitted a second time while waiting for the form
freee Accessibility Training
はじめに このサイトでは、Web サイトを実装する際に作ってしまいがちなアクセシビリティ上の問題と、それが起きにくくなるような実装の例を紹介しています。 freee アクセシビリティー・ガイドラインとあわせて見ることで、Web アクセシビリティへの理解を促進することを目的としています。 ただ各ページを見ていくだけでなく、キーボードのみによって操作したり、スクリーンリーダーで操作したり、開発者ツールで DOM の状態を見たりしてみてください。 キーボードで操作してみよう スクリーンリーダーを使ってみよう 画像 リンク ボタン フォーム 見出し 言語 ランドマーク ステータスメッセージ アクセシビリティチェックの練習ページ
26% of adults in the US have at least one disability. When you improve accessibility, it has an outsized impact on your current and future customers. It’s also a legal requirement. The most accurate way to check accessibility is manually on real devices. But that requires specialized expertise and a lot of time. Both of which are scarce on frontend teams. Teams at Twilio, Adobe and Shopify use a c
この記事は アクセシビリティ Advent Calendar 2021 アイコン別ウィンドウで開きます の第1日目の記事です。 この記事は PowerCMS X Advent Calendar 2021 アイコン別ウィンドウで開きます の第1日目の記事です。 この記事は やさしい日本語 Advent Calendar 2021 アイコン別ウィンドウで開きます の第10日目の記事です。 ※ Advent Calendar用に新規記事の作成も考えましたが、ルビをフル活用した ウェブコンテンツに関する実装ノウハウとして纏まっているほうが後の役に立ちそうだったので大幅に加筆して、改訂版としました。 「やさにちウォッチ」 アイコン別ウィンドウで開きますは私たち(アルファサード株式会社) アイコン別ウィンドウで開きますが運営する「やさしい日本語の情報をやさしい日本語で発信する」オウンドメディアです。す
board（SaaS）のアクセシビリティー改善の取り組みの現在地（2022年10月） - ヴェルク - IT起業の記録
boardという見積書・請求書等の作成を中心とした業務管理のSaaSのアクセシビリティー改善に取り組んでいるので、その内容や現在の状況について書きたいと思います。 これまでの取り組みの流れ 2021年11月に「Webアクセシビリティー向上のための取り組みについて」というアナウンスを出しましたが、2021年夏ごろから準備をスタートし、2022年からアクセシビリティー改善に関するデプロイを継続的に行っています。 boardではこれ以前の2019年に、色覚特性を考慮した配色にするカラーユニバーサルデザイン（CUD）の取り組みを行っています。NPO法人「カラーユニバーサルデザイン機構（CUDO）」に検証を依頼し、同機構が発行するカラーユニバーサルデザイン（CUD）認証を取得していました。 tamukai.blog.velc.jp 今回の取り組みは、WCAG（Web Content Accessib
Summary: In people with normal vision (or corrected-to-normal vision), visual performance tends to be better with light mode, whereas some people with cataract and related disorders may perform better with dark mode. On the flip side, long-term reading in light mode may be associated with myopia. Introduction Recently, spurred by the introduction of dark mode in IOS 13, a reporter asked me to comm
How should disabled buttons appear when they’re inactive? The way most designers indicate an inactive state is by graying out the button. However, this approach often catches users off-guard because the button’s enabled state looks nothing like the disabled one. Going from gray to fully colored is an unpredictable change that can affect user expectations. For a smooth and seamless experience, it’s
次の Button は tag の指定により、HTML 要素を出し分ける Component です。出力結果は下段のとおりです。この Component を通し a11y を強化する型注釈を考察したので、メモとして投稿します。 <Button tag="button">+1</Button> <Button tag="a" role="button">+1</Button> <Button tag="input" type="button" value="+1" />
A11yAutomation
A11y Automation Tracker A more thorough way to track the potential accessibility violations and the automated linters and tests currently available. Accessibility Automation Catch potential a11y violations faster. It can be hard to keep track of the potential accessibility violations in your code. More automation is being created for linting rules and tests-- and now there is a single site to trac
こんにちは！i3DESIGNデザイナーチームです。 今回は、先日発刊させて頂きましたホワイトペーパー”とってもやさしいウェブアクセシビリティチェックリスト”の一部を記事にまとめたいと思います。 ホワイトペーパーには、ウェブアクセシビリティチェックリストというシートがあります。 このシートは、JIS X 8341-3:2016(アクセシビリティについてのJIS規格)に基づき、私たちの解釈で分類・文章を再構成しました。 エンジニアやデザイナーでない方でも理解しやすいよう、一部内容を簡略化したり、複数の達成基準をひとつにまとめたりしている箇所があります。 このチェックリストを「現在提供しているウェブサービスが、どこまで達成できているのか」を図る指標として、ご活用ください。 👇ウェブアクセシビリティチェックリストがついているホワイトペーパー”とってもやさしいウェ
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
APCA何もわからない - Qiita
Accessible Perceptual Contrast Algorithm（APCA）はWCAG 3.0において、コントラスト比に関する新しい基準として提唱されているアルゴリズムです。 つたない英語力でそのコンセプトや概略を読み込んでみて、なんとなく以下のように理解しました。 コントラストというのは単純な背景色と前景色の差分だけで判断できるものではない。錯覚とかあるからね。フォントのサイズやウェイト、行間、コンテキストなどから総合的に知覚されるものだ、ということらしい。 文字の読みやすさに影響するコントラストの知覚に関しては、フォントサイズやウェイトなどからなる空間周波数の影響をとくに受ける。 空間周波数はWikipediaによると「空間的な周期をもつ構造の性質」とのこと、なんとなく一定の二次平面上のパターンの複雑さってことかなぁ？このパターンの刺激が一定程度を超えると知覚できるよう
a11y由来のスタイリング考察
aria属性 や role属性 を用いたスタリング実例は、まだあまり聞くことがありません。例えば CSS Modules の場合次の様な指定が可能であり、a11yとスタイリングを両立できるため、アプローチとして良さそうと考えています。 .text { color: #000; } .text[aria-invalid=true] { color: #f00; /* エラーの表現とか */ } .menu[aria-expanded=false] { display: none; /* メニューの開閉表現とか */ } .menu[aria-expanded=true] { display: block; /* メニューの開閉表現とか */ }
同僚の @wadackel とウェブアクセシビリティの検証ツール acot （アコット）を作っていて、まだまだ途中だけど、Webアクセシビリティ Advent Calendar 2020の18日目になってしまったのでご紹介。 https://github.com/acot-a11y/acot すでにWeb アクセシビリティの検証ツール acot を作ってる - wadackel.meで詳しく紹介されているので、私の記事では補足的にacotを作るモチベーションや経緯、アイデア、どんなルールが書けるかなどを紹介する。 モチベーションとか経緯とか 以前に @wadackel と開発していたWINTICKETというサービスでは、ウェブアクセシビリティに関する開発ポリシーとコードレビュー、そしてeslint-plugin-jsx-a11yによって一定の品質が保たれていた。 ウェブアクセシビリティ -
ブラウザが HTML を解釈する方法はその他のプログラミング言語と比べてはるかに寛容です。ブラウザは HTML 内に構文エラーを発見しても大抵の場合は問題なくページに表示されます。ブラウザには、誤って書かれたマークアップを解釈する方法を決定するための組み込みのルールがあるためです。 例として以下のコード例を確認してみましょう。<ul> タグは仕様でその子要素には 0 個以上の <li> タグまたは script supporting elements (<script> と <template>)のみが許可されています。従って、<ul> タグの子要素に <a> タグを配置している以下のコードは構文エラーとなります。 <ul> <a href="/home">Home</a> <a href="/about">About</a> <a href="/blog">Blog</a> <a hre
AtomicDesign の仕分けをテストで判定する
AtomicDesign には「Atoms か Molecules か？、Molecules か Organisms か？」の判定が悩ましい…という課題があります。これは、フロントエンド・デザイナー間ではもちろん、デザイナー同士でも解釈差異があるようです。明確な判定軸がなければ、いずれブレが生じ、規律のないデザインシステムになりかねません。 この状況に対し「アクセシビリティを軸にする」という発想に至り、どのように仕分けるかを先日の投稿で紹介しました。このアイディアはタイトルのとおり「テスト」で機械的に判定可能です。 AtomicDesign カスタムマッチャー関数 「AtomicDesign の仕分けをテストで判定する」ために、独自のカスタムマッチャー関数を設けます。普段利用している'@testing-library/jest-dom'もカスタムマッチャーのライブラリですが、このカスタムマ
チームラボ、成田国際空港公式WEBサイトのリニューアルにおいて、企画、UI/UX設計、デザイン、開発を担当。2024年2月21日公開。
チームラボは、成田国際空港公式WEBサイトのリニューアルにおいて、企画、UI/UX設計、デザイン、開発を担当しました。全ての人の快適な空港体験をサポートするサイトに。2024年2月21日公開。 「ハブ・アンド・スポーク」をコンセプトに、これまでサイト内に、バラバラに点在していたコンテンツを、再整理しました。ページ間のつながりに一貫したルールを設け、かつ、カテゴリ横断で情報を集約し、連携するいくつかのハブを設ける情報設計によって、さまざまな目的を持ったユーザーが、求める情報へストレスなくたどりつけるサイト構造を実現すべく、再構築しました。 「チームラボCMS」の導入によって、サイト内のコンテンツの一元的管理と動的なページ生成を可能にし、有機的なコンテンツの集約と連携を実現しています。 また、すべてのユーザーへの使いやすさを確保することを目的にウェブアクセシビリティの改善を徹底し、日本工業規格
アウトライン消去処理を見直しました
A guide to designing accessible, WCAG-conformant focus indicators
A guide to designing accessible, WCAG-conformant focus indicators Published on 13 Aug, 2021 | Last updated on 27 Aug, 2023 | Takes approximately 24 min to read This post is a modified, text-only excerpt from my Practical Accessibility video course. I wanted to share this guide to designing accessible focus indicators because focus styles are a recurring discussion I have with designers I wor
Introducing Learn Accessibility Stay organized with collections Save and categorize content based on your preferences. Today we are launching Learn Accessibility—the next in our series to help get you up to speed with modern web development. Today we are excited to announce a new addition to our series of courses on web.dev. Learn Accessibility is a brand new course written by Carie Fisher that wi
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WCAG2の「十分な達成方法」について - 水底の血
ソニーのイメージング技術でロービジョン者の創作意欲に寄り添う網膜投影カメラキットを発売
Accessibility Tree と Accessibility Object Model
フォーカスの分類 | アクセシビリティBlog | ミツエーリンクス
生きづらさを、生きやすさに 大人の発達障害ナビ - 武田薬品工業 | 「大人の発達障害ナビ」
すべての人のためのアクセシビリティ対応 #iosdc
民間に対する法律上の「合理的配慮」の見直しについて | アクセシビリティBlog | ミツエーリンクス
わたしとWebアクセシビリティ - note
アクセシビリティの二重性｜UMEGAKI Masahiro
電子図書館のアクセシビリティ対応ガイドライン1.0｜国立国会図書館―National Diet Library
Accessibility testing with Storybook
やさにちウォッチのルビ(ruby - ふりがな)のスタイル (改訂版)
Dark Mode vs. Light Mode: Which Is Better?
Why You Shouldn’t Gray Out Disabled Buttons
a11y を強化する ReactComponent の型推論
Redirecting to https://comica11y.humaan.com
とってもやさしいウェブアクセシビリティチェックリスト｜i3DESIGN Designers
The Myths of Color Contrast Accessibility
Web アクセシビリティの検証ツール「acot」 / masuP.net
markuplint で HTML の構文チェックを始めよう
https://color.adobe.com/ja/create/color-accessibility
STUDIOサイトのアクセシビリティ強化のお知らせ | STUDIO Blog
Introducing Learn Accessibility | Blog | web.dev
shosuzki.blog.jp
www.automesseweb.jp
kimini.online
shueisha.online
tabelog.com
oggi.jp