Be My Eyes - See the world togetherBe My Eyes connects people needing sighted support with volunteers and companies anywhere in the world, through live video and artificial intelligence.
testing-library でユーザの気持ちになって書くフロントエンドのテスト
TL;DR フロントエンドのテストが壊れやすく要因の一つは、ユーザがどのようにソフトウェアを使うかをクエリに反映できていないからかも testing-library はソフトウェアを使うユーザの気持ちを反映させやすいようにクエリの優先度をつけていて、それに従うほうがいい 優先度の低いクエリも役に立つことがある 運用しているアクセシビリティなどの実装のガイドラインに沿うようなテストを作るとき アクセシビリティの低い実装をリファクタリングするためのテストを作るとき はじめに フロントエンドのテストに用いるツールとして testing-library が知られています。testing-library は提供しているクエリに優先度をつけています。この優先度は、どういう基準でつけられているのでしょうか。 この記事では、 testing-library のガイドを読みながら、クエリの優先度を「ユーザの
第4回 アクセシビリティをQA（品質保証活動）につなげる。チケットの扱いを決める | gihyo.jp
本連載は『Webアプリケーションアクセシビリティ──今日から始める現場からの改善』を補うものです。紙幅の都合で同書に収められなかった原稿を再構成しました。 同書の第7章「アクセシビリティの組織導入」の続編にあたります。同書第7章は、会社内でたった一人でアクセシビリティの取り組みを始めてから、正式なチームを立ち上げるまでのノウハウを紹介しました。本連載はそこからさらに取り組みを広げていくためのノウハウをまとめます。 ソフトウェア開発の現場では、品質維持や向上のための活動が走っています。開発チームの中でQAを行っていたり、QAチームがいたりします。やり方はさまざまですが、何らかの活動はあります。 アクセシビリティも品質のひとつなので、QAの工程が大きく関わります。QAのプロセスにアクセシビリティを織り込み、チェックと改善を定常化させましょう。 シフトレフトを焦らず、まずはQA段階のテストに組
Webアプリケーションアクセシビリティ ――今日から始める現場からの改善
この本の概要 アクセシビリティとは「利用可能な状況の幅広さ」のこと。より多くの人が，より多くの環境で，より多くの状態で利用できることです。もちろんそこには視覚・上肢・認知などに障害があるケースも含みます。日々繰り返し利用するWebアプリケーションにこそ，アクセシビリティが求められます。 Webサイトに比べて，多くのインタラクションを行うWebアプリケーションでは，アクセシビリティの確保はやや難易度が高いものです。特に既存のWebアプリケーションは複合的な課題を抱えていることが多く，教科書どおりの方法では必ずしも改善できません。 本書では，Webアクセシビリティの基礎である「HTMLとWAI-ARIA」を解説したうえで，Webアプリケーションの要である「フォーム」，色やテキストなど「UIデザインの基本」，モーダルダイアログや通知など「少し複雑なUIパターン」の3分野に分けて，よくある事例を取
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
GitHub Accessibility
GitHub Accessibility At GitHub, our mission is to accelerate human progress through developer collaboration. We believe people with disabilities should benefit from and be able to contribute to the creation of that progress. As the home for all developers, GitHub sits at the foundation of software development, and as such, has a unique role in empowering people with disabilities in digital futures
Popover API (Explainer) | Open UI
Popover API (Explainer)@mfreed7, @scottaohara, @BoCupp-Microsoft, @domenic, @gregwhitworth, @chrishtr, @dandclark, @una, @smhigley, @aleventhal, @jh3yMay 4, 2023NOTE: This Popover API explainer was mostly useful during the development of the feature. While it is roughly still in line with the actual feature, it might be more informative to look at either of these two sources of documentation: The
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
なぜエンジニアが認知症フレンドリーテックについて知るべきなのか
煽るようなタイトルですいません。 近い将来ほとんどのエンジニアにとって認知症についての知識は避けて通れないものになると確信しているためこの記事を書いています。 最大の理由は、「日本社会全体の高齢化に伴って、顧客の多くも認知症となるから」です。 実は1ヶ月ほど前にも認知症フレンドリーテックに関する記事をZennに書きました。 ここから発展して、アイデアソンを開催することになったことも、あらためて記事を書くことにした理由です。 認知症の人は増え続ける 現在、日本には認知症の人が約600万人いると推計されています。 これは、小学生と同じ人数です。 すでに、多くの人がいることに驚かれるかもしれませんが、さらに今後も増え続けることがわかっています。 久山町研究という世界的に注目される疫学研究によると、認知症の人は2060年まで増え続け最大1000万人を超えるという推計となっています。 この時の日本の
フロントエンドid属性管理戦略
アクセシビリティのチェックなどを行っているとよく発見される問題にIDの重複がある。HTMLではid属性はグローバル属性でありすべての要素に指定できるが、その値は一意である必要があり、ドキュメント内において重複があってはならないことになっている。 ただ実際に実装してみたり開発経験のある人ならご存知のとおり、滅多なことでこの重複が問題になることは少ない。HTMLのパースは中断することなくブラウザは要素を描画するし、CSSのセレクタは期待通り要素を特定してスタイルを適用する。なのでこの重複に対してそこまで気を使ってこなかった人も多いだろうし、先のアクセシビリティチェックでよく発見されるのもそういった背景があるのだろうと思う。 しかし表面的に問題が起きていなくとも、実際には重大な構文エラーであり、潜在的に多くの問題を抱えている。IDの重複が引き起こす問題は単純で、そのIDを参照する処理はひとつめの
Date and Time Pickers for All
We are very excited to announce the release of the React Aria and React Spectrum date and time picker components! This includes a full suite of fully featured components and hooks including calendars, date and time fields, and range pickers, all with a focus on internationalization and accessibility. It also includes @internationalized/date, a brand new framework-agnostic library for locale-aware
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Popover API - JavaScript不要、HTMLのみでポップオーバーUI
Learn Accessibility | web.dev
Chrome Platform Status
Cloudscape - Cloudscape Design System
オレンジ人材バンク | 福岡100
Radix UI
