[B! アクセシビリティ] wdscratchのブックマーク

発達障害当事者デザイナーとウェブアクセシビリティ　｜Yuu Yamasaki

こんにちは。株式会社トルクのデザイナー山﨑です。唐突ですが私は発達障害当事者です。ASD︵自閉症スペクトラム障害/アスペルガー症候群︶とADHD︵注意欠如・多動症︶を持っています。トルクでは私の障害を受け入れていただきウェブデザイナーとして一般雇用で勤務しています。近年、発達障害は話題にあがりやすいトピックスですので、聞いたことある方やなんとなくご存じの方もいらしゃるかと思います。発達障害について説明しますとそれだけで長くなってしまいますので詳しくは﹁大人の発達障害ナビ﹂や政府広報オンラインの﹁発達障害って、なんだろう？﹂などをご覧いただくか、ご興味のある方は各自でググっていただければと思います。今回は発達障害当事者デザイナーがウェブデザインをする上で工夫していることやアクセシビリティの観点からも書いていこうと思います。 ASD編‥発達障害デザイナーがデザインする上で工夫していること①

wdscratch 2024/02/04

アクセシビリティ

リンク

Understanding Success Criterion 2.5.8: Target Size (Minimum) | WAI | W3C

wdscratch 2024/01/10

WCAG 2.2からのターゲットサイズについて

アクセシビリティ

リンク

改正障害者差別解消法とWebアクセシビリティをめぐる解釈

2023年12月25日著私はGoogle アラートに﹁アクセシビリティ﹂とか﹁JIS X 8341-3﹂みたいな言葉を登録していて、Googleの検索対象にそれらを含んだコンテンツが新たに登録されるのをウォッチしているのですが、またしても改正障害者差別解消法に関して間違った解釈が掲載されているのを見つけてしまいました。あえて掲載元にリンクはしませんが、一部を引用します‥ 2021年の障害者差別解消法の改正により、2024年4月1日から民間事業者の合理的配慮が義務化されます。ウェブサイトの場合では﹁JIS X 8341-3:2016﹂という規格に準拠したウェブサイトを作り、ウェブアクセシビリティを確保することが義務化されます。最初の文は、何ら問題なく、正しい内容です。問題はそのあとで......改正法のどこをどう読めば、JIS規格に準拠したWebサイトを作ることが義務化されるというので

wdscratch 2024/01/09

アクセシビリティ

リンク

第1回　デジタルコンテンツの視認性とWCAG2のコントラスト比の課題 | gihyo.jp

はじめにサイオステクノロジーの伊藤と申します。今回から数回にわたりデジタルコンテンツのコントラストというテーマで、WCAG2のコントラスト基準とWCAG3で検討が進められている新しい基準APCAについて解説していきます。対象読者としては、ウェブサイトやアプリケーションなどデジタルコンテンツの制作に携わるデザイナーやエンジニア、アクセシビリティに関心のある方を想定しています。現在勧告されているWCAG2の達成基準では、テキストや視覚要素のコントラストが一定の基準を満たす必要があります。たとえば、レベルAAでは文字色と背景色のコントラスト比が4.5:1以上であることが要求されます。図1テキストとの視認性を確保するために、背景色とのコントラスト比を考える必要があるしかし、人間の目は明るい色と暗い色のコントラストを認識する際に、明るい色の相対輝度が高いほど視認性が高くなるという特性があ

wdscratch 2023/10/16

アクセシビリティ

リンク

dl/dt/ddのスクリーンリーダーの読み上げをなんとかする

この記事で取り上げる手法は実験的です。何か問題があった際に、すぐに修正・改善できる立場にないのであれば採用するべきではありません。期待と異なる読み上げスクリーンリーダーを使ったことがある開発者ならご存知のとおり、dl要素、dt要素、dd要素の構造はスクリーンリーダーの読み上げにおいては期待と異なる挙動をします。おそらくは歴史的な経緯からそうなっているのだと思いますが、この挙動を理由にdl要素、dt要素、dd要素を使わないという選択をする開発者もいるようです。現行のスクリーンリーダーの読み上げは概ね以下のような挙動をします。HTMLコメントの部分が読み上げられる内容とします。 <dl> <dt>りんご</dt>  <dd>バラ科の落葉高木</dd>  <dt>みかん</dt> <!-- リスト3

