命令的な ARIA ライブリージョン：ARIA Notifyの紹介
こんにちは、フロントエンドエンジニアの mehm8128 です。 今回は新しく検討されている ARIA Notify API について紹介します。 ARIA Notify とは ARIA Notify とは、既存の ARIA ライブリージョンにおける問題点を基に検討されている、新しい API です。document.ariaNotify() のように命令的に呼び出すことで、スクリーンリーダーや点字ディスプレイなどの支援技術に情報を伝えることができます。 ただし、既存のライブリージョンを完全に置き換えるものではありません。本来の目的で利用されているライブリージョンはそのままで良く、意図しない用いられ方をしてしまっている部分で、より正確に支援技術に情報を通知するための API となっています。 現在は仕様の議論段階で、最低限の機能が入った API が Edge では 136 以降の Origi
Web フロントエンドの実装において本来の機能を損なってはいけない
データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。 昨今の Web フロントエンドの開発においては、React や Vue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。 一方データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケ
On popover accessibility: what the browser does and doesn’t do
One of the premises of the new popover attribute is that it comes with general accessibility considerations “built in”. What does “built in accessibility” actually mean for browsers that support popover? See also: Scott's post Popping preconceived popover ponderings and Hidde's talk on popovers, and other posts about popover semantics, positioning popovers and the difference with dialogs and other
フォームのアクセシビリティを考える
maxLength 属性はエラーメッセージを表示するのではなく単に指定された文字数以上、入力できなくなるという挙動であることに注意してください。ユーザーにとっては突然キーボードの入力が受けつけされなくなってしまったように感じるかもしれません。 HTML 標準の制約検証を利用するメリットとして、スクリーンリーダー等の支援技術を利用しているユーザーに対しての対応も実現できるという点があげられます。サブミットボタンをクリックした場合には、入力に違反している項目にフォーカスが移動し、エラーメッセージが読み上げられます。そのため、スクリーンリーダーを利用していたとしてもどの入力フォームに問題があるかを即座に理解できます。 また、例えば required 属性を使用している場合は「必須」と読み上げられる、フォームに違反している項目は「無効なデータ」と読み上げられるなど、フォームに関する適切な情報が提供
MDN Curriculum
The MDN Curriculum provides a structured summary of the essential skills and practices for being a successful front-end developer. The Learn web development Core modules are based on this structure, as well as partner courses such as the Scrimba Frontend developer career path Last updated: October 2025 Beginner's level Self-paced Free Defines the essential skills and knowledge every front-end deve
Alt Text Hall of Fame
What is alt text? Alternative text (or alt text, in short) is the text you can use to describe an image when you publish it on your website or social media. Why is alt text important? Imagine, for a moment, that your browser stopped showing you images. You would still see them referenced in articles, you’d read conversations about them, people making jokes. What would this experience be like for y
Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎
ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHTMLを選択し使用することが大切だ。複雑なUIの場合はWAI-ARIAを使用し、ARIA Authoring Practices Guideに基づき適切に実装する必要がある。UIライブラリ選びの際には、WAI-ARIAに従った実装を行っているかが基準の1つとなる。 この記事は、ウェブアプリケーションエンジニアとして仕事をされている方を対象に書かれています。日々のウェブフロントエンドの開発の中で意識しておきたい基礎的な内容をメインに記載しています。 そのため、ここでは以下に上げるような内容については取り上げておりません。 色や形などのデザイン面での観点や J
フロントエンドid属性管理戦略
アクセシビリティのチェックなどを行っているとよく発見される問題にIDの重複がある。HTMLではid属性はグローバル属性でありすべての要素に指定できるが、その値は一意である必要があり、ドキュメント内において重複があってはならないことになっている。 ただ実際に実装してみたり開発経験のある人ならご存知のとおり、滅多なことでこの重複が問題になることは少ない。HTMLのパースは中断することなくブラウザは要素を描画するし、CSSのセレクタは期待通り要素を特定してスタイルを適用する。なのでこの重複に対してそこまで気を使ってこなかった人も多いだろうし、先のアクセシビリティチェックでよく発見されるのもそういった背景があるのだろうと思う。 しかし表面的に問題が起きていなくとも、実際には重大な構文エラーであり、潜在的に多くの問題を抱えている。IDの重複が引き起こす問題は単純で、そのIDを参照する処理はひとつめの
Building a dialog component | Articles | web.dev
In this post I want to share my thoughts on how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. Try the demo and view the source! Demonstration of the mega and mini dialogs in their light and dark themes. If you prefer video, here's a YouTube version of this post: Overview The <dialog> element is great for in-page contextual information or action
HTML Inputs and Labels: A Love Story | CSS-Tricks
Most inputs have something in common — they are happiest with a companion label! And the happiness doesn’t stop there. Forms with proper inputs and labels are much easier for people to use and that makes people happy too. A happy label and input pair In this post, I want to focus on situations where the lack of a semantic label and input combination makes it much harder for all sorts of people to
Hiding content responsibly
I wrote about hiding content during the A11yAdvent calendar, namely how to make something invisible but still accessible for screen readers. I’m going to mention the “accessibility tree” a few times in this article, so be sure to read how accessibility trees inform assistive technologies by Hidde de Vries. In this article, I want to discuss all the ways to hide something, be it through HTML or CSS
Building a Tabs component | Articles | web.dev
In this post I want to share thinking on building a Tabs component for the web that is responsive, supports multiple device inputs, and works across browsers. Try the demo. Demo If you prefer video, here's a YouTube version of this post: Overview Tabs are a common component of design systems but can take many shapes and forms. First there were desktop tabs built on <frame> element, and now we have
Sign-in form best practices | web.dev
Checklist Use meaningful HTML elements: <form>, <input>, <label>, and <button>. Label each input with a <label>. Use element attributes to access built-in browser features: type, name, autocomplete, required. Give input name and id attributes stable values that don't change between page loads or website deployments. Put sign-in in its own <form> element. Ensure successful form submission. Use auto
Feature Spotlight: Accessibility | Blog | Video.js | Open Source Video Player
Accessibility! The most important feature you never knew about. In the Video.js organization we try hard to have good accessibility. Like most other software, any change can affect the system in unintended ways. For example MuteToggle and VolumeControl were married into VolumeMenuButton in Video.js 5. While this change did allow these controls to work in tandem visually, it also did something unin
Writing HTML with accessibility in mind
If you don’t want to read the preface, jump right to the tips. This article is also available in Russian, thanks to Workafrolic, Korean, thanks to Yongui, in Portuguese, thanks to EmanuelG, and in Spanish, thanks to “Ibidem Group”. Personal development and change in perspectiveWhen I made my first website my highest priority was to get content online. I didn’t care much about usability, accessibil
Links vs. Buttons in Modern Web Applications
Links vs. Buttons in Modern Web Applications July 9, 2016 Github: Links or buttons? Something that comes up again and again in front-end accessibility is the issue of links versus buttons. You know, the HTML elements that open links in new windows or submit forms? In JavaScript web applications, it seems we’re still confused about which element to choose for user interaction. To try and clarify th
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Popover API - JavaScript不要、HTMLのみでポップオーバーUI
Learn Accessibility | web.dev
Amazon.co.jp: HTML解体新書-仕様から紐解く本格入門: 太田良典, 中村直樹: 本
Amazon.co.jp: インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン: Heydon Pickering (著), 太田良典 (監修), 伊原力也 (監修), 株式会社Bスプラウト (翻訳): 本
