HTML 【入門編】インライン要素におけるclickイベントの挙動と注意点 – HTML実践ガイド
「そのボタン、本当にクリックできますか？」インライン要素にイベントを仕込む時の大切な作法Web制作を学んでいると、ふとこんな場面に出くわしませんか？「この``タグをクリックしたら、メニューを開くようにしたいな」「``タグにクリックイベントを...
インライン要素とテキスト装飾（a, span, strong, em, code, time）
HTML HTML 【テクニカル・上級編】role=’presentation’と’none’の使い分け – HTML実践ガイド
セマンティクスの「引き算」という美学：`role="presentation"` と `role="none"` の境界線Webフロントエンドにおいて、セマンティクス（意味論）は単なるアクセシビリティの義務ではありません。それはブラウザのレ...
HTML 【実務・中級編】role=’presentation’と’none’の使い分け – HTML実践ガイド
「装飾のためのタグ」をアクセシビリティの死角にしない：`role="presentation"` と `role="none"` の正しい使い分け現場でコーディングをしていると、「デザインを実現するためだけに、意味のない `span` や ...
HTML 【入門編】role=’presentation’と’none’の使い分け – HTML実践ガイド
画面の裏側で何が起きているの？`role="presentation"`と`none`で「見えないはずのもの」を整理しようこんにちは！フロントエンドの世界へようこそ。HTMLを書いているとき、「この``や``は、ただ見た目を整えるためだけに...
HTML 【テクニカル・上級編】aria-current属性による現在位置の明示 – HTML実践ガイド
「現在地」を正しく伝える：aria-current='page'で実装する堅牢なナビゲーションの深淵Webアプリケーションのナビゲーションにおいて、「今、ユーザーがどこにいるのか」を明示することは、単なるUXの向上という言葉では片付けられな...
HTML 【実務・中級編】aria-current属性による現在位置の明示 – HTML実践ガイド
なぜ「今いる場所」を伝えるのがプロの仕事なのか？ナビゲーション実装の作法フロントエンド開発の現場で、意外と見落とされがちなのが「ナビゲーションの現在地表示」です。CSSでなんとなく色を変えて、「はい、完成」としていませんか？ビジュアルだけで...
HTML 【入門編】aria-current属性による現在位置の明示 – HTML実践ガイド
「今、どこにいるの？」を優しく伝える。aria-currentでアクセシビリティの第一歩を踏み出そうWebサイトを見ているとき、メニューのボタンを見て「あ、今自分はこのページを見ているんだな」と直感的にわかると、なんだかホッとしませんか？た...
HTML 【テクニカル・上級編】インライン要素へのaria-labelとaria-labelledbyの適用 – HTML実践ガイド
インライン要素にARIAラベルを添える：アクセシビリティの「深淵」とエンジニアリングの最適解フロントエンドの世界において、「アクセシビリティ」は単なるコンプライアンスや道徳的な義務ではない。それは、ブラウザという極めて複雑なレンダリングエン...
HTML 【実務・中級編】インライン要素へのaria-labelとaria-labelledbyの適用 – HTML実践ガイド
「とりあえずaria-label」は卒業しよう。インライン要素のアクセシビリティを極める現場の知見フロントエンド開発の現場で、皆さんはこんなコードを書いていませんか？「アイコンだけのボタンだし、とりあえず `aria-label` をつけて...
HTML 【入門編】インライン要素へのaria-labelとaria-labelledbyの適用 – HTML実践ガイド
Web制作の世界へようこそ！HTMLを書き始めたばかりの頃って、``タグや``タグをなんとなく使って、「とりあえず動いたからOK！」となりがちですよね。その気持ち、痛いほどよくわかります。でも、少しだけ視点を広げて「目の見えないユーザーさん...