wdscratch 2023/09/03

面白い実験

アクセシビリティ

リンク

アクセシビリティーに考慮するHTMLコーディング - WAI-ARIAでスクリーンリーダーの読み上げがこう変わる - ICS MEDIA

ナビゲーションリストナビゲーションリストは、主にメニューやリンクの一覧を整理して表示するためのUI要素です。自分が今どのページを訪れているのかを示すことによって、ユーザーはウェブサイトの構造や階層を理解しやすくなります。 ▼ 実装例︵一部抜粋︶ <li><a href="#">CSS</a></li> <li><a href="#" aria-current="page">JavaScript</a></li> <li><a href="#">その他</a></li> ▼ スクリーンリーダー︵VoiceOver︶ aria-current="page"を指定した要素は﹁現在のページ、リンク、JavaScript﹂と読み上げられます。また、リンクが一度でもクリックされていたら、﹁閲覧済み﹂という音声が追加されます。 ▼ スクリーンリーダー︵ナレーター︶﹁リンク、JavaScript﹂と読

wdscratch 2023/08/25

リンク

WAI-ARIAを学ぶときに整理しておきたいこと

結論ロールについて知る HTMLの暗黙のロールを知るロールを知った上でロールに対して使用できるプロパティ/ステートを使う (おまけ) markuplintを使おう aria属性を使う前にまず、いきなりaria-labelやaria-selectedとかに手を出さない。 aria-selectedとかを発見してしまうと﹁option要素以外にもselectedみたいな意味を付加できるんだ！すげえ！使ってみよう！﹂みたいな気持ちが沸き上がってしまう。わかる。とってもよくわかるよ。当時ぼくもそうだったから。ただ、そこはぐっと我慢してほしい。なぜかと言うと、aria属性は、使っていいときと悪いときがある。きちんとWAI-ARIAという仕様と、ARIA in HTMLやCore AccessibilityAPI Mapping (Core-AAM)という仕様で決められていっている[1]の

wdscratch 2023/08/22

アクセシビリティ

リンク

読み仮名を表現する ruby タグのマークアップやスタイリングとアクセシビリティについての考察｜https://wp.yat-net.com/name

2023年 08月 11日読み仮名を表現する ruby タグのマークアップやスタイリングとアクセシビリティについての考察カテゴリ： CSS3 HTML タグ：ルビ日本語には漢字という難しい文字があり、未履修の漢字が含まれた文章を読むことは我々日本人にとってもなかなか困難なもの。そういった人たちにもコンテンツを楽しんでもらえるようルビ（よみがな）を振ることは良いアプローチですし、今は殆どのブラウザがルビに対応しているため比較的簡単に実装できます。例えば著者夏目漱石のぼっちゃんの一文をルビを振ってみると下記の様な見た目に

wdscratch 2023/08/21

リンク

セミナー「改正障害者差別解消法とWebアクセシビリティ」でお寄せいただいたご質問への回答 | アクセシビリティBlog | ミツエーリンクス

昨日オンラインで開催したWeb担当者のためのピンポイント講座、改正障害者差別解消法とWebアクセシビリティには大変多くの方々にご参加いただきました。この場を借りて厚く御礼申し上げます。また、質疑応答の時間ではすべてのご質問に回答することができず、申し訳ございませんでした。本記事では、開催後にアンケートへのご回答を通じてお寄せいただいたものを含め、いただいたご質問にお答えさせていただきます（セミナーの時間中に回答できたものについては割愛しております、あらかじめご了承ください）。字数の兼ね合いから、回答にご満足・ご納得いただけない場合もあるかと思いますが、その場合には是非お気軽にお問い合わせをいただければ幸いです。アクセシビリティに対する意識の高さを鑑みると、日本国内サイトよりグローバルサイトを優先的に着手すべきでしょうか？おっしゃる通り、そのような考え方で優先順位を定義することには、一

wdscratch 2023/07/28

アクセシビリティ

リンク

Webアクセシビリティに向き合う理由事例詳細｜つなweB

