アクセシビリティに対応したSlickの紹介 | 電脳情報局
オススメ！PICK UP Accessibility確認のブラウザー拡張機能 ソフト紹介2023年10月 2日 簡単実装：CSSだけでアコーディオン開閉させる CSS2022年5月 9日 jQuery：アコーディオンメニューをサクッと作りたい時のための記事 JavaScript2021年12月10日 スライダープラグインの王道「slick」でスライダーを実装する方法 スライダー2021年12月 8日 【Google Chrome】サイト全体をスクリーンショットする方法【拡張機能不要】 PC・スマホ（操作/設定）2020年10月29日 JavaScript はじめに アクセシビリティに対応したSlickを見つけたのでメモ書き・・ Slick Slider (1.8.1) のバージョンをベースに、 WCAG 2.0 / 2.1準拠にしてあるそうです。 accessible-slick 下記から
markuplint で HTML の構文チェックを始めよう
ブラウザが HTML を解釈する方法はその他のプログラミング言語と比べてはるかに寛容です。ブラウザは HTML 内に構文エラーを発見しても大抵の場合は問題なくページに表示されます。ブラウザには、誤って書かれたマークアップを解釈する方法を決定するための組み込みのルールがあるためです。 例として以下のコード例を確認してみましょう。<ul> タグは仕様でその子要素には 0 個以上の <li> タグまたは script supporting elements (<script> と <template>)のみが許可されています。従って、<ul> タグの子要素に <a> タグを配置している以下のコードは構文エラーとなります。 <ul> <a href="/home">Home</a> <a href="/about">About</a> <a href="/blog">Blog</a> <a hre
WCAG2の「十分な達成方法」について - 水底の血
あるいは必要十分条件について1。 Nu Html Checkerの場合 Nu Html Checkerは、HTMLをチェックするツールである。Nu Html Checkerで特定の（種類の）エラーを0にすることは、「構文解析」のWCAGの達成基準を満たすための必要十分条件となる。 達成基準 4.1.1 構文解析 (レベル A): マークアップ言語を用いて実装されているコンテンツにおいては、要素には完全な開始タグ及び終了タグがあり、要素は仕様に準じて入れ子になっていて、要素には重複した属性がなく、どの ID も一意的である。ただし、仕様で認められているものを除く。 筆者による上記引用のハイライト部分“どのIDも一意的であること”について見てみる。たとえば以下のHTML断片のように、1つのページに同じid属性値が2回出現することはHTMLのエラーであり、かつ、WCAGの達成基準の違反となる：
サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable
公開日 : 2021年10月14日 (2023年10月11日 更新) カテゴリー : アクセシビリティ / ユーザビリティ ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化する UI があります。たとえば、利用規約などの文書を読んで同意する旨のチェックを入れないと、あるいは、入力必須フィールドにすべて正しく情報を入れないと、ボタンがアクティブにならない、というものです。 サブミットボタンがデフォルトで無効化されているフォームの例。 このような UI は、アクセシビリティやユーザビリティの観点で、以下の問題があります。 そこに存在しているはずのサブミットボタンが使用できないことに対して、その理由をユーザーが理解できずに、混乱してしまう恐れがある。(ユーザーの側に誤っているという自覚がなくても、ちょっとした見落としや入
アクセシビリティの問題について Web ページを自動的にテストする - Microsoft Edge Developer documentation
問題ツールには、画像に代替テキストが見つからない、フォーム フィールドにラベルがない、テキストの色のコントラストが不十分ななどの問題を自動的に報告するアクセシビリティ セクションが含まれています。 既定では、 Issue ツールは DevTools の下部にある [クイック ビュー] パネルで開いています。 この記事では、アクセシビリティ テストのデモ Web ページを使用して、Issue ツールの [アクセシビリティ] セクションを使用して手順を実行します。 Issue ツールを開くには、次のような方法がいくつかあります。 DevTools の右上にある Issue カウンター () をクリックします。 要素ツールの DOM ツリーで、Shift キーを押しながら要素の波線の下線をクリックします。 [コマンド メニュー] に「issues」と入力し、[Show Issues]\(問題の表
Web制作時にGoogleChrome拡張のAccessibility Insightsを使ってアクセシビリティの評価を行う | DevelopersIO
いわさです。 皆様、アクセシビリティに配慮したWebサイトの設計されてますでしょうか。 Webアクセシビリティを評価するためのツールがMicrosoftから提供されていますので紹介したいと思います。 Accessibility Insightsというツールです。 元々はMicrosoftにて内部開発されていたもので、2019年にオープンソース化されています。 本日はWebサイトのアクセシビリティの評価を行いたいと思いますが、AndroidやWindowsのアプリケーションにも対応しています。 Webアクセシビリティの場合はGoogle Chromeの拡張として提供されています。 Webアクセシビリティとは 全ての利用者や環境下において、使用できるようにWebサイトが設計・開発されていることを指します。 弊社の以下のエントリをご参照ください。 使ってみた テスト用のWebサイトはSeleni
WAI-ARIA対応のタブ型UIの作り方（Vue.js編） - ICS MEDIA
この記事は『WAI-ARIA対応のタブ型UIを実装する方法』の続きです。 WAI-ARIAはアクセシビリティーの改善に役立つと先の記事で紹介しました。この記事ではWAI-ARIAに対応したVue.jsでのタブのユーザーインターフェイスを解説します。 サンプルをGitHubにアップしているので、デモとソースコードをご覧ください。 別ウインドウで再生する GitHubでコードを確認する 前提として、@vue/cliで環境構築したものとします。@vue/cliを使っていなくても、記事「webpack入門(Vue.jsのサンプル付き)」で紹介しているようにwebpack等で環境構築されていても構いません。 Vue.jsでのステート管理 選択されたタブのIDをプロパティtabに保持することとします。 ▼App.vueファイルの抜粋 export default { data() { return {
意外と簡単？ディレクター、デザイナー、コーダーみんなでやろう！お問い合わせフォームから始めるアクセシビリティ | デジタルマーケティングブログ
HOME制作意外と簡単？ディレクター、デザイナー、コーダーみんなでやろう！お問い合わせフォームから始めるアクセシビリティ 意外と簡単？ディレクター、デザイナー、コーダーみんなでやろう！お問い合わせフォームから始めるアクセシビリティ こんにちは！クリエイティブDiv.のmakinoです。 「アクセシビリティ」 この言葉に最近マサカリ（謎）的な怖さを覚える方も増えてきているような気がする今日この頃皆さまいかがお過ごしでしょうか アクセシビリティ対応やってみたいんだけど大変そう 正直何から始めたらいいかわからない 結局やれって言われても色とか文字サイズとかマークアップとかの知見ばっかりであまり関係ないかも… と思ってる方もそろそろ増えてきた頃ではないでしょうか 今回ご紹介するのはアクセシビリティの初級編としてディレクター、デザイナー、コーダーと全行程の職種が携われて 比較的参戦しやすく効果も見え
色に頼らないビジュアル表現を考える | mkasumi.com
実はこのテキストの中には、どこかがリンクになっています。どこのテキストにリンクが指定されているかビジュアルだけでわかりますか？ 少し意地悪な問題ですが、本題ではないので早速答えを述べます。実は、「このテキスト」という部分にリンクが指定されています（リンクには「#」が設定されているので、クリックするとこのページのトップに移動します）。 皆さんはどの段階で「このテキスト」という部分が少し青色であることに気づけましたか？もしかしたら、普段色を使うお仕事をされている方（デザイナーなど）はすぐに違和感に気づけたかもしれませんが、全てのテキストを読んでから青色になっている部分を探して見つけた方もいらっしゃるのではないでしょうか。 このように、本文が黒文字でリンク色に暗めの青を使った場合はリンクだと気づけないことがあリます。 では、どのようなスタイルにすれば良かったのか考えると以下のようなパターンが挙げ
ウェブ制作者のための「はじめてのiOS VoiceOver」チュートリアル（初級編）
先日Twitterでアンケートをしたらウェブ制作に関わる方々でスマホの読み上げ機能を使ったことがある方が少ないとのことだったので、はじめてiOS VoiceOverを使うときに困らないように、スクリーンリーダーの超初心者の僕がハマったところや難しいと感じたところをふまえて、チュートリアル的に使い方をまとめてみます。 iOS VoiceOverを初めて使う方のお役に立てれば幸いです。順を追ってiOS VoiceOverに一緒にチャレンジして行きましょう！ 中級編（ローター編）も書きました！ 目次 以下、ページ内のセクションへのリンクです。 VoiceOverをショートカットに入れておく VoiceOverがオンの時にロックスクリーンを解除する方法 iPhoneの画面が突然真っ暗になってしまったら VoiceOverでページを読んでみる ページの最初から続けて要素を読み上げる ページをスクロー
Webアクセシビリティ対応で「音声読み上げ・文字拡大・色変更」は的外れ。本当に必要なのはSEO？ | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
なぜ、的外れなのでしょうか？ それは、実際にユーザーが使っているシーンを考えればわかります。たとえば、PCを起動してからサイトのコンテンツを読むまでの流れを書き出してみましょう。 ブラウザを立ち上げるアドレスバーに文字列を入れて検索する検索エンジンの検索結果から該当のコンテンツを探すサイトに訪問し、コンテンツを読むサイト側で用意した支援機能は、4の「サイトに訪問し、コンテンツを読む」の段階になって初めて使えるものです。サイトに「音声読み上げ機能」があれば、そのサイトのコンテンツを読み上げることはできますが、他のサイトのコンテンツを読むことはできません。そしてもちろん、ブラウザを立ち上げたり、検索文字列を入れたりする際にも、この機能を使うことはできません。 もし、このような支援機能にニーズがあるとすれば、普段は目で見てアクセスする人が「何らかの事情でそのサイトのコンテンツだけ読み上げで聴きた
ブロックスキップを考える | Accessible & Usable
公開日 : 2018年3月2日 カテゴリー : アクセシビリティ ウェブアクセシビリティのガイドライン (W3C 勧告) である WCAG 2.0 に、「ブロックスキップ」という達成基準があります。 2.4.1 ブロックスキップ: 複数のウェブページ上で繰り返されているコンテンツのブロックをスキップするメカニズムが利用できる。 (レベル A) 出典 : WCAG 2.0 解説書「達成基準 2.4.1 を理解する」 グローバルナビゲーションなどサイト共通のブロック (塊) を任意で読み飛ばせるようにして、メインコンテンツにスムーズにアクセスできるようにしましょう、というものです。達成方法には大きく分けて、1) スキップリンクを設置する方法と、2) 見出し要素や WAI-ARIA ランドマークを適切にマークアップする方法、のふたつがあります (参考 : WCAG 2.0 解説書「達成基準 2.
スクリーンリーダーのマーケットシェア 2017
スクリーンリーダーのマーケットシェアが気になってデータを探してみたら、2017年10月に行われた利用状況の調査結果が2017年末に公開されてました。WebAIM（Web Accessibility In Mind） というユタ州立大にある非営利団体が2009年から行なっている調査で、スクリーンリーダー利用者にアンケートを行った結果 がまとめられています。欧米を中心としたグローバルな調査結果（アメリカ60%、ヨーロッパ23%）です。 この調査結果にはない日本での状況についても少しだけ言及しつつ、一番気になったデータを抜粋してまとめてみます。 アンケートに回答した1,792名のうち9割近い方がなんらかの障害を理由にスクリーンリーダーを使っていると回答しています。また、障害のうち盲目（blindness）が75.8%、低視力・視覚障害（low vision/visually impaired）が
Accessible Rich Internet Applications (WAI-ARIA) 1.0 (W3C Recommendation 20 March 2014)
Accessible Rich Internet Applications (WAI-ARIA) 1.1 W3C Recommendation 14 December 2017 This version: https://www.w3.org/TR/2017/REC-wai-aria-1.1-20171214/ Latest published version: https://www.w3.org/TR/wai-aria-1.1/ Latest editor's draft: https://w3c.github.io/aria/ Implementation report: https://w3c.github.io/test-results/wai-aria/ Previous version: https://www.w3.org/TR/2017/PR-wai-aria-1.1-2
【質問】スキップリンクは絶対に必要なの？｜基礎知識｜エー イレブン ワイ［WebA11y.jp］
【回答】もはや必要ないのかもしれません。 結論から言うと、今後はもう実装する必要はないのかもしれません。少なくとも、『JIS X 8341-3:2016』や『WCAG 2.0』の達成基準を満たすためには、スキップリンクを実装しなければならないということはないでしょう。これは、スクリーンリーダーのユーザーはもちろん、キーボードだけで操作しているユーザーを想定した場合も同様です。 そもそも「スキップリンク」とは？ 『JIS X 8341-3:2016』や『WCAG 2.0』には、次のような達成基準があります。 2.4.1 ブロックスキップの達成基準 複数のウェブページ上で繰り返されているコンテンツのブロックをスキップするメカニズムが利用できる（レベル A）。 JIS X 8341-3:2016 / WCAG 2.0「2.4 ナビゲーション可能のガイドライン」 「スキップリンク」は、Webページ
アクセシビリティとSEO共通の最適化――「文字サイズと色コントラスト」「リンクとアンカーテキスト」 | Moz - SEOとインバウンドマーケティングの実践情報
この記事は、前後編の2回に分けてお届けしている。「隠しテキスト」「キーワードの詰め込み」について紹介した前回に引き続き、今回は「テキストのサイズと色のコントラスト」「リンクとアンカーテキスト」について見ていこう。 →まず前編を読んでおく テキストのサイズと色のコントラストページを美しく見せたいという目的のためだけに、フォントのサイズが小さく低コントラストのテキストが使われることが、よくある。 SEO担当者も、他のコンテンツに影響を与えずにキーワードを追加しようと、低コントラストでフォントサイズを小さくしたテキストを使うことがある。 ちなみに、ここで詳しく取り上げる話ではないが、検索エンジンはフォントのサイズと色を考慮できる。検索エンジンはこちらの考えていることなどお見通しなのだ。 だが、サイズやコントラストはSEOに留まらない問題を引き起こす可能性がある。色覚異常や色覚に問題がある人は、一
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブアクセシビリティ 導入ガイドブック - デジタル庁
GitHub - dequelabs/axe-core: Accessibility engine for automated Web UI testing
Microsoft、アプリのアクセシビリティ問題を調査する無償ツールをオープンソース化／WindowsアプリとWebアプリの両方をカバー
aria-labelはただつけるだけじゃなくって