アクセシブルなフロントエンド開発のこれまでとこれから / the past and future of accessible front-end development
JSConfJP 2021 発表資料 昨今アクセシビリティに関する興味関心が増えてきた中で、SPAといったWebアプリケーションにおけるアクセシビリティを考慮した実装についてはまだ認識が広まっていないように感じます。 フロントエンドフレームワークを使ってより良いアクセシビリティ実装をするにはどうすればいいかの方法、その結果どういう形で伝わっているかを紹介しようと思います。 またWebアプリケーションでHTMLを使ってUI実装することに限界を感じており、それを解消するためのReactGUIやHeadless UIといった新たなアプローチにおける期待についても紹介したいと思っております。
デザイナーの沢登です。 以前、コンテンツに関するアクセシビリティ勉強会をPRチーム森本さんに開催してもらいましたが、今回もアクセシビリティアドバイザーのfreee 伊原さんに協力いただきエンジニア向けの勉強会を開催しました。当日参加されたみなさん、伊原さん、ありがとうございました！ この記事では、目的や結果をオープン社内報でお届けします。 ❓ オープン社内報とは 一般的には社員しか見ることのできない「社内報」をだれでも見られるように公開することで、会社の中の様子を感じとってもらう記事企画です。 当日の勉強会資料 勉強会資料を確認 なぜやったのかアクセシビリティチームには、エンジニア・CS・ディレクターなど様々な職種・メンバーがサイドプロジェクトとして関わっています。しかし、ウェブエンジニアのアサインは深谷さん1人となっており、ウェブ版noteを1人でアクセシビリティ向上を行っていくことに限
公開日2020-02-02タグaccessibility文字だけ拡大できる機能とページ全体を拡大できる機能を持ったブラウザ（例えば Google Chrome）を使っていて、僕はその機能の違いを認識している。 しかし、文字だけ拡大するとページ全体を拡大したのと同じ挙動になるように作られているウェブサイトがたまにあり、そういうサイトに限って文字だけ大きくしたいので、つらい。 なんというか、手段が奪われたと感じてしまう。こちらの操作を阻害された感。 CSS でサイズ指定が全部 rem 単位だとそういうことが起きるんだけど、せっかく文字だけ拡大する方法があってそれを使いたいのにページ全体を拡大したのと同じになっちゃうというのは、エクスクルーシブではないだろうか。 大きいディスプレイ使ってると、その広さに見合った情報量、たとえば図と文字をある程度俯瞰できる割合を保ったまま文字を大きくしたいって思う
Japan Accessibility Conference vol.2にymrlさん、melonさん、abeが登壇しているときの様子。撮影: © @nobjas さん この記事はfreee Developers Advent Calendar 2020の19日目です。こんにちは、freeeでiOSアプリ開発を担当している @RyoAbe です。 私は、普段はiOS版の会計freeeや人事労務freeeの機能追加や保守対応を並行しつつ、アクセシビリティ対応もやっております。 developers.freee.co.jp developers.freee.co.jp 本記事では、そもそもなぜ私がアクセシビリティに携わることとなったのかをはじめ、freeeという組織がなぜアクセシビリティに取り組んでいるのかを、これまでの活動などを交えてお伝えできればと思います。この記事を通じて、「なんかアクセ
Stay organized with collections Save and categorize content based on your preferences.
入力フォームがあるページの設計をする際はフロントエンドでもバリデーションを実装することが多くあります。代表的なバリデーションは例えば以下のようなものです。 必須の入力欄に値が入力されていなければエラーとする メールアドレス入力欄に入力された値がメールアドレス形式でなければエラーとする パスワードとして使用できない文字が入力されればエラーとする 入力内容が不適切な場合は、入力欄に装飾を施すために:validと:invalidの2つの擬似クラスを利用してきました。 :validと:invalidは、主にフォームコントロール要素に関連する擬似クラスで、以下のような基準にしたがって各要素の状態がマッチするかどうかを判定します。 required属性付きの入力欄が空でなければ:valid、空であれば:invalid type属性がemailである入力欄に入力された値がメールアドレス形式であれば:va
Stark’s Public Library – Accessibility resources, guides, communities, and more
Contribute to StarkGot any accessibility resources or news? Submit a Resource
デジタルコンテンツにおけるアクセシビリティ、特にコントラストの基準について解説する連載の第2回目です。前回の記事では、現在のWCAG2のコントラスト基準と課題について解説しました。今回はWCAG3で採用が検討されている新しいコントラスト基準、APCAについて解説します。 APCAとは WCAG 2.0でコントラストの基準が策定されて以降、ディスプレイやWebコンテンツ、CSSの機能、および視覚科学の進歩など様々な状況が変化しました。WCAGの基準についても、コントラストや視認性についてより知覚を正しくモデル化するガイドラインが求められるようになりました。 APCA（Advanced Perceptual Contrast Algorithm）はWCAG3にて現行のコントラストに代わる基準として開発・検討されている、新しいコントラスト基準です。前回紹介したようなWCAG2の基準の課題に応える
新しく公開されるWebサイトに、動きのあるものが増えてきました。このような目を引くデザインは、視覚的な効果はありそうですが、困るユーザーもおられるようです。より良いデザインにする方法を考えます。 動きのあるWebサイトとは ここで取り上げる「動きのあるWebサイト」には、たとえば次のようなものがあります。 Webサイトのトップページなどで、ずっと動き続ける画像がある Webサイトの背景が動画になっていて、それを停止する手段がない。スクロールしないとコンテンツが表示されない Webサイトのトップページなどで、主要なコンテンツへのリンクが画像になっていて、見ていると画像が次々と入れ替わる(いわゆるカルーセル) 電光掲示板のように、文字がずっと流れ続ける 以下、それぞれの具体例をご説明します。具体例のサンプルページは動くWebデザインアイデア帳へリンクさせていただいています。 1. Webサイト
prefers-color-scheme: Hello darkness, my old friend Stay organized with collections Save and categorize content based on your preferences. Overhyped or necessity? Learn everything about dark mode and how to support it to the benefit of your users! Introduction Dark mode before Dark Mode Green screen (Source) We have gone full circle with dark mode. In the dawn of personal computing, dark mode wasn
こんにちは。アクセシビリティ・エンジニアのSUGIです。 私は全盲のエンジニアとして、2020年4月からサイボウズのデザイン&リサーチでお仕事をしています。 これから4回にわたって、とある全盲社員の働き方を連載していきます。第1回目はツール編です。次回以降、自己表現編・協働編・テレワーク編を連載していきます。 さて、私は就活および入社前、こんな不安を感じていました。 全盲の私が働くにあたって不安に感じていたこと ・会社ではどのようなツールが使われているのか、それらははたして使えるのか ・自己（の障害）を周囲にどう表現、どう伝えていけば良いか ・（視覚的な情報格差による）周囲との理解や作業の速度差をどう埋めていけば良いか おそらく同じような悩みを持っている方がいるのではないでしょうか。 そこで、この記事ではツール編と題して、「会社ではどのようなツールが使われているのか、それらは使えるのか」に
2024年4月1日に民間企業にも義務化される「合理的配慮」とアクセシビリティの関係を障害者差別解消法から解説します | DevelopersIO
この表の、事業者の合理的配慮の提供の部分で、現時点では「対応に努めること」とされていますが、2024年4月1日から事業者に対しても義務化されることが決まっています。 なお、東京都障害者差別解消条例では、都内で事業を行う民間事業者における「合理的配慮の提供」は、2018年から義務になっています。 また、注意が必要な点として、民間事業者において近い将来義務化されることが決まっているのは「合理的配慮の提供」であって「環境の整備」ではありません。障害者差別解消法における「環境の整備」は、引き続き努力義務のままです。「法改正でWebサイトのアクセシビリティが義務化！」という文言が見受けられますが、これは正確ではない表現となります。 B2Bの受託開発において合理的配慮の提供義務化が与える影響 ここで、企業の業務システムとして利用されるアプリケーションを受託開発する立場として、合理的配慮の義務化がどのよ
Designing better target sizes
Intro As a user, you need to interact with clickable UI elements like buttons, links, cards, and more. If an action has a small target size, it will be harder for the user to click, or they might click an adjacent action element by mistake. Let’s take a look at the following example.
ウェブアクセシビリティ検証ツール「axe」を用いた自動テスト実行スクリプト | Accessible & Usable
公開日 : 2021年2月23日 (2022年7月1日 更新) カテゴリー : アクセシビリティ Deque Systems, Inc. が開発、公開している、「axe」というウェブアクセシビリティ検証ツールがあります。Chrome、Firefox、Edge の拡張機能がリリースされており、各ブラウザの開発者ツールで使用することができます。 ウェブアクセシビリティ検証ツール「axe」(Chrome 拡張機能) の表示例 axe はとても便利なツールですが、ブラウザの拡張機能として使用する場合、1ページずつ開いてアクセシビリティを検証する、という形になります。検証対象サイトのページ数が多い場合、面倒に感じることもあるかもしれません。 axe では、コアエンジン「axe-core」もオープンソースで公開されているので、これを応用することで、ブラウザ自動操作ツールを介してウェブサイト (複数のウ
デザイナーとしてのアクセシビリティとの向き合い方｜ymrl
freeeで私はアクセシビリティチェック体制を整備したり研修やったり、アクセシビリティまわりのことをいろいろやってきました（詳しくは、去年までのは「2021年、freeeのアクセシビリティを振り返る」やそこから辿れる過去の記事に、今年のは12日にきっと magi さんが書いてくれます→「2022年、freeeのアクセシビリティを振り返る」が公開されました！）。 たまたま先日、新しく入社してアクセシビリティ研修を受けたデザイナーと話したとき、そういえばデザイナーになってからどういう気持ちでやっているのかを表明していなかったなと思ったので、改めて書いてみます。 デザイナーの作るものには、アクセシビリティはもともと存在しているここ1年以上、freeeに入社する人や、業務委託として参加してくださる方向けにアクセシビリティの話をしているので、もう数百人にアクセシビリティというものの説明をしているはず
@storybook/cli - Storybook
2019 年 8 月末、HTML LS で、autofocus 属性がグローバル属性となった。 ブラウザの対応が進めば、全ての要素で autofocus を使用できる。 autofocus属性とは autofocus 属性は、ページの読み込み時に自動的にフォーカスする要素を指定するもの。 これまで autofocus は、button, input など、フォーカス可能な要素でしか使用できなかった。 一方で、全ての要素は、tabindex または contenteditable 属性を追加することでフォーカスが可能である。 したがって、autofocus は全ての HTML 要素で使用できるべき、という内容の Issue が 4 月に上がってた。 Move autofocus content attribute to HTMLElement · Issue #4563 · whatwg/h
The woman who will decide what emoji we get to use 世界共通言語になった 「絵文字」の未来、 初の女性委員長が語る 絵文字（emoji）は、テキストメッセージに微妙なニュアンスを追加する手法としてネットで多用されている。絵文字を標準化するユニコード・コンソーシアムの絵文字小委員会の委員長に就任したジェニファー・ダニエルが、自らの役割や絵文字の未来について語った。 by Tanya Basu2021.05.24 45 18 3 「絵文字（emoji）」は、今では人々の言語の一部となっている。よほど変わった人でない限り、メールやインスタグラムの投稿、ティックトック（TikTok）の動画に、表現力を高めるさまざまな小さな画像をちりばめていることだろう。例えば、予防接種を受けた時の血が少し滴る注射器💉 や、「ありがとう」の意味を込めた祈りの手🙏
ツッコミが追いつかないというのは、こういうことを指すの…？ ハザードマップのユニバーサルデザインに関する検討会 - 国土交通省水管理・国土保全局 障害等に対応する一人ひとりのニーズに応じた水害リスク情報提供のあり方を検討する有識者会議を開催します！ ～ハザードマップのユニバーサルデザインに関する検討会（第１回）の開催～ - 国土交通省 ハザードマップは、主に地図上に水害リスクに関する情報を示すものですが、視覚等に障害を有する場合は紙面等の情報を取得することが困難であること、また、自身のリスクが把握しづらく、避難行動に役立ちにくいという意見もあることから、一人ひとりの環境やニーズに合ったリスク情報提供のあり方を整理するため、「ハザードマップのユニバーサルデザインに関する検討会」を設置し、令和３年１２月２３日（木）に第１回検討会を開催します。 という趣旨らしいです。これまで検討会は4回開催され
アクセシビリティを普段の開発に定着させるためにやったこと #STORESアドカレ - STORES Product Blog
STORES Advent Calendar 2022 の 24日目の記事です。 こんにちは。業務委託で STORES の開発をしている @inouetakuya です。 昨年のアドベントカレンダーでも アクセシビリティについての記事 を投稿し、そのなかで、 hey もアクセシビリティの取り組みはまだ始まったばかりで、目標としている「普段の開発に定着させる」というところまでの道のりは遠いですが、2022年も前に進めていく所存です。 と書きました。 今回は続編として、今年 2022年に、アクセシビリティを普段の開発に定着させるために行った取り組みを紹介します。 2021年のおさらい - 学習と実践 2022年のスタート地点がどのような感じだったかをお伝えするために、2021年の取り組みにも触れておきます。 2021年は STORES にとってアクセシビリティ元年とも呼べる年で、アクセシビリテ
掲載：2021年8月9日 更新：2022年4月10日 更新履歴 2022年4月10日：本調査の報告会のレポートへのリンクを追加 参考：イベント・レポート：第1回支援技術利用状況調査結果報告会 はじめに この報告書は、日本視覚障害者ICTネットワーク (JBICT.Net) が2021年4月から5月にかけて実施した第1回支援技術利用状況調査の結果をまとめたものです。 調査概要 本調査は、2021年4月21日から5月31日の期間実施し、Webとメールで回答を受け付けました。 上記期間中に344件の回答が寄せられました。このうち、Webによる回答が318件（92.44パーセント）、メールによる回答が26件（7.56パーセント）でした。 344件の回答のうち、336件（97.67パーセント）が有効回答でした。 必須の設問への回答が記入されていなかったもの、記入されたメール・アドレスが明らかに誤って
React Aria
Bring your own styles. React Aria is style-free out of the box, allowing you to build custom designs to fit your application or design system using any styling and animation solution. Each component is broken down into individual parts with built-in states, render props, and slots that make styling a breeze. Learn more <DatePicker> <Label>Date Planted</Label> <Group> <DateInput> {segment => <DateS
WINTICKETでは誰もが公営競技を楽しむことができるよう「JIS X 8341-3:2016 高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェア及びサービス－第3部：ウェブコンテンツ」に対応することを目標とし、アクセシビリティの向上に取り組んでいます。 対象範囲WINTICKETサービス https://www.winticket.jp 以下 目標とするレベルJIS X 8341-3:2016のレベルAに準拠 本方針、また試験結果における「準拠」という表記は、情報通信アクセス協議会のウェブアクセシビリティ基盤委員会による 「ウェブコンテンツのJIS X 8341-3:2016対応度表記ガイドライン2016年3月版」で定められた表記によるものです。 追加する達成基準1.4.3 コントラスト（最低限レベル）の達成基準（AA）2.4.7 フォーカスの可視化の達成基準（AA）例外
あなたが今！やるべきことがわかる「LIFULLアクセシビリティガイドライン」を公開しました - LIFULL Creators Blog
こんにちは、フロントエンドエンジニアの嶌田です。 アクセシビリティは今まで以上に大きな関心を寄せられるトピックになってきたように思います。個人で関心がある人、企業のなかで周りを巻き込み推進しようとしている人、すでに組織全体での取組みに変わりつつある企業など、状況は様々だと思います。弊社はというと、内側からの推進活動は広がりを見せつつも、まだ組織一丸となった取組みには至っていない、といったところです。 そんな状況の私たちですが、社外のアクセシビリティを推進する同志たちに、ほんの少しでも力を分け与えられたらと思い、このたび「LIFULLアクセシビリティガイドライン」を公開しました。取組み状況が様々ある中でどのように活かしていけるか、まずは一度ご覧いただければ幸いです！ lifull.github.io アクセシビリティとは？ アクセシビリティとは、高齢者や障害者を含むできるだけ多くの人々に対し
障がい×美容が当たり前の社会をつくる。私たちは障がい者の「美容を楽しむ」という可能性を拡げ より多くの人が選択肢を持てる未来への社会環境をつくります さまざまな想いを持つ障がい者の方と共に 美容を通した持続可能なバリアフリー社会を目指します 初めまして。 アクセシビューティー代表の 臼井理絵です。 みなさんは、ご存じでしょうか？ 障がいがある人たちにとって 「美容サロンへ行くことが困難なこと」 「美容技術を学ぶ学校に入学できないこと」 「美容職を目指すこと事体がタブーとされること」 これらはもちろん、社会的に禁止されていることでなく 当事者たちの人生にはばかるグレーゾーン。 設備的問題や健常者との間に生まれる壁、 そんな社会の中で“少数派”として生き抜くことの難しさ。 また、障がい者という理由での自信のなさが彼女たちをより一層、 美容から遠ざけているのです。 “美容の力で人生は変えられる”
noteでは2021年に入ってから、本格的にアクセシビリティの向上に取り組んでおり、今では社内でもかなり浸透してきました。 そこで今回は、今年6月に公開した記事「noteのアクセシビリティ向上プロジェクトが始動」のアンサーとして、アクセシビリティチームの仙田が2021年のnoteのアクセシビリティ向上の取り組みを時系列でご紹介します！ 機能の改修だけではなく、社内浸透のために行った勉強会や仕組み作り、外部での登壇、ユーザーインタビューなど、アクセシビリティに関わる取り組みを丸ごとお伝えしていきます。 1月magiさん座談会、そしてチームに加入これまでnote社ではアクセシビリティ向上の話がたびたびあがるものの、対応の優先度をあげることができず、プロジェクトとして発足することはありませんでした。 しかし、アクセシビリティの専門家であるmagi（伊原力也）さんと元同僚だったエンジニアが声をかけ
WhoCanUse
Can distinguish all three primary color, little to no blurriness
Markuplint - An HTML linter for all markup developers. | Markuplint
Conformance checkingThe markup needs to written valid code. This is important to keep the promise of the standards that do not break webpages through each user agent. Markuplint can conformance checking given the specs that are HTML Standard, WAI-ARIA, and more. On Your House RulesYou may have the house rules on your project or your organization. You can check based on your policy or your manageme
トグルスイッチとは状態のON/OFFを切り替えるためのUIパーツです。選択肢が明確にわかり直感的に操作できるトグルスイッチは、ユーザビリティを高めるための重要な要素です。しかしそのシンプルさゆえに、不適切な使われ方をしているケースを見かけます。トグルスイッチの機能と適切な使用方法を理解し、ポイントをおさえて設計することが大切です。 トグルスイッチの定義 トグルスイッチはウェブページやアプリケーションのコンポーネントです。同時に選択できない2つのオプションからいずれかを選択し、現在の状態を視覚的に表します。ユーザーがトグルスイッチのON/OFFを切り替えれば、ボタンの操作結果やオプションの変更設定がすぐにシステムに反映されます。 一般的に「トグルボタン」や「トグルスイッチ」と呼ばれることが多く、Material Design（※1）では「スイッチ」、Human Interface Guide
オープンソースで作る東京都新型コロナウイルス対策サイト。透明性が求められるサイト構築の舞台裏とは - amanaINSIGHTS（アマナインサイト）
UPDATE 2020 07/09 オープンソースで作る東京都新型コロナウイルス対策サイト。透明性が求められるサイト構築の舞台裏とは 東京都が3月4日にリリースした新型コロナウイルス感染症対策サイト。一番の特徴は非営利団体・Code for Japanに所属するエンジニアやデザイナーが中心となり、オープンソースで開発された点にあります。刻々と変化する状況とともにブラッシュアップした制作内容と、国民の関心度が高い新型コロナウイルス関連情報のビジュアライズのポイントについて、広報の陣内一樹さん、エンジニアの今村かずきさん、デザイナーの林敬子さんに伺いました。 サイト構築を手がけた3000人のオンラインコミュニティ、Code for Japanとは？ ――まずCode for Japan設立の経緯と普段の活動について教えてください。 陣内さん（以下、陣内。敬称略）：Code for Japanは
そもそもアクセシブルなサービスとは、どのようなサービス、実装を指すのでしょうか。 端的に表現するならば、「伝えたい情報が正しい文書構造によって実装されているサービス」だと考えます。 例えば以下のようなボタンの実装があったとします。 こちらがレンダリングされた結果です。 こちらがスクリーンリーダーの結果です。 (Macの場合command+F5でVoiceOverを使用することができます。) この例の場合、視覚的な情報と、支援技術を介して得られる情報とで差異が産まれてしまっています。これはアクセシブルではありません。（例外[1]もあります。） この例の場合、ボタンの働きが編集であれば、スクリーンリーダーにより取得した削除という情報は誤りになります。 スクリーンリーダーのような支援技術は、アクセシビリティツリーを元に情報の処理・出力を行います。 このアクセシビリティツリーは、DOMツリーという
※もっと具体的に知りたい方はCSS 2.2の11.2 Visibility: the 'visibility' propertyなどをご覧ください。 visibility vs display vs opacity ただ要素を見えなくするだけなら透明度を操作するopacityプロパティがあります。しかしそれよりもvisibilityが優れている点は、不可視になる（値がhiddenやcollapaseになる）と同時にアクセシビリティツリーからしっかり削除され、スクリーンリーダに読み上げられずタブフォーカスも当たらなくなるというところです1。display: none;との違いは「表示領域が残るかどうか」以外違いはありません。 特に、値collapseはテーブルなどで特定のセルや行だけを非表示にしたい場合などにも重宝します。display: none;でも同じような表現になりますが、colla
しかし、実際のデザインではこの表にないフォントサイズやウェイトを使いたい場合もあるでしょう。その場合には、シミュレータやルックアップテーブルを参照することで、より精度の高い確認が可能になります。 ルックアップテーブルでフォントサイズとウェイトから必要なコントラストを確認する シミュレーションの説明の前に、より細かい基準がどのように定められているか見るために、APCAのルックアップテーブルを見てみましょう。 このルックアップテーブルは、WCAG3のシルバーレベルを満たすための基準を示しています。ブロンズレベルに追加して、この基準に準拠することでより精度の高いコントラストの確保が可能になります。 以下は、公式のシミュレーションサイトAPCA Contrast Calculatorにあるルックアップテーブルのスナップショットです。ページの下部、APCA Font Table: Silver Le
こんにちは。エンジニアの中島です。 2022年 4月からアクセシビリティ推進グループ（以下推進グループ）に在籍しています。 この組織は新設されたばかりで、まだ出来て半年の組織になります。 そのため、部署の目指すべきゴールイメージや、それを図るための指標といったものを作るところから始めることになりました。 本記事はそういったところについて共有させていただこうと思います。 立ち上げにあたっての話については以前同グループの嶌田が投稿した記事があるのでそちらをご参照ください。 www.lifull.blog 部署の目指すべきゴールイメージと行動軸 プロダクトに対する直接的な品質改善活動 新しい負債の発生を低減させるための文化醸成 指標化 プロダクトに対する直接的な品質改善活動の指標化 マニュアルテスト スコアリング 加えたマニュアルテスト項目とその重み Lighthouseの推奨するマニュアルテス
アクセシビリティチェックってどうやってるの？ということで、実際にやってみた。（その1）、（その2）の続きです。 おさらい 対象ページ：「アトリエ金工やまぐち」 Basic認証があるので、アクセシビリティ向上日誌１【各種ツール評価編】からたどってください @HeldaForStudy氏に了承を得てアクセシビリティチェックを行っています チェック基準：WCAG 2.1レベルA 文中のSCはSuccess Criteriaの略で達成基準のこと 目的はどうやってアクセシビリティチェックしているのか、チェックしながら何を考えているのかを書き記すことです 制作ページやチェック内容にネガティブなことをいいたいわけではありません チェックに抜け漏れ、誤りがあるかもしれません 仕様等は基本的に日本語訳を当たります では続きに入っていきましょう。 「ABOUT」セクション アクセシビリティチェックの経験がある
本記事は<svg>要素のみを持つ<button>要素（アイコンボタン）にアクセシブルな名前（accessible name）を持たせる方法について調査した結果と、WCAG 2.2のSuccess Criterion 1.1.1 Non-text Contentに関する私見をまとめたものです。 結論 アイコンボタンの非テキストコンテンツは装飾ではなく意味を持つ画像なので、ボタンではなくアイコン画像自体にアクセシブルな名前を持たせるべきだと考えます 一方で、非テキストコンテンツの範囲をアイコンのみではなくアイコンボタン全体と捉えると、ボタンにアクセシブルな名前を持たせることも妥当に思えますが、<img>要素や<svg>要素など様々な種類のアイコン画像の実装を想定した場合、やはりボタンにアクセシブルな名前を持たせない方針に倒す方がシンプルだと思います <svg>要素のみを持つ<button>要素
アクセシビリティ – React
なぜアクセシビリティが必要なのか？ Web アクセシビリティ（a11y とも呼ばれます）とは、誰にでも使えるようウェブサイトを設計・構築することです。ユーザ補助技術がウェブページを解釈できるようにするためには、サイトでアクセシビリティをサポートする必要があります。 React はアクセシビリティを備えたウェブサイトの構築を全面的にサポートしており、大抵は標準の HTML の技術が用いられます。 標準およびガイドライン WCAG Web Content Accessibility Guidelines はアクセシビリティを備えたウェブサイトを構築するためのガイドラインを提供しています。 以下の WCAG のチェックリストはその概要を示します。 WCAG checklist from Wuhcag WCAG checklist from WebAIM Checklist from The A1
あるいは必要十分条件について1。 Nu Html Checkerの場合 Nu Html Checkerは、HTMLをチェックするツールである。Nu Html Checkerで特定の（種類の）エラーを0にすることは、「構文解析」のWCAGの達成基準を満たすための必要十分条件となる。 達成基準 4.1.1 構文解析 (レベル A): マークアップ言語を用いて実装されているコンテンツにおいては、要素には完全な開始タグ及び終了タグがあり、要素は仕様に準じて入れ子になっていて、要素には重複した属性がなく、どの ID も一意的である。ただし、仕様で認められているものを除く。 筆者による上記引用のハイライト部分“どのIDも一意的であること”について見てみる。たとえば以下のHTML断片のように、1つのページに同じid属性値が2回出現することはHTMLのエラーであり、かつ、WCAGの達成基準の違反となる：
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
noteの虚空ボタンを顕現させる社内勉強会を開催しました｜sawa / swnjp
僕は文字だけ拡大したい - dskd
なぜ私はアクセシビリティに携わっているのか - freee Developers Hub
Learn Accessibility | web.dev
:user-validと:user-invalid擬似クラス | フロントエンドBlog | ミツエーリンクス
第2回 WCAG3のコントラスト基準APCAの考え方と実例 | gihyo.jp
Webサイトの動き続ける画像や動画、カルーセルのデザインをよりよくする | DevelopersIO
prefers-color-scheme: Hello darkness, my old friend | Articles | web.dev
とある全盲の新入社員の働き方 ～ツール編～｜blindsoup
autofocusがグローバル属性になったのでなんか書く | きるこの日記帳
世界共通言語になった 「絵文字」の未来、 初の女性委員長が語る
国交省ハザードマップ検討会のWebアクセシビリティの認識が詰んでいる - 水底の血
東京ニトロ 🍉𝙏𝙤𝙠𝙮𝙤𝙉𝙞𝙩𝙧𝙤 on X: "おれはイオンシネマに怒っている。というのも今回の件で、イオンシネマのバリアフリー対応を調べようとしたら、ウェブサイトの時点でバリアと不平等があるからだ。 https://t.co/v4Z5yMV1zp" / Twitter
第1回支援技術利用状況調査報告書 | 日本視覚障害者ICTネットワーク
ウェブアクセシビリティについて【WINTICKET(ウィンチケット)】
株式会社accessibeauty | アクセシビューティー
プロジェクト発足から1年。noteのアクセシビリティ向上を振り返る｜note株式会社
ユーザーが迷わないトグルスイッチの使い方 | ベイジのUIラボ
aria-labelで始める、アクセシビリティ改善活動
意外と知らないvisibilityの活用方法！ | フロントエンドBlog | ミツエーリンクス
第3回 APCAを活用して文字の視認性を確保したデザインを実践する | gihyo.jp
アクセシビリティ推進組織立ち上げ後半年間の動き - LIFULL Creators Blog
アクセシビリティチェックってどうやってるの？ということで、実際にやってみた。（その3） - 水底の血
アイコンボタンのアクセシブルな名前はボタンが持つべきかアイコンが持つべきか
Webアクセシビリティ対応で“ブランドカラー”を変更 → 結果的にサイト流入も増えた | 【レポート】Web担当者Forumミーティング 2021 秋
WCAG2の「十分な達成方法」について - 水底の血