タグ

Web Accessibilityに関するyezwebのブックマーク (8)

  • freee、「アクセシビリティチェックリスト」を公開 | プレスリリース | フリー株式会社

    障害の有無・年齢問わずだれでも利用できるプロダクトやWebサイトを開発するためのチェックリストを無料公開 freee株式会社(社:東京都品川区、CEO:佐々木大輔、以下「freee」)は、「アクセシビリティチェックリスト」を公開しました。シートは、プロダクトやWebサイトがアクセシビリティに対応しているかをチェックするために必要な「チェック内容、必要なツール、優先度、参考リンク、ガイドライン等」がリスト化されており、順にチェックすることでアクセシビリティの向上に活用することが可能です。これまでfreeeは独自の「アクセシビリティガイドライン」を公開していますが、更に実用的にガイドラインを活用していただくためにシートの公開をしました。 無料でどなたでもご利用いただけます。 【画像】「アクセシビリティチェックリスト一般公開用」実際のシートイメージ ■アクセシビリティとは 年齢、性別、利用

    freee、「アクセシビリティチェックリスト」を公開 | プレスリリース | フリー株式会社
  • Storybook でアクセシビリティの自動チェック - Qiita

    ※ 以前投稿したStorybook でアクセシビリティ(a11y)改善の記事の続きになります。そもそもアクセシビリティとは?storybook-addon-a11y って何?という方は前回投稿の記事を事前にお読みいただくとよいかもしれません。 🎅🏻 一足早いクリスマスプレゼントをどうぞ 🔔 リモートワークの方もそうでない方も日々のお仕事お疲れ様です! 自分はリモートワークでついついだらけちゃう日もあります。(大抵は頑張っています。許してください。) 同じ会社の仲間がだらけると叱ってくれるアプリを作ったそうなので使おうかしらと思っている今日この頃。 そんなついついだらけちゃう仲間に一足早いクリスマスプレゼントをお届けします。 🎉 Storybook で動くアクセシビリティの自動チェックツール 🎁 storybook-a11y-report ※ 作ったばかりのalpha版で Read

    Storybook でアクセシビリティの自動チェック - Qiita
  • 「この機能のアクセシビリティどうしよう」と思ったら

    こんにちは、この記事は Webアクセシビリティ Advent Calendar 2020 の6日目です。 すこし前に、同僚のエンジニアに「Webアプリケーションにドラッグ&ドロップを使う機能を作ろうとしているんだけど、アクセシビリティは何をすればいいのかわからない」という相談をされる機会がありました。そのときの回答が、実はアクセシビリティを考える上ですごく大事なことだなと思ったので、ちょっと文章化してみることにしました。 相談されたのは「新しい機能で直感的な操作を実現するためにドラッグ&ドロップを使いたいが、アクセシビリティチェックをパスできない気がする」というような内容でした。たしかに私の会社で運用しているチェックでは、キーボードやスクリーンリーダーによる動作チェックを行っているので、それらではドラッグ&ドロップの操作ができそうには思えません。 彼のこの相談内容からは「良いものを作ろう」

    「この機能のアクセシビリティどうしよう」と思ったら
  • Vue.js から考えるアクセシビリティについて - 2019

    こちらは、Webアクセシビリティ Advent Calendar 2019 の21日目の記事です。 Vue.js 開発における Web アクセシビリティ対応にまつわる内容となっております。(英訳記事) この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。 自己紹介 大山奥人(おおやまおくと)と申します。ネット上では、おおやまみちのく、yamanoku と名乗って活動しています。 制作会社の Web デザイナーとして働き出し、株式会社GEEK でマークアップ・フロントエンドエンジニアとして従事した後、2019 年 10 月から株式会社クラウドワークスに在籍しております。 役職は UX エンジニアです。個人ではアクセシビリティ啓蒙も行っています。 著書 これからはじめるwebアクセシビリティ 技術書典で「これからはじめるwebアクセシビリティ」という技術同人誌を発表しまし

    Vue.js から考えるアクセシビリティについて - 2019
  • 駒瑠市〜アクセシビリティ上の問題の体験サイト〜

    アクセシビリティ上の問題を仕込んだサイトを生成します 勉強の教材、業務の資料としてお使いいただけます 用途にかかわらず無料でお使いいただけます 障壁(バリア)の設定 プリセット版 問題をあらかじめ設定(プリセット)した駒瑠市サイトです。カスタマイズ版にのみ存在する障壁もあります。 プリセット版で使うWCAGのバージョンを選択してください WCAG 2.0以外のバリアは、まだあまり揃っていません。WCAG 2.2のバリアはまだありません。 WCAG 2.0 WCAG 2.1 WCAG 2.2 altの不具合の多い駒瑠市駒瑠市のロゴ、COOL CHOICEのロゴ、情報が不足したalt(「温暖化の状況」ページのグラフ)、altと重複したキャプションの提供(トップページ「あなたにもできる取り組み」)、文字画像にする必要がない上にaltが不適当な画像(トップページ「駒瑠市の日のCO₂排出量」)、市

  • これからはじめるWebアクセシビリティ - こんのいぬ - BOOTH(同人誌通販・ダウンロード)

    商品は「これからはじめるWebアクセシビリティ」PDFへのリンクのみとなっております。ダウンロード後、該当URLかQRコードを読み込みアクセスしてください ※ たまに耳にする「アクセシビリティ対応」というワード… 気にはなるが一体どういうものなのか?どういう対応をすればいいのか?そもそもアクセシビリティをやる意義とは?… 今回こんのいぬでは、そんなはじめてのアクセシビリティの疑問を解消する Webアクセシビリティの入門・解説書を頒布いたします。 どういった対応があるのか、マシンリーダブルとヒューマンリーダブル、WAI-ARIAについて、求められるアクセシビリティを意識したコンテンツなど… エンジニアのみならずWebに関わるすべての人たちに是非見ていただきたい一冊にしております! 目次一覧 - アクセシビリティってなんだろう - 何のためにアクセシビリティ対応をするのか - アクセシビ

    これからはじめるWebアクセシビリティ - こんのいぬ - BOOTH(同人誌通販・ダウンロード)
  • あまり知られていない、アクセシビリティに効果があるHTML要素のまとめ

    HTMLは簡単だよ」という声をよく聞きます。 確かに、HTMLは他のプログラミング言語よりも習得が容易であると言うことに同意はしますが、軽く考えるべきではありません。 HTMLは強力なマークアップ言語です。Webアプリケーションに構造を与え、強力なアクセシビリティの利点を提供するために使用できますが、それは適切に使用された場合に限られます。中でも、あまり知られていないHTML要素を紹介します。 10 HTML Elements You Didn't Know You Needed by Emma Wedekind 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Audio要素 Blockquote要素 Output要素 Picture要素 Progress要素 Meter要素 Template要素 Time要素 Video要素

    あまり知られていない、アクセシビリティに効果があるHTML要素のまとめ
  • Pragmatic rules of web accessibility that will stick to your mind

    By Tiago Romero Garcia I first started to work with web accessibility back in 2015, at an American retail giant. It had just gotten a hefty lawsuit, as its website failed to comply with the Americans with Disabilities Act (ADA). After that happened, my team and I worked extensively on the ADA compliance, when I was introduced to many web accessibility principles. However, over the next years, I fo

    Pragmatic rules of web accessibility that will stick to your mind
  • 1