アクセシビリティに配慮した軽量・高機能スライダー。 ほかのライブラリに依存せず、Lighthouseのエラーもありません。
![Splide - アクセシビリティに配慮した軽量・高機能スライダー](https://cdn-ak-scissors.b.st-hatena.com/image/square/7ba509b75fb6d39bb65a2405c7a77fd91b58c7f6/height=288;version=1;width=512/https%3A%2F%2Fja.splidejs.com%2Fimages%2Fsite%2Fbanner.jpg)
本翻訳について ボランティアによる本翻訳は原文(英語)の内容を正確に反映できていない可能性があります。 本翻訳後に英語版が更新されています:変更履歴 英語版更新 2024-05-13. 翻訳更新済 2024-02-23. 翻訳者 Hiroya UGA. 寄稿者 Naoki Nakamura. WAIは全ての翻訳者に感謝し、また他のtranslationsも歓迎します その画像はテキストを含んでいますか? Yes: かつ、そのテキストが実際のテキストとして近くに記載されている場合 空のalt属性を利用します。詳細は装飾目的の画像 (英語版)を参照してください。 かつ、そのテキストが視覚効果のためだけに表示されている場合 空のalt属性を利用します。詳細は装飾目的の画像 (英語版)を参照してください。 かつ、そのテキストがアイコンなど特定の機能を持つ場合 alt属性を、画像の機能を伝えるために
ツイッターでアクセシビリティ向上日誌2【目視試験編】‐Akira Tsuda Portfolio and Blogというのを見かけて、そういえばアクセシビリティチェックって何をどうしているのかという話をウェブ上でほとんど見かけない(というか自分は知らない)ので、思い切ってチェックの過程や考え方を書いてみようかなと。 チェック対象のサイトを作った@HeldaForStudy氏に尋ねたところ、題材として使ってよいという返事をいただいたので、「アトリエ金工やまぐち」のサイト1ページをチェックしてみることにします。 対象ページはBasic認証がかかっているので、アクセシビリティ向上日誌1【各種ツール評価編】からたどってください。 @HeldaForStudy氏はレベルはA*1でチェックしたとのことなので、チェック基準はWCAG 2.1レベルAでチェックすることにしましょう。 わたしは普段はCOB-
Web アクセシビリティに興味があったので、まず機械的なチェックツールから学んで知識を増やそうということでこのサイトに @axe-core/playwright と markuplint を導入してみました。 @axe-core/playwright のセットアップ 既に Playwright が導入されている状況を想定し進めます。まず@axe-core/playwright をインストールします。 pnpm add -D @axe-core/playwright このサイトの場合 VRT として Playwright を動かしているテストがあるので(過去資料)、そのプロセスに同居する形で axe を実行することにしました。 e2e.test.tsimport AxeBuilder from "@axe-core/playwright"; import type { Page, TestI
最近アイコンボタンのアクセシブルな名前はボタンが持つべきかアイコンが持つべきかという記事を読んで、SVGの代替テキストについて改めて考えさせられたので自分なりの考えをまとめました。 一番確実な方法はimg要素で読み込んでalt属性を付与することだと思いますが、CSSで装飾を変えられるインラインSVGの利点を捨てるのも難しいのでインラインSVGにどうやって代替テキストを含めるか?のみに焦点を当てていきます。 自分の中での結論先に結論から伝えますと、理想を言えば 「svgの中にtitle要素を含み、role="img"とtitleと紐づけたaria-labelledbyで実装する」 のがベストだと思います。ただし、この方法では不都合な点がいくつか孕んでいるので現実は冒頭で紹介した記事の2.で触れられているような 「Visually Hiddenなテキストをsvgに隣接し、svgはaria-hi
2024年2月21日 著 昨年のクリスマスに書いた(笑)改正障害者差別解消法とWebアクセシビリティをめぐる解釈の続き。私はWebの専門家ではあるけれど、法律の専門家ではありません。なので、弁護士でいらっしゃる水田進氏が2024年4月施行!障害者差別解消法で合理的配慮が義務化という記事において ウェブアクセシビリティが確保されたウェブサイトの構築やウェブアクセシビリティの向上は、不特定多数の障害者を主な対象とする「環境の整備」として望ましいものではありますが、「合理的配慮」には当たらないため、障害者差別解消法の改正によっても、一定の規格・ガイドラインへの準拠が義務付けられるものではありません。 と書いてくださったのは、いまだ一部でまことしやかに喧伝され続けている「Webアクセシビリティ義務化」との誤った解釈に対するファイナルアンサーとして、個人的に大変ありがたく思います(u要素で下線が引か
2024年1月18日に開催した本セミナーの録画(質疑応答を除く40分)を、どなたでもご覧いただけるよう公開します。改正障害者差別解消法を正しく理解し、また改正法の施行に正しく備えるため、ぜひお役立てください。
2024年(令和6年)4月1日に日本では「障害者差別解消法」という法律の改正が施行され、民間の事業者にとっては「合理的配慮」が義務化されます。義務化するのはあくまで「合理的配慮」であって、法律の条文にはどこにも「Webアクセシビリティ」とは書かれていません。 ここについての誤解が数多く出回ってしまっていて、先日「2024年4月や6月の時点では、まだ日本でWebアクセシビリティが義務化されません」という記事を書きました。 この記事について、以下のような声をもらいました 「専門用語が多くてわかりにくい」 「アクセシビリティは『合理的配慮』ではなかったの?」 「なぜアクセシビリティを推進したい人たちが急に『義務ではない』と言い出したの?」 そこで、もう少し的を絞って、「合理的配慮」「環境の整備」「Webアクセシビリティ」などの言葉の意味や関係について、説明しようと思います。 (筆者は法律に関して
筆者は、より多くのWebサイトやWebサービスが、より高いアクセシビリティをもつものになることを強く願っています。 (2024/02/04追記)もう少しわかりやすく書き直したものを投稿しました Webアクセシビリティと合理的配慮 「2024年からWebアクセシビリティ対応が義務化される」というようなことが書かれたWeb上の記事が増えているようです。 しかし、2024年1月現在、日本で「Webアクセシビリティ」について法的な義務が発生している・または2024年内に発生するようになる法的な根拠はおそらくありません。法律の改正が施行され、「やったほうがいい」度合いは高まっていると解釈できますが、「Webアクセシビリティは義務です」とまでは明言できないはずです。 ところが、「アクセシビリティ 義務化」などでWebを検索すると、「2024年にアクセシビリティが義務化します」と説明していたり、あるいは
近年、ウェブアクセシビリティへの関心が高まり、ウェブアクセシビリティ対応を専門分野のひとつとして提供する弊社にも、多くの企業様より自社ウェブサイトをはじめとするウェブコンテンツ、アプリケーションのアクセシビリティ対応に関するお問い合わせを頂いております。 その中で、定期的に頂くのが、サードパーティの JavaScript などをウェブサイトに読み込むことによって、ウェブサイトのアクセシビリティを向上させるという名目で提供される、所謂「アクセシビリティオーバーレイ」についてのご質問です。 具体的にはアクセシビリティオーバーレイを導入することで、例えば WCAG や JIS X 8341-3:2016 といった、特定のアクセシビリティガイドラインに適合、あるいは準拠することができるのか、といったご質問になりますが、今後も同様のご質問を頂くことを踏まえ、ここに弊社の見解をまとめておきます。 まず
「色を選択」 ボタンを押すと各ブラウザ標準のカラーピッカーが表示されますので、そこから色を登録します。 あるいは、ボタン横の入力欄に直接、16進数カラーコード(例: #FF0000)を入力することもできます。16進数カラーコード以外の入力は無効です。 色を 2つ以上 登録してください。最低 2つ、色が登録されていないとコントラストの比較ができないのでエラーになります。 初期状態で色の登録ボタンは 2つ 表示されますが、さらに色を追加したい場合は「新しい色を追加」ボタンを押すと、色の登録用ボタンが画面に追加されます。 必要な色の登録が完了したら「コントラスト比チェックを実行」ボタンを押すと、チェック結果が表示されます。なお、結果が煩雑にならないように、達成基準における「大きな文字」については考慮していません。 ※ データ保存機能などはないので、ページがリロードされるとそれまでに登録していた色
複数の色の組み合わせを簡単にコントラスト比チェックできる Color Contrast Auto Checker を作ってみました Color Contrast Auto Checker は、コントラスト比をチェックしたい色をあらかじめ選択し、それら選択した各色の組み合わせのすべてをワンクリックで簡単にコントラスト比チェックできるオンラインツールです。 この記事は 「アクセシビリティ Advent Calendar 2023」 1日目の記事です。 毎年、年末恒例のアクセシビリティ Advent Calendar。自分の感覚では毎年参加させていただいて、何かしら書いている気がしていたんですが、昨年は書いていなかったらしく...... 多分なんか忙しかったんでしょうね。 で、毎度なるべく初日に近い方に書いて、ハードルが上がらないうちに逃げ切る作戦(謎)をとらせていただいているのですが、今年は僭
@axe-core/puppeteer を使用して、テキストファイルで作成した URL リストに対して自動的にアクセシビリティテストを実行し、その結果を HTML ファイルとして保存するスクリプト 「axe-auto-reporter」 を公開しました。 「axe-auto-reporter」 という (名前に全くひねりがない)、@axe-core/puppeteer を使用して、テキストファイルで作成した URL リストに対して自動的にアクセシビリティテストを実行し、その結果を HTML ファイルとして保存するスクリプトを GitHub で公開しました。 所謂、黒い画面 (CLI) で操作しますがテストしたい URL のリストをテキストファイルで作って、あとはコマンド 1つ実行するだけなので、多分ほとんどの人にとって難しくないと思います。 burnworks/axe-auto-repor
はじめに サイオステクノロジーの伊藤と申します。今回から数回にわたりデジタルコンテンツのコントラストというテーマで、WCAG2のコントラスト基準とWCAG3で検討が進められている新しい基準APCAについて解説していきます。 対象読者としては、ウェブサイトやアプリケーションなどデジタルコンテンツの制作に携わるデザイナーやエンジニア、アクセシビリティに関心のある方を想定しています。 現在勧告されているWCAG2の達成基準では、テキストや視覚要素のコントラストが一定の基準を満たす必要があります。たとえば、レベルAAでは文字色と背景色のコントラスト比が4.5:1以上であることが要求されます。 図1 テキストとの視認性を確保するために、背景色とのコントラスト比を考える必要がある しかし、人間の目は明るい色と暗い色のコントラストを認識する際に、明るい色の相対輝度が高いほど視認性が高くなるという特性があ
ChatGPT が新たに画像認識・生成機能の追加を発表し、実際に私の環境でも使用できるようになっていましたので、試しに、こちらの指定したとおりにアップロードした画像内の色のコントラスト比を調べ、出力することができるのか、実験してみました。 どうやら私が勘違いしていてて GPT-4V だと思って使ってたのは別の機能だったらしいので正式に GPT-4V が使えるようになったらこの記事は書き直します。その前提でどうぞ。 つい先日ですが、ChatGPT が新たに画像認識と生成機能 (GPT-4V)、さらに現状ではスマートフォンアプリからのみですが音声機能の追加を発表し、実際に私の環境でも使用できるようになっていましたので早速試してみました。 で、音声機能は後々試すとして、まずは画像認識機能がどんな感じなのかなということで、ある画像を用意し、その画像内から 『隣り合わせになっている色のコントラスト比
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く