[B! HTML][accessibility] slay-tのブックマーク

slay-t id:slay-t

HTMLとaccessibilityに関するslay-tのブックマーク (3)

Puppeteer と ARIA Handler
先日、社内の技術共有会で https://github.com/puppeteer/recorder という npm パッケージの話が挙がったのだけど、ここで登場する ARIA Handler という機能が面白い内容だったため、それを書いていこうと思う。 https://developers.google.com/web/updates/2020/11/puppetaria で触れられている内容と重複する部分も多いため、先に参考として挙げておく。また、Puppeteer の Undocumented な機能であったり、CDP の Experimental な機能への言及となるため、その点は承知した上で読んでもらえると。 Puppeteer Recorder@puppeteer/recorder 自体は名前の通り、Headless Chrome ラッパである Puppeteer を使って
slay-t 2020/12/01
plugin

css

browser

ブラウザ

html

web

テスト

accessibility
リンク
お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA
フォームはウェブサイトの中でもインタラクションの多い箇所です。ユーザー側にきちんと情報を伝え、そして正しく入力してもらう必要があるのでアクセシビリティーには気をつけたいです。アクセシビリティー対応といえばWAI-ARIAによる支援がありますが、この記事ではWAI-ARIAに限らずどう対応するべきなのか、デモを用いて紹介します。バリデーションに関してシンプルに実現できるものと、ちょっと凝ったリアルタイムバリデーションのものと2例用意しています。後者は動的に変化するコンテンツへのアクセシビリティー対応について解説しています。サンプルを別ウィンドウで開く（シンプル版）サンプルを別ウィンドウで開く（リアルタイム版）コードを確認する ▼シンプルなバリデーション ▼ちょっと凝ったバリデーションまずはセマンティックなマークアップを WAI-ARIAを使ったコーディングというと、とにかくrole
slay-t 2020/10/19
class

html

コード

css

javascript

web

バリデーション

フォーム

Form

accessibility
リンク
Markup from hell - HTMHell
Markup from hellA collection of bad practices in HTML, copied from real websites. skip code sample<button display="flex" role="button"> <svg role="img" viewBox="0 0 13 13" aria-hidden="false" xmlns="http://www.w3.org/2000/svg" height="15px" width="15px" fill="#000" name="close"> <title>Close dialog</title> <path d="…"> </path> </svg> </button> skip code sample<a href="/contact" aria-label="If you
slay-t 2019/11/18
html

id

accessibility

プログラミング
リンク
1