2021年に障害者差別解消法が改正され、公共団体だけでなく民間企業にもWebアクセシビリティがより求められるようになりました。ここでは、Webアクセシビリティの全体像をつかむために、ウェブアクセシビリティ基盤委員会︵以下WAIC︶のメンバーであり、株式会社ミツエーリンクスに所属する2名に話をうかがいました。中村精親さん株式会社ミツエーリンクスウェブアクセシビリティ基盤委員会委員長 https://waic.jp/ 大塚勇哉さん株式会社ミツエーリンクスウェブアクセシビリティ基盤委員会作業部会2委員 JIS規格の普及とともに目指すWebアクセシビリティの向上最初にウェブアクセシビリティ基盤委員会︵WAIC︶について説明します。WAIC︵ウェイク︶は2010年8月、WebアクセシビリティのJIS規格にあたる﹁JIS X 8341-3﹂が改正された際にできた組織です。JIS X

wdscratch 2023/04/25

アクセシビリティ

リンク

Webアクセシビリティ学習リソースまとめ（2023年3月版）

社内向けにまとめていたものを加筆修正して公開します。アクセシビリティの学習を始める人の助けになれば嬉しいです。 YouTube freee アクセシビリティ研修動画～全職種対象～ freee アクセシビリティ研修動画～技術職対象（Basic） freee アクセシビリティ研修動画～技術職対象（Advance） a11ygo go A11yTokyoMeetup Webコンテンツ全般 WCAG WAI-ARIA HTML/CSS デザインシステム、ガイドラインその他書籍アクセシビリティ全般 HTML

wdscratch 2023/04/08

アクセシビリティ

リンク

「カブトクワガタ」は日本のゲームアクセシビリティの革命である

3行で﹁カブトクワガタ﹂に搭載されている読み上げ機能によって、画面を見ることができない全盲のプレイヤーがゲームを楽しめるようになっています。視覚に障害を持つプレイヤーだけでなく、未就学児や、文字を読むことに困難を抱える人など、色々な属性の人がプレイできるようになっていると思います。システム面・技術面の両方において、﹁カブトクワガタ﹂は日本のゲームアクセシビリティに革命をもたらすポテンシャルがあり、その事実が、開発者を含めた多くの人に知られることを臨みます。 ※最終更新: 2023/07/27 カブトクワガタってなんやねんカブトクワガタは、Nintendo Switchのゲームです。クワガタやカブトムシを育てて戦うRPGです。2023年3月15日にリリースされました。なにがすごいのかほぼ全ての文字を読み上げるこのゲームは、画面に表示されるほぼ全ての文字を読み上げてくれます。本

wdscratch 2023/03/20

アクセシビリティ

リンク

GPTが自社の情報を正しく学習するためにはWebサイトをセマンティックなHTMLでマークアップした方がよい説 | DevelopersIO

ChatGPTを試用している中で、質問に対する回答が誤っていることがあります。自社の情報をWebサイトで提供している企業として、どのようにすれば、GPTがより正確な自社の情報を学習するようになるのでしょうか。 ChatGPTに質問しつつ考えてみました。はじめに ChatGPTについて、日々さまざまな応用が提案されています。そのChatGPTを試用している中で、質問に対する回答が誤っていることがあります。自社の情報をWebサイトで提供している企業として、どのようにすれば、GPTがより正確な自社の情報を学習するようになるのでしょうか。 ChatGPTに質問しつつ考えてみました。事前調査まず、Generative Pre-trained Transf ormer 3 (GPT-3)について調べてみました。 WikipediaのGPT-3に関する項目では、GPT-3 の事前学習データについて

wdscratch 2023/03/15

アクセシビリティ

リンク

障害に配慮、２４年度義務化　企業へ、差別解消法の政令：東京新聞 TOKYO Web

政府は14日、企業などの事業者に対し、車いす利用者用のスロープを店舗出入り口に設置するといった﹁合理的配慮﹂の提供を、２０２４年4月1日から義務付けることを決めた。改正障害者差別解消法の政令を閣議決定した。合理的配慮はこれまで、国や自治体に提供義務があり、事業者に対しては義務化の開始日が未定だった。政府はこの日、具体的な対応をまとめた﹁基本方針﹂も改定。合理的配慮の範囲は﹁本来の業務に付随するものに限られる﹂とし、事業者の過度な負担にならないようにした。　差別を感じた障害者や対応に困った事業者が相談できる窓口の整備に関し、国や自治体が推進する考えも盛り込んだ。

