UI・UX・CX・HCD・UD・アクセシビリティといった関連用語40個を5つの分類で整理して解説。コントラスト比やカラーユニバーサルデザイン、代替テキストなど実例で学べる。聾学校での経験から、音声に頼らない環境での視覚情報の重要性を示す。
#代替テキスト・alt
「代替テキスト・alt」に関するアクセシビリティ関連情報を自動収集して掲載しています。
AIと自動検査ツールを使ってWebページのアクセシビリティを検査する方法を、実装例で解説。WCAG 2.2に基づく6項目(色のコントラスト、代替テキスト、ボタンサイズ、幅320での表示、動き設定の尊重)の検査スクリプトとコマンド例を提示。自動検査の限界(説明文の内容評価、ボタン間隔)についても述べる。
PDF作成時の画像代替テキストレビュー手順を解説したもの。AIで下書きした代替テキストを人がレビューする際、画像の目的・周辺文脈・PDF形式後の状態を確認するプロセスを示す。
ページ公開前のアクセシビリティレビューで、実装チェックではなく人が測定したカラーコントラストペアを記録し、代替テキスト出典とキーボード動線の確認が無い場合は公開を止める判定プロセスを解説。
画像のalt属性を適切に設定する方法とAI生成ツール活用による効率化を解説。スクリーンリーダー利用者向けアクセシビリティ、SEO、AI検索精度向上の観点から重要性を説明し、装飾画像と情報画像の区別や冗長表現の避け方などのルールを紹介。AI生成は完全自動化ではなく人間による文脈確認が必須と指摘。
スクリーンリーダーユーザーや検索エンジン、低速接続ユーザーのための代替テキスト(alt属性)の書き方。何を含めるべきか、何を避けるべきかを具体例で示している。
画像の必要性を根本から問い直す。見えない人にとって意味がある場合、代替テキストが必要であることを示す。装飾的と見なされる画像も、実質的な意義の有無を判断する枠組みを提案。
セマンティック HTML 要素がスクリーンリーダーなどの支援技術による情報理解をどのように改善するかを解説。代替テキスト、フォームラベル、見出し構造の3つの実装課題を実例とともに説明している。
Decorative Images…
代替テキスト(alt)設計における「装飾的画像」という概念を検証し、すべての画像には実質的な目的があると主張。画像に alt テキストが必要かを判断するための決定木を提供する。
インタラクティブ動画プレイヤー hihaho の9月アップデート。キーボード操作で再生・字幕・スキップができ、スクリーンリーダーで状態と結果が読み上げられるように対応。画像代替テキスト機能も追加。
WordPress のオルタナティブテキスト生成に生成AI を倫理的に活用する方法を探索。管理者の作業軽減と同時に、コンテンツ作成者がスクリーンリーダーコンテキストを学べるUI設計(benevolent friction)について議論する。
代替テキストと説明文の書き方を学ぶ実践教材。「見た目」ではなく「ページで伝えたいこと」に焦点を当てた画像説明の考え方を、実例とAI指示文で指導。W3C WAI の画像説明ガイドに基づいている。
画像の説明は代替テキスト・キャプション・本文の3つの場所に役割を分けて置く方法論を解説。それぞれの目的や読み手の状況によって説明の内容や分量が変わる。W3C WAIのガイダンスに基づき、実際の制作手順を示す。
Web開発者・デザイナー向けのブラウザ型アクセシビリティツール集。色コントラスト、代替テキスト、見出し構造、キーボード操作、フォーム、WCAG対応をカバー。
政府機関向けPDFのアクセシビリティ監査で頻出する7つのミス(見出しタグの誤り、画像の処理、フォームラベルの欠落など)を紹介。自動チェッカーの合格と Section 508 / Title II 監査結果の相違を解説する。
Unicode スクリプト文字の技術的仕組みと、検索・スクリーンリーダー対応・文字列長への影響を解説。装飾的な文字とアクセシビリティの衝突を示す。
画像のALT文(代替テキスト)と本文での説明の書き方。視覚障害のあるユーザーが取り込む情報を想定し、画像が無いと読者が何を見落とすかを考えながら記述する方法を提示する。
動画の音声をAIで文字起こしした場合、映像にしかない操作手順や指示を記事に補足する編集手順。視覚情報なしで内容を追えるようにするW3C基準のブログ編集方法。
ローカルAI(Gemma 3 4B)を用いてWeb要素のアクセシブル名を自動提案し、キーボード操作を補完するChrome拡張機能。スクリーンリーダー対応で、ブラウザ側のみで動作。
アラスカ州アーツカウンシルにおける alt text 自動生成ツール ATC の事例から、助成制度・文化政策のアクセシビリティを考察。視覚障害のある審査員が作品情報にアクセスできる基盤づくりと、米国の ADA や文化行政の枠組みを解説している
X投稿の画像説明の書き方。写真と図解で異なるアプローチ、伝えたい情報の選び方、見える情報を客観的に言葉にする手法をW3C公式案内をもとに紹介。
自動アクセシビリティスキャナーが実行する12個のHTMLチェック項目を解説。alt テキスト欠落、ラベル欠落、見出し構造、言語設定など、各チェックが検出する内容と、スキャナーの限界(判定の質や文脈の理解は不可)をWCAG 2.2との対応で示す。
WCAGレベルAA達成のための初心者向けガイド。alt属性・コントラスト比・見出しタグ・ラベル・キーボード操作・字幕・リンクテキストの7つのポイントと、WAVE・Lighthouse・axeなどの検査ツールを解説する。
セマンティックHTMLの重要性とスクリーンリーダーへの影響を解説。著者のポートフォリオサイト監査で発見した3つの問題——画像のalt属性欠落、フォームラベルの接続不良、見出し階層のスキップ——と修正方法を紹介する。
Lighthouse と axe で頻出するアクセシビリティエラー(代替テキスト・色コントラスト・ボタン名前・フォームラベル)の意味と修正方法を解説する。
Lighthouseで最も頻出するアクセシビリティ失敗4つ(色コントラスト・代替テキスト・リンク名・フォームラベル)の原因と最小限の修正方法をWCAG 2.2に対応させて解説している。
AuditReadyというアクセシビリティスキャナーが、既存ツールと異なり決定的なチェックとレポート形式を備えている一方で、JavaScriptレンダリング・品質判定・自動コンプライアンス保証はできないことを明確に述べている。
Math Is Not Accessible in PDFs
PDFでの数学コンテンツのアクセシビリティ課題と、PDF利用時の対策方法について解説するウェビナーの抜粋。
Lighthouse の accessibility score が実際に何を測り、何を測らないか。100点でも manual testing が必要。自動テストの限界と manual checks が必要な10項目の解説。
W3Cの画像チュートリアルに基づき、画像の役割に応じた代替テキスト作成の考え方と、AIへの指示方法や確認手順を記した実践シート。
AIで作成したPowerPointの画像に代替テキストを付ける実践的な方法。見た目の説明ではなく画像がないと失われる情報を優先し、写真・グラフ・手順図など種類別テンプレートと判定票で解説。自動生成任せではなく、スライドの目的と結論を人が確認してから記述することの重要性を強調する。
紙の漫画をnoteで読める形にアクセシブル化した実践例。代替テキストとキャプションで視覚情報と音・文字情報を分けて説明する方法と、視覚的表現をどう伝えるかの工夫を記録している。
Accessible Maps Convey Location AND Data
地図が位置情報と関連データの両方を正確に伝えるために必要なアクセシビリティ対応を解説。複雑な地図では代替テキストだけでは不十分であることを示す。
図解、代替テキスト、キャプションの3つが異なる内容を伝えると、理解が不安定になることを指摘。それぞれの役割を分け、同じ意味を複数経路で伝えるWebコンテンツ制作の方法を詳説する。
Wix・STUDIO・Framer・Readdy のノーコード/AI ツール4つについて、公式ドキュメントに記載されたアクセシビリティ対応項目を比較分析。代替テキスト・ARIA・コントラスト・キーボード操作等の実装状況を横並びでまとめる。
What Automated Accessibility Testing Can Catch, and What Developers Still Need to Test Manually
自動アクセシビリティテストで検出できることと、人間による検証が必要な領域を区別し、開発者が何を自動化し何を手動で確認すべきかを実践的に解説している。代替テキスト、フォームラベル、アクセシブル名などを例に、W3C のガイドラインと実装の課題を論じている。
PDFを見出しナビゲーション可能なHTML構造に組み直すブラウザ拡張機能。リスト・表・リンク・見出しをアクセシブルに処理し、画像説明やOCRはブラウザ内蔵のAIモデルで実行。プライバシーを重視し、すべての処理をブラウザ内で完結させる。
ブログの画像に空のままだった代替テキスト(alt)を、Claude Codeで判定・生成する方法と実例。判定基準を示し、41枚の判定と作業工夫を紹介。
Webアクセシビリティの基礎を、WCAGの4つの原則で解説。知覚可能・操作可能・理解可能・堅牢それぞれについて、よくある実装の穴と修正方法を具体例で示す。
画像の役割(情報提供・機能・装飾)に応じたaltテキストの書き方を解説。スクリーンリーダーユーザーが正確な情報を受け取るために、各タイプに応じた適切な説明文と空の属性の使い分けを詳細に説明している。
Lighthouse スコア低下の原因となる 6 つの問題と改善方法。画像最適化、フォント読み込み最適化、サードパーティスクリプトの遅延読み込み等を解説。
AIに画像の代替テキスト作成を依頼する際の方法。W3CのAlt Decision Treeに基づき、画像の役割を判断したうえでAIに見出しと文脈を伝える指示法と、出力結果の検証方法。
配送画像の代替テキスト生成パイプライン設計。メタデータと目視確認を組み合わせてドラフト案を作成し、編集者がレビューして承認する段階的アプローチを解説。
生成AIで画像のalt テキストを効果的に作成する5ステップ。画像の役割をつかむこと、AIの落とし穴、人による確認の重要性を解説。
noteで画像キャプション(スクリーンリーダー向けの説明)をどう書くか、音声読み上げユーザーと視覚的表示の両立をいかに実現するか、著者が試行錯誤する過程を記述。
WebAIM Million 2026年調査で明らかになった最も一般的な6つのWCAG違反について、なぜそれらが問題かを解説し、各々の修正コードを具体的に示す。
WordPress環境でのメール送信におけるアクセシビリティについて。確認メール・パスワードリセット等、ユーザーが受け取る全メッセージが読みやすく・ナビゲート可能である必要性を解説。コンテンツ・構造・デザイン・テスト実践を網羅した講座。
生成AIが画像の詳しい説明を書いても、代替テキストとして使用する前に7点の観点で編集する必要があると解説。目的・意味・装飾性・機能・文字・図表・CMS実装後の確認を通じ、見た目の正確性ではなく「見られない人にも同じ情報へ到達できるか」を基準とすべき。
Web制作の卒業制作をWCAG 2.2に沿ってセルフチェック。LightHouse、キーボード操作、代替テキストの3点から、具体的な問題点と対策を実例で解説。
スクリーンリーダーがアクセシビリティツリーを通じてWebページを読む仕組みと、alt欠落・ARIA誤用などよくある実装エラーの修正法を解説する。
HTML/CSS初心者向けのWebアクセシビリティ入門。意味のあるHTML、キーボード操作、フォーム、代替テキスト、コントラストの5点から始める基本を解説。
自動運転AIチャレンジのドキュメント翻訳とツール多言語化。日本語のみだったページを英語化し、ツールメッセージを日本語・英語併記に。画像に代替テキストを追加し、用語集と海外参加者向けガイドも作成。
ホームページ制作の予算削減方法と、アクセシビリティ・ユーザービリティという妥協できない品質基準を解説。ALT属性の書き方・コントラスト比・レスポンシブデザイン確認など、Lighthouse80点以上を目指すポイントを紹介する。
パフォーマンス・アクセシビリティ・セキュリティ・SEO・コード品質を含む2026年のWeb開発ベストプラクティス。Core Web Vitals、セマンティックHTML、キーボード操作、色コントラスト、代替テキストなど実装ガイドを提供する。
URLを指定するだけで、ページ内のすべての画像のalt属性を一括確認できるツール。PHPとDOM解析を用いて、alt属性の有無・空文字・未設定をワンステップで判定し、アクセシビリティとSEO両面での品質向上を支援する。
ビジョン言語モデルを用いた画像 alt テキストの自動生成について、スクリーンリーダーユーザーへの効果と学生向けプロジェクト実装例を解説する。
AIが生成したaltテキストを人が確認する際、画像内容と記事での使用目的を分けて渡すと、確認すべき点が明確になることを実践例で示す。
HTMLを可視化するブラウザ拡張機能『Accessibility Visualizer』の開発者 ymrl さんが、代替テキスト・見出し・フォームなどの情報を視覚化するツールと活用法を解説する。
Mathpixツールを使用してPDF内の数学式をアクセシブルな形式に変換し、編集・確認およびスクリーンリーダー対応可能にする方法を解説している。
Altテキストを効果的に書くための指針。スクリーンリーダー利用者を最優先にした上で、検索エンジンにも適切に理解される書き方、具体例、チーム運用の方法を解説する。
PDF や Word などの文書内の静止地図をアクセシブルにするワークフロー。代替テキスト、タグ付け、データへのアクセス方法を実例で解説する。
PDFや文書内の地図のアクセシビリティ失敗例(alt文、色凡例のみ、データテーブル欠落、画像タグなし)と修正方法を解説する。
SNS上での炎上議論をめぐるアクセシビリティ問題を分析した記事。代替テキストのないスクリーンショット投稿が視覚障害者を情報から排除し、専門家のインクルーシブ教育論と実際の発信行動の乖離を指摘。
AIが画像の内容を説明することと代替テキストの執筆は別の問題だと論じる。代替テキストは「何が写っているか」ではなく「記事の中でその画像がなぜ必要か」を伝える役割を担い、編集意図の判断は人間にしかできない。
AIが生成したUIコピーを承認する前に、エビデンススロット(コントラスト比、スクリーンリーダー検証、原文保護、人間による目的確認)が埋まっていることを確認する審査プロセス
Webサイトの代替テキスト欠落を自動検査し、Wikipediaを含む実在サイトが WCAG 2.1 SC 1.1.1 という基本要件を満たしていない実態を調査報告。無料のスキャナーツールも紹介。
ブログ記事のセマンティックマークアップ実装ガイド。h1~h3の階層構造、figcaption、alt text、JSON-LD BlogPostingなど、HTMLの正しい要素選択方法とアクセシビリティを解説。
ビューティーコマース向けのアクセシビリティガイダンス。シェードマッチングツールやバーチャルトライオンなど、視覚障害のある利用者に重要な商品情報をテキストで伝える方法を解説する。
HTMLメール制作での画像作成における5つのポイント。容量最適化・altテキストの効果的な分割・モバイルでの操作性・ダークモード対応・最終チェックを実装例で解説
ダッシュボードをアクセシビリティのない平面画像からアクセシブルなデータビジュアライゼーションへ変換する実例。alt text・コントラスト・直接ラベル・構造化テーブル・スクリーンリーダーテストの5ステップワークフロー。
医療情報サイト(耳鳴りを例に)のWebアクセシビリティ実装方法6項を解説。構造・シンプルなUI・文脈的リンク・アクセシビリティ(コントラスト・キーボード・代替テキスト等)・医療情報としての責任・パフォーマンス。
WordPress画像のalt属性自動生成。WCAG 2.1 SC1.1.1対応のため、OpenAI互換APIで画像からalt textを生成。プライバシー重視のBYOKモデル。
Shopify 店舗が直面する ADA 訴訟の傾向と対策。テーマの見出しタグ使用法、サードパーティアプリのマークアップ、AJAX パターンなど、問題となる WCAG 違反 6 パターンと修正コード例を解説。
PHPのDOMDocumentがHTML標準の`<template>`仕様を実装していないため、template内や遅延読み込みプラグインの`<noscript>`フォールバック内の要素がアクセシビリティ検査で誤検出される問題と対策を解説。WordPressプラグイン開発での実例。
Accessible Math Tools and Key Considerations
スクリーンリーダー利用者が数学の方程式を理解するためのアクセシブルなツールと考慮事項を解説するウェビナー。
動画のアクセシビリティ実装方法を解説。字幕・トランスクリプト・画像説明の作成と、複数プラットフォームでの一貫性確保をまとめたチュートリアル。
InDesign で画像に代替テキストを追加する方法を実操作で解説するチュートリアル。AI 代替テキストジェネレータの有効活用と注意点、Dax Castro Alt Text Automator や Callas PDFGoHTML などのツールについても紹介。
パスワードリセットメール実装時に、HTML版とプレーンテキスト版の両立、ダークモード対応、アクセシビリティテスト(見出し順序・色コントラスト・代替テキスト)を考慮した設計方法を解説する。
WCAG の POUR 原則に基づきながら、セマンティック HTML・alt 属性・見出し構造・フォーム label など、アクセシビリティ対応コーディングの具体例をコード付きで解説。スクリーンリーダーや自動ツールでの確認方法も紹介する。
スクリーンリーダー対応やキーボード操作支援など、モバイルアプリのアクセシビリティをAIが自動化する現状。生成AIによる代替テキストとアクセシビリティ対応コード生成の実績を紹介。
Threads APIで画像を投稿するときに必要なURLの取得方法、画像形式の指定、代替テキストの設定を解説。
Venngage accessibility options and checker
Venngage のアクセシビリティ機能のデモ。ドキュメント構造・alt テキスト・タグ順序・言語設定の確認とアクセシビリティ検査ツールの使用方法。
スクリーンリーダーと支援技術がスライドと相互作用する方法を理解する、PowerPoint アクセシビリティの入門ワークショップ。
AIが生成する画像の代替テキストが、モデルが見えていない細部を反映できない可能性を実例で指摘。生成AIによるテキスト自動生成の限界を解説。
Kindle本の写真に代替テキストを付けた制作過程。AIを活用して視覚障害のある読者に配慮した実装方法を、全盲の老犬が登場人物のエッセイ出版から紹介する。
初心者向けのMicrosoftWordアクセシビリティ講座。見出し・リスト・表・リンク・色コントラスト・代替テキストなど、アクセシブルなドキュメント作成に必須の実装方法を解説する。
科学データの視覚的表現に頼らない、スクリーンリーダーやブレイルディスプレイで利用できる分析記録の作成方法。非視覚的アクセシビリティと計算再現性を両立させるため、プロット代替、メタデータ、リテラプログラミングなど10の実践。
Visual Math vs Screen Reader Interpretation
スクリーンリーダーによる数学式の解釈と視覚的な表現との違いから、数学コンテンツのアクセシビリティにおける課題と対応方法を解説。
AIを使用して画像の代替テキストを自動生成するWordPressプラグイン開発の実装例。手動によるalt記述の手間を削減し、スクリーンリーダーユーザーのアクセス性向上を実現する事例紹介。
代替テキストの本来の役割と誤用例を示し、スクリーンリーダー利用者が正しくアクセスできるALTの正用法を啓発。
Kindle Direct Publishingでの電子書籍出版時に、代替テキスト等のアクセシビリティ機能を実装するプロセスと検討を記録。
グラフ・チャートのアクセシビリティ実装方法を学ぶミニマスタークラス。代替テキスト・長記述・データテーブルの使い分けと、WCAGに対応した6ステップの制作フロー。
プラットフォーム運営でのユーザー投稿画像のalt属性とアクセシブルネーム設計について、視覚障害のあるユーザーへの対応方法を解説。
数学・科学教材の複雑な画像に対して詳細な説明文を自動生成し、スクリーンリーダーユーザーの学習アクセシビリティを向上させる手法の研究。
数学・科学の教材における代替テキスト不足に対応するデータセット。複雑な図式・数式の詳細な説明文作成と評価方法を提案している。
画像が表示されない場合でも意味が伝わるコンテンツ作成方法を解説。画像の役割を明確にし、テキスト記述だけでも内容が理解できる工夫を紹介する。
画像のアクセシビリティ改善に向けたalt属性の活用法と、プラットフォーム・ユーザーへの働きかけについて実践的に解説。
Chart-Supported or Model-Supplied? Examining MLLM-Generated Claims for Accessible Visualization
MLLMがグラフの説明文を生成する際、提供されたアクセシブルなコンテキスト(データテーブルや代替テキスト)にどの程度依存するか、モデルが推測を加えるか検証。複数のAIモデルと入力条件での大規模調査から、根拠ある記述とモデル推測を区別する方法を探る。
AI生成による画像説明(alt text)が視覚障害と非視覚障害者の両者にもたらす新しい感覚的体験。代替テキスト制作の多様性と可能性について国際動向を紹介。
AIモデルがWebサイトを正しく理解し推薦するには、構造化・メタデータ・代替テキストなどのアクセシビリティ対応が必須。LLM/AI時代のアクセシビリティの新しい価値を論じている。
PDFアクセシビリティ修復の具体的な手順を、Adobe Acrobatを使って実演。タグ付け、代替テキスト、論理的読み順などの重要な要素を段階的に解説する。
スクリーンショット入力で動作するAIコーディング支援ツールのアクセシビリティ監査。テキスト代替、キーボード入力、音声フィードバック、視覚支援技術なしの操作フロー検証を解説する。
AIを活用して画像説明を自動生成するワークフロー。視覚障害のある人を含むあらゆるユーザーにとって有効な代替テキスト設計の実装方法論を実践的に解説。
VPAT記載の確認時に注意すべき点。画像のラベル欠落や説明不足がスクリーンリーダーユーザーに与えるアクセシビリティバリアについて。
Webアクセシビリティの学習中級者向けロードマップ。alt属性、見出し構造、ARIAなどの基礎から全体像を体系的に把握し、次のステップへ進むための指南。
ホームページの画像に設定するalt属性(代替テキスト)の重要性を解説。SEO対策とアクセシビリティ向上の両面から、alt属性の正しい設定方法を紹介する。
不動産情報サイトのリスティングページにおいて、スクリーンリーダーユーザーが直面する代替テキスト・フォーム・物件情報詳細に関するアクセシビリティの課題と対応方法を解説する。
YouTube字幕機能・概要欄の代替テキスト・音声解説など、動画のアクセシビリティ改善方法を実例で紹介。
画像に代替テキストを付ける目的と効果を解説。スクリーンリーダーで読み上げられるほか、画像が表示されない環境や検索エンジンにも役立つ実装の重要性を論じる。
メーカー新入社員が実務を通じて学んだalt属性の思い込みの罠。視覚障害のある人へのアクセス保証の正確性向上と検品プロセス改善。
リンクラベルの明確さがWebの使いやすさに与える影響を実装観点から解説。スクリーンリーダーなど支援技術利用者にとって不可欠な設計要件。
WCAG 2.2ガイドライン1.1『テキストによる代替』について集まって読み合い、学んだことを共有する勉強会。
画像の代替テキスト設定がアクセシビリティと検索エンジン最適化の両面で必須であることを、視覚障害のあるユーザーの利用シーンから解説。
DHS Trusted Tester 試験対策。WCAG Success Criteria が DHS test condition へマップする仕組みと、画像コンテンツのテスト判定(Pass/Fail/Does Not Apply/Not Tested)を詳説。
PDFアクセシビリティをチェックするツール「PDF4WCAG」を紹介。メタデータ、タグ、見出し、代替テキストの検証方法とベストプラクティスを解説。
Fluent UI 2のアイコンのセマンティック目的とアクセシビリティ対応について解説する技術記事。デザインシステムにおけるアクセシビリティの実装方法を論じている。
Fluent UI 2のImageコンポーネントのアクセシビリティを含むレイアウト設計について解説する技術記事。支援技術への意味情報の伝達方法を論じている。
フローチャートの代替テキスト作成方法を解説。ステップや判断の順序を正確に記述するコツを紹介。教育現場での STEM 試験執筆向けガイド。
iOS 27のFoundation Modelsを使い、欠落した画像のalt textをオンデバイスで自動生成。視覚障害ユーザーがスクリーンリーダーで画像を認識できるようにするフォールバック機能を解説。
Microsoft Word に搭載されたインラインアクセシビリティチェッカーの使い方を解説。低コントラストテキストと代替テキスト欠落を執筆中に検出し、アクセシブルなドキュメント作成を実現する。
PDFの自動タグ付け機能によって、ドキュメントの視覚的完全性を保証しながらアクセシビリティを実現する手法を解説。アクセシブルなPDF作成の技術的アプローチ。
Gemini APIを活用した高精度なalt属性・画像キャプション自動生成プロンプトを公開。文脈理解と画像認識を組み合わせたバリアフリー解説生成を実現。
WordPress 7.0のアクセシビリティ改善を解説。GAAD Contributor Dayの成果、テーマテスト、Gutenberg改善、代替テキストインポート機能を紹介する。
視覚障害者が画像説明とALTテキストの実装を求める際、丁寧な依頼よりも実例の提示が効果的であることを論じた動画。
複数のソーシャルメディアプラットフォーム(Slack、Facebook、Instagram、Threads、Mastodon、Discord等)で画像に代替テキストを追加する実践的なチュートリアル。スクリーンリーダーユーザーの体験とコンテンツのインクルーシブ化を実現する方法を示す。
WCAGでもっとも基本的なルール「WCAG 1.1.1」で要求される画像の代替テキスト。4種類の画像パターンごとの規則とよくある失敗例・実装例を紹介。
PDFをWCAG準拠にするための手法。タグ付け・読み順・代替テキスト・フォーム設定などの完全チェックリストと検証方法を解説する。
アクセシビリティを意識した配色・文字・画像設計が全ユーザーの読みやすさを実現する鍵であることを解説。視認性、色に頼らない強調、リンク・見出しの差別化が基本。
STEM分野における図表・画像のテキスト説明を自動生成する技術を調査した論文。視覚障害のある人が複雑な科学情報にアクセスするための AI 手法を紹介。
GAAD 15周年を期に、Claude、OpenAI Codexなどのアクセシビリティ改善への役割と、依然90%超のサイトが未対応という構造的課題を論じる。
化学式・分子構造などSTEMコンテンツのアクセシビリティ実装法。MathML・LaTeX、代替テキスト・触覚図、ChemDrawでのアクセシブルなSVG・テキスト形式の作成方法を紹介する。
ろう者のアドボケイトが、アクセシビリティ要求を無視され続けた6ヶ月の経験と、キャプション・ALTテキストなどの教育動画シリーズ制作の計画を語る。
AI生成による代替テキストの精度課題を実体験から報告。視覚障害者向けのaltタグ自動生成の失敗例と改善の必要性を検討。
色・サイズ選択UIが代替テキスト・キーボード対応・状態表示を欠落させ、WCAG 1.1.1・1.4.1・4.x に違反する実例を紹介し、対策方法を詳しく解説する。
Webサイトのアクセシビリティ問題を1行のスクリプトで自動検出するツール「PageLoupe」。alt属性、コントラスト比、色覚特性、パフォーマンス指標をWCAG基準で一括検証。
WCAGガイドラインにおいて、リンク画像の代替テキスト欠落がどの基準に該当するかを解説する実践的ガイド。
【ITアクセシビリティ】ALTってなぁに?【さんにん企画】
代替テキスト(ALT属性)の役割と付け方を初心者向けにわかりやすく解説するYouTube動画。Webアクセシビリティの基礎学習に最適。
AIアシスタント Copilot は、alt text がない画像の説明・解釈を支援し、視覚障害のある人の画像理解を助ける。
Canva プラットフォーム内で利用可能なアクセシビリティ機能を紹介。alt text の追加、見出し構造の設定、カラーコントラスト テストなど、デザイナーが使用できるツール群を解説。
画像を自動的にテキスト化するAPIの紹介。代替テキスト、SEO最適化説明文、詳細な説明の3つのスタイルで出力。画像アクセシビリティの自動化ツールとして活用できる。
AI を活用して画像から自動的に説明テキストを生成し、スクリーンショットなどのコンテンツを再利用可能なテキスト化する手法と事例。
Eleventyでの画像最適化実装方法を解説。パフォーマンス向上がアクセシビリティに与える影響を含む。
美術作品のアクセシビリティ論文。全盲・ロービジョンユーザー向けにマルチセンサリーな説明を自動生成するシステムの研究。
【WACA主催】マーケター必見!明日から始めるWebアクセシビリティ
ウェブ解析士やSNSマネージャー向けのWebアクセシビリティセミナー。基礎から実装施策、SEO改善までカバー。
DocAccess ツールが PDF をアクセシブルな HTML に自動変換。画像への代替テキスト追加と図表から表への自動生成により、PDF のアクセシビリティと法令遵守を効率化する。
試験での円グラフの代替テキストの効果的な記述方法を解説。評価の公正性を保ちながらアクセシビリティを確保する教育戦略を紹介する。
AI生成ツールを使ったWCAG準拠のalt属性テキスト作成方法。実例12件とアクセシビリティ監査ワークフロー、WCAG要件を解説。
AI画像説明ツールを活用した大規模画像レトロフィット。alt属性とSEO最適化の関係、1000件以上の画像更新を実現する手法。
スクリーンリーダーで初めてWebサイトを体験した新入社員による研修レポート。alt属性空白と見出し構造崩れが与える影響を実感。
Does improving accessibility help with Voice Search optimization or AI-driven search results?
適切な見出しと代替テキストがアクセシビリティと同時に音声検索・AI クローラー最適化に貢献することを解説。アクセシビリティ改善が SEO にも効果をもたらす関係性を示す。
スライドプレゼンテーションの画像に対してキャプション表示だけでは不十分であり、alt属性テキストも必要であることを説明している。画像説明の「ゴールドスタンダード」な実装方法を紹介。
職場チャットツールをより多くの人がアクセシブルに使うための実践的なポイント。箇条書き、絵文字の名前説明、代替テキストの活用が、真のインクルーシブなオフィス環境を作る秘訣。
視覚障害のある全盲者が、ALTテキストの誤用がいかに困るかを具体例から説明する。見える人の誤用が、見えない人の情報獲得権を奪う構造を指摘する。
Wordで画像が装飾的かどうかを判定し、装飾的な画像をマークしてスクリーンリーダーがスキップするように設定する方法を解説するアクセシビリティティップ。
Decorative Images vs Alternate Text
画像の装飾性を判定し、意味のある画像に説明的な代替テキストを付ける方法を解説。PDFアクセシビリティへの対応手法も紹介。
数学試験の棒グラフ・柱状グラフに対して、答えを与えないalt text記述法を解説。
WCAG 2.1 Level AA に基づく米国50州のホームページのアクセシビリティ評価を実施。自動ツールで検出可能な課題のベースラインを示し、色コントラスト不足・見出し構造不全・代替テキスト欠落が広く存在することを明らかにした。
Testing a Google Form with NVDA
スクリーンリーダーNVDAを使用したGoogleフォームのアクセシビリティテスト方法を解説。ラベル記述、画像説明、シンプルなブランチ設計、色コントラスト、ズーム機能を網羅的に検討する。
GoogleフォームをNVDAでテストし、フォーム設計のアクセシビリティ要素を検証。ラベル・キーボード操作・色覚コントラスト・200%ズームなど、フォーム実装時のベストプラクティスを解説。
試験でのグラフに対する代替テキスト記述方法。複雑なグラフを扱い、テストの答えを与えずに記述する方法を紹介。
How to Write Alt Text for Graphs | Exam tips
グラフの代替テキスト(alt)を試験で効果的に書く方法を解説。アクセシビリティを確保しながら、傾向や答えの解釈は避けるべきことを強調。
AIエージェントがWebを読む時代において、セマンティックHTMLとアクセシビリティ対応の有効性を論じた記事だ。
視覚障害や色覚特性のある利用者を対象に、色だけで情報を伝えるデザインの問題点と、Web担当者が実践すべき代替表現方法を解説している。
数学の試験問題における代替テキストを、答えを明かさず明確に記述する方法を解説。STEM教科の試験作成におけるアクセシビリティの実践的なヒント。
Accessible Presentations: Practical Techniques for Accessible Slide Decks | Accessible Web Webinar
プレゼンテーション資料やスライドをアクセシブルにするための実践的なテクニックを解説。色コントラスト・画像の説明・ライブキャプション・音声の工夫など、様々な障害のある聴講者に情報が届くようにする方法を扱う。
AI生成のAndroidアプリでも、UI要素にcontentDescriptionを適切に設定することでスクリーンリーダー対応を大きく改善できる方法を解説している。
試験問題に含まれる散布図について、データ分布と重要な特徴を適切に説明しながら、解答が漏らさないalt テキストの書き方を解説する。
科学教材のアクセシビリティについてのベストプラクティス解説。ビジュアルの説明方法、図表のラベリング、デジタル教材のアクセシビリティ化の方法を紹介する。
高等教育機関の障害支援部門の専門家が、生成AIを活用してHCI研究図表などの複雑な画像に対する高品質な代替テキスト作成を実現する方法を検討する論文。
スクリーンリーダー利用時の一般的なアクセシビリティ問題(見出し、リンク、代替テキスト、テーブル、リスト)に関する正しいタグ付けとベストプラクティスを解説。
ミーム画像をスクリーンリーダーユーザーも楽しめるよう、視覚的な要素と背景にある文化的文脈を適切に説明する方法を示す。
Webコンテンツにおける画像のアクセシビリティ。正確な代替テキスト(alt)の記述とコンテンツの流れを整えることの重要性。
Accessible building blocks for web: images
ウェブサイトの画像がアクセシブルであることの重要性。知覚性と明確で正確な代替テキスト(alt)の書き方を解説する。
デザインツールAffinity by CanvaのアクセシビリティをテストしたShortで、見出しタグの対応と代替テキスト・テーブル構造などの欠落機能を指摘する。
図表の代替テキスト(Alt テキスト)を効果的に記述する方法を解説。スクリーンリーダーが主要情報を正確に伝えるためのテクニック。
生まれつき視覚障害のあるTommyがコロンビア・ピクチャーズのロゴを音声解説で聞いてリアクション。代替テキストの実装例を示す実践的な動画。
デジタルマーケティングにおける絵文字の使用時のアクセシビリティベストプラクティスを紹介。マーケターとコンテンツ作成者向けのガイダンス。
PDFの表でヘッダセルを正しく定義し、スクリーンリーダーが表構造を正しく解釈できるようにする設定方法。Acrobat Proでのプロパティ設定による実装。
絵描きの視点から、スクリーンリーダー利用者を意識した画像のALTテキスト執筆方法を実践的に解説する。視覚障害者と制作者の対話を重視した実装ガイド。
Microsoft Word の math input panel で MathML を手書き入力する方法を示すアクセシビリティチュートリアル。数式ドキュメントのアクセシビリティ実装。
Word文書をWCAG 2.2に準拠して作成し、アクセシブルなPDFへ自動変換する方法を15ステップで解説。見出し、リスト、表、代替テキストなど、スクリーンリーダー対応の構造により、PDF修復作業を削減する。
視覚障害者向けデジタル地図のアクセシビリティにおいて、WCAG 1.1.1の「同等の目的」定義のギャップを分析し、体系的評価フレームワークMEP-Fを提案する論文だ。
Microsoft Wordのアクセシビリティ対応ガイド。見出し・代替テキスト・表などのWCAG 2.2準拠の実装方法と、スクリーンリーダーテストを実施する方法を紹介する。
The DocAccess Accessible Transcript View Adds Alt Text Automatically! #accessibilitymatters
PDFファイルに自動的に代替テキストを追加するDocAccessツール。追加操作不要でWCAG準拠を実現する。
視覚的なストーリーテリングにアクセシビリティを組み込む設計手法について、デザイナー Rochelle Ratkaj Moser が解説。alt テキスト、見出し構造、セマンティック構造といった基本的な実装から認知アクセシビリティ、アクセシビリティと SEO の関連性まで、ブランド価値と実用性の両面から実践的なアプローチを提唱する。
グラフ・チャート・図・フローチャートの代替テキストの書き方を実例とチェックリスト、専門ツール DocAccess を含めて解説。試験問題での「答えを与えない工夫」についても言及している。
X(旧Twitter)などのSNSで見かけるALT属性の誤った使い方を具体例を挙げて指摘し、正しい使用方法を解説した記事。
AIを使ったビデオ音声解説ツールViddyScribeについてのポッドキャストエピソード。自動音声解説の仕組み、YouTubeへのリアルタイム追加機能、料金プランなどをBenvision共同創業者が解説する。
Word・PowerPointの代替テキスト実装状況と課題をまとめたWebAIMのレポート。Microsoft Officeドキュメントのアクセシビリティ向上に向けた現状と知見を解説する。
What is “equivalent” text alternatives for artistic and cultural visual content | Axe-con 2024
美術館・文化機関がコンテンツをオンライン公開する際の視覚作品の代替テキスト作成について、WCAG 要件と実装課題を論じる。
Text-To-Image Accessibility | Axe-con 2024
テキストから画像を生成するAIツールのアクセシビリティ課題を視覚障害ユーザーの視点から検討する。自動生成された画像説明文の課題と、ユーザーが必要とするものについて論じる。
大規模言語モデル(LLM)を使用してアクセシビリティタスクを自動化する方法を紹介。画像説明の生成、リアルタイム字幕、多言語翻訳などにより、制作チームの負担を軽減する可能性を示す。
Studioエディタを使ったWeb制作時に、画像ボックスに記入するalt属性の内容について、実践的な方法を解説する番組の後編。
Adobe Acrobat Pro DC を使ってPDF内の画像に代替テキストを素早く追加する方法を解説するチュートリアル動画。
Adobe Acrobat Pro DC で PDF 画像に代替テキストを追加する3つの方法を紹介。自動化ツール DocAccess の機能も解説。
Webデザインツール Studioを使用したWebサイト制作実例を基に、alt属性の記載方法について解説する番組。
Adobe Acrobatの自動タグ付けツールでPDFをアクセシビリティ対応させる方法。タグなしPDFの構造化と代替テキスト付与の実演。
CSSの疑似要素で生成されたコンテンツをスクリーンリーダーが認識させる方法を解説。aria-labelやCSS speechプロパティを活用した代替テキスト提供の実装を紹介。
WCAG達成基準1.1.1の手動テスト方法を解説するチュートリアル。代替テキストの実装方法と装飾的要素の取り扱いについて、RAMPツールを使った具体的な検査手順を学ぶ。
アクセシビリティ初心者の失敗事例をスタンダップコメディ形式で紹介するセッション。複数の登壇者が実体験(alt text の迷走、チェックツール導入失敗、ユーザーテスト会場の課題等)を語り教訓を共有している。
モバイルアプリの画像ボタンに不足しがちなコンテンツラベルを、次画面の文脈情報を活用したLLMで自動生成するシステムCaptionを提案する論文。スクリーンリーダーによるアクセシビリティ向上を目的とする。
視覚障害・弱視者が複雑なデータビジュアライゼーションを理解・学習するための触覚チャート4種を設計し、インタビュー調査で有効性を検証した研究だ。
InDesign、Acrobat、PowerPointなどを使い、視覚・聴覚障害、運動・認知機能障害に対応したアクセシブルなドキュメント設計をデザインプロフェッショナルが実践的に学ぶオンラインサミット。
macOSアプリの多くはアクセシビリティメタデータが不完全なため、ビジョンモデルがスクリーンショットから自動生成するScreen2AXを提案する研究だ。
オーディオディスクリプション(音声説明)のWCAG基準1.2.3に関する手動テスト方法を解説する動画。Accessible Web RAMPツールとChrome拡張を使ったテスト手法のデモンストレーション。
inABLEの支援技術アドボケイトによる、支援技術とデジタルアクセシビリティの社会経済的インパクトについてのスピーチ。視覚障害者の視点からアフリカのデジタル経済参加と社会的包摂を呼びかける。
ブログの画像にalt属性を設定することで、視覚障害のある人がスクリーンリーダーで説明文を読み上げ、写真を楽しむことができる仕組みを実例で紹介。
アプリ開発の初期段階でUIアイコンのalt-textを自動生成するALTICONアプローチを提案し、大規模ラベルデータなしに意味ある説明文を生成できることを示した論文。
アクセシビリティについて
代替テキスト・フォームラベルなど具体的な実装例を交えながら、Webアクセシビリティの基礎知識とWCAG対応の重要なポイントをわかりやすく解説した入門記事だ。
AIを活用してアクセシビリティ向けのシンボル画像を自動生成するツールの開発背景と活用事例を紹介した記事。
グラフ・チャートを視覚障害者向けのスクリーンリーダー対応テキスト説明へ変換するコンピュータ支援フレームワークを提案した研究論文。
アプリ開発時にLLMを活用してUIアイコンのalt-textを自動推論する手法を研究した論文。完全なUI画像なしでもスクリーンリーダー向けの意味ある説明文を生成できる手法を提案。
複雑な画像(チャート、グラフ、地図)の代替テキストの書き方。コンテキストに応じた適切な記述と、長すぎるテキストの代替手段を実践例で解説する。
地図・地理データの可視化をスクリーンリーダーユーザーが利用できるよう、現在の表示状態に応じたalt-textを動的生成するシステムを提案した論文。
視覚障害者向けにグラフ・チャートを点字・音声形式へ変換する「Chart4Blind」を提案し、テキストと視覚メタデータの自動抽出手法を示した研究。
Webアクセシビリティの基本と、エンジニアが対応できる9つの実装項目を解説。キーボード操作対応、代替テキスト、スクリーンリーダー対応、コントラスト比確保、ページタイトルの整備など、実装例とともに紹介する実践ガイド。
視覚障害者がスクリーンリーダーで棒グラフの情報を取得できるよう、テキスト記述テンプレートによる代替表現手法を提案・評価した論文。
モバイルアプリのラベル欠落やコントラスト不足などのアクセシビリティ問題を自動検出しレポートを生成するツールを提案。開発者インタビューによる動機調査も含む。
ウェブアクセシビリティの国家規格 JIS X 8341-3 について、障害の有無に関わらず誰もがウェブ情報を得やすくするための設計方法を解説。企業に対する義務化と達成基準のレベルA・AAについて説明する。
代替テキストで肌の色をどのように記述すべきかを論じた記事。視覚障害者にとって意味のある画像説明の方法を解説している。
SNS投稿時の画像説明の重要性を通じて、視覚障害者のウェブアクセス性を高める代替テキスト付与の意義と実践方法を紹介する連載である。
オンラインショッピングにおける視覚障害・低視力ユーザーの情報検索体験を改善する研究。画像説明不足とスクリーンリーダーでの情報フィルタリング課題への解決策を提案。
画像に説明がないと視覚障害のあるユーザーがアプリの全機能を利用できない。代替テキストの実装方法をまとめたモバイル向けクイックウィン。
視覚障害者向け画像説明の品質を自動評価するニューラルネットワークモデルを提案した論文。NCAMガイドラインに基づく。
スクリーンリーダーユーザー向けの画像アクセシビリティについて33論文を系統的にレビュー。既存アプローチを整理し、今後の研究ロードマップを提案。
Layers
風景を詳細に描写することで、視覚に依存しない方法で情景を伝える工夫を示したテキスト。代替テキストやアクセシブルな説明作成の具体例として機能する。
視覚障害のある利用者がスクリーンリーダーで遭遇する問題を解説する連載。ネット懸賞の画像に代替テキストが不足している問題を具体例に挙げている。
ウェブサイトのテキスト・画像情報アクセシビリティを研究した論文。スクリーンリーダーの限界を分析し、視覚障害者のデジタルコンテンツアクセスを改善する技術的提案を提示する。
代替テキストの自動評価に向けた意味解析ツール統合手法に関する研究。EU法令による自動アクセシビリティ評価の要件対応と既存ツールの限界を論じている。
フォームのプレースホルダー属性がもたらすアクセシビリティ上の問題点と、障害のある利用者にとってのチャレンジを詳しく解説する。
alt textの欠如・不適切なナビゲーション順序・カスタムウィジェットのアクセシビリティ問題を対象に、モバイルアプリのUIを自動アノテーションして修復・強化する手法を提案した研究。
絵文字のアクセシビリティ実装ガイド。スクリーンリーダーでの正確な読み上げを実現する代替テキスト付与方法を解説。