dialog要素を使用したモーダルウィンドウの実装例 ｜ TAKLOGdialog要素を使用したアクセシブルなモーダルウィンドウの実装メモです。このブログのハンバーガーメニューで使われている実装と同じものになります。 dialog要素は現在全てのモダンブラウザでサポートされているため、iOS Safariをどこまで対応するかに依りますが実務で使用しても差し支えないでしょう。
フロントエンドid属性管理戦略
アクセシビリティのチェックなどを行っているとよく発見される問題にIDの重複がある。HTMLではid属性はグローバル属性でありすべての要素に指定できるが、その値は一意である必要があり、ドキュメント内において重複があってはならないことになっている。 ただ実際に実装してみたり開発経験のある人ならご存知のとおり、滅多なことでこの重複が問題になることは少ない。HTMLのパースは中断することなくブラウザは要素を描画するし、CSSのセレクタは期待通り要素を特定してスタイルを適用する。なのでこの重複に対してそこまで気を使ってこなかった人も多いだろうし、先のアクセシビリティチェックでよく発見されるのもそういった背景があるのだろうと思う。 しかし表面的に問題が起きていなくとも、実際には重大な構文エラーであり、潜在的に多くの問題を抱えている。IDの重複が引き起こす問題は単純で、そのIDを参照する処理はひとつめの
HTML: The Inaccessible Parts
I’ve always abided in the idea that “HTML is accessible by default and then we come along and mess it up.” In a lot places this is very true and by just using a suitable HTML element instead of a generic div or span we can have a big Accessibility impact. But that’s not always the case. There are some cases where even using plain ol’ HTML causes accessibility problems. I get frustrated and want to
モーダルダイアログの未来はdialog要素で幸せになるか
こんにちは、及川です。 今回のテーマはdialog要素です。みなさん、dialog要素はご存知でしょうか？もう現場で使っているでしょうか？ dialog要素はいわゆるダイアログボックスを描画するための実装で、HTML要素の中では比較的新しめの要素です。このdialog要素の仕様を理解し、モーダルダイアログコンポーネントとしてどのように実装するかを学習することが本記事のゴールです。 dialog要素 ってなに？dialog要素はダイアログボックスを表現するためのHTML要素です。 cf) <dialog>: ダイアログ要素 – HTML: ハイパーテキストマークアップ言語 | MDN dialog要素は新しめとは言うものの意外と長い歴史をもっていて、2012年あたりから今の形でHTMLの草案に追加されたり削除されたりを繰り返し、全てのモダンブラウザで動くようになったのが2022年のことです。
`<iframe>` 要素による外部リソース埋め込みには `<a href>` のリンクを付与して欲しい
これはアクセシビリティのカレンダー | Advent Calendar 2023 - Qiita(qiita.com) の12日目の記事です。 Web アクセシビリティにおいて「画像に適切な代替テキストを設定する」はもっとも基本的なことのひとつとして認識されています。動画や音声では字幕がそれに相当するでしょう。また、スマートフォン出現以来使われる機会は少なくなっているものの、イメージマップ にも代替テキストは必要です。 ところでこれらの画像、動画、音声、イメージマップは HTML において埋め込みコンテンツ（Embedded content） に分類されており、その要素一覧は次のとおりとなります。 画像 picture, source, img 主に外部リソースの埋め込み iframe, embed, object 動画、音声 video, audio, track イメージマップ map
HTML: ログイン・ユーザー登録フォームの厳選ベストプラクティス11（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 11 HTML best practices for login & sign-up forms—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/05/24 原著者: Andrey Sitnik（PostCSSとAutoprefixerの作者、首席フロントエンドエンジニア） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。 はじめに ログインフォームやユーザー登録（サインアップ）フォームは、ほとんどのWebサイトで使
アイコンボタンのアクセシブルな名前はボタンが持つべきかアイコンが持つべきか
本記事は<svg>要素のみを持つ<button>要素（アイコンボタン）にアクセシブルな名前（accessible name）を持たせる方法について調査した結果と、WCAG 2.2のSuccess Criterion 1.1.1 Non-text Contentに関する私見をまとめたものです。 結論 アイコンボタンの非テキストコンテンツは装飾ではなく意味を持つ画像なので、ボタンではなくアイコン画像自体にアクセシブルな名前を持たせるべきだと考えます 一方で、非テキストコンテンツの範囲をアイコンのみではなくアイコンボタン全体と捉えると、ボタンにアクセシブルな名前を持たせることも妥当に思えますが、<img>要素や<svg>要素など様々な種類のアイコン画像の実装を想定した場合、やはりボタンにアクセシブルな名前を持たせない方針に倒す方がシンプルだと思います <svg>要素のみを持つ<button>要素
dialog要素を使ってアクセシブルなモーダルを作ってみよう
この記事について 2022 年 3 月、Safari15.4で HTML の dialog 要素が標準でサポートされました。 これにより、全ての主要ブラウザ（Chrome, Edge, Safari, Firefox）で dialog 要素が利用可能になり、今まで@react-ariaなどのライブラリに依存していたモーダル実装を見直したいと思っている方も多いのではないでしょうか。 本記事では、HTML の dialog 要素の使い方からアクセシブルなモーダルの要件、それらを全て満たすアクセシブルなモーダルの実装例についてご紹介します 🫡 そもそもアクセシブルなモーダルの要件って何？ そもそもアクセシブルなモーダルの要件とはどのようなものを指すのでしょうか。 Accessible Rich Internet Applications (WAI-ARIA) 1.1やARIA Authorin
ウェブコンテンツアクセシビリティガイドライン（WCAG）は何が難しいのか、あるいは難しさに立ち向かう方法 - 水底の血
LINEヤフーにおけるこれからのアクセシビリティというスライドで「WCAGはハードルが高い」という文言を見かけました。どうしてハードルが高い、言いかえるならば難しいとされるのか、その難しさはどこから来るのかをちょっと深掘りしてみようと思います。 WCAGという言葉について、改めて見ておきましょう。WCAGはもっぱら、Web Content Accessibility Guidelines（ウェブコンテンツアクセシビリティガイドライン）というW3Cの発行する技術文書を指すわけですけども、現時点でよく参照されるのがウェブアクセシビリティ基盤委員会（WAIC）が公開している日本語訳のWCAG 2.1でしょう。ちなみに本家のW3Cは、WAICが現時点で公開しているWCAG 2.1の改訂版を今年9月に公開し、さらにバージョンの進んだWCAG 2.2を先月に発行したばかりだったりします。 WCAG 2
dl/dt/ddのスクリーンリーダーの読み上げをなんとかする
この記事で取り上げる手法は実験的です。何か問題があった際に、すぐに修正・改善できる立場にないのであれば採用するべきではありません。 期待と異なる読み上げ スクリーンリーダーを使ったことがある開発者ならご存知のとおり、dl要素、dt要素、dd要素の構造はスクリーンリーダーの読み上げにおいては期待と異なる挙動をします。おそらくは歴史的な経緯からそうなっているのだと思いますが、この挙動を理由にdl要素、dt要素、dd要素を使わないという選択をする開発者もいるようです。 現行のスクリーンリーダーの読み上げは概ね以下のような挙動をします。HTMLコメントの部分が読み上げられる内容とします。 <dl> <dt>りんご</dt> <!-- リスト 1/4 りんご --> <dd>バラ科の落葉高木</dd> <!-- リスト 2/4 バラ科の落葉高木 --> <dt>みかん</dt> <!-- リスト 3
ウェブアクセシビリティの基本：ランドマークロールを理解する
ページ冒頭におくメインコンテンツ等へジャンプするためのリンクです。tabキーでフォーカスが当たるまでは非表示にしているサイトも多いです。 ランドマークが適切に実装してあれば不要という意見もありますが、2022年の支援技術利用状況調査報告書では「よく使う」「時々使う」を含めると80%になるようです。 region role="region"は、他に適切なランドマークが存在しない場合に使用される一般的なランドマークです。 regionロールにするにはsection要素を使ってマークアップします。 section要素はheader, footer要素の例のように、特定の条件下でロールが変わります。 section要素のデフォルトのロールは「対応するロールなし」であり、ランドマーク要素ではありません。ChromeのアクセシビリティツリーではSectionと表示されますが、これは独自の仕様のようです
そのaria-labelは本当に必要ですか？ | アクセシビリティBlog | ミツエーリンクス
2023年5月31日 そのaria-labelは本当に必要ですか？ チーフアクセシビリティエンジニア 黒澤 アクセシビリティ対応には複数の方法がありますが、方法によって運用負荷はさまざまです。 私はお客様に、aria-labelを設定するのではなく、画面に表示されているテキストで情報が伝わるようにすると運用負荷を抑えられますよ、という話をすることがあります。 aria-labelは指定をミスするとほぼ確実にアクセシビリティの問題につながりますが、画面に表示されないため、作業漏れが生じやすく、指定ミスに気がつきにくい性質があります。 実際、お客様サイト・サービスの現状把握や競合調査の業務ではaria-labelの作業漏れや指定ミスによるアクセシビリティの問題を多数見てきました。 この記事では実際の問題例をサイト・サービスが特定されないように調整したうえで紹介していきます。 紹介した例はいずれ
リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA
ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。本記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクション部分で、シンプルなHTML・CSSだけでより良くできる17個に絞って紹介します。 下記サンプルでNG例とよい例の両方を紹介しています。実際に違いに触れながら本記事を読むと分かりやすいです。 サンプルを別ウインドウで開く コードを確認する 1. divタグをボタンにするのは避けよう 見た目はボタンのようでも、<div>要素で実装したボタンはアクセシビリティの観点からもよくありません。ボタンとしての機能を持つなら<button>要素を用いるのが多くの場面でも有効です。もし、諸事情で<div>要素を用
マークアップのわかり方
この記事は、2022年10月28日に開催されたDIST.37「マークアップな夜」での発表「マークアップのわかり方」をもとにしたものです。当日は話せなかった内容も大幅に追加しています。 現代における「マークアップ」とはどのような行為なのか。いかにそれと向き合っていけばいいのか。そういったことについて考えてみます。 マークアップの議論においては、「マークアップには正解がない」という意見が決まって出ます。正解がないと言うならば、たいていなんであってもそうです。たとえばCSSやJavaScriptの書き方には「正解」があるのかと考えてみると、必ずしもそうではありません。 しかし、ことさらマークアップにおいてこれがよく言われる理由としては、妥当性を判断する基準がわからない、ということでしょう。 というのも、CSSなら望む通りの見た目になればとりあえずOKだし、JavaScriptでも意図した通りの振
アクセシビリティ第一歩、labelが超重要な話。~ placeholderじゃダメなの？~
アクセシビリティ観点で必須の<label>要素について、 その重要性 なぜ重要なのか。メリット・デメリット placeholderじゃダメなのか などについてまとめます。 labelの重要性 アクセシビリティ観点でlabelはどのくらい重要なのでしょうか？ 適合レベル A 適合レベルとは、アクセシビリティ上の重要度を示す指標のことです。 WCAG 2.1の適合レベルは、レベルA、レベルAA、レベルAAAの3つに分かれています。 その中でレベルAとは、 最低限のレベルであり、達成できていないと、スクリーンリーダーや拡大鏡などの支援技術を用いてもサービスを利用できないことを意味します。 なぜそんなに重要？ label要素があることのメリット 1. 選択が容易になる ラジオボタンやチェックボックスなどの小さな選択欄の場所を正確にクリック/タップできなくても、隣接するラベルをクリック/タップするこ
React で h1-h6 を正しく使い分ける
Web の基礎を支える HTML の最も重要な要素の一つである h1-h6 要素ですが、 React を始めとするコンポーネントベースのライブラリを特に意識せずに利用すると、SEOやアクセシビリティー上の意図せぬ問題を生むことがあります。 この記事では、 React を例に取り h1-h6 を使うことで生じる問題と、その解決策を３つずつご紹介します。 尚、この記事で紹介するコードスニペットは GitHub リポジトリに動作する状態で公開しておりますので、併せてご参照ください。 前提知識 読者のみなさまは、HTMLの要素 h1-h6 にどのような役割があるか説明できますか？ 大きい文字を出したかったらh1を使って、それより少し小さい文字を出したかったらh2を使う...わけではありませんでした。h1-h6 は 「見出し要素」 と呼ばれ、文章の見出しとなるテキストをマークアップするのに用いられて
WCAG2の「十分な達成方法」について - 水底の血
あるいは必要十分条件について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の達成基準の違反となる：
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
You Don't Need ARIA For That - HTMHell
英字の大文字・小文字・小文字＋CSS uppercaseの読み上げ確認
https://codepen.io/me_tks_/pen/bGKVmQo