コントラストを維持できる色の一覧を確認できます。 hex(#000000)か、rgb()、hsl()で入力してください。
アクセシビリティカラーヘルパー
コントラストを維持できる色の一覧を確認できます。 hex(#000000)か、rgb()、hsl()で入力してください。
フォーカスの分類 | アクセシビリティBlog | ミツエーリンクス
この記事はミツエーリンクスアドベントカレンダー2019 - Qiitaの23日目の記事です。 私はWebページの検証やコンサルティングの業務を多々行っており、開発者とやり取りすることもあります。その際、開発者に「フォーカスを受け取れるように、要素のtabindex属性に-1を設定してください」と伝えると、高い確率で「tabindex属性に-1を設定するとフォーカスを受け取らなくなるのでは？」と返されます。実際のところ、tabindex="-1"はフォーカスを受け取ります。 なぜ、そのような認識の違いが起こるかというと、ある要素がフォーカスを受け取るかどうかや、受け取るかどうかを制御する方法が複雑なためだと考えています。この記事ではその複雑性と、複雑性がどう整理されようとしているかを述べます。 フォーカスを受け取る経路 Webページでは要素がフォーカスを受け取る経路は、ユーザーの利便性や歴史
アクセシビリティを高めるCSS by Yuko Morikawa
DIST.30 Lightning Talk13 December 2019Yuko Morikawa, to-R Inc. トゥーアールの森川です。 私はWebの持つ無限の可能性に惹かれて、この業界で働いています。 ウェブアクセシビリティとは、誰もがどんな状況でもウェブにアクセスできるようにすること。これを知ったとき、私はウェブのアクセシビリティの高さに惹かれたんだと思いました。 「ウェブのパワーはそのユニバーサル性にある。障害に関わらず誰もがアクセスできることがその本質である」 World Wide Webを発明したティム・バーナーズ・リー氏の有名な言葉です。 ウェブの本質であるアクセシビリティを守っていくのは私たちの役⽬です。 これが私がアクセシビリティをやる理由の1つです。 今日はCSSでアクセシビリティを高めていくためのTipsを4つご紹介したいと思います。 Focus Stat
accrefs
ウェブサイトに貢献このウェブサイトではあなたからの情報提供をお待ちしています。参考資料の追加・修正のリクエストはリポジトリのイシューから専用のテンプレートで行えます。
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 {
Color.review - Colors that look and work great for everyone
We experience contrast differently in different colors. Because of how our eyes work, blue text on a white background will be much more easily read than a yellow. When you are designing for humans, in whatever medium, this is something to always keep in mind. Even more importantly, an estimated 217 million people live with a visual impairment. To help make sure that your work can be used and read
高齢者が使うアプリケーションのアクセシビリティデザイン｜Goodpatch Blog グッドパッチブログ
この記事は、とある高齢者がメインターゲットのアプリケーションを制作するに当たって、私がデザインを行うために留意していたアクセシビリティデザインに関するポイントや得た学びをまとめています。 これからアプリケーションデザインを行う際に、アクセシビリティについて参考にしていただければ嬉しいです。 今回アクセシビリティデザインをするために行ったことは以下です。 高齢者がスマホを使いこなせるのかを検証する 色のコントラスト比と余白の確保 色覚異常を考慮したカラー選定 数字を考慮したフォント選定 まずは順を追ってそれぞれのフェーズで何をしたのかについて説明したいと思います。 高齢者がスマホを使いこなせるのかを検証する 今回は高齢者向けのアプリだったため、最初に高齢者がスマートフォンを正確に使えるかを検証する必要がありました。そのため、デザイン性を高めることをあえて我慢しました。なぜならフェーズとして「
JavaScript が読み込まれる前でもWeb Applicationを動かす - from scratch
今回は最近取り組んでいる、 JavaScript が読み込まれる前であっても「ちゃんと」 Web Application が動作するように作る話をします。 Server Side Rendering における注意点と対策 BFFを使ってServer Side Rendering をすることに数年前から取り組んでいます。 まずはSSRをやる上での注意点と対策について紹介します。 SSRをすることはSEOのためだと思われがちですが、個人的にはSEOのためにしているわけではなく、 First View を向上するため（特に First Meaningful Paint を向上するため）にやっています。 First View SEOとSSRに関しては Google が最近出したこの記事の SEO Considerations 節が詳しいです。ここでは説明しません。 SSRをしない、Client S
Modaal - A WCAG 2.0 Level AA accessible modal plugin by @wearehumaan
Modaal is a WCAG 2.0 Level AA accessible modal window plugin. Why another modal plugin? It's hard to find a plugin with the right mix of quality, flexibility and accessibility. We thought it would be interesting to develop something that would work in a variety of projects, furthering the cause for an accessible web. Accessibility Features WCAG 2.0 Level AA Support Saving page focusing state on mo
AbemaTVのアクセシビリティ 小さな一歩｜シュンスケ｜ABEMA
「アクセシビリティ」という言葉を使うほどではないかも。（予防線） 正直なところ、マシンリーダブルな部分は僕はまだよく理解してない。 アプリにおけるスクリーンリーダーとか操作や表示調整諸々とかちょっと待って！頑張るから！という意気込み。 で、完全に僕の主観だけど、多くのデザイナーがまず初めにとっつきやすいアクセシビリティは「色のコントラスト」だと思う。 ということで、 まずはAbemaTVのiOSアプリの色を全部見直したよ！（2018年3月） （2019年春：追ってWebも対応済み） （Androidは元々マテリアルデザインのカラースキームを採用してたのでそこまで問題ありませんでした） これまでのUIの色周りの課題でいうと主にこの3つ。 ・「黒背景」と「白背景」の画面が混在していた。 ・どの背景でも文字のコントラスト比が十分に保たれてなかった。 ・使用している色数がちと多い。 「黒背景」と「
ウェブアクセシビリティに配慮したtableの列固定に挑戦してみた | MONSTER DIVE
界隈で徐々に盛り上がってきているウェブアクセシビリティ熱。 その波に乗り遅れまいと、ようやく本格的に勉強・実践を始めました。 このたびウェブアクセシビリティ レベルAに準拠することが要件のお仕事をいただきまして、勉強しながら取り組んでいるところです。 そんな私の前に立ちはだかったもの...それは... 列固定・横スクロールのある表 デザインデータには、表が横長〜に横たわっておりました。その下にはスクロールバー。そして、固定表示された1列目のセル... 経験上、スクロールあり＋列固定のtableは、一筋縄ではいかないことを知っています。よくある実装方法としては、固定部分とスクロール部分を分けて、別tableにしてしまう方法。 ですが、それではアクセシビリティを確保することができません。ひとつのtableになっていなければ、音声読み上げ機能でそれぞれの内容を紐付けることができないからです。 悩
ヘッダーを固定した表のアクセシビリティ - Qiita
この記事は Web Accessibility Advent Calendar 2015 8日目の記事です。 ヘッダーを固定した表のアクセシビリティについて、最近調べる機会があったので、その内容を報告します。 ヘッダーを固定した表とは、表のボディセルだけがスクロールし、ヘッダーはスクロールしない表のことです。 ヘッダーが行の場合はこんな感じ: ヘッダーが列の場合はこんな感じです: まず考えるべきこと 実装にもよるため一概にはいえませんが、ヘッダーを固定した表は往々にしてアクセシビリティを低下させます。 後述するように、アクセシビリティを向上させる方法はありますが、ハックに近く、推奨できる方法ではありません。 まずはヘッダーを固定しない表を使えないか検討してください。 よくある実装とその問題点 ヘッダーを固定した表でよくある実装は、ヘッダーとボディセルをそれぞれ別々のtable要素とする実装
A11Y Style Guide
This application is a living style guide or pattern library, generated from KSS documented styles...with an accessibility twist. No matter your level of development or accessibility expertise, there are ways to help contribute to the a11y style guide. Why did this project start? We wear a lot of hats as front-end developers. Depending on the client or company you work for, you may be the designer,
24 Accessibility
24 days of digital accessibility gifts during the season of giving and sharing A few years ago I didn’t know what the term “accessibility” meant. I built Web sites that were partially inaccessible because I didn’t know better. Fast forward to today, I know enough to be able to write, speak and run workshops on accessibility, helping others build more a accessible and inclusive Web. Much like every
Japan Accessibility Conference vol.1 - 資料一覧 - connpass
終了 2017/11/11（土） 13:00〜 Japan Accessibility Conference vol.1 国内最大級・最大規模のアクセシビリティカンファレンス開催! Makoto Nakano 他 東京都千代田区紀尾井町1-3 (東京ガーデンテラス紀尾井町 紀尾井タワー 17F)
Webアクセシビリティ Advent Calendar 2017 - Adventar
Webアクセシビリティについてのアドベントカレンダーです。ご参考までに、過去のカレンダー： Web Accessibility Advent Calendar 2016 Web Accessibility Advent Calendar 2015 Web Accessibility Advent Calendar 2014 Web Accessibility Advent Calendar 2013 Webアクセシビリティに関する内容であれば、ガチネタでもポエムでも構いません。ご自身のBlogで無くとも、TwitterやFacebookでつぶやいてリンクするのも大歓迎です。 ぜひ、お気軽にご参加ください。
Automatic infinite scrolling & accessibility » Simply Accessible
Automated infinite scrolling is a popular web design technique even though it creates difficult accessibility problems for keyboard users. Recently, while delivering an accessibility training course, the subject of infinite scrolling came up. I cringed a little. Okay, maybe a lot. And a few participants laughed. I asked why, and was told they were “working on it” for an upcoming release. Oops. Whi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Accessible color palette builder
一人から始めるWebアクセシビリティ
GitHub - AccessibilityCheckList/AccessibilityCheckList.github.io: デザイニングWebアクセシビリティを実践するためのチェックリスト
