Automating a11y testing: Part 1 — Axe
Earlier this year I gave a talk at the John Lewis Partnership Tech Profession Conference 2023 on the topic of automating web accessibility (a11y) testing. In this series I will cover the contents of this talk, kicking off with insights into the Axe suite of tools, followed by articles covering the wider a11y testing landscape: from visual regression testing for magnification and visual deficiencie
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
プレースホルダーのアクセシビリティ上の課題と解決策 - SmartHR Tech Blog
こんにちは！SmartHRプロダクトエンジニアのhimiです。 この記事ではプレースホルダーのアクセシビリティとユーザビリティについての課題と、その解決手段についての話を書きます。 プレースホルダーって何？ Webアプリでよく見る、フォームコントロールに値が無いときに表示するテキストのことです。 主な用途としては、フォームの入力例や入力内容の説明テキストが設定されることが多いです。 HTML Standardでは The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief de
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
Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド | Accessible & Usable
公開日 : 2019年12月19日 (2023年5月17日 更新) カテゴリー : ユーザビリティ / アクセシビリティ この記事は、Web アクセシビリティ Advent Calendar 2019 の19日目の記事です。 このたび監訳で関わらせていただきました「Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド」が、このクリスマスシーズンに出ることになりました。2018年にドイツの Smashing Magazine から刊行された、Adam Silver 著「Form Design Patterns - A practical guide to designing and coding simple and inclusive forms for the web」の日本語訳です。 言うまでもなく、ウェブにおけるフォームは、インタラクションの
総務省｜報道資料｜「情報アクセシビリティ好事例2023」の公表
誰もがデジタル活用の利便性を享受し、豊かな人生を送ることができる社会の実現のためには、ICT機器・サービスの情報アクセシビリティの確保が重要であることから、 総務省では、 (1)国民全般に広くアクセシビリティに配慮した製品を知っていただくこと (2)情報アクセシビリティに特に配慮している企業等やその取組を奨励すること を主な目的として、令和5年度からの新たな取組として情報アクセシビリティ好事例を募集し、審査の結果、24件の製品・サービスを「情報アクセシビリティ好事例2023」として公表することとしました。 【追記】 ○応募数23件を応募数24件に、審査結果23件を審査結果24件に訂正しました。 ○別紙の選定製品に「Uni-Voice事業企画（株）」の「Uni-Voice Blind」を追加しました。 別紙の訂正箇所はこちらをご参照ください。 別紙のとおり （別紙内容） 1 「情報アクセシビ
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? NOTE: except for this note, this whole post was co-written with Scott O’Hara (thanks Scott!). See also Scott's post, [popover accessibility](popover accessibility). Whether you're a developer, des
axe-core/playwrightとmarkuplintを導入しアクセシビリティの自動テストをできるようにした
Web アクセシビリティに興味があったので、まず機械的なチェックツールから学んで知識を増やそうということでこのサイトに @axe-core/playwright と markuplint を導入してみました。 @axe-core/playwright のセットアップ 既に Playwright が導入されている状況を想定し進めます。まず@axe-core/playwright をインストールします。 pnpm add -D @axe-core/playwright このサイトの場合 VRT として Playwright を動かしているテストがあるので(過去資料)、そのプロセスに同居する形で axe を実行することにしました。 e2e.test.tsimport AxeBuilder from "@axe-core/playwright"; import type { Page, TestI
フォームのアクセシビリティを考える
フォームのアクセシビリティを考える 2024.03.10 今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、入力ミスを誘発するようなフォームはユーザーがタスクを完了せずに途中で離脱してしまう可能性が高まり、ビジネスの観点からも望ましくありません。この記事ではフォームのアクセシビリティについて考え、実際のフォームの実装においてどのような点に注意すべきかを紹介します。 今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。スクリーンリーダーといった支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、
Simple setup: Virtual Screen Reader in Storybook
How to set up Storybook with Guidepup's Virtual Screen Reader and test what the screen reader speaks Recent changes to the @guidepup Virtual Screen Reader library make it ridiculously easy to integrate into Storybook for use in your integration tests. This article shows how to get the basic setup going and how to write your first screen reader test in Storybook. tl;dr The Virtual Screen Reader is
UIの色を変えただけで大量のクレームを頂戴してしまった話｜のなと
Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが
Radix Colors
Graygray 1gray 2gray 3gray 4gray 5gray 6gray 7gray 8gray 9gray 10gray 11gray 12Mauvemauve 1mauve 2mauve 3mauve 4mauve 5mauve 6mauve 7mauve 8mauve 9mauve 10mauve 11mauve 12Slateslate 1slate 2slate 3slate 4slate 5slate 6slate 7slate 8slate 9slate 10slate 11slate 12Sagesage 1sage 2sage 3sage 4sage 5sage 6sage 7sage 8sage 9sage 10sage 11sage 12Oliveolive 1olive 2olive 3olive 4olive 5olive 6olive 7oliv
0から作らないデザイントークン | ドクセル
スライド概要 プロダクトデザインに一貫性をもたらすデザイントークンは有用ですが設計が難しく、デザイン負債になりやすい一面もあります。既存の良くできた技術をうまく取り入れることで、0ベースでの設計を避け、リソースを割きすぎることなくトークン設計を行うことができます。今回は実例を交えながら設計方法を紹介します。
MDN Curriculum | MDN Curriculum
The MDN Curriculum provides a structured guide to the essential skills and practices for being a successful front-end developer, along with recommended learning resources. Last updated: February 2024 Beginner's level Self-paced Free The go-to resource for the essential skills and knowledge every front-end developer needs for career success and industry relevance. Developed by Mozilla and refined w
Macでヘッドポインタを使ってポインタを動かす
macOSユーザガイド ようこそ デスクトップについて メニューバーとは? デスクトップで作業する Spotlightで検索する 設定を素早く変更する Siriを使用する 通知を受け取る Dockからアプリを開く Finderでファイルを整理する Macの基本 インターネットに接続する Webをブラウズする ファイルをプレビューする スクリーンショットを撮る ディスプレイの輝度を調節する 音量を調節する トラックパッドとマウスのジェスチャを使う Touch IDを使用する 書類をプリントする キーボードショートカット アプリ Macのアプリ アプリを開く アプリウインドウを操作する アプリをフルスクリーンで使用する アプリをSplit Viewで使用する ステージマネージャを使用する App Storeからアプリを入手する App Storeからアプリをインストールする/再インストールする
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: Form Design Patterns ―シンプルでインクルーシブなフォーム制作実践ガイド: Adam Silver: Digital Ebook Purchas
Karl Sabino on the ROI of well designed error messages | 90 Percent Of Everything
GitHub - guidepup/guidepup: Screen reader driver for test automation.
GitHub - guidepup/virtual-screen-reader: Virtual Screen Reader is a screen reader simulator for unit tests.
Tappy - Yahoo!デベロッパーネットワーク
