There are financial, legal, usability, and moral reasons to ensure your site is accessible. Here we look at five web accessibility examples you can learn from. First up, if you need a primer on web accessibility, check out this video on the business case for accessibility or our digital accessibility report. You might also want to explore this post on designing for accessibility, our response to t
contrAAAst
アクセシビリティに取り組んでいる「人」にフォーカスしたインタビュー集
After many months of research, development, and extensive testing across browsers, devices, and assistive technology, we’re excited to announce that the React Spectrum ComboBox component and React Aria useComboBox hook are now available! We’ve focused on the following areas to help you build quality autocomplete experiences. Accessibility — Our ComboBox has been tested with screen readers across d
アクセシビリティの祭典 2023
Accessibility cycle アクセシビリティ・サイクル 〜人の繋がりが世界を変え続ける〜 第9回目となる2023年のアクセシビリティの祭典は、人のつながりが世界を変え続け、それが、きっと皆さんに還元されるという想いを込め、「アクセシビリティ・サイクル ～人の繋がりが世界を変え続ける～」をテーマに開催予定です。 障害者&Web・AI・IoT、障害者&イノベーション、最新の支援技術、このいずれかにご興味のある方、ぜひ障害当事者達が描くアクセシビリティの近未来のセッション・展示をご覧ください。 メッセージ
Home / Articles / 5 Keys to Accessible Web Typography Matej Latin ~ 14 min read I wrote about fluid web typography in last month’s blog post and I realised that a lot of the popular implementation techniques come with accessibility issues. So I wanted to go back and revisit the basics and the best practices of accessible web typography. I think it’s safe to claim that a large part of website acces
Accessibility In Chrome DevTools — Smashing Magazine
This article will demonstrate some useful features in DevTools which can help you improve the accessibility of your website. For many websites, things like performance and accessibility are an afterthought. But as web developers, it’s best to strive to create the best possible experience we can for our users, regardless of their abilities. I spend a lot of time in DevTools, and in doing so, I’ve c
こんにちは！ SmartHRのプロダクトエンジニアのshunです。 本記事では、弊社内で実施しているアクセシビリティマスター養成講座のご紹介と、SmartHRの従業員サーベイというプロダクトで実施しているアクセシビリティ改善の取り組みについてお話しできればと思います。 SmartHRにおけるアクセシビリティの取り組み SmartHRでは、アクセシビリティの専門スキルを持つ@masuP9さんと@maverickさんを中心にアクセシビリティ改善の取り組みが行なわれています。 お二人のアクセシビリティに関する取り組みに関しては、以下の記事をご参照いただければと思います。 tech.smarthr.jp アクセシビリティマスター養成講座 2022年3月から、SmartHR社内における各プロダクトのアクセシビリティ改善の取り組みとして、アクセシビリティマスター養成講座が始まりました。 @masuP9
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
コンピュータの画面に表示されている情報を合成音声で読み上げるスクリーンリーダー。視覚障害者がコンピュータを操作するために欠かせないソフトウェアだ。西本卓也さんは、オープンソースのスクリーンリーダー「NVDA」の日本語対応を最初に始め、10年以上に渡って開発をリードしてきた。 アクセシビリティに関わるきっかけは、視覚障害のある方がパソコンを練習する教室と接点ができ、その流れで、視覚障害者のためのタイピング練習ソフトウェアの開発に携わったこと。 「プロダクトを作って、視覚障害のある方に使ってもらうというのは、私の中ではとても貴重な経験でした。そういう方々のお役に立てたのが嬉しかった」 その後、スクリーンリーダーを取り巻く状況が、世界と日本とで大きく異なることを知り、自ら手を動かすことになる。 「オープンソースのスクリーンリーダーに、日本語の読み上げを組み込んでみようとして、いろいろ頑張ってみた
界隈的にはWCAG 2.2 CRが話題になってると思いますけども、WCAG 2.2 CRと同じ日に、ドラフトノートとしてW3C Accessibility Maturity Model（W3Cアクセシビリティ成熟度モデル）という文書が発行されています。 これは何なのか？というのは、この文書のAbstractには次のようにあります。 The W3C Accessibility Maturity Model is a guide for organizations to evaluate and improve their business processes to produce digital products that are accessible to people with disabilities. Use of the W3C Accessibility Maturity Mod
2021年9月のデジタル庁（仮称）創設に向けた準備が急ピッチで進んでいる。報道によれば、政府は2021年2月8日の週にもデジタル改革の関連法案を閣議決定する見通しだ。これはデジタル庁設置法案や、デジタル社会実現の基本理念を規定するデジタル社会形成基本法案などを含んでいる。 その後、今国会に提出して成立を目指す。2000年に制定したIT基本法に代わってデジタル社会形成基本法が国のIT政策の理念や基本方針を示すことになる。 これらの法案には有識者の提言が反映されている。慶応義塾大学の村井純教授やNECの遠藤信博会長など9人が政府の「デジタル改革関連法案ワーキンググループ（WG）」で2020年11月13日に示した「IT基本法への提言」および「デジタル庁設置への提言」である。 同WGの座長を務めた村井教授は「具体的な法案の文言は法案作成の専門家が作成したが、有識者の提言を受け入れ、それに沿う形にし
TechCrunch
Butcherbox is known for grinding its way forward, bootstrapping to more than $600,000 worth of revenue. The company hasn’t traditionally been on the M&A path, but it today announced it is acquir
掲載：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)
Web制作をするにあたり、ターゲット層はもちろんのこと様々な見え方を想定していかなければなりません。色盲・色弱もそのひとつです。色覚異常の方は日本に約290万人いるとされ、どんな人にも見やすく情報を伝えられるサイトにする必要があります。 今日はそんな色覚異常の方にどう見えているのかが確認できるChromeの拡張機能、「Colorblindly」を紹介します。
Web: How to document the screen reader user experience - Accessibility, Your Team and You
User experience designers guide, How to document the screen reader user experience User experience designers are responsible for designing the user experience. Period. A visual is not enough. This doesn't ensure a good user experience (UX) for all users. Accessible design process includes documenting the non-visual UX, for screen reader users. This also helps in achieving a good user experience fo
アクセシビリティ対応 Web サイトの構築に関するリソース - Microsoft Edge Developer documentation
Web には、HTML、CSS、JavaScript の組み合わせを使用して構築された動的で複雑な Web サイト、アプリケーション、およびユーザー インターフェイスが用意されています。 ただし、アクセシビリティを念頭に置いて設計および構築する場合、これらの複雑な Web サイトは、 支援技術 に依存して Web を閲覧するユーザーが使用するのが困難です。 障穣のあるユーザーがアクセスできる Web サイトを構築するには、ユーザー インターフェイスに関するセマンティック情報が必要です。 アクセシビリティ対応の Web サイトを使用すると、スクリーン リーダーなどの支援技術が、さまざまな能力を持つユーザーが Web サイトを使用するのに役立つ必要な情報を伝えることができるようになります。 Microsoft Edge でサポートされている新しい HTML5 機能については、 HTML5Acc
DIST.30 Lightning Talk13 December 2019Yuko Morikawa, to-R Inc. トゥーアールの森川です。 私はWebの持つ無限の可能性に惹かれて、この業界で働いています。 ウェブアクセシビリティとは、誰もがどんな状況でもウェブにアクセスできるようにすること。これを知ったとき、私はウェブのアクセシビリティの高さに惹かれたんだと思いました。 「ウェブのパワーはそのユニバーサル性にある。障害に関わらず誰もがアクセスできることがその本質である」 World Wide Webを発明したティム・バーナーズ・リー氏の有名な言葉です。 ウェブの本質であるアクセシビリティを守っていくのは私たちの役⽬です。 これが私がアクセシビリティをやる理由の1つです。 今日はCSSでアクセシビリティを高めていくためのTipsを4つご紹介したいと思います。 Focus Stat
A Complete Guide To Accessibility Tooling — Smashing Magazine
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered HTML Emails and SVG Generators. This time we look into different kinds of tools to help you streamline your accessibility testing process. Don’t miss the next one. Learning to build accessible websites can be a daunting task for those who are just starting to im
Many forms of assistive technology use keyboard navigation to understand and take action on screen content. One way of navigating is via the Tab key. You may already be familiar with this way of navigating if you use it to quickly jump from input to input on a form without having to reach for your mouse or trackpad. Tab will jump to interactive elements in the order they show up in the DOM. This i
W3Cからアナウンスされたように、WCAG 2.2が2023年10月5日付けで勧告（Recommendation）となりました。 WCAG 2.1の最初の勧告が2018年ですから、そこから5年が経って達成基準（Success Criterion）が追加されたことになります。 WCAG 2.1の勧告について「最初の」とわざわざ言っているのは、WCAG 2.1が先月に更新されたことによります（W3Cのアナウンス）。 WCAG 2.1の更新の内容はもっぱらエラッタの適用ですが（WCAG 2.1のChange Logも参照）、その中でも達成基準4.1.1について注記が追加されたのが目立った変更点と言えます。 この追記は、端的にはWCAG 2.2では達成基準 4.1.1が削除されているように、達成基準 4.1.1についての評価は別の達成基準で行うようにするという内容です。 さて、WCAG 2.2の話
「jQueryはもう古い」「脱jQuery」なんて言われているが、今でもjQueryは簡単・便利につかえて、プログラミング初心者のファーストステップに超おすすめなのがjQuery。 そんな、jQuery初心者の方にむけ、今回はjQueryの「書き方」と「考え方」を具体例を交えながら学習していこう！ ▼動画で学びたい方は、こちらからどうぞ↓ なぜ脱jQueryと言われるのか？ まず、なぜ脱jQueryと言われているのだろうか？いくつかあるが、その一部を抜粋しよう。 jQuery本体を読み込む事が、WEBサイト表示の遅延になる 各ブラウザが進化し、jQueryの恩恵が少なくなった ReactやVue.jsなどモダンなフレームワークとコードが競合する場合がある 古いプラグインなど動作しないもの等がある 初心者はjQueryを学んだほうが良い？無駄な学習になる？ 結論から言うと「脱jQuery」と
VUEVO（ビューボ）は、聴覚障害や聞こえにくさがある人と聴者のコミュニケーションをスムーズにしたい、それにより互いに余計なストレスや気遣い無くもっと向き合える機会を増やしたい、という想いからスタートしたサービスです。聴覚障害者と聴者の間には、職場での聞こえの違いによって会議など複数人の会話の場でコミュニケーションが難しいという課題があります。ピクシーダストテクノロジーズの先端技術を用いて開発したVUEVOは、「誰が」「何を」話しているかをリアルタイムに直感的に表示することでこの課題を解決します。
Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast. Include one color per line, with an optional comma-separated label. Rows & Columns #FFFFFF, White #F2F2F2 #DDDDDD #CCCCCC #888888 #404040, Charcoal #000000, Black #2F78C5, Effective on Extremes #0F60B6, Effective on Lights #398EEA, Ineffective Use distinct rows & columns values Use the same rows & colum
2020年4月17日 今、改めて考えるInternet Explorer 11対応のコスト アクセシビリティ部 チーフ・アクセシビリティエンジニア 黒澤 剛志 「もうたくさんだ（Enough is enough）」。2019年2月、MicrosoftのChris Jackson氏は 企業にInternet Explorerの利用をやめるよう呼びかけるBlog記事 を発表して話題になりました。当時からMicrosoftはセキュリティ関連の修正を除いてInternet Explorerの改善（新機能の追加や処理速度の向上など）を行っていません。それは、現在もサポートが継続しているInternet Explorer 11（IE 11）でも同様です。かわりにMicrosoftはEdgeの改善に力を注いでおり、先日（2020年4月9日）も 新しい Microsoft Edge に移行すべき 10 の
達成基準 1.4.11 非テキストのコントラスト (レベル AA): 以下の視覚的提示には、隣接した色との間で少なくとも 3:1 のコントラスト比がある。 ユーザインタフェース コンポーネント ユーザインタフェース コンポーネント及び状態 (state) を特定するのに必要な視覚的な情報。ただし、アクティブではないユーザインタフェース コンポーネントや、そのコンポーネントの見た目がユーザエージェントによって提示されていてコンテンツ制作者が変更していない場合は除く。 グラフィカルオブジェクト コンテンツを理解するのに必要なグラフィック部分。ただし、そのグラフィック特有の提示が、情報を伝えるうえで必要不可欠な場合は除く。 意図 この達成基準の意図は、アクティブなユーザインタフェース コンポーネント (つまり、コントロール) 及び意味のあるグラフィックが中程度のロービジョンの人によって識別できる
アクセシビリティ Advent Calendar 2021、ありがとうございました！ この記事はアクセシビリティ Advent Calendar 2021の最終日の記事です。 今までは、2013年開始！という歴史と伝統ある Webアクセシビリティ Advent Calendarと、2016年に開始され、休憩を挟んで以降は僕が作成させていただいているWebじゃないアクセシビリティ Advent Calendar 2018、Webも含むアクセシビリティ Advent Calendar 2019という、大きくは2本立ての時代がありました。 2021年の今年は、毎年「Webアクセシビリティ Advent Calendar」を作成されている木達さんから、「今年はWebアクセシビリティのカレンダーを作るつもりはないので、あとはよろしく！」とご指名をいただきました。 昨年の集まり具合を踏まえ、今年は A
Color contrast checker, analyser and color suggestions | Polypane
How does the color contrast checker work?The Polypane color contrast checker checks against values defined by the WCAG 2 (Web Content Accessibility Guidelines) or APCA (the Accessible Perceptual Contrast Algorithm). WCAG give a formula to calculate the contrast, ranging from 1 (no contrast) to 21 (black on white). APCA has a range from minus ~106 to plus ~106. The Polypane contrast checker takes o
W3C Accessibility Guidelines (WCAG) 3.0 W3C Working Draft 24 July 2023 More details about this document This version: https://www.w3.org/TR/2023/WD-wcag-3.0-20230724/ Latest published version: https://www.w3.org/TR/wcag-3.0/ Latest editor's draft:https://w3c.github.io/silver/guidelines/ History: https://www.w3.org/standards/history/wcag-3.0/ Commit history Editors: Jeanne Spellman (TetraLogical) R
> アルファサード株式会社アルファサード株式会社 https://www.powercms.jp/news/powercms-8341.html JIS X 8341-3:2016適合評価 ランダムに抽出した20ページおよび、ランダムでない方法で抽出した20ページの合計40ページについての試験を実施し、結果をご報告します。修正必要事項があればご提案を行い、再試験を1回実施します。 価格 : 30万円(A) または40万円(AA) > ミツエーリンクスミツエーリンクス https://www.mitsue.co.jp/service/accessibility/diagnostics/ 費用（1回10ページ）：30万円～ > 株式会社インフォアクシア株式会社インフォアクシア https://infoaxia.co.jp/assessments/reporting.html レベル AA：ペー
WEBページ制作で、とってもベンリなアイコンフォント。 検索窓のアイコンや、ちょっとしたアクセントに大活躍してくれますよね。 特に『Font Awesome』は無料で使えるありがたーいアイコンフォントなので、愛用している方も多いのではないでしょうか。 今回は、そんなベンリなアイコンフォントを使うとき、一緒に指定しておきたいHTMLタグ「aria-hidden」について、その効果や使い方をざっくりとまとめてみました。 「aria-hidden」の効果 HTMLタグである「aria-hidden」は、WEBページで音声読み上げを利用しているとき、アイコンフォントなどを「文字」として読み上げてしまうのを防止できるタグです。 「aria-hidden="true"」と指定することで、その部分だけ「読み上げをスキップ（読み上げない）」してくれます。 「ウェブページの音声読み上げ機能」は、目が不自由な
You are here: Home > WebAIM Projects > Screen Reader User Survey #8 Results Introduction In August - September 2019, WebAIM surveyed preferences of screen reader users. We received 1224 valid responses. This was a follow-up to 7 previous surveys that were conducted between January 2009 and October 2017. A few disclaimers and notices: Totals may not equal 100% due to rounding. Total responses (n) f
障害者に「やさしい」は不要。アクセシブルが当たり前の世の中に変えたい！ | 森田雄＆林真理子が聴く「Web系キャリア探訪」
生まれつき全盲という辻勝利氏。コンピューターが好きで、それに携わる仕事をしたいと思いながらも、なかなか思うようなキャリアを積めなかったそうです。それでも、チャレンジをし続け、視覚障害者の働き方を妨げていたことを解決したいと2021年9月からはSmartHRに参画。辻氏の経歴をまとめた資料をもとに、インタビューが行われました。 Webが一般に普及してすでに20年以上が経つが、未だにWeb業界のキャリアモデル、組織的な人材育成方式は確立していない。組織の枠を越えてロールモデルを発見し、人材育成の方式を学べたら、という思いから本連載の企画がスタートした。連載では、Web業界で働くさまざまな人にスポットをあて、そのキャリアや組織の人材育成について話を聞いていく。 インタビュアーは、Webデザイン黎明期から業界をよく知るIA/UXデザイナーの森田雄氏と、クリエイティブ職の人材育成に長く携わるトレーニ
GitHub - maiha2/accessibility-in-design-system: list of accessibility pages in design systems
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
公開日 : 2019年6月20日 (2020年4月16日 更新) カテゴリー : アクセシビリティ 私も作業協力者として参加しているウェブアクセシビリティ基盤委員会 (WAIC) の翻訳作業部会にて、W3C 勧告「WCAG (Web Content Accessibility Guidelines) 2.1」の日本語訳が行なわれ、このほど公開されました。 Web Content Accessibility Guidelines (WCAG) 2.1 日本語訳 旧バージョン (2.0) に含まれている達成基準はそのままに、新バージョン (2.1) では新たに17の達成基準が追加され、これまで十分にカバーできていなかったとされる領域 (ロービジョン、モバイル、認知/学習障害への配慮) が強化されています。 なお、新たに追加された達成基準 (の日本語訳) は、以下のとおりです。 1.3 適応可能
Yahoo!ニュース
Yahoo!ニュースからのお知らせ ノンフィクション本大賞 川内有緒『目の見えない白鳥さんとアートを見にいく』に決定
NVDAでアクセシビリティー チェック
オープンソースのWindows向けスクリーンリーダーであるNVDAを使用して、アクセシビリティー チェックの手順を解説しています
一般にウェブアクセシビリティは、合理的配慮の事前的改善措置となる、環境の整備に分類されます。総務省のみんなの公共サイト運用ガイドライン（2016年版）によれば、 障害者差別解消法（平成 28 年 4 月 1 日施行）において、ウェブアクセシビリティを含む情報アクセシビリティは、合理的配慮を的確に行うための環境の整備と位置づけられており、事前的改善措置として計画的に推進することが求められています。 とあり…などと自信満々に答えられてたのですが、政府広報オンラインのウェブアクセシビリティとは？分かりやすくゼロから解説！という記事（下記スクリーンショット中の下線は筆者によります。*1）によると、 障害者のある人への合理的配慮とは、（中略）ウェブサイトの場合ではJIS X 8341-3:2016に準拠したウェブサイトを作り、ウェブアクセシビリティを確保することがこれに当たります。 とあるわけで、J
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web accessibility examples: 5 sites doing it right
Creating an accessible autocomplete experience
5 Keys to Accessible Web Typography
従業員サーベイの簡易ウェブアクセシビリティ試験を実施しました！ - SmartHR Tech Blog
Date and Time Pickers for All
西本卓也さん──人命を左右するアクセシビリティの分野で、自分の役割を果たしたい - Findy Engineer Lab
（メモ）W3Cアクセシビリティ成熟度モデルの話 - 水底の血
デジタル改革関連法案が閣議決定へ、法案WGの村井純座長が語る舞台裏と注目人事
https://twitter.com/esumii/status/1531553369164480513
第3回支援技術利用状況調査報告書 | 日本視覚障害者ICTネットワーク
色盲・色弱の方の見え方が確認できるChrome拡張機能「Colorblindy」
アクセシビリティを高めるCSS by Yuko Morikawa
Focus management and inert | CSS-Tricks
WCAG 2.2の勧告とWCAG 2.1の更新 | アクセシビリティBlog | ミツエーリンクス
jQueryの使い方「基本の書き方と考え方」 - STAND-4U
VUEVO（ビューボ） | みんなの会話を視覚化し、聞こえの違いをつなぐサービス
EightShapes Contrast Grid
今、改めて考えるInternet Explorer 11対応のコスト | コラム | ミツエーリンクス
達成基準 1.4.11: 非テキストのコントラストを理解する
2021年のクラスメソッドでのアクセシビリティ活動のふりかえり | DevelopersIO
W3C Accessibility Guidelines (WCAG) 3.0
Webアクセシビリティ/JIS X8341-3:2016 試験を他社に依頼した場合の参考価格 - esa-pages.io
【HTML】aria-hiddenってなに？読み上げスキップ指定の書き方｜Web Work Plus
WebAIM: Screen Reader User Survey #8 Results
WCAG 2.1 日本語訳が公開 | Accessible & Usable
西武鉄道、バリアフリー化を促進するための料金徴収。1乗車あたり10円を加算
ウェブアクセシビリティは合理的配慮ですか？（追記あり） - 水底の血
honnosyoukai.hatenadiary.jp
www.asahi.com
news.yahoo.co.jp
thinqlo.co.jp
nobleame.hatenablog.com
news.yahoo.co.jp