デザインシステムのa11y対応に役立つ新しいWeb Standard
デザインシステムのa11y対応に役立つ新しいWeb Standard Alan Dávalos ( https://twitter.com/AlanGDavalos ) アクセシビリティー（以下a11y）の対応は大変重要ですが、正しく対応するのは簡単ではないケースが多いです。デザインシステムなどの様々なプロジェクトで使う目的で作成するコンポーネントではa11yをより意識する必要があります。このセッションでは、そのa11yの対応を格段にやりやすくする新しいWeb Standardを紹介します。 2022年3月25日開催「UIT Meetup vol.15 『Relearn Modern Web Standard』」 https://uit.connpass.com/event/242359/
Apple previews powerful software updates designed for people with disabilities
New SignTime service launches Thursday, May 20, to connect Apple Store and Apple Support customers with on-demand sign language interpreters Cupertino, California Apple today announced powerful software features designed for people with mobility, vision, hearing, and cognitive disabilities. These next-generation technologies showcase Apple’s belief that accessibility is a human right and advance t
WAI-ARIAを学ぶときに整理しておきたいこと
結論 ロールについて知る HTMLの暗黙のロールを知る ロールを知った上でロールに対して使用できるプロパティ/ステートを使う (おまけ) markuplintを使おう aria属性を使う前に まず、いきなりaria-labelやaria-selectedとかに手を出さない。 aria-selectedとかを発見してしまうと「option要素以外にもselectedみたいな意味を付加できるんだ！すげえ！使ってみよう！」みたいな気持ちが沸き上がってしまう。わかる。とってもよくわかるよ。当時ぼくもそうだったから。 ただ、そこはぐっと我慢してほしい。 なぜかと言うと、aria属性は、使っていいときと悪いときがある。きちんとWAI-ARIAという仕様と、ARIA in HTMLやCore Accessibility API Mapping (Core-AAM)という仕様で決められていっている[1]の
Webエンジニアとしていま知っておきたいWebアクセシビリティ
この文章について これは Front-End Study #3「『当たり前』をつくりだすWebアクセシビリティ」で基調講演をするにあたって、登壇内容を整理するために書いたものです。登壇内容とは一部に差異があります。 イベント映像 この文章はむちゃくちゃに長いので、登壇映像を見たほうがいいかもしれません。わたしの発表は13:23くらいから30分ちょっとです 登壇資料（内容は同一です） https://speakerdeck.com/ymrl/webenziniatosite-imazhi-tuteokitai-webakusesibiritei https://docs.google.com/presentation/d/1uhCvhh6sZCPUnReSBVDjvGfNAOTKbZ5Sxs8fYMlxMsI/edit?usp=sharing 目的 Web業界で「エンジニア」の肩書で仕事して
「この機能のアクセシビリティどうしよう」と思ったら
こんにちは、この記事は Webアクセシビリティ Advent Calendar 2020 の6日目です。 すこし前に、同僚のエンジニアに「Webアプリケーションにドラッグ＆ドロップを使う機能を作ろうとしているんだけど、アクセシビリティは何をすればいいのかわからない」という相談をされる機会がありました。そのときの回答が、実はアクセシビリティを考える上ですごく大事なことだなと思ったので、ちょっと文章化してみることにしました。 相談されたのは「新しい機能で直感的な操作を実現するためにドラッグ＆ドロップを使いたいが、アクセシビリティチェックをパスできない気がする」というような内容でした。たしかに私の会社で運用しているチェックでは、キーボードやスクリーンリーダーによる動作チェックを行っているので、それらではドラッグ＆ドロップの操作ができそうには思えません。 彼のこの相談内容からは「良いものを作ろう」
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 を使って
新卒研修とアクセシビリティ | アクセシビリティBlog | ミツエーリンクス
皆さま、はじめまして。私は、20年度新卒で入社したアクセシビリティ・エンジニアの大塚と申します。本Blogに登場するのは初めてですので、まずは簡単に自己紹介をさせてください。 私は生まれつき視覚障害があり全盲です。私を含め全盲のユーザーの多くは、画面上のテキスト情報を音声で読み上げるスクリーンリーダーとキーボードを使用してPCを利用しています。今書いているこの文章も、入力している文字や、漢字の変換が正しく行われているかなどの確認をスクリーンリーダーで行いながら作成しています。 私は中学に入ったころに本格的にPCを使い始めたのですが、スクリーンリーダーを利用し、Web上の様々な情報に単独でアクセスできることに感動したことをよく覚えています。そのことをきっかけに、視覚障害者を含め多様なユーザーがWebをより利用しやすい環境を作ることに貢献したい気持ちが強くなりました。そして、Webアクセシビリ
すべての人のためのアクセシビリティ対応 #iosdc
iOSDC Japan 2019 すべての人のためのアクセシビリティ対応【省略版】
React-axe で React アプリケーションのアクセシビリティを向上させる | メルカリエンジニアリング
こんにちは、この 4 月にメルカリに新卒入社したフロントエンドエンジニアの @karszawa です。 この頃は Google I/O 2019 のキーノートでアクセシビリティが大きく取り上げられたり、Safari に Audit タブが追加されアクセシビリティに関する様々なテストできるようになったりと、フロントエンド界隈におけるアクセシビリティへの関心の高まりを感じます。 本記事では React アプリケーションのアクセシビリティをチェックするためのライブラリである React-axe と、その中心技術である axe-core を応用した様々なツールをご紹介します。 React-axe とは React-axe は React アプリケーションのアクセシビリティをチェックするためのツールです。チェックの結果は Chrome DevTools に表示され、開発中にアクセシビリティの問題に気
Introducing USWDS 2.0
Reinvent the experience, not the wheel Today, we’re launching U.S. Web Design System 2.0 (USWDS 2.0), a new foundation for the future of our design system. This new version was designed to make it easier for any project to integrate USWDS and use it to support your mission and the needs of your audience. USWDS is a library of code, tools, and guidance to help government teams design and build fast
アクセシビリティ視点から考えるプロダクトの付加価値、そしてどう取り組むか？｜Okuto Oyama｜note
皆さんこんにちは。2019年1月に株式会社プレイドに入社したデザインエンジニアの大山です。 インターネットではyamanokuと名乗ってる者です。趣味はインターネット徘徊です。 今まで受託制作の会社に勤めていたのですが、このたび初めてSaaS事業会社で働くことになりました。まったく別世界のため日々学びばかりの状況です。 そんな自分も入社して4カ月が経ち、あらためてプレイドに入社してこれからやっていきたいことを書いてみようと思いました。 制作会社時代はHTMLとCSSとJavaScriptを書いてただけの人間でパッとした特徴もなかったのですが、ユーザーに価値を与えながら長期運用に耐えられる強固なものをつくりたいという自分の中でのミッションは一貫していました。 それを実現させる一つの手段として注目しているものがアクセシビリティの担保です。 アクセシビリティとはなにかAccessibility
2019年のWebアクセシビリティ | gihyo.jp
あけましておめでとうございます。株式会社ミツエーリンクスの黒澤剛志です。本稿では、昨年に引き続いて、2019年のWebアクセシビリティの短期的に予測してみます。 Web Content Accessibility Guidelines（WCAG）2.1 WCAG 2.1は2018年6月5日にW3C勧告（Recommendation）となりました。WCAG 2.0からの内容はそのままに、レベルAに5個、AAに7個、AAAに5個の計17個の達成基準が追加されています。WCAG 2.0同様、WCAG 2.1の本文には具体的な内容は記述されていないため、関連文書を参照しながら対応をすすめていくことになるでしょう。達成基準によって情報量に差はありますが、Understanding WCAG 2.1やTechniques for WCAG 2.1などが公開されています。 なお、WCAG 2.1の日本語
2018年、freeeのアクセシビリティを振り返る - freee Developers Blog
この記事はfreee Developers Advent Calendar 2018、およびWebアクセシビリティ Advent Calendar 2018の8日目です。 こんにちは、freeeの@magi1125こと伊原です。UXデザイナー／インフォメーションアーキテクトを経て、現在は人事労務freeeという素敵なサービスのプロダクトマネジャーを担当しています。 社内ではたまに「一発当て太郎」と呼ばれています。昨年10月にfreeeに入社したのですが、その理由が「アクセシビリティで一発当てた事例を作る」というものだったからです。Webアクセシビリティの書籍を出したり登壇したりという活動を進めるなかで、その分野をもっと盛り上げるには成功事例を作らなければ、と考えた次第です。 この記事ではタイトル通り、2018年のfreeeにおけるアクセシビリティ関連の出来事をご紹介します。なお、今年2月以
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Accessibility best practices for virtual events
Stark’s Public Library – Accessibility resources, guides, communities, and more
NoCoffee - Chrome ウェブストア
accrefs
GitHub - bradbirdsallCHANGED/eslint-plugin-jsx-a11y
AccessibilityCheckList
How to Write Accessible Javascript