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
About this plugin The A11y - Focus Order plugin lets you add accessibility annotations over your designs for the interactive elements of desktop, website, and mobile applications. You can share these annotations with engineers as part of your design. Accessibility is critical for good desig...
こんにちは！i3DESIGNデザイナーチームです。 今回は、先日発刊させて頂きましたホワイトペーパー”とってもやさしいウェブアクセシビリティチェックリスト”の一部を記事にまとめたいと思います。 ホワイトペーパーには、ウェブアクセシビリティチェックリストというシートがあります。 このシートは、JIS X 8341-3:2016(アクセシビリティについてのJIS規格)に基づき、私たちの解釈で分類・文章を再構成しました。 エンジニアやデザイナーでない方でも理解しやすいよう、一部内容を簡略化したり、複数の達成基準をひとつにまとめたりしている箇所があります。 このチェックリストを「現在提供しているウェブサービスが、どこまで達成できているのか」を図る指標として、ご活用ください。 👇ウェブアクセシビリティチェックリストがついているホワイトペーパー”とってもやさしいウェ
文字が崩れて見える「ディスレクシア」という症状を抱える人がいます。そうした人にも見やすい「フォント」の文字の利用が広がっています。 「ディスレクシア」の大学生・西川幹之佑さん（20）：「あー見づらいですね。あー細いな…」 東京都内の大学に通う西川幹之佑さんは、文字が崩れて見えるディスレクシアという症状があります。 ディスレクシアは学習障害の一つで、文字を素早く理解することができないということです。 西川さんの場合、「山」という漢字は縦線3本に見え、「返」という字は細い線が消えているように認識されることもあるそうです。 また、文字のバランスが取れていないように感じて気分を悪くすることもあるといいます。 「ディスレクシア」の大学生・西川幹之佑さん：「（小学生の頃は）読み取るのが精いっぱい。1ページ（読む）だけで授業1回分（約45分）です」 文字を理解するのが難しいと文字を覚えて書くことも難しく
2023年7月12日に、国立国会図書館（NDL）が、OCR処理プログラム「NDLOCR」のver.2を、NDLラボ公式GitHubで公開しました。 NDLOCRは、NDLがデジタル化した資料から、全文テキストデータを作成することを目的に開発したものです。 2023年4月に公開したver.1が、全文検索用途が主目的の開発であるのに対し、ver.2は、視覚障害者等の読み上げ用途にも利用できるよう、読み上げ順序の推定等の機能の追加や文字認識性能の改善を行っています。 また、ver.2には、2022年度にNDLが外部委託して開発したver.2.0と、2023年4月～6月にNDLが改善作業を実施したver.2.1があります。 NDLOCR ver.2の公開について(NDLラボ, 2023/7/12) https://lab.ndl.go.jp/news/2023/2023-07-12/ NDLOCR
In web design, colour contrast is the first (and biggest) step towards creating an accessible site. As the web is accessed through a screen, colour contrast issues are experienced by a number of users. learn more The choice of typeface, and how this typeface is hierarchised, is an essential step in ensuring web accessibility. This step helps both visually and by allowing users with screen readers
チームラボ、成田国際空港公式WEBサイトのリニューアルにおいて、企画、UI/UX設計、デザイン、開発を担当。2024年2月21日公開。
チームラボは、成田国際空港公式WEBサイトのリニューアルにおいて、企画、UI/UX設計、デザイン、開発を担当しました。全ての人の快適な空港体験をサポートするサイトに。2024年2月21日公開。 「ハブ・アンド・スポーク」をコンセプトに、これまでサイト内に、バラバラに点在していたコンテンツを、再整理しました。ページ間のつながりに一貫したルールを設け、かつ、カテゴリ横断で情報を集約し、連携するいくつかのハブを設ける情報設計によって、さまざまな目的を持ったユーザーが、求める情報へストレスなくたどりつけるサイト構造を実現すべく、再構築しました。 「チームラボCMS」の導入によって、サイト内のコンテンツの一元的管理と動的なページ生成を可能にし、有機的なコンテンツの集約と連携を実現しています。 また、すべてのユーザーへの使いやすさを確保することを目的にウェブアクセシビリティの改善を徹底し、日本工業規格
これは フェンリル デザインとテクノロジー Advent Calendar 2023 15日目の記事です。 こんにちは。大西です。年に一度くらいしか書かないnote、今年も一度しか書かずに終わりそうです。 私は視覚科学を勉強しています。特に文字の認識に関する研究が好きです。 文字について考えるのが楽しすぎて、博士号をとりました。今回は久しぶりに自分の専門領域の話を書きます。 IT業、しかもHCDを掲げて仕事をしている身ではありますが、実は私、WCAG関連の話題があまり好きではありません（個人的な見解です）。中でも、「4.5:1以上のコントラスト比がないとアクセシビリティ対応が不十分」のようにいわれがちな、コントラストチェッカーの結果を見るのが一番苦手です。チェッカーでの計算に限界があることを理解して使ってほしい、結果に一喜一憂するくらいなら輝度を実測しちゃえばいいのに、などと歯がゆい思いを
ですが、ここはあえて、「簡単な話ではない」とか「答を出せない」といった語りに埋没させるべきではなく、むしろロジカルでシンプルな答を用意していかなければならないのではないかと思っています。
アクセシビリティへの取り組み | STUDIO
STUDIOで、あなたのサイトのアクセシビリティを向上しよう。STUDIOを利用することで対応可能なWebアクセシビリティのポイントや、リファレンスを掲載しています。
YouTube埋め込みって、するだけでLighthouseスコアが低下して悲しい気持ちになりますよね。なので研究としてLighthouseスコアを低下させない対策を調べたり試しました。最終的に、特定のケースでのみ低下不可避という結論に至りました。 結論 YouTube埋め込みがファーストビューにあり、スマホ対応も必須な場合、Lighthouseスコアの低下は避けられない ※もし回避する方法を見つけている方がいれば教えてください 検証結果 以下のサイトとGitHub Repoに公開済みです。サイト内、コード内に説明は特に無いので本記事の内容と合わせて見ていただければと思います。 前提知識 YouTubeをiframeで埋め込んだだけで、Lighthouseのスコアは大幅に低下する Playerに関するJavaScriptがダウンロードされ、LCPに影響するため しかもファイル数も多く、1ファ
2023年5月31日 そのaria-labelは本当に必要ですか？ チーフアクセシビリティエンジニア 黒澤 アクセシビリティ対応には複数の方法がありますが、方法によって運用負荷はさまざまです。 私はお客様に、aria-labelを設定するのではなく、画面に表示されているテキストで情報が伝わるようにすると運用負荷を抑えられますよ、という話をすることがあります。 aria-labelは指定をミスするとほぼ確実にアクセシビリティの問題につながりますが、画面に表示されないため、作業漏れが生じやすく、指定ミスに気がつきにくい性質があります。 実際、お客様サイト・サービスの現状把握や競合調査の業務ではaria-labelの作業漏れや指定ミスによるアクセシビリティの問題を多数見てきました。 この記事では実際の問題例をサイト・サービスが特定されないように調整したうえで紹介していきます。 紹介した例はいずれ
障害者差別解消法（正式名称：障害を理由とする差別の解消の推進に関する法律。以下「法」ともいいます）の改正法が2024（令和6）年4月1日付けで施行されます。改正法では、これまで民間事業者には努力義務とされていた障害者への合理的配慮の提供が法的義務に格上げ...
AI到来、電力はどうする - 日本経済新聞
千葉県船橋市から北東の印西市まで全長10キロメートルのトンネルの工事が急ピッチで進む。東京電力パワーグリッド（PG）が建設する送電ケーブル用のトンネルだ。6月に完成すれば直径4.8メートルの管の中を大量の電力が流れる。印西市にデータセンター（DC）の進出が相次いでいる。千葉ニュータウン中央駅周辺を歩けば、窓のない大型構造物が目につく。サーバーの集まりであるDCは大量の電力を必要とする。東電PG
CSS And Accessibility: Inclusion Through User Choice — Smashing Magazine
It is challenging to accurately understand the preferences of over 7.8 billion people at any given time. Carie Fisher outlines which CSS media features are available for detecting user preferences and how they are used to design and build more inclusive experiences. We make a series of choices every day. Get up early to work out or hit the snooze button? Double foam mocha latte or decaf green tea?
セミナー「改正障害者差別解消法とWebアクセシビリティ」でお寄せいただいたご質問への回答 | アクセシビリティBlog | ミツエーリンクス
昨日オンラインで開催したWeb担当者のためのピンポイント講座、改正障害者差別解消法とWebアクセシビリティには大変多くの方々にご参加いただきました。この場を借りて厚く御礼申し上げます。また、質疑応答の時間ではすべてのご質問に回答することができず、申し訳ございませんでした。 本記事では、開催後にアンケートへのご回答を通じてお寄せいただいたものを含め、いただいたご質問にお答えさせていただきます（セミナーの時間中に回答できたものについては割愛しております、あらかじめご了承ください）。字数の兼ね合いから、回答にご満足・ご納得いただけない場合もあるかと思いますが、その場合には是非お気軽にお問い合わせをいただければ幸いです。 アクセシビリティに対する意識の高さを鑑みると、日本国内サイトよりグローバルサイトを優先的に着手すべきでしょうか？ おっしゃる通り、そのような考え方で優先順位を定義することには、一
この４月から、障害のある人への合理的配慮が民間の事業者にも義務づけられました。わたしたちはどのように向き合えばよいでしょうか？ 田中みゆきさんは、『音で観るダンスのワークインプログレス』や『オーディオゲームセンター』など、障害のある人を含む鑑賞者とともに様々なイベントや展覧会を企画し、表現の見方やとらえ方を再考してきました。 そんな田中さんが今、『誰のためのアクセシビリティ？』という本を執筆しています。障害のある人への配慮やアクセシビリティを考える時、どうしても取りこぼされてしまう人がいるのではないか。多数派の作ったルールや倫理で成り立つこの社会で困難を抱える人々の話を、まず聞くことから始めたい。そうした思いから生まれたエッセイや対話を収録した本です。刊行は少し先になりますが、一人でも多くの方と共に考え、話し合うきっかけになることを願い、「はじめに」から公開いたします。 『誰のためのアクセ
Apple、iPhone/iPad用アイトラッキングやミュージック・ハプティクスを含む、今年後半に登場する新しいアクセシビリティ機能を発表 | NEWS | Mac OTAKARA
※本サイトは、アフィリエイト広告および広告による収益を得て運営しています。購入により売上の一部が本サイトに還元されることがあります。 Appleが、身体障がいのあるユーザーがiPhoneやiPadを目で操作する方法であるアイトラッキングを含む、今年後半に登場する新しいアクセシビリティ機能を発表しています。 さらに、Music Hapticsは、耳の不自由なユーザがiPhoneのTaptic Engineを使って音楽を体験できる新しい方法を提供し、Vocal Shortcutsは、ユーザがカスタムサウンドを出すことでタスクを実行できるようにします。 これらの機能は、Appleのハードウェアとソフトウェアの力を組み合わせ、Appleシリコン、人工知能、機械学習を活用し、すべての人のための製品を設計するというAppleの数十年にわたる取り組みをさらに推し進めるものです。 Tim Cook CEO
Creating Accessible UI Animations — Smashing Magazine
Animation and accessibility are often seen as two separate powers at odds with one another. How is it possible to strike a balance between elements that move and the possible negative effects they expose to users who are sensitive to motion? Oriana García explains how her team at Mercado Libre tackled the challenge by creating guiding principles for applying animation to user interfaces and incorp
2024年1月18日に開催した本セミナーの録画（質疑応答を除く40分）を、どなたでもご覧いただけるよう公開します。改正障害者差別解消法を正しく理解し、また改正法の施行に正しく備えるため、ぜひお役立てください。
アクセシビリティカンファレンス福岡
ここにいる。 アクセシビリティにかぎった話ではありませんが、あらゆる活動は多くのエネルギーを必要とします。 小さな地域での取り組みは、ときどき「仲間は近くにいるのだろうか」と不安が頭をよぎることがあります。 しかし、確かに仲間は存在し、その取り組みは組織を超え、地域を超えて広がっています。 本来は場所に縛られない活動ではあるのですが、その実感を得るために、今回あえて福岡での開催を選びました。 「わたしたちは、ここにいて、そして安心して取り組めるんだ」と、このイベントを通して証明します。
第１章.画像 この事例集はWCAG2.0解説書に基づき、WCAG 2.0 実装方法集を図解することを趣旨としています。「悪い例」と書いてある事例以外はJIS X 8341-3:2010の実装チェックリストで適合の欄に○をつけることができる事例ばかりです。このページでは特に画像に関するWCAG 2.0 実装方法集を集めています。 ※WCAG 2.0やJIS X 8341-3:2010の解説については「JIS X 8341-3:2010とは」ページをご覧ください。 画像に関する図解（1-1から1-4までの項目名をクリックすると、ページ内の該当項目にジャンプします） 1-1.alt属性 1-2.文字を画像化する時の注意 1-3.画像化された文字の色 1-4.アニメーションgif、又はアニメーション ウェブサイト制作時、alt属性値の書き方について悩んだことはないでしょうか。この章ではWCAG2.
Maps JavaScript API のユーザー補助機能に関する 2023 年の最新情報
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
サイオステクノロジーの伊藤です。 この記事は「アクセシビリティ Advent Calendar 2023」の6日目の記事です。 前日記事は山崎さんの「アクセシビリティの確保・向上の推進に使える数字」です。（勉強になりました） 私は日本DAISYコンソーシアム技術委員会の末席にいるのですが、今年はAce by DAISYの日本語訳を少しアップデートしたくらいで個人的にはほとんど活動らしい活動もできておりませんでした。 そんななか、今年は読書バリアフリーについてエポックな出来事がありました。 市川沙央さんの小説『ハンチバック』の芥川賞受賞とその反響です。 私は紙の本を憎んでいた。目が見えること、本が持てること、ページがめくれること、 読書姿勢が保てること、書店へ自由に買いに行けること、――5つの健常性を満たすことを要求する読書文化のマチズモを憎んでいた。 上記は『ハンチバック』主人公釈華の独白
ドコモ・プラスハーティの障がい者情報サイト ハーティサロン
公開日 : 2023年10月6日 (2024年3月2日 更新) カテゴリー : アクセシビリティ W3C の WCAG (Web Content Accessibility Guidelines) の新バージョンである WCAG 2.2 が、2023年10月5日に正式な Recommendation (勧告) になりました。 Web Content Accessibility Guidelines (WCAG) 2.2 - W3C Recommendation 05 October 2023 またこれに併せて、W3C の WAI (Web Accessibility Initiative) より以下の関連文書が公開されています。 WCAG 2.2 Understanding Docs WCAG 2.2 Techniques これまでも当サイトでは WCAG 2.2 策定の道のりをウォッチし
本連載は『Webアプリケーションアクセシビリティ──今日から始める現場からの改善』の第7章「アクセシビリティの組織導入」を公開するものです。 改正された障害者差別解消法や、デジタル庁の取り組みからの影響を受け、アクセシビリティ向上への機運は日ごとに高まっているように感じます。著名な企業がアクセシビリティへのスタンスを表明するケースも増えてきました。 しかし、こうした情報が目に入っているのは、あなたがアクセシビリティに関心がある側の人だからです。多くの場合、社内でのアクセシビリティへの意識はまだまだ高くないのが実態です。 個人や有志による非公式な取り組みでも、アクセシビリティは徐々に改善することは可能です。しかし、いずれは限界を迎えます。企業が提供するWebサイトやWebアプリケーションは組織で開発されており、大規模であり、かつ成長していくからです。 継続的に取り組み、成果を出し続けるため
（メモ）「ウェブアクセシビリティ導入ガイドブック」は自身がアクセシビリティ規格を満たしているわけではない - 水底の血
デジタル庁が提供しているウェブアクセシビリティ導入ガイドブックは、ウェブアクセシビリティの理解の一歩として有用な資料ですが、このガイドブック自身は残念ながらPDFのアクセシビリティ規格であるISO 14289-1 (PDF/UA-1)を満たしているわけではない…という話。 どうやってチェックしたかですが、veraPDFというツールでチェックを行いました。チェック対象ファイルは2024年3月29日発行のウェブアクセシビリティ導入ガイドブックです。 チェックに使用するveraPDFのバージョンですが、veraPDF/veraPDF-libraryのReleasesを見る限り、Developmentバージョン（v1.26.0 RC）でもいろいろPDF-UA/1周りの修正が入っているようですので、今回はv1.26系列を使ってみることにします。ビルド済みのjarファイル（インストーラー）はhttps
この記事について 2022 年 3 月、Safari15.4で HTML の dialog 要素が標準でサポートされました。 これにより、全ての主要ブラウザ（Chrome, Edge, Safari, Firefox）で dialog 要素が利用可能になり、今まで@react-ariaなどのライブラリに依存していたモーダル実装を見直したいと思っている方も多いのではないでしょうか。 本記事では、HTML の dialog 要素の使い方からアクセシブルなモーダルの要件、それらを全て満たすアクセシブルなモーダルの実装例についてご紹介します 🫡 そもそもアクセシブルなモーダルの要件って何？ そもそもアクセシブルなモーダルの要件とはどのようなものを指すのでしょうか。 Accessible Rich Internet Applications (WAI-ARIA) 1.1やARIA Authorin
2023年12月25日 著 私はGoogle アラートに「アクセシビリティ」とか「JIS X 8341-3」みたいな言葉を登録していて、Googleの検索対象にそれらを含んだコンテンツが新たに登録されるのをウォッチしているのですが、またしても改正障害者差別解消法に関して間違った解釈が掲載されているのを見つけてしまいました。あえて掲載元にリンクはしませんが、一部を引用します： 2021年の障害者差別解消法の改正により、2024年4月1日から民間事業者の合理的配慮が義務化されます。ウェブサイトの場合では「JIS X 8341-3:2016」という規格に準拠したウェブサイトを作り、ウェブアクセシビリティを確保することが義務化されます。 最初の文は、何ら問題なく、正しい内容です。問題はそのあとで......改正法のどこをどう読めば、JIS規格に準拠したWebサイトを作ることが義務化されるというので
アクセシビリティの祭典2024 スポンサーセッション 「発達障害当事者デザイナーとウェブアクセシビリティ」 株式会社トルク 山﨑悠
「情報保障とやさしい日本語」GAAD Japan 2024やさしい日本語についてのセッションスライド
やさしい日本語とは何か、外国人だけでなくさまざまな障害を持った人や若い人、こどもにもやさしい日本語についてとりあげます。Read less
button要素を非活性にする場合にdisabled属性がよく利用されます。 ただしdisabled属性には問題があってボタンにフォーカスが当たらなくなります。 フォーカスが当たらないとUI要素として認識がされにくいですのでフォーカスを当てた上で非活性であることを明示しようというのが本記事の意図です。 aria-disabledを利用する 基本的な対応は参照した記事に書かれている通りaria-disabled属性を利用するです。 ただ、以下のように普通に利用するだけではクリックイベントが実行されてしまいます。 <button aria-disabled onClick={() => console.log('click')}> ボタン </button> これを回避するためにButtonコンポーネントを作成してaria-disabled属性を受け入れる準備をしていきましょう。 クリックイベ
掲載：2023年9月30日 はじめに この報告書は、日本視覚障害者ICTネットワーク (JBICT.Net) が2023年5月から6月にかけて実施した第3回支援技術利用状況調査の結果をまとめたものです。 各設問（報告書末尾の「参考：設問一覧」を参照）への回答状況と、これらに基づいた集計結果の一部を示します。また、参考情報として、2022年に実施した前回調査の結果との比較を示している項目もあります。 参考：過去の調査結果 第2回支援技術利用状況調査報告書（2022年実施） 第1回支援技術利用状況調査報告書（2021年実施） 本報告書の著作権等 第3回支援技術利用状況調査報告書は、日本視覚障害者ICTネットワーク (JBICT.Net)が著作権を有し、CC BY-NC-ND 4.0 で公開しています。 Copyright © 2023 日本視覚障害者ICTネットワーク (JBICT.Net)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Simple setup: Virtual Screen Reader in Storybook
A11y - Focus Order | Figma Community
とってもやさしいウェブアクセシビリティチェックリスト｜i3DESIGN Designers
読字に困難「ディスレクシア」に読みやすい「UDフォント」広がる
国立国会図書館（NDL）、OCR処理プログラム「NDLOCR」ver.2を公開
Understanding Accessibility
視覚科学者がAPCAについて考えてみた｜Madoka Ohnishi
アクセシビリティが届いている人の無自覚さ - 金澤貴之研究室へようこそ！
ReactでYouTube埋め込むとLighthouseスコア低下する問題の改善手法まとめ
木下斉 / 好評発売中！「まちづくり幻想」 on X: "ケンタッキーのセルフオーダーシステムの前で立ち尽くす老人をみると、この20年、インターネットなどが普及する中で強制的にでも国民に端末操作などでの手続きを義務付けてこなかった国民教育の不足の末路を感じるな。ファーストフードの注文すら自分でできないレベルのリテラシーで老後生き抜けるのか"
そのaria-labelは本当に必要ですか？ | アクセシビリティBlog | ミツエーリンクス
2024年4月施行！障害者差別解消法で合理的配慮が義務化 - BUSINESS LAWYERS
ymrl on X: "画像の代替テキスト（alt属性）の話をしていると、いろんな人が「AIでやればいいのに」という話をするのだけど、実際にそういう試みはけっこう存在しているのは知られていないんだな、と思う。 ちょっとスレッドに有名な例を書いておきます。" / Twitter
そのスライドは色覚異常でも見える？ 「PowerPoint」のアクセシビリティ機能が強化／Windows/Mac版、Web版でテストを開始
『誰のためのアクセシビリティ？』 はじめに／田中みゆき｜リトルモア
https://www.freee.co.jp/news/20231219_design.html
改正障害者差別解消法とWebアクセシビリティ | セミナー | ミツエーリンクス
alt属性の良い事例(つけ方・書き方)｜情報バリアフリーポータルサイト
読書バリアフリーとReadium LCP - Qiita
ドコモ・プラスハーティの障がい者情報サイト ハーティサロン
WCAG 2.2 Recommendation (勧告) | Accessible & Usable
第1回 情報を共有して仲間を探す | gihyo.jp
dialog要素を使ってアクセシブルなモーダルを作ってみよう
改正障害者差別解消法とWebアクセシビリティをめぐる解釈
accfes2024_torque_yamasaki
アクセシブルでdisabledなButtonコンポーネントを作成
https://developer.apple.com/jp/design/human-interface-guidelines/accessibility
子ども服の名前タグが2段あるのはなぜ？→「子を持つ親でないとわからない気遣い」ママたち絶賛のブランドに聞いた｜まいどなニュース
第3回支援技術利用状況調査報告書 | 日本視覚障害者ICTネットワーク