【HTML】dl, dt, ddで組みたくなる表、tableにするのがいいかもね（スクリーンリーダーと検索エンジンのために）

2024/04/07 8 users dictionary Object メタデータ map 議論

詳しくは以降で説明します。 想定する表の内容 この記事の議論では、名前と値の組が複数並んでいる、メタデータの表を想定します。 プログラミング言語でいうところの、連想配列 (Map, Dictionary, JS では Object) の構造に相当します。 具体的には以下のようなものです。 会社概要（「会社名：〇〇、所在地：〇〇、資... 続きを読む

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

2023/09/03 14 users dl要素 手法 立場 ご存知 とおり

この記事で取り上げる手法は実験的です。何か問題があった際に、すぐに修正・改善できる立場にないのであれば採用するべきではありません。 期待と異なる読み上げ スクリーンリーダーを使ったことがある開発者ならご存知のとおり、dl要素、dt要素、dd要素の構造はスクリーンリーダーの読み上げにおいては期待と異なる挙... 続きを読む

SPA(Next.js)のスクリーンリーダーによる画面遷移で工夫したこと

2022/02/02 14 users SPA 画面遷移 Next.js

こんにちは、Ubie株式会社でデザインエンジニアをやっているtakanoripです。 UbieではユビーAI受診相談というサービスを開発しており、症状に関する質問をするページ（以下「質問ページ」という）を中心にアクセシビリティ向上のための様々な改善を進めています。 今回はその中の1つの事例をご紹介します！ Ubieでのアク... 続きを読む

アクセシビリティー研修でスクリーンリーダーの音声を届けるために - freee Developers Blog

2021/12/02 15 users ymrl 音声 freee Developers Blog

こんにちは、id:ymrlです。この記事はfreee Developers Advent Calendarの2日目です。 先日の記事で、全従業員向けのアクセシビリティ研修を紹介しました。 developers.freee.co.jp この研修でとても大切にしていることのひとつに 「スクリーンリーダー（画面読み上げソフトウェア）の操作を実演する」 というものがあり... 続きを読む

アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシート -a11y css reset | コリス

2019/07/01 43 users コリス アクセシビリティ CSS フォーカス時 リセット

アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシートを紹介します。コンテンツを視覚的に隠す際に見えなくするだけでなく、スクリーンリーダーにもアクセス可能にし、フォーカス時の振る舞いなどが定義されています。 a11y css reset -GitHub a11y css resetの特徴 a11y css resetの中身 a11y... 続きを読む

なぜ「タブ」はスクリーンリーダーで読めない？ タブをアクセシブルにする | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い | Web担当者Forum

2019/06/25 23 users 文言 おさらい ラベル 代替テキスト アクセシブル

ユーザーテストの結果、いくつかの問題点が明らかになりました。問題点の多くは、ラベルの文言の変更、代替テキストの調整といった微修正レベルで対応できるものでしたが、中に一つ大物案件がありました。それが、タブの問題です。 何が問題かおさらい ユーザーテストでは、スクリーンリーダーでタブを読む際に問題が起... 続きを読む

制作者のためのHTML

2019/03/10 430 users HTML 文脈 アクセシビリティ 切り口 制作者

主にユーザー側の視点から語られることが多いアクセシビリティですが、制作という側からはどのように捉えることができるのでしょうか。2つの切り口から考えてみます。 # アクセシビリティという文脈において、何のためにHTMLを書くかという話になると マシンリーダビリティのため スクリーンリーダーのアクセシビリティ... 続きを読む

OS X の VoiceOver で Web サイトのスクリーンリーダー対応をはじめよう

2018/10/11 32 users VoiceOver アプリケーション 前提 web バージョン

開発している Web アプリケーションをスクリーンリーダーでも扱えるようにするにあたって、 VoiceOver を使いはじめてみたら思ったより簡単だったので、やり方についてまとめてみます。 この記事内では OS X High Sierra (10.13.6（17G65）) を前提としていますが、 VoiceOver の操作方法などはバージョンが変わってもあ... 続きを読む

Apple、Webサイトが視覚障害者を差別しているとして訴えられる | スラド アップル

2018/08/24 62 users headless曰く スラド 原告 Apple.com 女性

headless曰く、視覚障害を持つ米ニューヨーク州の女性が19日、AppleのWebサイトが視覚障害者を差別しているとしてニューヨーク南部地区連邦地裁にAppleを提訴したそうだ（The Register、訴状PDF）。 原告はスクリーンリーダーを利用してインターネットにアクセスしているが、AppleのWebサイト（apple.com）はスクリーン... 続きを読む

AbemaTVのアクセシビリティ 小さな一歩｜しゅんすけ | AbemaTV｜note

2018/03/28 58 users AbemaTV アクセシビリティ iOSアプリ 主観 初め

「アクセシビリティ」という言葉を使うほどではないかも。 （予防線ドーン） 正直なところ、マシンリーダブルな部分は僕はまだよく理解してない。 アプリにおけるスクリーンリーダーとか操作や表示調整諸々とかちょっと待って！頑張るから！ で、完全に僕の主観だけど、多くのデザイナーがまず初めにとっつきやすいアクセシビリティは 「色のコントラスト」 だと思う。 ということで、 まずはAbemaTVのiOSアプリ... 続きを読む

すごく分かりやすい！デザインやコンテンツ設計の 面からアクセシビリティへの取り組みを解説したWeb制作者必読書 | コリス

2015/07/24 52 users インタラクション コリス アクセシビリティ 本書 手助け

アクセシビリティって、スクリーンリーダーに対応することでしょ、間違いではありませんがそれはほんの一部です。 分かりにくいナビゲーション、思ったように操作できないインタラクション、入力が困難なフォーム、内容が理解しにくいコンテンツなど、すべての人が快適にアクセスできるよう改善の手助けとなるオススメの本を紹介します。 本書は以前紹介した「コーディングWebアクセシビリティ（紹介記事）」の姉妹書で、「コ... 続きを読む

フォーム入力不備の情報提示 (スクリーンリーダーのユーザーにも伝わるように) — Website Usability Info

2015/04/06 23 users Website Usability Info ユーザー

Talking about web usability, accessibility, IA, UCD, UX,... フォーム入力不備の情報提示 (スクリーンリーダーのユーザーにも伝わるように) 2015年4月7日 アクセシビリティ , インタラクションデザイン (IxD) , ユーザビリティ , ユーザーインターフェース (UI) ウェブサイトのフォームで、入力に不備がある場合、問題となってい... 続きを読む

音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて｜Web制作 W3G

2015/01/19 19 users content before After 擬似要素 多く

音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて Updated 2015.01.19 / Published 2015.01.19 スクリーンリーダーや音声ブラウザなどの音声出力環境で::before擬似要素、::after擬似要素にcontentプロパティで生成した内容は多くのソフトウェアで読み上げることができます。使い方次第で、薬に... 続きを読む

フォームの入力必須項目のマークアップ — Website Usability Info

2013/04/12 92 users Website Usability Info フォーム

公開日 : 2013年4月12日 カテゴリー : アクセシビリティ , ユーザビリティ Web サイトのフォームの中には、入力必須の項目があります。大抵の場合、その項目が必須である旨を、ラベル (<label> 要素の中) に盛り込むことが多いでしょう。 上記のように、<label> 要素の中に「必須」と書かれていれば、たとえばスクリーンリーダーを使いながら [Tab] キ―でフォーカス位置を移動... 続きを読む