アクセシブルなサイトリニューアルのチェック項目
検討したり、例外を適切に設けるために使うものです。 要件定義 バックエンドシステム・CMSが以下に対応している 入力フォームに時間制限はない 入力フォームの入力チェック機能は適切なエラーメッセージがでる 出力されるHTMLが仕様に準拠したHTML 画像に代替テキスト(alt属性)が入れられる 動画にクローズドキャプションを追加できる 自動的に生成されるウィジェットがアクセシブルになっている 画像のポップアップ（モーダル）機能など 3rdパーティのウィジェットやASPがアクセシブルである 動画埋め込み 地図埋め込み サイト内検索 自動翻訳機能 チャットボット 情報設計 情報設計に問題がない・情報を管理できている ナビゲーション設計が適切でどのページにもたどり着ける リンクテキストとリンク先ページタイトル・見出しに乖離がない ページタイトルとh1見出しに乖離がない サイト内でページタイトルに重
アクセシビリティについて
アクセシビリティについて ウェブアクセシビリティ方針 誰もがいつでも、迷わず「書く」「読む」「応える」ができる状態を目指す Amebaはこれまでもユーザーの生活に寄り添ってきました。 「人と情報をつむぎ 暮らしが豊かに育ちつづけるための機会をつくる。」をミッションに掲げ、ユーザーの「変化」にも寄り添っていきます。 今利用しているユーザーが歳をとっても、怪我や眼鏡を忘れてしまったときにも、ユーザーが日々遭遇するあらゆる環境や状況の変化が障害になるデザインであってはいけません。 アクセシビリティを高めると、障害者や高齢者、子どもも含めた誰もが使えるようになります。 そしてそれは、いつでも使いやすいにつながります。 Amebaはミッションの追求のために「誰もがいつでも、迷わずコンテンツを楽しむことができる」サービスを目指し、これからもアクセシビリティの向上に取り組みつづけていきます。 アクセシビ
freeeアクセシビリティー・ガイドラインVer. 202104.0を公開しました - freee Developers Hub
こんにちは、freeeのアクセシビリティーおじさん、中根です。 締切が延長されたおかげで、先日余裕を持って確定申告を終わらせることができました。確定申告は概ね独力でできるのですが、紙で交付される書類やアクセシビリティーが低いPDFで交付される書類から情報を転記するところだけは相変わらず人に頼らないと突破できず、毎年残念な気持ちになっています。でも確定申告が終わると気持ちも軽くなり、気温も高くなっていよいよ春が来るなあという感じになります。 さて、それでは今回の更新内容を紹介します。 そして最後にイベントのお知らせもあります。 freeeアクセシビリティー・ガイドライン Ver. 202104.0リリース・ノート axe改めaxe DevToolsのルールに関する情報を追加 まず、freeeでも活用していてガイドラインの参考情報でも取り上げているアクセシビリティーのチェック・ツールaxeがい
WAI-ARIAを学ぶときに整理しておきたいこと
結論 ロールについて知る HTMLの暗黙のロールを知る ロールを知った上でロールに対して使用できるプロパティ/ステートを使う (おまけ) markuplintを使おう aria属性を使う前に まず、いきなりaria-labelやaria-selectedとかに手を出さない。 aria-selectedとかを発見してしまうと「option要素以外にもselectedみたいな意味を付加できるんだ！すげえ！使ってみよう！」みたいな気持ちが沸き上がってしまう。わかる。とってもよくわかるよ。当時ぼくもそうだったから。 ただ、そこはぐっと我慢してほしい。 なぜかと言うと、aria属性は、使っていいときと悪いときがある。きちんとWAI-ARIAという仕様と、ARIA in HTMLやCore Accessibility API Mapping (Core-AAM)という仕様で決められていっている[1]の
アクセシビリティ～Bootstrap5設置ガイド
アクセシビリティ（Accessibility） アクセス可能なコンテンツを作成するためのBootstrapの機能と制限の概要。 ※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。 ※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。 ※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。 アクセシビリティ（英: accessibility）とは、近づきやすさやアクセスのしやすさのことであり、利用しやすさ、交通の便などの意味を含む。現代では、広い種類の利用者が製品や建物、サービスなどを支障なく利用できる度合いを指していることが多い。 IT分野では、使いやすさや利用しやすさを意味するユーザビリティに近い意味として使われることが多い。この場合、技術に依存せずさまざまな情報端末やソフトウェアから利用できること
ウェブアクセシビリティ検証ツール「axe」を用いた自動テスト実行スクリプト | Accessible & Usable
公開日 : 2021年2月23日 (2022年7月1日 更新) カテゴリー : アクセシビリティ Deque Systems, Inc. が開発、公開している、「axe」というウェブアクセシビリティ検証ツールがあります。Chrome、Firefox、Edge の拡張機能がリリースされており、各ブラウザの開発者ツールで使用することができます。 ウェブアクセシビリティ検証ツール「axe」(Chrome 拡張機能) の表示例 axe はとても便利なツールですが、ブラウザの拡張機能として使用する場合、1ページずつ開いてアクセシビリティを検証する、という形になります。検証対象サイトのページ数が多い場合、面倒に感じることもあるかもしれません。 axe では、コアエンジン「axe-core」もオープンソースで公開されているので、これを応用することで、ブラウザ自動操作ツールを介してウェブサイト (複数のウ
ぼくとわたしのアクセシビリティ原稿を公開します
これは何？ サードプレイス金沢オンラインのイベント登壇した際の発表原稿です。 実際に発表したスライドや映像との差分はありますが、大きな内容は変わらないのでほぼそのまま公開します。 関連リソース この発表のスライド（GoogleDrive） 当日の映像のアーカイブ（サードプレイス金沢のYouTubeチャンネル）。 サードプレイス金沢は 3rd LINKの運営するコミュニティで定期的にイベント開催しているそうです。 発表内容 アジェンダ 自己紹介と今日のテーマ アクセシビリティを取り組み始めた個人的経緯 アクセシビリティと障害モデル 障害者と僕 僕もある意味では障害者 アクセシビリティに取り組む 世間のアクセシビリティの状況 技術資料などの共有 自己紹介と今日のテーマ はじめまして。どうけといいます。 ミチにイエと書いて道家です。 経歴ですが、かつては面白法人カヤックでFLASHチームにいまし
ブロックエディターではじめるアクセシビリティ
この記事は、2021年1月29日に開催された WordPress のオンライン勉強会 WP Zoom UP #57 新春LT大会2021！ で発表した内容に、もう少しお話したかった補足︎を加えたものです。 使用したスライドはこちら（Speaker Deck）です。 自由と可能性 WordPress 5.0 からコンテンツのエディターが「ブロックエディター」へと刷新されました。 ブロックエディターの登場で、WordPress を使った発信はさらに自由にパワフルになりました。これまで HTML や CSS の知識がないとできなかったような表現が、ブロックを組み立てるように、誰でも簡単にできるようになりました。 この記事もブロックエディターを使って書いていますし、新規でサイトを制作する時はブロックエディターをデフォルトにしています。 そこでひとつ質問です。 サイトの目的はそれぞれだと思いますが、
W3C Accessibility Guidelines (WCAG) 3.0の初期公開作業草案が発行されました | アクセシビリティBlog | ミツエーリンクス
2021年1月22日 W3C Accessibility Guidelines (WCAG) 3.0の初期公開作業草案が発行されました アクセシビリティ・エンジニア 中村（直） Web Content Accessibility Guidelines (WCAG) 2.0とそのマイナーバージョンの後続として開発されている、W3C Accessibility Guidelines (WCAG) 3.0がFirst Public Working Draft（初期公開作業草案）として発行されました。 元の言葉はWeb ContentからW3Cに変更されているものの、略称は同じWCAGになっているのは、WCAGという語がWebアクセシビリティを取り巻く世界ではよく知られている証左と捉えることもできそうです。 そんなWCAG 3.0ですが、Abstract（概要）には以下の1文が記載されています。
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業界で「エンジニア」の肩書で仕事して
民間に対する法律上の「合理的配慮」の見直しについて | アクセシビリティBlog | ミツエーリンクス
年末に【独自】障害者配慮、民間も義務化へ...スロープ設置や手話対応 : 社会 : ニュース : 読売新聞オンラインという報道を目にした方も中にはいるかと思いますが、障害者差別解消法でこれまで民間では努力義務であった「合理的配慮」が義務化される公算が出てきました。 実際に、昨年12月に開催された第53回障害者政策委員会の議事次第での資料8 障害者差別解消法の改正に盛り込む事項（案）では、「事業者による合理的配慮の提供を義務化」が挙げられていることが確認できます。 ここでWebアクセシビリティと「合理的配慮」にはどのような関係があるのかおさらいをしてみたいと思います。総務省が公開しているみんなの公共サイト運用ガイドライン（2016年版）では、「障害者差別解消法を踏まえて求められる対応」として、以下のような記述があります。 2.2.2. 障害者差別解消法を踏まえて求められる対応 障害者差別解消
Focus visibleの導入: Snow Monkeyでドロワーメニューのフォーカスの枠線を表示させない方法 - Photosynthesic blog
こんにちは、みみです。 Snow Monkeyのドロワーメニュー、便利ですよね。でもモバイルでみた時にアレ？と思う人が多いと思います。ドロワーメニューの一番上のメニューにふわっとした枠線が付くやつ。アレを取りたいなーと思う人は結構居ると思います。 2020/12/13 18:25追記: Snow Monkey ver.12 より改善されて、フォーカスがでなくなっています！なので一番手っ取り早いのはSnow Monkeyをアップデートすることです！ というわけで、以下は、諸事情で今スグアップデート出来ない方や、:focus-visibleそのものに興味が有る方へのコンテンツとなります… でもあれって実はとても大事な線なのです。キーボード操作で画面を操作する人には命綱と言っても良いものです。いわゆるアクセシビリティに関わる処ですが、Snow Monkeyはアクセシビリティ対応も素晴らしく、キー
アクセシビリティを意識したアコーディオンを作ってWAI-ARIAを学んでみたお話
この記事は 「Webアクセシビリティ Advent Calendar 2020」 10日目の記事です。（執筆が終わったのが11日目になってしまい申し訳ございません） 先日投稿したWebアクセシビリティ Advent Calendarの記事「キーボード操作を意識したHTML/CSSコーディング」は思いがけず大変な反響をいただきました。ありがとうございます。 今回はWeb制作において頻出度の高いアコーディオンをアクセシビリティを意識しながら作ってみたという「やってみた」系記事です。 今回の記事を書くにあたり、そめさんよりいくつかレビューを頂きました（ありがとうございます）。今回はそのレビューも含めて修正前と修正後も同時掲載します。 はじめに はじめに今回のアコーディオンのサンプルを掲載します。（サンプルではaria属性の付与はJSで行っています） この記事を書いた理由は WAI-ARIAの知識
キーボード操作を意識したHTML/CSSコーディング
この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で
マークアップを進化させる WAI-ARIA の基本
マークアップを進化させる WAI-ARIA の基本 私 @masuP9 WAI-ARIAとは何か WAI Web Accessibility Initiative ARIA Accessible Rich Internet Applications WAI-ARIAは、ウェブコンテンツおよび アプリケーションのアクセシビリティと相互運用性を改良するためのフレームワークを提供する技術仕様である。 Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳 WAI-ARIAは ウェブのアクセシビリティを 高めるための技術仕様 WAI-ARIAはなぜ必要か アプリケーション化するウェブ Notion Figma G Suite 3D CAD etc... 意味も振る舞いも 既存のHTMLでは表現できなくなってきた 例えば タブUI 開いてい
アメリカ大統領選を受けて、バイデン・ハリスによる権力移譲の発信ウェブサイトがWordPressで公開 – Capital P – WordPressメディア
2020年のアメリカ大統領選の進行を受けて、ジョー・バイデンとカマラ・ハリス体制への権限移譲の情報を発信するためのウェブサイトが公開された。 President-Elect Joe Biden: Official Transition Website: https://buildbackbetter.com/ Biden-Harris Transition Website Launches on WordPress – WordPress Tavernによるレポートも踏まえていくつかポイントを紹介する。 特徴 アクセシビリティー 今回のウェブサイトの構築にあたり、開発を担当したエージェンシーWide Eyeでは、多言語とアクセシビリティーに注意が払われた。コントラストとフォントサイズのコントロールを、ウェブサイトの機能として持たせることを選択している。 上のスクリーンショットは、ダークモー
お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA
フォームはウェブサイトの中でもインタラクションの多い箇所です。ユーザー側にきちんと情報を伝え、そして正しく入力してもらう必要があるのでアクセシビリティーには気をつけたいです。アクセシビリティー対応といえばWAI-ARIAによる支援がありますが、この記事ではWAI-ARIAに限らずどう対応するべきなのか、デモを用いて紹介します。 バリデーションに関してシンプルに実現できるものと、ちょっと凝ったリアルタイムバリデーションのものと2例用意しています。後者は動的に変化するコンテンツへのアクセシビリティー対応について解説しています。 サンプルを別ウィンドウで開く（シンプル版） サンプルを別ウィンドウで開く（リアルタイム版） コードを確認する ▼シンプルなバリデーション ▼ちょっと凝ったバリデーション まずはセマンティックなマークアップを WAI-ARIAを使ったコーディングというと、とにかくrole
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
色覚多様性(色覚異常)の見え方を Chrome DevTools でシミュレーションする | DevelopersIO
Zホールディングス株式会社
Coolors - The super fast color palettes generator!
