アクセシビリティを組織で向上させる──社内外の認知・効果測定から、新規開発への組み込みまで 第4回アクセシビリティをQA（品質保証活動）につなげる。チケットの扱いを決める 本連載は『Webアプリケーションアクセシビリティ──今日から始める現場からの改善』を補うものです。紙幅の都合で同書に収められなかった原稿を再構成しました。 同書の第7章「アクセシビリティの組織導入」の続編にあたります。同書第7章は、会社内でたった一人でアクセシビリティの取り組みを始めてから、正式なチームを立ち上げるまでのノウハウを紹介しました。本連載はそこからさらに取り組みを広げていくためのノウハウをまとめます。 2024年4月22日追記：同書の第7章「アクセシビリティの組織導入」も「アクセシビリティを組織で向上させる ──たった一人から始めて、社内に認知されるまで」として公開しました。 ソフトウェア開発の現場で
概要 アクセシビリティとは「利用可能な状況の幅広さ」のこと。より多くの人が、より多くの環境で、より多くの状態で利用できることです。もちろんそこには視覚・上肢・認知などに障害があるケースも含みます。日々繰り返し利用するWebアプリケーションにこそ、アクセシビリティが求められます。 Webサイトに比べて、多くのインタラクションを行うWebアプリケーションでは、アクセシビリティの確保はやや難易度が高いものです。特に既存のWebアプリケーションは複合的な課題を抱えていることが多く、教科書どおりの方法では必ずしも改善できません。 本書では、Webアクセシビリティの基礎である「HTMLとWAI-ARIA」を解説したうえで、Webアプリケーションの要である「フォーム」、色やテキストなど「UIデザインの基本」、モーダルダイアログや通知など「少し複雑なUIパターン」の3分野に分けて、よくある事例を取り上げな
https://accessibility.blog.gov.uk/2023/01/06/a-new-accessibility-strategy-for-the-gov-uk-design-system/ 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. Unti
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
At GitHub, our mission is to accelerate human progress through developer collaboration. The mission of our accessibility program is to enable ~1.3 billion people with disabilities to benefit from and contribute to the creation of that progress. As we pursue that mission, we focus on strategic priorities that empower our employees with disabilities, developers with disabilities, customers that are
Popover API (Explainer)@mfreed7, @scottaohara, @BoCupp-Microsoft, @domenic, @gregwhitworth, @chrishtr, @dandclark, @una, @smhigley, @aleventhal, @jh3yMay 4, 2023SpecificationNOTE: 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 docume
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の重複がある。HTMLではid属性はグローバル属性でありすべての要素に指定できるが、その値は一意である必要があり、ドキュメント内において重複があってはならないことになっている。 ただ実際に実装してみたり開発経験のある人ならご存知のとおり、滅多なことでこの重複が問題になることは少ない。HTMLのパースは中断することなくブラウザは要素を描画するし、CSSのセレクタは期待通り要素を特定してスタイルを適用する。なのでこの重複に対してそこまで気を使ってこなかった人も多いだろうし、先のアクセシビリティチェックでよく発見されるのもそういった背景があるのだろうと思う。 しかし表面的に問題が起きていなくとも、実際には重大な構文エラーであり、潜在的に多くの問題を抱えている。IDの重複が引き起こす問題は単純で、そのIDを参照する処理はひとつめの
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属性はある要素とその要素のサブツリーに含まれる全ての要素を不活性にするための属性です。不活性とは簡単に言えば「クリックできない」「フォーカスできない」「選択できない」「編集できない」状態を指します。 また、HTML Standardでは「ページ内検索でも無視される場合がある」と記載されています。手軽に使える属性である一方、不用意に使うと思わぬところに影響がでる可能性があります。そこで今回はユースケースとinert属性を使う際の注意点をいくつかご紹介します。 ちなみに、似たような属性としてdisabled属性がありますが、disabled属性はinput要素やbutton要素などのフォームコントロール要素単体、およびフォームコントロール要素をグループ化するためのfieldset要素でのみ有効な属性です。 ユースケース inert属性はもともとdialog要素の仕様の一部として実装が
Filed underCSSoninMay 17th, 2022.May 2022.Last updatedoninMay 15th, 2025.May 2025. 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 acc
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
