Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. It’s true, web animation can be accessible! Sometimes it just takes a little extra effort to make sure that it is. There are strategic things we can do to make sure our animations have a positive impact on accessibility, like planning how they contribute to the overall UX and ease of use of our sit
実際に適用している画面はこちらです。 あえてブラウザ用のルールを定義した部分 一方で、ブラウザという媒体の特性による最適化をした箇所もあります。 アプリはメインのナビゲーションやツールバーのボタンはブランドカラーの赤を使うことが多かったのですが、それをブラウザでそのまま適用するとエラーのように見えてしまいました。アプリの場合はその世界の中で完結するので、独自のデザインルールがあっても受け入れられやすいのですが、ブラウザの場合はページを行き来できるため、全く異なるデザインルールと共存していることになります。 そのため、リンクは青、エラーは赤など一般的に認知されているデザインルールと異なる使い方をする場合は、特に注意が必要になることがわかりました。 上記の点をふまえ、スマートフォン版Yahoo!メールではメインのボタンは黒としました。また、黒を使うときにはタップできることがわかるよう、ボタンの
Beautiful gradient app to generate gradient color and css.
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. The Web Content Accessibility Guidelines (WCAG), an organization that defines standards for web content accessibility, does not specify a minimum font size for the web. But we know there’s such a thing as text that is too small to be legible, just as text that can be too large to consume. So, how c
このスライドは令和元年5 月18日に東京で開催された Inside Frontend #3で発表した資料に簡単な説明を追加したものです。 フィーチャーフォンからデスクトップまですべてのデバイスで動くマインスイーパークローン(proxx.app)を作った経緯と開発の過程を発表しました。 な…
aria-live属性は内容が更新された際にユーザーに伝達するかどうかを指定できるWAI-ARIA属性です。 aria-live属性には以下の値を指定することができます。 値 内容 off 内容が更新されてもユーザーに伝達しない(デフォルト) polite 現在の読み上げの終了やユーザー入力時など適切なタイミングで、内容が更新されたさいにユーザーに伝達する。 assertive 即座に伝達を行う 以下のサンプルではprogress要素の進歩度をJavaScriptなどで逐次変更し、100%になったタイミングで読み込み終了のメッセージを表示するサンプルです。 progress要素にはaria-live=”polite”を指定しててきじ進歩度をユーザーに伝達し、読み込み終了のメッセージにはaria-live=”assertive”を指定して即座にユーザーに伝達できるようになっています。 <pr
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,
Contrast is the difference in luminance or color that makes an object (or its representation in an image or display) distinguishable. In visual perception of the real world, contrast is determined by the difference in the color and brightness of the object and other objects within the same field of view. “If one says ‘Red’ (the name of the color) and there are 50 people listening, it can be expect
ARIA in HTML W3C Recommendation 15 April 2026 More details about this document This version: https://www.w3.org/TR/2026/REC-html-aria-20260415/ Latest published version: https://www.w3.org/TR/html-aria/ Latest editor's draft:https://w3c.github.io/html-aria/ History: https://www.w3.org/standards/history/html-aria/ Commit history Implementation report: https://w3c.github.io/html-aria/results/impleme
Bulletproof Accessible Icon Fonts Posted by Zach Leatherman 01/13/2014 April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach. Care must be taken when implementing icon fonts to ensure a great experience for all users. What happens w
Web Accessibility Advent Calendar 2013 初日です。 http://www.adventar.org/calendars/64 neotagです。初日なのに記事公開が遅れてしまいました。 しょっぱなから出鼻をくじいてしまい大変申し訳ありません。（土下座） 追記 2013/12/06 この記事の補足になる記事を @milk54 さんが書いてくださいました。 リニューアルして情報が得られなくなったというサイトを調べてみた 追記ここまで JavaScript による視覚表現が盛んになってから当たり前に使われるようになったモーダルダイアログについてです。 このモーダルダイアログ、ちょっとした情報を追加で表示する際に大変便利なのですが、見た目だけ実装すると思わぬ罠があります。 普通に組んだ場合 Library など使わずに普通に JavaScript を書いた場合
2011年10月13日 06:41 カテゴリiOSアップデートiphoneの小技 【iOS5】大手は記事にしない玄人機能AssistiveTouchを解説するよー！ Posted by hireme No Comments No Trackbacks ツイート (ヽ'ω`):おはようございます。ケスラブ(@gessori2)です。今回はあまりにもマイナーなので大手はどこも記事にしない隠れ機能を紹介しますよ~。 その機能とは、AssistiveTouchです。慣れると超~便利！きっと離れられなくなると思いますよ！ 関連:【iOS5】フリック入力がさらっとパワーアップしてる件⇛気づくわけない あなたが知らないiOS5の新カメラ機能を紹介するよ〜！ iCloudだけじゃない！iOS5で追加された地味にスゴイ機能を紹介するよ 【iOS5】追加機能ザックザックでSaf
公開日 : 2010年6月6日 (2021年2月2日 更新) カテゴリー : アクセシビリティ 最近、プログレッシブエンハンスメント（Progressive Enhancement）という言葉をよく目にするようになりました。Webユーザーの増加、ユーザーの閲覧環境の多様化（パソコンだけでなく、携帯電話やスマートフォン、支援技術など）、ユーザーの抱える身体的状況の多様化（障害、加齢、怪我、など）、といった背景を踏まえて、より幅広く、多くの人が情報にアクセスできるようにすることを目指したWebサイトの開発理念です（Webアクセシビリティを実現するための技術的方法論のひとつとも言えますね）。以下、簡単にご紹介したいと思います。 基本的な考えかた あらゆるユーザーに対して、基本的な体験ができるようにします（たとえば、そのサイトが伝えたい情報には、どんな閲覧環境下にいるユーザーでもちゃんと到達できる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
