【JavaScript】ドロップダウンメニュー(メガメニュー)を作る : タッチデバイスやキーボード操作対応！ | Code.Yu
ホーム/ブログ/JavaScript/【JavaScript】ドロップダウンメニュー(メガメニュー)を作る : タッチデバイスやキーボード操作対応！ 形だけ作ろうと思えば、CSSだけでも簡単に作れてしまうドロップダウンメニュー(メガメニュー)ですが、タッチデバイスやキーボード操作まで考慮すると、意外と奥が深く難しかったりします。 今回は「どんなデバイス」でも「どんな操作方法」でも、使いやすいドロップダウンメニューを作ってみます。 ドロップダウンメニューは「クリック」と「ホバー」どちらで展開するべきか？ 以下の理由から、「ドロップダウンメニューはクリックで展開するべき」と個人的には考えています。 (ホバーを否定する気はなく、両者にメリデメが存在します。) ホバー操作は主にPC特有の操作方法ですが、クリック操作はタッチデバイスとPCで共通の操作方法になります。どのデバイスでも操作を統一するほう
第2回支援技術利用状況調査報告書 | 日本視覚障害者ICTネットワーク
掲載：2022年9月20日 更新：2024年4月8日 更新履歴 2024年4月8日：本調査の報告会のレポートへのリンクを追加 参考：イベント・レポート：第2回支援技術利用状況調査結果報告会 はじめに この報告書は、日本視覚障害者ICTネットワーク (JBICT.Net) が2022年4月から5月にかけて実施した第2回支援技術利用状況調査の結果をまとめたものです。 各設問（報告書末尾の「参考：設問一覧」を参照）への回答状況と、これらに基づいた集計結果を示します。また、参考情報として、2021年に実施した前回調査の結果との比較を示している項目もあります。 参考：第1回支援技術利用状況調査報告書 調査概要 調査期間 本調査は、2022年4月27日から5月31日の期間実施し、Webとメールで回答を受け付けました。 回答者数 上記期間中に266件の回答が寄せられました。このうち、Webによる回答が2
WAI-ARIA 1.0 Authoring Practices
How to build accessibility semantics into web patterns and widgets ARIA Authoring Practices Guide (APG) Home Learn to use the accessibility semantics defined by the Accessible Rich Internet Application (ARIA) specification to create accessible web experiences. This guide describes how to apply accessibility semantics to common design patterns and widgets. It provides design patterns and functional
クライアント側のフォーム検証 - ウェブ開発の学習 | MDN
クライアント側の検証は最初のチェックであり、ユーザーの使い勝手を良くするために重要な機能ですクライアント側で不当なデータを捕捉することで、ユーザーはすぐに修正できます。 もしも無効なデータがサーバーに送られてから拒否された場合、サーバーへの往復とクライアント側に戻ってユーザーにデータを修正するように指示することになり、かなり時間を浪費します。 しかし、クライアント側の検証はセキュリティ対策とは考えられません。アプリは常にサーバー側でもクライアント側と同様に送信されたデータのセキュリティをチェックしてください。なぜならクライアント側の検証は容易に回避することができて、悪意のユーザーは簡単に、サーバーへ不正なデータを送信できます。 有名なサイトの登録フォームに行き、データを求められている書式で入力しないと、フィードバックがあることに気づくでしょう。 次のようなメッセージが表示されます。 「この
HTML Standard 日本語訳
レンダリングされないが、 ページ内検索およびフラグメントナビゲーションで内部のコンテンツにアクセスできる。 この属性の欠損値のデフォルトはnot hidden状態であり、不正値のデフォルトはhidden状態である。 要素がhidden状態のhidden属性を持つ場合、それは、要素がまだないこと、またはもはやページの現在の状態には直接関係がない、または、ユーザーが直接アクセスするのとは対照的に、ページの他の部分で再利用するコンテンツを宣言するために使用されていることを示す。ユーザーエージェントは、hidden状態にある要素をレンダリングすべきでない。 この要件は、スタイルレイヤーを通して間接的に実装されてもよい。たとえば、ウェブブラウザーは、レンダリングセクションで提案されているルールを使用してこれらの要件を実装することができる。 要素がhidden until found stateにある
HTML Standard 日本語訳
Firefox1+Safari1+Chrome1+Opera8+Edge79+Edge (Legacy)12+Internet Explorer5.5+Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+ カテゴリー：フローコンテンツ。フレージングコンテンツ。type属性がHidden状態でない場合：インタラクティブコンテンツ。If the type attribute is not in the Hidden state: Listed, labelable, submittable, resettable, and autocapitalize-and-autocorrect inheriting form-associated element.If
HTML Standard 日本語訳
4.10.17 フォームコントロールのインフラ4.10.17.1 フォームコントロールの値4.10.17.2 可変性4.10.17.3 コントロールとフォームの関連付け4.10.18 フォームコントロールの共通属性4.10.18.1 名前フォームコントロール：name属性4.10.18.2 要素の方向を送信する：dirname属性4.10.18.3 ユーザー入力長さの制限：maxlength属性4.10.18.4 最小入力長の要件を設定する：minlength属性4.10.18.5 フォームコントロールの有効化および無効化：disabled属性4.10.18.6 フォーム送信属性4.10.18.7 オートフィル4.10.18.7.1 オートフィルフォームコントロール：autocomplete属性4.10.18.7.2 Processing model4.10.19 テキストフィールド選択の
markuplint を VSCode に導入してみた - Qiita
背景 「HTML5」から「HTML Living Standard」に変わったことで, 変更・追加・廃止となったタグの要素・属性をチェックできる markuplint というリンターを発見したので導入してみた。 概要 markuplint とはその名の通り「マークアップすること」に関するlintツールで, HTML Living Standardに対応しています。 また, React や Vue などのフレームワークや, EJS などのテンプレートエンジンのためのプラグインも用意されていて, 各種ルールについても柔軟に設定できるようになっています。 導入手順 VSCode に markuplint プラグイン導入
Markuplint - An HTML linter for all markup developers. | Markuplint
Conformance checkingThe markup needs to written valid code. This is important to keep the promise of the standards that do not break webpages through each user agent. Markuplint can conformance checking given the specs that are HTML Standard, WAI-ARIA, and more. On Your House RulesYou may have the house rules on your project or your organization. You can check based on your policy or your manageme
markuplint で HTML の構文チェックを始めよう
ブラウザが 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
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の達成基準の違反となる：
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
H33: title 属性を用いて、リンクテキストを補足する | WCAG 2.0 達成方法集
C7: Using CSS to hide a portion of the link text | WAI | W3C