アクセシブルなサイトリニューアルのチェック項目
検討したり、例外を適切に設けるために使うものです。 要件定義 バックエンドシステム・CMSが以下に対応している 入力フォームに時間制限はない 入力フォームの入力チェック機能は適切なエラーメッセージがでる 出力されるHTMLが仕様に準拠したHTML 画像に代替テキスト(alt属性)が入れられる 動画にクローズドキャプションを追加できる 自動的に生成されるウィジェットがアクセシブルになっている 画像のポップアップ（モーダル）機能など 3rdパーティのウィジェットやASPがアクセシブルである 動画埋め込み 地図埋め込み サイト内検索 自動翻訳機能 チャットボット 情報設計 情報設計に問題がない・情報を管理できている ナビゲーション設計が適切でどのページにもたどり着ける リンクテキストとリンク先ページタイトル・見出しに乖離がない ページタイトルとh1見出しに乖離がない サイト内でページタイトルに重
freeeアクセシビリティー・ガイドラインVer. 202104.0を公開しました - freee Developers Hub
こんにちは、freeeのアクセシビリティーおじさん、中根です。 締切が延長されたおかげで、先日余裕を持って確定申告を終わらせることができました。確定申告は概ね独力でできるのですが、紙で交付される書類やアクセシビリティーが低いPDFで交付される書類から情報を転記するところだけは相変わらず人に頼らないと突破できず、毎年残念な気持ちになっています。でも確定申告が終わると気持ちも軽くなり、気温も高くなっていよいよ春が来るなあという感じになります。 さて、それでは今回の更新内容を紹介します。 そして最後にイベントのお知らせもあります。 freeeアクセシビリティー・ガイドライン Ver. 202104.0リリース・ノート axe改めaxe DevToolsのルールに関する情報を追加 まず、freeeでも活用していてガイドラインの参考情報でも取り上げているアクセシビリティーのチェック・ツールaxeがい
freeeアクセシビリティー・ガイドライン — freeeアクセシビリティー・ガイドライン Ver. 202404.0-RELEASE+4.3.7
このガイドラインは、参考情報の追加や表現の改善などで、随時更新されます。 リリース:Ver. 202404.0-RELEASE+4.3.7 ガイドライン・バージョン：Ver. 202404.0-RELEASE チェックシート・バージョン：4.3.7 更新日:2024年4月23日
今からでも遅くない！誰も教えてくれなかった React とアクセシビリティーの世界
この記事は Front-End Study #3 で発表されたライブコーディングの内容を記事にしたものです。記事中のソースコードは GitHub でご覧いただけます。 この記事は、これまで一般的なフロントエンドエンジニアだった私が一年ほどアクセシビリティーについて勉強する上で 「最初に教えてくれればよかったのに〜！」と思った内容 を React と Next.js を用いて紹介するものとなっています。 読み終わった後に次にコードを書く際にふと意識できるようなアクセシビリティーの普遍的な事実を紹介し、最後に今後の React の動きについて軽く触れるものになっています。目次は次のとおりです： 基本事項 SPA のルーティングによる問題 リッチなコンポーネントでの例 Jest + React Testing Library でのテスト Reactとアクセシビリティーの今後の動き 役に立つweb
Webエンジニアとしていま知っておきたいWebアクセシビリティ
この文章について これは Front-End Study #3「『当たり前』をつくりだすWebアクセシビリティ」で基調講演をするにあたって、登壇内容を整理するために書いたものです。登壇内容とは一部に差異があります。 イベント映像 この文章はむちゃくちゃに長いので、登壇映像を見たほうがいいかもしれません。わたしの発表は13:23くらいから30分ちょっとです 登壇資料（内容は同一です） https://speakerdeck.com/ymrl/webenziniatosite-imazhi-tuteokitai-webakusesibiritei https://docs.google.com/presentation/d/1uhCvhh6sZCPUnReSBVDjvGfNAOTKbZ5Sxs8fYMlxMsI/edit?usp=sharing 目的 Web業界で「エンジニア」の肩書で仕事して
Webサービスのアクセシビリティについて 考慮すべきポイントを挙げてく
WebサービスやWebサイトを開発するうえで最低限おさえておきたいアクセシビリティのポイントを雑多に挙げてく。ある程度のボリュームになったら記事にする予定。
webアクセシビリティ実装チェックリストを作った - Qiita
web アクセシビリティに、どうやって対応したら良いか？を 手助けするツールを作りました。 WCAG2.0 の達成基準に合わせた実装方法を確認し、試験結果を記録することができます。 ■ WCAG 2.0 達成基準・実装チェックリスト https://a11y-i-guideline.netlify.com （chrome ブラウザでしか挙動確認してません） 対象 web コンテンツで JIS X 8341-3:2016・WCAG2.0 への対応を求められた コーダー、ディレクター、デザイナー 目次 アクセシビリティ用語解説 実装チェックリストでできること 各ポジション別確認ポイント 使い方 アクセシビリティ用語解説 web アクセシビリティ 一般的に「障害者対応」と考えられるが、メガネがない・眩しい屋外など健常者にとっての 一時的な状況でも、誰でも web コンテンツを支障なく利用できる状
色に頼らないビジュアル表現を考える | mkasumi.com
実はこのテキストの中には、どこかがリンクになっています。どこのテキストにリンクが指定されているかビジュアルだけでわかりますか？ 少し意地悪な問題ですが、本題ではないので早速答えを述べます。実は、「このテキスト」という部分にリンクが指定されています（リンクには「#」が設定されているので、クリックするとこのページのトップに移動します）。 皆さんはどの段階で「このテキスト」という部分が少し青色であることに気づけましたか？もしかしたら、普段色を使うお仕事をされている方（デザイナーなど）はすぐに違和感に気づけたかもしれませんが、全てのテキストを読んでから青色になっている部分を探して見つけた方もいらっしゃるのではないでしょうか。 このように、本文が黒文字でリンク色に暗めの青を使った場合はリンクだと気づけないことがあリます。 では、どのようなスタイルにすれば良かったのか考えると以下のようなパターンが挙げ
アクセシビリティを意識した CSS の書き方 - Frasco
私は約一年前から Web アクセシビリティについて注目し始めました。私にとって何かを学ぶこと最も効率的な方法は他人に教えることなので、ミートアップやカンファレンスなどで発言したり、このトピックに関する記事を書いているわけです。Progressive Enhancement については Smashing Magazine で、Web アクセシビリティに関しては Medium で書いています。この記事は3つ目の Web アクセシビリティ関連の記事です。このシリーズを読むのに特に決まった順序はありませんので、興味があれば Writing HTML with accessibility in mind や Writing JavaScript with accessibility in mind を読んでいただければと思います。 私が初めて Web サイトを作った17歳当時、CSS は比較的新しい
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
【アクセシビリティ】HTML/CSSで突っ込まれた点をメモメモ | バシャログ。
来週遅めの夏休みをいただき、東北へ旅行の予定を立てている kouraku です。おはこんばんちは。 さて今回は、とある案件でアクセシビリティ：AA レベルのサイト制作を行ったとき、専門の方から色々と指摘をいただいて、その対応に苦労したり、そんなことしないといけないのか！と思った内容のいくつかを忘れないようにメモしておこうと思います。 ・・・とその前に、アクセシビリティって何？ 「アクセシビリティ」の意味と混同しがちな言葉が「ユーザビリティ」です。ユーザビリティとは、W3Cでは次の内容で定義されています。 Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specifie
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
31. 利用者のリテラシー 支援技術 CSS コンテンツ JavaScript HTML UA OS ハードウェア 31 それぞれのレイヤーでアクセシビリティ的なケアが必要な分野 • 利用者のリテラシー • 支援技術 • CSS • コンテンツ （テキスト／画像／音声／映像） • HTML • JavaScript等プログラム • ユーザーエージェント • OS • ハードウェア 教育／啓蒙 etc. スクリーンリーダー／ズーム／翻訳 etc. UIデザイン／コントラスト／表示順序／背景画像 etc. コントラスト／代替コンテンツ／表現 etc. 文書構造／要素の意味／フォームコントロール etc. キーボード操作／フォーカス制御／DOM追加位置 etc. UIデザイン／代替コンテンツへのアクセス／ スタイル（色／サイズ／速度 etc.）変更／ 文書構造とmeta情報／API etc. U
フロントエンド開発者が実践したい、アクセシビリティに配慮したJSを書くコツ
JavaScriptを使うことが当たり前になったいま、HTMLだけでなくJavaScriptを書くときにもアクセシビリティに配慮する必要があります。 JavaScriptコンポーネントのアクセシビリティを高め、ユーザーがWebサイトやWebアプリをより快適に使用できるようにするためのコツを紹介します。 以前の記事『Writing HTML with accessibility in mind（アクセシビリティに配慮したHTMLを書く）』で、どうしてWebアクセシビリティについて考えるようになったのか、また、どのように学んだのか説明しました。そして、マークアップを改善して、Webサイトのアクセシビリティを高めるためのコツを紹介しました。中には基礎的な内容も含まれていますが、どれも価値のあるものです。こうしたコツをすべてまとめると、フロントエンド開発において特に重要な2つの不文律ができあがりま
既存 Web アプリケーションのアクセシビリティを向上させるときによくあるヤツと対応方針
アクセシビリティ向上メモ 最初から考慮されているのが一番ですが、そうでもなかったプロダクトに手を入れるときのあるあるを記録します。既存プロダクトはモノが出来上がってしまっているため根治的なリファクタリングよりも基本的には省力で済ませたいので、今回書いた対応方法も完璧よりは省力路線です。 HTML やらセマンティクスに関する知識はそれなりにあるつもりでしたが、AT やマシンリーダビリティを念頭に勉強し直すと自分で作ったものも至らなかったなと振り返らざるを得ない今日この頃。初期設計のときの考慮範囲が拡がったように思うので善きかなです。 各項目について、もっと良い解法や誤り等あれば twitter とかでご指摘ください。 1. 画像に alt 属性がない場合 付けましょう。付けます。はい。 昔から基本とも言うべき、HTML/CSS 書きとしては耳にたこができるほど言われてきたことなので今更感もあ
Android アプリのアクセシビリティガイドライン概観メモ
ネイティブアプリとアクセシビリティの関係 Web が専門ではありますが、アクセシビリティを通した品質向上を考え始めると、Web だけでは社内のプロダクトの半分あるいはそれ以下程度のカバレッジしかありません。 そこで今回はネイティブアプリ、特に Android のガイドラインについて目を通したメモ。 プラットフォームのガイドライン ネイティブアプリの筆頭たる iOS と Android においては、WCAG 2.0 ほどは詳細化されてこそいないものの、各プラットフォームでガイドラインが提供されています。 Implementing Accessibility | Android Developers Accessibility for Developers - Apple Developer とはいえ、この2つ見比べてみると iOS のドキュメントはそれほど充実していないような印象です。どうも
アクセシビリティから変わるビジュアルデザイン
W3C が勧告しているウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0 の中に「アクセシビリティの 4 原則」というのがあります。JIS X 8341–3 をはじめ、国内外で定められている Web アクセシビリティの土台のような存在です。久しぶりに、この 4 原則を振り返ってみて気付いたのが、Web デザインの原則と同じではないかという点です。特にビジュアルデザインで気をつけることと重なるところがあります。 アクセシビリティの 4 原則は以下のとおりです（翻訳サイトより抜粋）。 知覚可能 情報およびユーザーインターフェースの構成要素は、ユーザーが知覚できる方法でユーザーに提示可能でなければならない。 操作可能 ユーザーインターフェースの構成要素およびナビゲーションは操作可能でなければならない。 理解可能 情報およびユーザーインターフェースの操作は理解可能でなければなら
目が不自由な人のネット利用に関する8つの迷信
2013年3月23日 アクセシビリティ 以前「Webアクセシビリティは、誰がどう必要としているのか？」という記事を書きましたが、最近Webアクセシビリティの記事を読む機会が増えています。その中で、Webページを音声で読み上げるスクリーンリーダー（音声リーダー）についての興味深い記事があったので翻訳してみます。誰もが聞いたことがあるような、アクセシビリティに関するものですが、いくつかは間違った情報として流れているものも多いようです。また、元記事のコメント欄も賑わっていたので、そこにコメントされていたものも抜粋して紹介します。 ↑私が10年以上利用している会計ソフト！ 私はフロントエンドデベロッパーとして、アクセシビリティについてはもちろん聞いた事があり、スクリーンリーダーで読みあげるのに何の問題もないWebコンテンツを作るよう、最善を尽くしてきました。しかし、多くのデベロッパーと同様、実際に
OS X, アクセシビリティ・色覚異常シミュレーター
Mac OS Xで使えるアクセシビリティ・色覚異常シミュレーターのメモ。 富士通アクセシビリティ・アシスタンス WebInspector ウェブサイトのアクセシビリティを診断 JIS X 8341-3、富士通ウェブ・アクセシビリティ指針をもとにしたチェックを行います。 ColorSelector 背景色と文字色の見やすさを判定 配色の確認を行えます。 確認したいウインドウをモニタ左上にあわせて使います。 ColorDoctor ディスプレイ上での表示内容を、グレースケールや各色覚特性に応じてシミュレート表示 ＊残念ながらWindows版だけの配布です。 ImageJ + VischeckJ ImageJにVischeckJプラグインを追加。 インストール方法はコチラが詳しい。 画像のチェックに使います。 Sim Daltonism Sim Daltonism 起動ウインドウ内にオリジナルと
第6回 オープンソースアクセシビリティチェックツール「ACTF aDesigner」の紹介 | gihyo.jp
Flashのアクセシビリティチェックも可能なアクセシビリティチェックツールとして、オープンソースで提供されている「ACTF aDesigner」（エーデザイナー）を紹介します。 aDesignerのインストールから基本的な使用方法を紹介した後、Flash用のチェック項目をどのようにこのツールで確認するのか紹介します。準備としてサンプルファイルをダウンロードしてください。 サンプルファイル：check_accessibility.zip インストール EclipseのaDesiner配布サイトからダウンロードしたZIPファイルを解凍するだけで使用できます。 図 ダウンロードサイトから最新版をダウンロード 図 解凍してできたファイル 使用方法 aDesigner.exeを起動します。 このツールでは「HTML」「OpenDcument」「GUI」「Flash」という４つがチェック可能で
第4回 音が聞こえない状況と映像の字幕 | gihyo.jp
音が聞こえない状況 音が聞こえない状況はいろいろあります。 聴覚障碍である 会社のPCなので周りに気を遣う 聴覚障碍者といっても、障碍者手帳を交付されている方から、高齢化により難聴がすすんだ人までさまざまです。また、一説では、常に戦争をしている国などでは、兵士の約1割が聴覚障碍とも言われています。会社にあるPCでは,周りに気を遣うため音を出せない人が多く,昔はサウンド機能がないPCもありました。 意外に音を利用できない環境や人は大勢いるので、音に頼りっぱなしのUIなどはどのような結果を招くのか慎重にすべきです。 音をなくすには 音が利用できない状況を体験するのは非常に簡単です。スピーカーならボリュームを絞れば良いですし、PCサウンドのミュートをオンにしても良いでしょう。とにかく、PCからの音を聞けなくすれば良いだけです。 その状態で使って見ると、次のことがわかります。 音に頼るインタラクシ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
