こんにちは！SmartHRプロダクトエンジニアのhimiです。 この記事ではプレースホルダーのアクセシビリティとユーザビリティについての課題と、その解決手段についての話を書きます。 プレースホルダーって何？ Webアプリでよく見る、フォームコントロールに値が無いときに表示するテキストのことです。 主な用途としては、フォームの入力例や入力内容の説明テキストが設定されることが多いです。 HTML Standardでは The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief de
“Access コントローラー”体験会で感じたSIEの本気。ひとりでも多くの人がPS5を遊べるように開発された新型コントローラー試遊会リポート | ゲーム・エンタメ最新情報のファミ通.com
2023年12月6日（水）にプレイステーション5（PS5）用のアクセシビリティコントローラーキット“Access コントローラー”が発売される。 Access コントローラーは、自身の特性に合わせて設定を変えることができる、まったく新しい形のゲームコントローラーだ。今回、Access コントローラーを触る機会を得たのでその模様をお届けする。 “Access コントローラー”の予約購入はこちら (Amazon.co.jp) それにしても変わった形をしている。筆者は「ポン・デ・リングみたい」と一度思ってしまったら、もうドーナツにしか見えなくなった。なぜ、こんな形なのか。それはより多様な障害を持つ人たちが使えるようにするためだ。 “DualSense（デュアルセンス）”などの従来のコントローラーは、両手で握り、親指や人差し指でボタンやスティックを操作するのが基本形だ。 だが世の中には、これらの動
HTML: ログイン・ユーザー登録フォームの厳選ベストプラクティス11（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 11 HTML best practices for login & sign-up forms—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/05/24 原著者: Andrey Sitnik（PostCSSとAutoprefixerの作者、首席フロントエンドエンジニア） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。 はじめに ログインフォームやユーザー登録（サインアップ）フォームは、ほとんどのWebサイトで使
PS5用障害者向けAccessコントローラーのいいトコ・悪いトコ #PS5 #障害者 - 上虎（うえとら）寝たきりゲーム研究所（Uetora Netakiri Game Kenkyusyo）【ツイッター：@ue_tora】
まず最初に感謝の言葉です。 SIE（ソニー・インタラクティブエンタテインメント）様、Game*Spark様経由でPS5用障害者向けコントローラー「Accessコントローラー」を提供していただき、また、レビューの機会をいただきありがとうございました。 【インタビュー記事はこちら】https://www.gamespark.jp/article/2023/12/28/137192.html 今回は、 PS5用障害者向けコントローラー「Accessコントローラー」のいいトコ・悪いトコ を画像を交えながら、ざっくりと解説していきます。 この記事は、PS5用障害者向けコントローラー「Accessコントローラー」のいいトコ・悪いトコをざっくりと紹介する記事です。 ※この記事では、「障害者ユーザー」と「一般ユーザー」の両方を想定しています。 こんにちは。 寝たきりで指先が少しだけ動く、 「寝たきり障害者
ウェブアクセシビリティ対応、どうすれば？ 法改正のポイントと5つのステップを解説｜Goodpatch Blog グッドパッチブログ
アクセシビリティ？ ウチの会社のウェブサイトは大丈夫なの──。 法改正によって、障害のある方への「合理的配慮の義務化」が、2024年4月1日をもって民間企業にも適用されることを受け、ウェブデザイン分野ではアクセシビリティ対応の機運が高まっています。 とはいえ、「法改正で何が変わったのかよく分からない」「ウェブアクセシビリティってどうすれば対応できるの？」といった疑問を持つ方も少なくないはず。そこで、この記事ではいわゆる「法的義務化」の潮流を解説しつつ、アクセシビリティの基本を押さえていきます。 アクセシビリティの考え方は、ウェブに限るものではありません。他のプラットフォームでのソフトウェアデザインや物理的なモノや空間のデザインにおいても、普遍的に重要な視点です。ぜひ、この機会に一緒に学んでいきましょう！ なぜ「ウェブアクセシビリティ」に注目が集まっているのか？ まず前提として触れておきたい
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
STUDIO KENT（ファミコンギターkent）ギター講師 @studiokent1 あまり人に言ってないですが僕は重度の色弱です ザナドゥをやっていてすごく困るのが赤い文字が全く読めないこと スクショ内の赤文字は1文字も読めません（笑） 同じ人いるかな😅 ちなみによくある数字のテスト貼っておきますが 一番下の2と4以外何が書いてるか一切わかりません pic.twitter.com/du0mh2Edks 2024-02-18 17:38:26
Access Accepted第778回：ゲーム業界で急速に進むアクセシビリティへの動き ライター：奥谷海人 ソニー・インタラクティブエンタテインメントが先日リリースした「Access コントローラー」は，誰もが不自由なく楽しめるように5年の歳月をかけて開発されたデバイスだ。アクセシビリティに対するゲーム業界の動きは以前から存在していたが，ここ最近はここ最近はプラットフォーマーや大手パブリッシャの間では，欠かせないものになってきている。 5年の歳月をかけて開発された「Access コントローラー」 ソニー・インタラクティブエンタテインメント（以下，SIE）が先日リリースした「Access コントローラー」は，PlayStation 5用アクセシビリティコントローラキットである。通常のゲームパッドの細かい操作を困難とする，さまざまな障害を持った人もゲームを楽しめるよう，付属するボタンやスティ
最新ニュース 12星座×タロット占い「魚座（うお座）」2024年4月22日（月）～4月28日（日）のあなたの運勢は？ 総合運・開運メッセージ2024-04-22 23:50(月)詳しくはこちら12星座×タロット占い「水瓶座（みずがめ座）」2024年4月22日（月）～4月28日（日）のあなたの運勢は？ 総合運・開運メッセージ2024-04-22 23:20(月)詳しくはこちら12星座×タロット占い「山羊座（やぎ座）」2024年4月22日（月）～4月28日（日）のあなたの運勢は？ 総合運・開運メッセージ2024-04-22 22:50(月)詳しくはこちら12星座×タロット占い「射手座（いて座）」2024年4月22日（月）～4月28日（日）のあなたの運勢は？ 総合運・開運メッセージ2024-04-22 22:20(月)詳しくはこちら12星座×タロット占い「蠍座（さそり座）」2024年4月22日（
地震が起こるたびに、日本で数百万人が頼りにするX（旧Twitter）のアカウントがある。1日に石川県能登地方でマグニチュード（M）7.6の地震が起きた際にも、多くの人が「特務機関NERV（ネルフ）」から速報を受け取った。
Web アクセシビリティに興味があったので、まず機械的なチェックツールから学んで知識を増やそうということでこのサイトに @axe-core/playwright と markuplint を導入してみました。 @axe-core/playwright のセットアップ 既に Playwright が導入されている状況を想定し進めます。まず@axe-core/playwright をインストールします。 pnpm add -D @axe-core/playwright このサイトの場合 VRT として Playwright を動かしているテストがあるので(過去資料)、そのプロセスに同居する形で axe を実行することにしました。 e2e.test.tsimport AxeBuilder from "@axe-core/playwright"; import type { Page, TestI
Draft UI
Draft UI is a collection of simply designed React components focused on making web accessibility as easy as copy & paste.
DEI leadのmioです。今日は合理的配慮のお話です。 「全ての国民が、障害の有無によって分け隔てられることなく、相互に人格と個性を尊重し合いながら共生する社会の実現に向け、障害を理由とする差別の解消を推進すること」を目的として、障害者差別解消法が平成28年4月に施行されました。 法律の改正に伴い、「合理的配慮」の義務化が令和6年4月1日からスタートしますが、それに先駆けてfreeeでも「合理的配慮を知る」ワークショップをやりましたので、資料も合わせて「あえて共有」します。 合理的配慮とは？伝えたかったメッセージ障害のある方々が障害のない方々と同じように人権が保障されるように、それぞれの障害特性や困りごとに合わせておこなわれる調整のことです。合理的配慮は、その人のもつ障害の特性や、具体的場面や状況に応じて異なり、多様かつ個別性の高いものです。 「合理的配慮」という単語だけ聞くと、面倒く
こんにちは。デジカルチームの末永(asmsuechan)です。この記事は「フルスクラッチして理解するOpenID Connect」の全4記事中の3記事目です。前回はこちら。 www.m3tech.blog 9 JWT の実装 9.1 JWT概説 9.2 OpenID Connect の JWT 9.3 ヘッダーとペイロードの実装 9.4 署名の実装 公開鍵と秘密鍵を生成する 署名処理を作る 10 JWKS URI の実装 (GET /openid-connect/jwks) 11 RelyingParty で ID トークンの検証をする 12 OpenID Connect Discovery エンドポイントの実装 (GET /openid-connect/.well-known/openid-configuration) まとめ We're hiring 今回は全4回中の第3回目です。 (
ウェブアクセシビリティハンドブック｜ましじめ株式会社
本ハンドブックは、WCAG 2.0（JIS X 8341-3:2016）の達成基準をもとに すべての利用者がウェブサイト利用できるようにするためのアクセシビリティ向上の具体的な指針と実践的なアドバイスを提供します。 はじめに ウェブアクセシビリティとは 運用時のウェブアクセシビリティの取り組み 開発時のウェブアクセシビリティの取り組み ウェブアクセシビリティ試験 ウェブアクセシビリティ試験の流れ ウェブアクセシビリティ方針（サンプル） ウェブアクセシビリティ検証結果（サンプル） ウェブアクセシビリティ検証試験実施ページリスト（サンプル） 参考 実装の参考 ツールの参考 達成基準（適合レベルA,AAを解説） 1. 知覚可能の原則 代替テキストのガイドライン 【A】非テキストコンテンツの達成基準 時間依存メディアのガイドライン 【A】音声だけまたは映像だけ（収録済み）の達成基準 【A】キャプシ
東京大学発のスタートアップ企業が国内最大規模の国産の生成AIを開発し、完成したと発表しました。アメリカの企業が先行するなか、日本語に特化する戦略で対抗するねらいです。 この生成AIは、基盤となる大規模言語モデルの学習量を示す「パラメータ数」が700億で、これまで各社が手がけた国産の生成AIとしては最大規模の処理能力となります。 オープンソースと呼ばれる公開技術をベースに、産業技術総合研究所が運営するデータセンター「ABCI」などを活用し、去年12月から短期間で開発を実現しました。 会社側によりますと、先行するアメリカの企業の生成AIと同等の日本語の処理能力があるとしています。 チャット形式の生成AIを今後、一般に公開するほか、企業や自治体など向けに順次、提供を始める予定だということです。 生成AIの開発競争が激しさを増す背景には、業務やサービスに導入する顧客企業をいかに増やすかという“囲い
公開日 : 2023年9月22日 カテゴリー : アクセシビリティ 「Stark」というウェブアクセシビリティ検証ツールがあります。各種ブラウザ (Chrome、Firefox、Safari、Edge) の拡張機能として、あるいは各種デザインツール (Figma、Sketch、Adobe XD) のプラグインとして、色覚シミュレーションや色のコントラスト比のチェックができるツールとして以前から知られていましたが、現在は、それ以外にもアクセシビリティに関する様々なチェックができるようになっています。 この記事では、Stark で可能なウェブアクセシビリティ検証について、Chrome 拡張機能を例に、無料プランで使える機能をご紹介します。 Chrome 拡張機能で Stark を開いたところ。 機能一覧 (Contrast、Typography、Alt-Text、Touch Targets、F
時刻表が撤去され、代わりにQRコードが掲示されている名古屋市営地下鉄桜通線名古屋駅の案内板＝名古屋市中村区で2023年8月30日午前、川瀬慎一朗撮影 名古屋市営地下鉄の桜通線のホームから、時刻表が31日までに撤去された。他の鉄道会社の一部にも撤去の動きがあるが、同地下鉄では初の取り組み。時刻表があった場所には、代わりに時刻をウェブで確認できるQRコードが掲示されている。 撤去理由について市交通局は「経費削減」と説明する。時刻表はダイヤ改正の度に変更のために数百万円の費用がかかり、ホームの電光掲示板で次に来る列車の時刻は確認できるという。担当者は「時刻表を見る人が少なくなり、スマートフォンで検索…
悪意のあるURLが含まれていないかを分析するurlscan.ioやマルウェア分析ツールのHybrid Analysis、URLのセキュリティ・パフォーマンス・テクノロジー・ネットワークなどを分析するURL Scannerなど、URLが悪意のあるものか否かを調べるための無料ツールが存在しています。こういったツールに非公開のプライベートなURLが入力されており、誰でもアクセスできる状態になっていると、エンジニアのvin01さんが指摘しました。 You can not simply publicly access private secure links, can you? | Vin01’s Blog https://vin01.github.io/piptagole/security-tools/soar/urlscan/hybrid-analysis/data-leaks/urlscan.
こんにちは！ゲストライターのトゥクです。 前回は、連載最初の記事として私の大学の学部卒業制作研究をもとにデザインとの向き合い方について、ご紹介いただきました。 私の紹介記事に関してはこちらをご覧ください。 そして今回からは私自身や家族、友人が外国人として日本に住む中で感じていることや、出来事についてご紹介していきます。 この連載では、外国人視点から日本に住む上で感じたこと、気づき、出来事を通して、読者の皆さんに新たな視点や発見を届けたいと思います。そして社会におけるマジョリティやマイノリティに関係なく、全ての人にとって良いデザインについて共に議論できると嬉しいです。 外国語名を日本語名のフォーマットに当てはめるって難しい！今回私が紹介するのは「外国語名を日本語名のフォーマットに当てはめること」の難しさと、具体的に私が出会ったBADなUIデザインについてです。 役所や病院、インターネットの個
2023年度リクルート エンジニアコース新人研修の講義資料です
TikTokなどで人気の手話歌。しかし手話文化に対し無知ゆえにろう者がないがしろにされる事態も 日本人の手話には「日本手話」と「日本語対応手話」の2種類があり、これらは異なる言語 どんな言語にも思い込みを持たず、理解や関心を寄せることが、共生社会の一歩となる 取材：日本財団ジャーナル編集部 「手話歌（手話ソング）」というジャンルの動画があることをご存知でしょうか？ 人気曲の歌詞を手話で表現するというもので、YouTubeやTikTokなどで「手話歌」と検索すると、数多くの動画が投稿されています。 しかし、ろう者（※）の立場からは、違和感を覚えるようなものもあるそうです。 情報・コミュニケーションのバリアを解消して、一人一人の価値を最大に発揮できる調和した社会をつくることを目的に掲げる団体、NPO法人インフォメーションギャップバスター（外部リンク）の代表であり、自身もろう者である伊藤芳浩（い
花王が挑む、600サイト・1200名を巻き込んだ全社ウェブアクセシビリティプロジェクトの全貌【前編】 - Findy Engineer Lab
企業がウェブアクセシビリティの向上に取り組む際、まずは少人数で小さな改善から始めていく方法を選択するケースがほとんどです。しかし、2022年のGAAD（※1）で、ある企業の革新的な取り組みが大きな話題になりました。 その企業とは、大手消費財化学メーカーとして知られる花王株式会社。花王が発表したのは、全社を挙げたウェブアクセシビリティ推進プロジェクトの発足と取り組み内容についてでした。 ウェブアクセシビリティの啓蒙に取り組むFindyでは、花王でウェブアクセシビリティの推進に携わる後藤 亮さんと渡邊 佳菜恵さんにお話を伺うべく、ウェブアクセシビリティの専門家として活動されている株式会社ディーゼロのゆうてん（@cloud10designs）さんをインタビュアーに迎えて対談を実施。本記事では、対談の内容を前・後編に分けてたっぷりお届けします。 社員数が3万人を超える大企業である花王が、どのように
公開日 : 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日に閣議決定されたところで、こちらも
dialog要素を使用したアクセシブルなモーダルウィンドウの実装メモです。このブログのハンバーガーメニューで使われている実装と同じものになります。 dialog要素は現在全てのモダンブラウザでサポートされているため、iOS Safariをどこまで対応するかに依りますが実務で使用しても差し支えないでしょう。
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では、アプリアイコンが立体的に表現されるのが大きな特徴。 アプ
はじめに サイオステクノロジーの伊藤と申します。今回から数回にわたりデジタルコンテンツのコントラストというテーマで、WCAG2のコントラスト基準とWCAG3で検討が進められている新しい基準APCAについて解説していきます。 対象読者としては、ウェブサイトやアプリケーションなどデジタルコンテンツの制作に携わるデザイナーやエンジニア、アクセシビリティに関心のある方を想定しています。 現在勧告されているWCAG2の達成基準では、テキストや視覚要素のコントラストが一定の基準を満たす必要があります。たとえば、レベルAAでは文字色と背景色のコントラスト比が4.5:1以上であることが要求されます。 図1 テキストとの視認性を確保するために、背景色とのコントラスト比を考える必要がある しかし、人間の目は明るい色と暗い色のコントラストを認識する際に、明るい色の相対輝度が高いほど視認性が高くなるという特性があ
ナビゲーションリスト ナビゲーションリストは、主にメニューやリンクの一覧を整理して表示するための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」と読
みなさん、SNSを使っていますか？ 「誰でもみんなSNSを使っているのは当たり前ですよね！」「企業やお店のお知らせにSNSでやっておけばまず間違いありません」 本当にそうなんですか？ まずはLINEヤフー社が20,000人を対象とした「普段使用しているSNS」の2022年の調査結果を見てみましょう。 画像出典：LINEヤフーの強み｜LINEヤフー for Business （なぜかInstagramがありませんが）どのサービスも非利用の人が10.6％、そしてLINEをSNSから除外すると考えると「LINE Only」が41.2%という結果で、合わせると51.8%、つまり半数以上の人がXやFacebookなどのSNSを何も使っていないことになります。 半分くらいしかリーチできないですね。 「いやいや、公式ページや案内にXやInstagramのQRコードやリンクがあるからSNSをやっていない人
タップ成功率（）は以下の式をもとに計算されます。 は誤差関数、はボタンの横幅、はボタンの縦幅です。 とはそれぞれタップ座標の軸の分散と軸の分散であり、以下の式をもとに計算されます。 、、、は回帰定数です。 より詳しい理論は論文（2章、3章）やTech Blogをご参照ください。 Tappyは 「非利き手でスマートフォンを持ち、利き手の人差し指でボタンをタップする場合」を想定しています。
この記事で取り上げる手法は実験的です。何か問題があった際に、すぐに修正・改善できる立場にないのであれば採用するべきではありません。 期待と異なる読み上げ スクリーンリーダーを使ったことがある開発者ならご存知のとおり、dl要素、dt要素、dd要素の構造はスクリーンリーダーの読み上げにおいては期待と異なる挙動をします。おそらくは歴史的な経緯からそうなっているのだと思いますが、この挙動を理由にdl要素、dt要素、dd要素を使わないという選択をする開発者もいるようです。 現行のスクリーンリーダーの読み上げは概ね以下のような挙動をします。HTMLコメントの部分が読み上げられる内容とします。 <dl> <dt>りんご</dt> <!-- リスト 1/4 りんご --> <dd>バラ科の落葉高木</dd> <!-- リスト 2/4 バラ科の落葉高木 --> <dt>みかん</dt> <!-- リスト 3
HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる）
HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる） これまでの何年間か、Webアクセシビリティまわりのことをやってきた中で、「Webアクセシビリティに取り組む」上でいろいろな障壁を感じてきました。 「なぜWebアクセシビリティをやるのか」の理解を得る・得てもらうまでの障壁 イノベーター層・アーリーアダプター層な開発者（エンジニアやデザイナー）が取り組みを始める上での障壁 マジョリティ層が取り組みを始める上での障壁 今回はこの3つめの「マジョリティ層が取り組みを始める上での障壁」の話です。 残りの2つについては、私が執筆に参加したWebアプリケーションアクセシビリティが網羅的なガイドになってくれるはずです。しかしコイツは内容的にも物理的にもゴツすぎる問題があると思っていて、導入編としては見えにくい、読みにくい
次の実装例のように、テキストを1文字ずつspan要素で区切ってアニメーションする際の注意点と実装例について纏めたメモ書きです。 実装例テキストアニメーションの実装例（英文）
お前がめんどうくさがっているとき、相手もまためんどうくさがっているのだ シンドーイ・ダルイ5世まあ、そんな言葉を残したダルイ5世なんて存在しないんだけど、あることの『めんどうくささ』には、こういうお互い様な部分があることは読者のみなさんも経験的に感じているのではないでしょうか。 今回の話は、アクセシビリティの専門家として日々相談を受けたりレビューをする中で感じている『めんどうくささ』を説明しつつ、相談をしている側やレビューを受ける側も私の話をめんどうくさいと思って受け取っているんだろうなぁ〜という予想をしながら、これらにまつわる問題の整理と、それでもあえて『めんどうくさい』コミュニケーションをとっている言い訳を書きたいと思います。 相談に対する返答の『いつもの3点セット』「〇〇したいんだけど、アクセシビリティ的にどう思いますか？」 こういった問いは毎日のように尋ねられます。まず断言しておく
ウェブアクセシビリティの基本：ランドマークロールを理解する
ページ冒頭におくメインコンテンツ等へジャンプするためのリンクです。tabキーでフォーカスが当たるまでは非表示にしているサイトも多いです。 ランドマークが適切に実装してあれば不要という意見もありますが、2022年の支援技術利用状況調査報告書では「よく使う」「時々使う」を含めると80%になるようです。 region role="region"は、他に適切なランドマークが存在しない場合に使用される一般的なランドマークです。 regionロールにするにはsection要素を使ってマークアップします。 section要素はheader, footer要素の例のように、特定の条件下でロールが変わります。 section要素のデフォルトのロールは「対応するロールなし」であり、ランドマーク要素ではありません。ChromeのアクセシビリティツリーではSectionと表示されますが、これは独自の仕様のようです
文字が崩れて見える「ディスレクシア」という症状を抱える人がいます。そうした人にも見やすい「フォント」の文字の利用が広がっています。 「ディスレクシア」の大学生・西川幹之佑さん（20）：「あー見づらいですね。あー細いな…」 東京都内の大学に通う西川幹之佑さんは、文字が崩れて見えるディスレクシアという症状があります。 ディスレクシアは学習障害の一つで、文字を素早く理解することができないということです。 西川さんの場合、「山」という漢字は縦線3本に見え、「返」という字は細い線が消えているように認識されることもあるそうです。 また、文字のバランスが取れていないように感じて気分を悪くすることもあるといいます。 「ディスレクシア」の大学生・西川幹之佑さん：「（小学生の頃は）読み取るのが精いっぱい。1ページ（読む）だけで授業1回分（約45分）です」 文字を理解するのが難しいと文字を覚えて書くことも難しく
「症状検索エンジン ユビー」を総務省が募集している情報アクセシビリティ好事例2023に応募しました。（募集はすでに締め切っています。） 情報アクセシビリティ好事例2023 「情報アクセシビリティ好事例2023」は、総務省が主導する取り組みで、情報アクセシビリティに配慮したICT機器やサービスを対象とした募集活動です。この取り組みを通じてアクセシブルなICT機器・サービスの普及促進を目的としています。 応募には3つの書類が必要です。 情報アクセシビリティ自己評価様式（応募書式1－1及び1－2） 「情報アクセシビリティ好事例2023」応募資料 情報アクセシビリティ自己評価様式 情報アクセシビリティ自己評価様式とは、米国で採用されているVPAT (Voluntary Product Accessibility Template）に倣って定められた書式で、製品やサービスがJIS規格（JIS X 8
フォームのアクセシビリティを考える
フォームのアクセシビリティを考える 2024.03.10 今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、入力ミスを誘発するようなフォームはユーザーがタスクを完了せずに途中で離脱してしまう可能性が高まり、ビジネスの観点からも望ましくありません。この記事ではフォームのアクセシビリティについて考え、実際のフォームの実装においてどのような点に注意すべきかを紹介します。 今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。スクリーンリーダーといった支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、
Webアプリケーションで、大量のデータを表示したいときに使われる、「仮想スクロール」と呼ばれるテクニックがあります。 大量のデータを素直にDOMに挿入してしまうと、レンダリングの処理に非常に負荷がかかり、場合によってはブラウザをフリーズさせてしまったりします。そこで使われるのが「仮想スクロール」です。スクロール位置に応じて、視覚的に見える範囲のデータのみをDOMに挿入することで、レンダリング処理を最小限にするというものです。 この仮想スクロールについて、直感的にスクリーンリーダーでの閲覧に耐えられるのかの不安を感じました。しかし、あまりテーブルを仮想スクロールする場合についてのまとまった情報をWeb上で発見することができませんでした。 そこで、実際に仮想スクロールを採用した検証用のWebアプリケーションを作成し、スクリーンリーダーでの動作を確認してみることにしました。 「日本の郵便番号」ア
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
プレースホルダーのアクセシビリティ上の課題と解決策 - SmartHR Tech Blog
重度の色弱なので、レトロゲームの赤文字が全く読めない→受験生ならお世話になるアイテムで解決した
Access Accepted第778回：ゲーム業界で急速に進むアクセシビリティへの動き
“読書バリアフリーの実現”に向けて…国立国会図書館の検索サービス「みなサーチ」を紹介 - TOKYO FM+
数百万人に地震速報を届ける、社員13人の日本企業 「NERV防災アプリ」の石森社長に聞く - BBCニュース
axe-core/playwrightとmarkuplintを導入しアクセシビリティの自動テストをできるようにした
freeeの「合理的配慮」を知る研修を全面公開します。｜mio yoshimura
フルスクラッチして理解するOpenID Connect (3) JWT編 - エムスリーテックブログ
東大発のスタートアップ企業 “国内最大規模 国産生成AI完成” | NHK
ウェブアクセシビリティ検証ツール「Stark」 | Accessible & Usable
名古屋市営地下鉄 ホームの時刻表撤去、QRコードに 経費削減で | 毎日新聞
機密情報を共有するためのURLが分析ツールに入力されることで情報漏えいにつながりまくっていることが明らかに
外国人から見た名前入力に関するBADなUIデザイン｜CULUMU / インクルーシブデザインスタジオ
Webアクセシビリティ入門
なぜ手話歌にモヤモヤする？ 手話文化の大前提を識者に聞いた | 日本財団ジャーナル
改正障害者差別解消法とウェブアクセシビリティ | Accessible & Usable
dialog要素を使用したモーダルウィンドウの実装例 ｜ TAKLOG
第1回 デジタルコンテンツの視認性とWCAG2のコントラスト比の課題 | gihyo.jp
アクセシビリティーに考慮するHTMLコーディング - WAI-ARIAでスクリーンリーダーの読み上げがこう変わる - ICS MEDIA
XやInstagramなどのSNSを使っていない人が企業やお店のSNSアカウントを見たらどう見えるのかを検証
Tappy - Yahoo!デベロッパーネットワーク
dl/dt/ddのスクリーンリーダーの読み上げをなんとかする
テキストを1文字ずつアニメーションさせる時の注意点と実装例 ｜ TAKLOG
アクセシビリティの指摘はなぜあんなに『めんどうくさい』のか｜平尾ゆうてん
読字に困難「ディスレクシア」に読みやすい「UDフォント」広がる（テレビ朝日系（ANN）） - Yahoo!ニュース
4月1日に改正法施行！ Webアクセシビリティ改善を進めるには、どうすればいいですか？ 植木真さんに聞いてきた | Webのコト、教えてホシイの！
「情報アクセシビリティ好事例2023」に応募しました
テーブルの仮想スクロールとスクリーンリーダー向けのアクセシビリティ