Rethinking Text Resizing on Web
Airbnb has made significant strides in improving web accessibility for Hosts and guests who require larger text sizes. This post takes an in-depth look at: The problems encountered on mobile web when relying solely on browser zoom.The challenges of introducing changes that would impact the workflow of all frontend engineers.The benefits seen since launching these accessibility improvements.by: Ste
アクセシビリティの改善のために React Aria を活用しています - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、React Aria を活用してアクセシビリティの改善を行っています。 今回の記事では、React Aria を国内にもっと広めて行きたいということで、React Aria を利用することに決めた理由を振り返りつつ、React Aria について簡単に紹介します。 目次 OSS を活用した効率なアクセシビリティの改善 ライブラリの選定 React Aria の概要 Next.js App Router との相性 終わりに OSS を活用した効率なアクセシビリティの改善 DOGO プロジェクトでは、フロントエンドの刷新を進めていく中でアクセシビリティの改善についても取り組んでいます。 具体的な事例などについては、次の記事も参考にしてもらえればと思います。 各
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 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
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の変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが
Cache the World: Turbo Charging Firefox Accessibility Performance and Maintainability | Jantrid
The Firefox accessibility engine is responsible for providing assistive technologies like screen readers with the information they need to access web page content. For the past couple of years, the Firefox accessibility team have been working on a major re-architecture of the accessibility engine to significantly improve its speed, reliability and maintainability. We call this project “Cache the W
Firefox 113 Significantly Boosts Accessibility Performance – Mozilla Accessibility
About 5 years ago Mozilla shipped Firefox Quantum, an upgrade that included significant performance improvements for most Firefox users. Unfortunately, Firefox Quantum didn’t improve performance for people who use screen readers and other assistive technology. In some ways, our screen reader performance actually regressed with the architecture changes that Quantum delivered. The Firefox accessibil
testing-library でユーザの気持ちになって書くフロントエンドのテスト
TL;DR フロントエンドのテストが壊れやすく要因の一つは、ユーザがどのようにソフトウェアを使うかをクエリに反映できていないからかも testing-library はソフトウェアを使うユーザの気持ちを反映させやすいようにクエリの優先度をつけていて、それに従うほうがいい 優先度の低いクエリも役に立つことがある 運用しているアクセシビリティなどの実装のガイドラインに沿うようなテストを作るとき アクセシビリティの低い実装をリファクタリングするためのテストを作るとき はじめに フロントエンドのテストに用いるツールとして testing-library が知られています。testing-library は提供しているクエリに優先度をつけています。この優先度は、どういう基準でつけられているのでしょうか。 この記事では、 testing-library のガイドを読みながら、クエリの優先度を「ユーザの
A new accessibility strategy for the GOV.UK Design System - Accessibility in government
The GOV.UK Design System team has a lot of work coming up that relates to web accessibility. To help coordinate this work, we created an accessibility strategy. To build the accessibility strategy, we first had to gather up all of our existing accessibility-related principles and decisions. Until now, a lot of this had not been documented, but rather existed as general team knowledge. We then used
All of Learn Accessibility! is available
All modules in the Learn Accessibility course are now available. Written by Carie Fisher, these courses take you through the essentials for building accessible websites and web apps. You can read them in whatever order you'd like. The final modules on testing walk you through a culmination of all of your knowledge: Automated testing Manual accessibility testing Assistive technology testing The las
The hidden history of screen readers
On a night in 1978, Ted Henter was driving a rental car down a dark road in the English countryside. A 27-year-old motorcycle racer from Florida, Henter had just won eighth place in the Venezuelan Grand Prix, the first race of the 1978 World Championships. He was daydreaming about his next race in Spain when he saw the other car driving straight towards him. Henter had been driving on the right si
inert属性の使いどころ | フロントエンドBlog | ミツエーリンクス
inert属性はある要素とその要素のサブツリーに含まれる全ての要素を不活性にするための属性です。不活性とは簡単に言えば「クリックできない」「フォーカスできない」「選択できない」「編集できない」状態を指します。 また、HTML Standardでは「ページ内検索でも無視される場合がある」と記載されています。手軽に使える属性である一方、不用意に使うと思わぬところに影響がでる可能性があります。そこで今回はユースケースとinert属性を使う際の注意点をいくつかご紹介します。 ちなみに、似たような属性としてdisabled属性がありますが、disabled属性はinput要素やbutton要素などのフォームコントロール要素単体、およびフォームコントロール要素をグループ化するためのfieldset要素でのみ有効な属性です。 ユースケース inert属性はもともとdialog要素の仕様の一部として実装が
The Surprising Truth About Pixels and Accessibility
IntroductionShould I use pixels or ems/rems?!This is a question I hear a lot. Often with a dollop of anxiety or frustration behind the words. 😅 It's an emotionally-charged question because there are a lot of conflicting opinions out there, and it can be overwhelming. Maybe you've heard that rems are better for accessibility. Or maybe you've heard that the problem is fixed and pixels are fine? The
Building a dialog component | Articles | web.dev
Building a dialog component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. 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 th
Accessibility testing with Storybook
26% of adults in the US have at least one disability. When you improve accessibility, it has an outsized impact on your current and future customers. It’s also a legal requirement. The most accurate way to check accessibility is manually on real devices. But that requires specialized expertise and a lot of time. Both of which are scarce on frontend teams. Teams at Twilio, Adobe and Shopify use a c
体の動きや音声入力でアプリケーションをハンズフリー操作したりプログラミングしたり文章を書いたりしてみる
この記事は、体の動きとか音声入力でアプリケーションを操作したり、プログラミングをするにはどうすればいいかということをいろいろ実験してみた記事です。 この記事には、実用性があるものと現実的に使うにはトレーニングが必要なものが混在しています。そのため、そこまで期待してはいけません。 この記事は、TalonとmacOSの音声入力で書いたものを手作業で修正しています。 マイクはBlue Microphones Yeticasterを使いました。 きっかけ t_wadaさんが老眼について書いていたのが、この記事を書いたきっかけの一つです。 プログラマ35歳定年説はとっくに過去のもので、35歳を過ぎても能力も報酬も伸び続けるし、生涯現役プログラマのロールモデルとなる方も増えてきた。ただ諸先輩方から聞いた話をまとめると、ベテランプログラマの前に立ち塞がるのは「老眼」で、こればかりは本当に恐ろしい。何か対
Hands-Free Coding
Hands-Free CodingHow I develop software using dictation and eye-tracking Earlier this year, I developed Cubital Tunnel Syndrome, a repetitive-strain injury, in both of my elbows. As a result, I pretty much can't use a mouse or keyboard; after a few minutes, I get a burning pain shooting down my arms. Even if I try to limit my computer usage to 60-second bursts, I wind up inadvertently making the s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Internet inventor: Make tech accessibility better already
Popover API - JavaScript不要、HTMLのみでポップオーバーUI
