Webアクセシビリティ入門2023年度リクルート エンジニアコース新人研修の講義資料です
APCA何もわからない - Qiita
Accessible Perceptual Contrast Algorithm（APCA）はWCAG 3.0において、コントラスト比に関する新しい基準として提唱されているアルゴリズムです。 つたない英語力でそのコンセプトや概略を読み込んでみて、なんとなく以下のように理解しました。 コントラストというのは単純な背景色と前景色の差分だけで判断できるものではない。錯覚とかあるからね。フォントのサイズやウェイト、行間、コンテキストなどから総合的に知覚されるものだ、ということらしい。 文字の読みやすさに影響するコントラストの知覚に関しては、フォントサイズやウェイトなどからなる空間周波数の影響をとくに受ける。 空間周波数はWikipediaによると「空間的な周期をもつ構造の性質」とのこと、なんとなく一定の二次平面上のパターンの複雑さってことかなぁ？このパターンの刺激が一定程度を超えると知覚できるよう
改正障害者差別解消法とウェブアクセシビリティ | Accessible & Usable
公開日 : 2023年7月19日 (2024年3月20日 更新) カテゴリー : アクセシビリティ 国連の「障害者の権利に関する条約 (Convention on the Rights of Persons with Disabilities)」の批准に伴う国内法制度の整備の一環として、「障害を理由とする差別の解消の推進に関する法律」(いわゆる「障害者差別解消法」) が2016 (平成28) 年4月1日より施行されています。 現在はその改正法 (「障害を理由とする差別の解消の推進に関する法律の一部を改正する法律」) が2021 (令和3) 年6月4日に公布されており、政令により2024 (令和6) 年4月1日に施行されることになっています。併せて基本方針 (「障害を理由とする差別の解消の推進に関する基本方針」) も改訂され2023 (令和5) 年3月14日に閣議決定されたところで、こちらも
ウェブアクセシビリティ：よくある6つの質問に回答 | ウェブアクセシビリティ導入ガイドブック
本記事は、デジタル庁が作成した「ウェブアクセシビリティ導入ガイドブック」の内容コピーライトポリシーに準じて転載をしています。 「ウェブアクセシビリティとは何か？」からはじめて学ぶ人にとって、非常に有益な情報となっています。手元に置きたい場合は、ぜひデジタル庁のサイトで、「ウェブアクセシビリティ導入ガイドブック」を、ダウンロードして振り返りながら活用してください（Web担編集部）。 ウェブアクセシビリティ導入ガイドブックとはウェブサイトで発信される情報、情報システムで提供されるサービスは、インターネットとブラウザがあれば時間と場所を問わず利用することができ便利です。また、利用者が、見やすい・使いやすい方法を選んで使うことができる、柔軟性の高いメディアでもあります。 インターネットを使った情報発信ができるようになったことで、情報へのアクセスのしやすさ、つまりアクセシビリティは格段に高まりました
`.sr-only`のような非表示スタイルとSEOの関係性の調査
そもそも.sr-onlyとはBootstrap 4 や Tailwind CSS などの CSS フレームワークで定義されているクラス。sr は「ScreenReaders（スクリーンリーダー）」の略称。 スクリーンリーダーのような支援技術ではテキストが必要だが、視覚的には非表示にした方が良いような要素に使われる。これはdisplay: noneだとスクリーンリーダーでは読み上げられないため、視覚的に非表示にするような実装方法となっている。 <span class="sr-only">Posted on: </span> <time class="updated" datetime="2017-02-18T17:16:40+00:00">18 February 2017</time> Bootstrap 4Screenreaders · Bootstrap /* Bootstrap 4 *
ユーザーに悪影響を及ぼすWebサイトのNG機能は？ ウェブアクセシビリティで達成したいコト | ウェブアクセシビリティ導入ガイドブック
ウェブアクセシビリティ導入ガイドブックとはウェブサイトで発信される情報、情報システムで提供されるサービスは、インターネットとブラウザがあれば時間と場所を問わず利用することができ便利です。また、利用者が、見やすい・使いやすい方法を選んで使うことができる、柔軟性の高いメディアでもあります。 インターネットを使った情報発信ができるようになったことで、情報へのアクセスのしやすさ、つまりアクセシビリティは格段に高まりました。その上で、コンテンツの作り方や実装方法を工夫すると、さらに多くの人が多様な状況でウェブサイトや情報を使えるようになります。発信者側が想像していなかった手段や場所で使われるかもしれません。 本ガイドブックでは、ウェブサイトや情報システムにおけるアクセシビリティ、つまりウェブアクセシビリティについて全く知らない、触れたことがない方々が、業務としてウェブアクセシビリティの改善に取り組む
デジタル庁のサイトやばすぎるwww - Qiita
はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ！」官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォントもNoto Sans JPを使われててとても読みやすい。黒も #000 でなく見やすい色になっている。 やばいですねこれ。 そしてこのレイアウトを見たとき、余白のおかげでとても見やすいなと思いました。そこでChrome Dev Toolでレイアウトを見てみ
AppleがMRヘッドセット「Vision Pro」のために生み出した「空間コンピューティング」におけるUI設計のルールとは？
2023年6月6日(日本時間)に開催されたAppleの開発者向けカンファレンス「WWDC23」の基調講演で、Apple初のMRヘッドセットである「Vision Pro」が発表されました。AppleはこのVision Proで現実空間上にアプリケーションのウィンドウやコンテンツを表示する「空間コンピューティング」を提唱しており、開発者が知っておくべき空間コンピューティングのUI設計についてAppleのデザインチームが解説しています。 Design for spatial user interfaces - WWDC23 - Videos - Apple Developer https://developer.apple.com/videos/play/wwdc2023/10076/ Vision Proに搭載されるvisionOSでは、アプリアイコンが立体的に表現されるのが大きな特徴。 アプ
外国人から見た名前入力に関するBADなUIデザイン｜CULUMU / インクルーシブデザインスタジオ
こんにちは！ゲストライターのトゥクです。 前回は、連載最初の記事として私の大学の学部卒業制作研究をもとにデザインとの向き合い方について、ご紹介いただきました。 私の紹介記事に関してはこちらをご覧ください。 そして今回からは私自身や家族、友人が外国人として日本に住む中で感じていることや、出来事についてご紹介していきます。 この連載では、外国人視点から日本に住む上で感じたこと、気づき、出来事を通して、読者の皆さんに新たな視点や発見を届けたいと思います。そして社会におけるマジョリティやマイノリティに関係なく、全ての人にとって良いデザインについて共に議論できると嬉しいです。 外国語名を日本語名のフォーマットに当てはめるって難しい！今回私が紹介するのは「外国語名を日本語名のフォーマットに当てはめること」の難しさと、具体的に私が出会ったBADなUIデザインについてです。 役所や病院、インターネットの個
accrefs
ウェブサイトに貢献このウェブサイトではあなたからの情報提供をお待ちしています。参考資料の追加・修正のリクエストはリポジトリのイシューから専用のテンプレートで行えます。
ウェブアクセシビリティを無料で学べる資料まとめ（10年分）｜magi1125
こんにちは。伊原 力也（@magi1125）と申します。業務アプリケーションのデザイナー、デザインチームのマネージャー、アクセシビリティ関連のコンサルタントなどをやっています。 ウェブアクセシビリティを普及啓発する活動を始めて10年が経ちました。おかげさまで興味を持ってくれる人はかなり増えたと感じています。しかし、人が増えると声は届きにくくなります。「アクセシビリティをどこから学び始めていいかわからない」という意見も目にするようになってきました。 また、私はこれまでにアクセシビリティに関する書籍を何冊か書いていますが、専門書ってちょっと高いので、興味があるぐらいの段階で本を買うのはちょっと……という気持ちもわかります。 ということで、これまで自分が発信したり関わったりしたコンテンツのうち、ウェブアクセシビリティの理解の助けになりそうものをベストアルバム的に一度まとめてみることにしました。
書籍『見えにくい、読みにくい「困った！」を解決するデザイン』の推薦｜magi1125
前置き前置きとして。私は最近『Webアプリケーションアクセシビリティ』という書籍を出版しました。が、デザイン初学者や、ノンデザイナーにおいては、ぜひ先に読んでほしい本があります。それが『見えにくい、読みにくい「困った！」を解決するデザイン』なのです。 ということで、あらためてこの本の推薦文をnoteに記載します。この本を読む前と読んだあとでは、自身のデザインが伝わる相手の総数が変わってきます。ぜひデスクや会社に常備してもらえればと思います。 推薦文この本は、作り手と受け手のあいだにある障壁を取り払う第一歩であり、これからのデザインのスタンダードを示した新たな1ページです。 チラシやパンフレットを作ったり、提案資料をまとめたり、ウェブサイトを作ったりすることは、かつては一部の限られた人の仕事でした。しかし、いまでは制作環境が整い、一般化して、誰もが当たり前に「作ったものを通した発信」を行うよ
Appleの最新アクセシビリティー機能にみるインクルーシブな試み
Appleの最新アクセシビリティー機能にみるインクルーシブな試み：林信行の「テクノロジーが変える未来への歩み」（1/4 ページ） Appleは5月16日、毎年恒例のアクセシビリティー機能の進ちょくとして、コミュニケーション機能に重点をおいた年内搭載予定の新機能を発表した。 毎年5月の第3木曜日、2023年でいうと5月18日は「Global Accessibility Awareness Day（GAAD）」で、デジタル分野（Web／ソフトウェア／モバイルなど） の「アクセシビリティー」を考える1日となっている。 世界に20億人いる、何らかの障害を持った人々のアクセシビリティーについて話し合うべく、世界規模のオンラインイベント「GAAD」が開催され、18日には日本版のイベント「GAAD Japan 2023」で人気の発話アプリ「UDトーク」の開発者である青木 秀仁氏の基調講演が行われる。 1
アドビ、Adobe Sensei AIでPDFのアクセシビリティを拡大
AIを活用した「Adobe PDF Accessibility Auto-Tag API」などの新機能により、デジタル文書のアクセシビリティ向上プロセスを自動化 金融、教育、公共機関における早期の利用層では、コンプライアンスを強化し、より良い体験を提供しながら、時間とコストの大幅な削減を実現 全世界で3兆以上のPDF文書が流通 ※当資料は、2023年5月17日に米国本社から発表されたプレスリリースの抄訳です。 【2023年5月18日】 アドビ（Nasdaq: ADBE）（本社：米国カリフォルニア州サンノゼ、以下アドビ）は、アドビのAIおよび機械学習フレームワークである「Adobe Sensei」を活用した新しい「Adobe PDF Accessibility Auto-Tag API」を発表しました。全世界で3兆作成されているとも言われるPDF文書は、デジタル社会の基盤を支えるフォーマット
アドビがAI「Adobe Sensei」活用の「Adobe PDF Accessibility Auto-Tag API」発表 | Web担当者Forum
米国Adobeの日本法人、アドビは、米国本社が同社のAI(人工知能)・機械学習フレームワーク「Adobe Sensei」を活用した新たなAPI「Adobe PDF Accessibility Auto-Tag API」を5月17日に発表した、と5月18日公表した。これまでPDF文書を誰もが利用しやすい環境(アクセシブル)にするのに必要だったコンテンツ変換プロセスが簡素化・高速化できる。 PDF Accessibility Auto-Tag APIはSenseiを活用し、PDFのコンテンツ構造へのタグ付けを自動化、拡張する。見出し、段落、リスト、テーブルなどの構造をタグ付けするか識別し、スクリーンリーダー(画面読み上げソフト)など支援技術に適した読み上げ順序を指示。視力障害や弱視、失読症などの人でもデジタル文書が容易に操作できるようになる。 PDF文書をアクセシブルにするためには従来、トレー
AppleがiPhone／iPadの新アクセシビリティ機能を発表 簡易ホーム画面や自分の音声作成など
米Appleが5月16日（現地時間）、iPhone／iPadユーザーのアクセシビリティに関する新機能を発表した。2023年後半以降の提供予定としている。 新機能は主に認知、視覚、聴覚、身体に障害を持つ人にフォーカスしたもの。認知障がいのあるユーザーをサポートする「Assistive Access」、発話を補助する「Live Speech」「Personal Voice」、拡大鏡の操作を簡単にする「Point and Speak」の4項目に分かれる。 Assistive Access Assistive Accessは認知的負担の軽減を目的に、必要最低限のアプリ、情報を表示できるようにする。ホーム画面に並ぶのはCalls（電話とFaceTime）、メッセージ、カメラ、写真、ミュージックのみで、通常のホーム画面のように多くのアプリアイコンやウィジェットは表示されない。アプリのレイアウトはグリッ
アップル、iPhoneやMacが自分そっくりのAI生成声で話す「Personal Voice」発表。学習もローカルで完結（CloseBox） | テクノエッジ TechnoEdge
AIを活用して声を学習し、本人そのままの高精度な声で生成する技術がここ数カ月で大きく進化しています。 RVCというAIボイスチェンジャー機能は、岸田首相の声真似を本人の前でデモするまでになり、AIフェイクボイスの問題が一部で取り沙汰されるようにもなりました。 そんな中、アップルがAIを使った人声の学習・生成機能「Personal Voice」を今年下半期のOSアップデートで提供すると発表しました。 iPhone、iPad、そしてAppleシリコンを搭載したMacで15分、ランダムに表示される150の文章を読み上げるだけで自分の声を学習することができ、テキストをタイプすると自分そっくりな声で相手に伝えることが可能になります。ただし、当初は英語のみです。 テキストした文章を音声化する機能（TTS、Text To Speech）をアップルは「Live Speech」という新機能で提供。これまでは
デジタル庁ウェブアクセシビリティ導入ガイドブック | Takram
「誰一人取り残されない、人に優しいデジタル化を。」の実現をめざすデジタル庁は、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。Takramは、デジタル庁の対外的な施策の一つとして、初めてウェブアクセシビリティに取り組む行政官や事業者、そして一般の方々に向けて、その考え方や取り組み方のポイントをまとめた「ウェブアクセシビリティ導入ガイドブック」の制作をサポートしました。 ウェブアクセシビリティ導入ガイドブック 「誰一人取り残されない、人に優しいデジタル化を。」のための一歩デジタル技術の進展により、これまでできなかったことができるようになり、障がい者や高齢者、外国人といった人たちを取り巻く情報環境や支援技術は劇的に変化しています。公的機関のウェブサイトはもちろん、あらゆるウェブサービスにおけるウェブアクセシビリティの重要性は高まり続けています。 「ウェブアクセシビリティ」とは、年齢
アクセシビリティを向上させる5つの視覚処理
アクセシブルなビジュアルをデザインするためには、色のコントラストを考慮すること、色だけに頼らないこと、インタラクティブな要素を識別しやすくすること、画像に対して役立つ代替テキストを提供すること、実際のユーザーでビジュアルをテストすること、が挙げられる。 5 Visual Treatments that Improve Accessibility by Kelley Gordon on October 30, 2022 日本語版2023年5月10日公開 CDC（アメリカ疾病予防管理センター）によると、米国では6100万人の成人が障害を抱えて生活している。障害を持つ人々の数と、アメリカ障害者法（ADA）のWebサイト関連の訴訟の近年の増加を見る限り、これらの人々のためにデザインをすることは不可欠である。また、アクセシブルなデザインは、結果的にユーザビリティを向上させる。Web Content
table要素内にth要素が必要な理由 | アクセシビリティBlog | ミツエーリンクス
スクリーンリーダーユーザーがWebページから情報を得る際には、画面を見ながらの情報取得とは違った工夫が必要な場合があります。その1つが、テーブルからの情報の取得です。画面を見ながらテーブルから情報を取得する場合、テーブルの行と列の内容を同時に確認できます。一方、スクリーンリーダーは項目を1つずつしか読み上げないため、特に2次元的にレイアウトを把握する必要のあるテーブルから情報を得ることが難しくなる場合があります。 こうした問題の解決策の1つに、テーブルの見出しセルにth要素を設定するというものがあります。th要素を設定すると、読み上げ方に若干の違いはあるものの、スクリーンリーダーでデータセル（td要素）の内容を読み上げさせたときに、対応する見出しセルの内容を合わせて読み上げるようになります。 th要素を設定することで閲覧しやすくなるテーブルの一例には、カレンダーがあります。見出し行に曜日が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
