以前公開した WEBサイトのアクセシビリティ対応では、全体的な考え方について触れました。 今回はその中でも利用頻度の高いダイアログ（モーダルウィンドウ）に焦点を当てて解説します。 ダイアログは、入力フォームの送信確認や画像の拡大表示など、Webサイトでよく利用される便利な仕組みです。 しかし、アクセシビリティ対応が不十分なまま実装されるケースも少なくありません。 特にキーボードだけで操作するユーザーや、スクリーンリーダーを利用するユーザーにとっては、誤ったダイアログの実装が操 […]
WEBサイトのアクセシビリティ対応をしてみよう！【ダイアログ（モーダルウィンドウ）編】
以前公開した WEBサイトのアクセシビリティ対応では、全体的な考え方について触れました。 今回はその中でも利用頻度の高いダイアログ（モーダルウィンドウ）に焦点を当てて解説します。 ダイアログは、入力フォームの送信確認や画像の拡大表示など、Webサイトでよく利用される便利な仕組みです。 しかし、アクセシビリティ対応が不十分なまま実装されるケースも少なくありません。 特にキーボードだけで操作するユーザーや、スクリーンリーダーを利用するユーザーにとっては、誤ったダイアログの実装が操 […]
アクセシビリティを重視した新時代のリセットCSS、ベースとなるより良いスタイルシートを求める人に最適 -UA+
モダンブラウザが主流となった現在、リセットCSSの必要性が薄れてきました。とは言え、各ブラウザに搭載されているUAスタイルシート（ユーザーエージェントスタイルシート）だけをベースにするのはまだ時期尚早です。 スタイルをリセットしたり、ノーマライズするのではなく、既存のUAスタイルシートを改善し、ブラウザの仕様が不十分な要素にのみスタイルを適用することに重点を置いた、これまでとは異なる新時代のリセットCSSを紹介します。 UA+ UA+ -GitHub UA+の特徴 他のリセットCSSとの比較 uaplus.cssの中身 uaplus.cssの中身（コメント付き） UA+の特徴 UA+（ユーザーエージェントプラス）は、これまでのリセットCSSとは異なるタイプのスタイルシートです。各プロパティのリセットとノーマライズ（正規化）を行うのではなく、既存のUAスタイルの改善に注目し、ブラウザの仕様が
【2025年最新】ウェブアクセシビリティで対応すべきことは？障害者差別解消法改正との関連性｜Goodpatch Blog グッドパッチブログ
ウェブアクセシビリティとは ウェブアクセシビリティとは「ウェブ提供物の情報やサービスが利用可能か、またはその到達度」を意味する（利用者の障害の有無や程度・年齢・利用環境を問わない） 【ウェブアクセシビリティが確保されている状態の例】 ・目が見えなくても情報が伝わること・操作できること ・キーボードだけで操作できること ・一部の色が区別できなくても得られる情報が欠けないこと ・音声コンテンツや動画コンテンツで、音声が聞こえなくても話している内容が分かること 出典：デジタル庁｜ウェブアクセシビリティ導入ガイドブック ウェブアクセシビリティとは利用者の障害の有無や程度・年齢・利用環境を問わず、「ウェブ提供物の情報やサービスが利用可能か、またはその到達度」を意味します。一般的に「ウェブアクセシビリティが確保されている状態」とは、上記項目を満たしている状態などであると「デジタル庁のウェブアクセシビリ
アクセシビリティーに考慮するHTMLコーディング - WAI-ARIAでスクリーンリーダーの読み上げがこう変わる - ICS MEDIA
ナビゲーションリスト ナビゲーションリストは、主にメニューやリンクの一覧を整理して表示するためのUI要素です。自分が今どのページを訪れているのかを示すことによって、ユーザーはウェブサイトの構造や階層を理解しやすくなります。 ▼ 実装例（一部抜粋） <li><a href="#">CSS</a></li> <li><a href="#" aria-current="page">JavaScript</a></li> <li><a href="#">その他</a></li> ▼ スクリーンリーダー（VoiceOver） aria-current="page"を指定した要素は「現在のページ、リンク、JavaScript」と読み上げられます。また、リンクが一度でもクリックされていたら、「閲覧済み」という音声が追加されます。 ▼ スクリーンリーダー（ナレーター） 「リンク、JavaScript」と読
CSSの@mediaは、スクリーンサイズだけじゃない！ 最近の実装で使用されるメディアクエリのまとめ -mediaquery.style
Webサイトやスマホアプリの実装でよく使用される、CSSのメディアクエリのコードを紹介します。 モバイルファースト用をはじめ、ライトモード・ダークモード用、アクセシビリティ、ホバーエフェクト用、デバイスの向き用など、さまざまなメディアクエリのコードをコピペで簡単に利用できます。スニペットに登録しておくと、便利です。
読み込むだけでアクセシビリティチェックを行えるCSS・「Checka11y.css」
Checka11y.cssは読み込むだけでアクセシビリティチェックを行えるCSSです。 よくあるアクセシビリティチェックツールのと同等の精度かどうかは個人的には少し懐疑的ですがCSS製とあって非常に手軽に利用できるメリットがあります。 CDNも用意されていて <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/checka11y-css@:version/checka11y.css" />上記の:versionの箇所を過去のリストから好みで選んで使ってくれ、との事でした。 OSSとしてソースコードが公開されている他、各ブラウザの拡張機能も提供してくれているようです。ライセンスはMIT。 Checka11y.css
Webのアクセシビリティを向上させる、始めに取り組んでおきたいガイドラインの10項目のまとめ
Webの創始者であり、W3Cのディレクターを勤めるTim Berners-Lee氏の言葉に、「Webが持つ力とは、その普遍性にあります」というのがあります。Webサイトに誰もがアクセスできるようにするのは、わたし達の責任です。 Webのアクセシビリティは机上では難しいと思われがちですが、実際に取り組んでみるとそんなに難しいものではありません。障害者、スクリーンリーダのユーザー、低速接続のユーザーのアクセシビリティで、比較的簡単に取り組める項目を紹介します。 10 guidelines to improve your web accessibility 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webアクセシビリティとは何ですか？ 01.カラーに依存しない 02.ズームを無効にしない 03.alt属性のあなたが知らないかもし
総務省｜情報バリアフリー環境の整備｜みんなのアクセシビリティ評価ツール：miChecker (エムアイチェッカー)Ver.3.1
「みんなのアクセシビリティ評価ツール：miChecker」（以下、「miChecker」という。）は、JIS X 8341-3:2016（高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第3部：ウェブコンテンツ）に基づくウェブアクセシビリティ対応の取組を支援するために、総務省が開発し、提供するアクセシビリティ評価ツールです。その第一の目的は検証作業の支援です。加えて、付属文書等に沿って検証作業を行うことで、関連する知識の習得が可能です。 このページでは、miChecker Ver.3.1 をダウンロードすることができます。miCheckerのダウンロードおよびインストールは、必ず以下の説明をよく参照した上で実施して下さい。 お知らせ miCheckerの実行環境等 ダウンロード・インストールの手順 miCheckerのダウンロード miCheckerのソースコ
アクセシビリティテクニック(音声読み上げ) - アクセシビリティ・ユーザビリティを考慮したWEBページ作り
ウェブページのタイトルはページ内容を要約したものにすること ハイパーリンク画像は必ずALT属性を付けること ハイパーリンクではない画像は必要に応じてALT属性を付けること 重要な意味を持つものには記号をもちいないこと ナビゲーション部分を読み飛ばせるようにすること TABLEを使う場合、音声ブラウザが読む順番を考えること 文の途中で改行やスペースを入れないこと ウェブページが何語で書かれているかHTMLで適切に宣言すること 多言語の乱用は避け、誰にでも分かりやすい言葉を使うこと ウェブページで音楽を鳴らさないこと リストの番号表記は音声では読み上げられないので注意すること ページをアクセシブルにできない場合は、同等の情報を持つテキストページを用意すること。更新は、通常ページと同じタイミングで行うこと 特定の機種に依存した文字（外字・記号）は使わないようにすること 画像認証を用いないこと フ
Webアクセシビリティは、誰がどう必要としているのか？
Webアクセシビリティは、誰がどう必要としているのか？昨年少しの間ですが入院しました。その間は大人しくしていればいいものを、脊髄麻酔や鎮痛剤が効いて苦痛のない時は退屈なもんで、Webサイト閲覧・メールチェックなどはしていました（私の行きつけの病院はインターネット利用可）。しかし体が思うように動かないので、今までどおりWebサイトを閲覧するのは困難。その時初めてアクセシビリティの大切さを身を持って感じ、それから少しずつお勉強している次第です。今回はWebサイト閲覧におけるアクセシビリティについて考えてみようと思います。 Web アクセシビリティとは「アクセシビリティ」とは、アクセスのしやすさを意味する言葉で、転じて利用環境や身体の制約に関係なく誰でも使えるという意味で使われます。どのような状況でも Web 上のコンテンツや機能を十分に利用できる Web サイトを「アクセシブルである」と言えま
カラー・コントラスト・アナライザー 日本語版 ― インフォアクシア
「カラー・コントラスト・アナライザー」は、色のチェックツールです。前景色と背景色のコントラストをチェックしたり、色覚の違いによる見え方をシミュレーションしたりすることができます。 このソフトウェアは、The Paciello Groupが提供しており、Windows版とmacOS / OS X版があります。 色のコントラストのチェック ウェブコンテンツの前景色と背景色のコントラストが十分かどうかを判定する基準には、W3Cの『WCAG 2.0』で定義されている「コントラスト比」の計算式を用いています。このコントラスト比を用いた達成基準は、そのまま日本工業規格の『JIS X 8341-3:2016』でも採用されています。 1.4.3 コントラスト（最低限レベル）に関する達成基準 テキスト及び文字画像の視覚的提示には，少なくとも4.5:1 のコントラスト比がある。ただし，次の場合は除く（レベル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SmartHR ACCESSIBILITY（スマートHR アクセシビリティ）｜仕組みで解決できることを、やさしさで解決しない。
Webサイトのアクセシビリティをチェックする為のライブラリ・「tota11y」 - かちびと.net