wdscratch 2023/03/15

リンク

講演1「ディスレクシアについて」

平成19年度　DAISYを中心としたディスレクシアキャンペーン事業シンポジウムDAISYを中心としたディスレクシアへの教育的支援報告書神山忠︵岐阜県立関特別支援学校教諭︶皆さん、おはようございます。講演1を仰せつかった神山と申します。よろしくお願いします。先ほど、ゆっくりという話もありましたが、早口な点もありますし、多動な点もあります。そういうのもディスレクシアの特性なのかなと思って見てもらえばいいかなと思いますが。50分ほどお付き合いの方、よろしくお願いします。私が文字を見たとき、まずどんなふうに見えるかということをお伝えしたいと思います。白いキャンバスに黒ごまや黒大豆が、こんなふうにばらまかれているように見えます。﹁何かな？何かな？うーん、文字だ﹂。読んでと言われてもなかなか読めなくて、授業中なんかすごいドキドキしているんですが。これ、読めた方はどれくらいいま

wdscratch 2023/03/12

ディスレクシア＝発達性読み書き障害がどういうものか参考になりました。

アクセシビリティ

リンク

アクセシビリティに配慮したWebデザインギャラリー・サイト AAA11Y（Accessible Website Gallery）

A最低限の基準です。この基準を達成しないとWebサイトを閲覧できない人が存在しうるとされます。 AA望ましい基準です。この基準を達成すればWebサイトの閲覧が困難なケースは多くないとされています。 AAA発展的な基準です。この基準を満たすと最も閲覧しやすいWebサイトと言えます。

wdscratch 2023/03/07

リンク

アクセシビリティを組織で向上させる──社内外の認知・効果測定から、新規開発への組み込みまで記事一覧 | gihyo.jp

第8回自社を超えたコラボレーションでアクセシビリティは社会へとつながる伊原力也［執筆］，小林大輔，桝田草一，山本伶［執筆協力］ 2023-03-14 第7回アクセシビリティをサポートサイト、会社サイト、外部ツール、協力会社まで広げる伊原力也［執筆］，小林大輔，桝田草一，山本伶［執筆協力］ 2023-03-10

wdscratch 2023/03/05

アクセシビリティ

リンク

APCAコントラスト日本語フォント検証

WCAG 3.0にて検討が進められているテキストの視覚的コントラスト基準であるAPCAについて、日本語フォントに適応した場合の検討を行うためのツールを提供しています。コントラストシミュレーターカラーを選択すると設定フォントサイズとウェイトでの表示例と、APCA基準値によるチェック結果が表示されます。透明度なども考慮した基準値のシミュレーションはオリジナルのAPCA Contrast Calculatorを利用してください。

wdscratch 2023/02/23

アクセシビリティ

リンク

APCA何もわからない - Qiita

Accessible Perceptual Contrast Algorithm（APCA）はWCAG 3.0において、コントラスト比に関する新しい基準として提唱されているアルゴリズムです。つたない英語力でそのコンセプトや概略を読み込んでみて、なんとなく以下のように理解しました。コントラストというのは単純な背景色と前景色の差分だけで判断できるものではない。錯覚とかあるからね。フォントのサイズやウェイト、行間、コンテキストなどから総合的に知覚されるものだ、ということらしい。文字の読みやすさに影響するコントラストの知覚に関しては、フォントサイズやウェイトなどからなる空間周波数の影響をとくに受ける。空間周波数はWikipediaによると「空間的な周期をもつ構造の性質」とのこと、なんとなく一定の二次平面上のパターンの複雑さってことかなぁ？このパターンの刺激が一定程度を超えると知覚できるよう

wdscratch 2023/02/23

アクセシビリティ

リンク

UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方

ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。 Darkmode by Dan Holick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか？それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇

wdscratch 2023/02/23

リンク

はてなブックマーク

タグ

関連タグで絞り込む (9)

アクセシビリティに関するwdscratchのブックマーク (80)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス