[B! accessibility] dellab72のブックマーク

Webエンジニアとしていま知っておきたいWebアクセシビリティ

この文章についてこれは Front-End Study #3「『当たり前』をつくりだすWebアクセシビリティ」で基調講演をするにあたって、登壇内容を整理するために書いたものです。登壇内容とは一部に差異があります。イベント映像この文章はむちゃくちゃに長いので、登壇映像を見たほうがいいかもしれません。わたしの発表は13:23くらいから30分ちょっとです登壇資料（内容は同一です） https://speakerdeck.com/ymrl/webenziniatosite-imazhi-tuteokit ai-webakusesibiritei https://docs.google.com/presentation/d/1uhCvhh6sZCPUnReSBVDjvGfNAOTKbZ5Sxs8fYMlxMsI/edit?usp=sharing 目的 Web業界で「エンジニア」の肩書で仕事して

dellab72 2021/01/20

accessibility

リンク

キーボード操作を意識したHTML/CSSコーディング

この記事は「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない）ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で

dellab72 2020/12/07

リンク

【MovableType.net】アクセシビリティチェック機能を試してみた | バシャログ。

こんにちは、ishida です。健康診断に行ったのですが、体重が過去最高を記録してしまいました。ダイエット始めようと思います。さて今回は、MovableType.netの機能として去年10月に登場したアクセシビリティチェック機能についてです。機能があることは知っていましたが、使う機会がなかったので放置してましたがやっと使うことが出来ました。使い方ブログメニューから設定->全般の画面で、アクセシビリティチェックを有効にします。あとは記事やウェブページ、テンプレートからプレビューボタンを押すと以下のようなウィンドウが表示されます。レポートをみるをクリックすると詳細が表示されます。適合レベルは、「WCAG2.0 (JIS X 8341-3:2016) 」レベル A 〜 AAA 準拠のチェックが可能となってます。使ってみて MovableType.netに組み込まれているので、

dellab72 2020/04/01

リンク

ロービジョン「弱視」の人は、Webサイトをどのように使うのか？ユーザー調査結果を公開 | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い

「ロービジョン」をご存知ですか？視覚障害という言葉を聞くと、多く人は、全く見えない「全盲」という状態を連想するかと思います。しかし実際には、視覚障害とされる方の中には、わずかながら見えるという方もいます。わずかでも視力があるなら、眼鏡やコンタクトレンズで視力の矯正をすれば良いと思うかもしれません。しかし、矯正しても十分な視力が得られない人もいます。また、視野が狭い、視野の一部が欠けているなど、別の要因で見えにくい人もいます。このように、矯正をしても見えにくい状態を「弱視」あるいは「ロービジョン」と言います。実は、視覚障害とされる方の6割が「ロービジョン」だと言われており、割合としては全盲の方よりも多いのです。では、ロービジョンの方はどのようにしてWebを利用するのでしょうか？この問いの答えは、一言で言うと「人によって異なる」です。先に述べたように、ロービジョンといっても見え方はさま

dellab72 2019/12/18

accessibility

リンク

組織のモチベーションを上げる。Webアクセシビリティ対応を浸透させた「BBC」の事例 [CSUNレポート] | イベント・セミナー

「アクセシビリティ」をテーマに、年に1度開催されているグローバルカンファレンス「CSUN」。今年の参加メンバーがレポートする本連載記事の第1回ではインフォアクシアの植木氏がCSUNの全体像を、第2回ではコンセントの中村が訴訟コストに関するセッションを、第3回では同社の佐野がPDFをはじめとする文書アクセシビリティ等についてご紹介してきました。連載最終回となる第4回では、コンセントのディレクターの足立が、「アクセシビリティを組織全体に浸透させたBBCの事例」と「Webコンテンツのアクセシビリティをチェックするツールの活用例」の2つを紹介します。 BBCの「モチベーション」を軸にしたアクセシビリティへの継続的な取り組み一つ目は、「Achieving Inclusive Accessibility Thinking Without Sticks or Carrots（アメとムチを使わずにインク

dellab72 2019/07/31

accessibility

リンク

「PDFなどの文書」や「画像だけの地図」もアクセシブルにできる［CSUNレポート］ | イベント・セミナー

「アクセシビリティ」をテーマに、年に1度開催されているグローバルカンファレンス「CSUN」。今年の参加メンバーがレポートする本連載記事の第1回では、インフォアクシアの植木氏がCSUNの全体像を、第2回ではコンセントの中村が訴訟コストに関するセッションやADHD当事者の方によるセッションをご紹介しました。第3回では「Web/紙媒体を横断するアクセシビリティ」に取り組んでいるコンセントのデザイナーでディレクターの佐野が、「PDFをはじめとする文書のアクセシビリティ」と「地図のアクセシビリティ」についてのセッションをご紹介します。 PDFのアクセシビリティとは？PDFもアクセシブルにできることをご存知でしょうか？　アクセシブルなPDFとは、一言で表すなら「HTMLのマークアップのように、適切に構造化されたPDF」です。アクセシブルなPDFであれば、スクリーンリーダー（画面読み上げソフトウェア）

dellab72 2019/07/18

accessibility

リンク

URLを指定すると自動でアクセシビリティチェックを行い、レポートを生成するオープンソースのデスクトップアプリ・「Koa11y」

dellab72 2019/05/10

accessibility

リンク

ユーザーは音声だけでWebサイトをどう使うのか？弁護士ドットコム、アクセシビリティユーザー調査の結果を公開 | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い

いよいよユーザーテストに入ります。テストの結果どうなり、何がわかったのでしょうか。今回は、ユーザーテスト本番の様子をお伝えします。中根さん登場！前回の記事でもご紹介した中根さんに、実際に当社までお越しいただきました。中根さんは、アクセシビリティの専門家です。かつてはW3CのWAI (Web Accessibility Initiative) でアクセシビリティガイドラインの策定にも関わっており、現在ではアクセシビリティの情報サイト「AccSell」を主催して、Webに限らず、アクセシビリティ全般の情報を積極的に発信されています。弁護士ドットコムの社内からは、20名ほどの参加者が集まりました。テストに先立ち、まずは視覚障害者の一般的な環境や、中根さんの普段の利用方法をご紹介いただきました。この内容は第1回、第2回の記事で触れた内容と重複しますので、そちらをご覧いただければと思います。い

dellab72 2019/01/29

accessibility

リンク

ページ内アンカーについて考える — Website Usability Info

公開日 : 2015年12月1日 (2020年12月7日更新) カテゴリー : ユーザビリティ / アクセシビリティリンク (ハイパーリンク) はウェブをウェブたらしめる、根幹的な機能です。一般的にリンクは、今いるページとは別のページに遷移するものですが、ページ内の特定のセクション (ページ内アンカー) に遷移するリンクもあります。たとえば、ページの冒頭に目次を設けておき、目次の項目のいずれかをクリックまたはタップすると、該当するセクションにジャンプできる、という具合です。ページ内アンカーへのリンク (<a> 要素の href 属性で、リンク先としてページ内の特定のセクションの ID 名を指定すること) は、HTML の実装としては正しく、機能としても便利です。ただし、ユーザビリティの観点から考えると、以下のような問題をはらむことがあり、その導入にあたっては、慎重に検討、判断したいと

dellab72 2018/12/12

accessibility

リンク

エーイレブンワイ［WebA11y.jp］

Accessibility is the Web. 「エー　イレブン　ワイ」は、Webアクセシビリティの情報提供Webサイト。ユーザーフレンドリーでみんなが利用できるWebコンテンツづくりをサポートします。

dellab72 2018/10/18

リンク

海で遭難の聴覚障害者、「電話リレーサービス」で救助

dellab72 2017/06/09

accessibility

リンク

WAI-ARIA の基礎知識 | Accessible & Usable

公開日 : 2014年4月15日 (2018年1月20日更新) カテゴリー : アクセシビリティ / 情報設計 (IA) WAI-ARIA 1.0 が、2014年3月20日付で W3C の勧告 (Recommendation) になりました。 WAI-ARIA とは、Web Accessibility Initiative (W3C の中で、Web アクセシビリティに関する仕様を検討する部会) が策定した、Accessible (アクセシブル) な Rich Internet Applications (リッチインターネットアプリケーション : RIA) に関する仕様です。この仕様で定められた記述をソースコードに加えることによって、JavaScript などでインタラクティブに動くユーザーインターフェース (UI) であっても、その状況の変化を、マシンリーダブルな形で支援技術 (スクリー

dellab72 2017/06/08

リンク

WAI-ARIA をマークアップに取り入れたシンプルなタブ

2015年はアクセシビリティに関わる案件をやったりしていたので、特に WCAG 2.0 やらの対応が必要とは言われてない案件でも意識するようになったりしました。そんな中で、タブ実装が必要な案件が有ったので、WAI-ARIA をマークアップに取り入れたタブを実装してみました。せっかくやってみたので、今回は機能自体はとてもシンプルだけど、WAI-ARIA をマークアップに取り入れたアクセシブルなタブを紹介するです。「WAI-ARIA ってなにそれ？おいしいの？」みたいな方や「単純にシンプルなタブを使いたい！」って方でも使えると思います。見た目は一切整えてないのでひどいもんですが、以下がサンプルになります。 JSは aria-hidden、aria-selected の値を変えるのに使っているだけなので、マークアップも自由度が高いですし、CSSで好きにデザインを当てる事ができます。カッ

dellab72 2017/06/08

リンク

より重要になった、HTMLのアクセシビリティに関する問題を解決するChromeの拡張機能 -Alix

先週の記事「HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ」をブラウザで簡単に利用できるChromeの機能拡張を紹介します。まだリリースされたばかりですが、早くも利用者が1,000人を超えようとしています。 Alix -GitHub Alix -Chrome ウェブストア Alixの特徴 Alixのインストールと使い方 Alixの特徴 Alixは少し高度なCSSセレクタを使用したスタイルシートを適用するだけで、HTMLのアクセシビリティに関する問題を解決できます。実際にどんなセレクタを使用しているのかは、前回の記事を参考にしてください。 HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタスタイルシートを記述するのは時間がかかる、セレクタが難しい、という人でも大丈夫です。AlixはCSSでおこなうHTMLのLintツール「a11y.css」をブラウザから簡単に利