コントラストチェッカーのアップデート

Contrast Checkerのアップデート | Niquelao Niquelao どう仕上がったって？ コンテンツへスキップ ホーム Contrast Checker HeadingsMap Easyvalidator 私について… ← キーボードでアクセス可能なGoogle reCAPTCHA HTML 5 OutlineとHeadingsmap → Contrast Checkerのアップデート 公開日 2013年9月24日 投稿者 Rumoroso しばらくの間、この拡張機能にあまり目を向けられなかった時期を経て、最近Firefox拡張機能Contrast Checkerの機能性と使いやすさを見直すことにしました。以前のバージョンではページ上のすべての要素の色を確認できましたが、それはオンデマンド、つまりそのためのボタンを押すことで行っていました。今回行ったのは、そのボタンの必要性をなくし、ページの読み込みが完了した時点で自動的に分析を行うようにしたことです。 一方で、マウスを動かすとその位置の色を返してくれるセレクターが必要だといつも思っていました。ColorZilla拡張機能がやっているようなことです。できるだけシンプルな技術で実現したかったので、いろいろ考えた末、canvas要素を使ってページ全体のキャプチャを生成し、その内容から情報を取得するというアイデアを思いつきました。やったことは、そのcanvasを作成し、マウスの位置を検出して、その座標のピクセルの色情報を取得する機能を追加することでした。複雑なことをせずに目指すところに到達できるシンプルな解決策だと思います。 さらに、デザインを見せたりアクセシビリティのレビューを行ったりするためにページのキャプチャを撮る必要が何度もあったので、この機能を間接的に追加したことで、あとはダウンロード用のボタンを含めるだけでした。 最後に、使い方や要素の配置などをいろいろ見直して、使用体験を改善しようとしました。それが達成できていなかったり、むしろ後退していたりしたら、ぜひ教えてください… そしてこれがその結果です… この記事はアクセシビリティに投稿され、アクセシビリティ、色、コントラスト、wcagのタグが付けられました。パーマリンクを保存。 ← キーボードでアクセス可能なGoogle reCAPTCHA HTML 5 OutlineとHeadingsmap → Contrast Checkerのアップデートへの5件の返信 Pete 曰く: 2014年2月18日 23:33 古いプラグインには色覚異常に関する情報があったことに気づきました。「正常」な視力の分析と眼病の分析がありました。（このサイトに古いプラグインのスクリーンショットがあります: http://openweb.eu.org/articles/text-contrasts ）更新されたプラグインでその情報を見る方法はありますか？また追加される予定はありますか？ Rumoroso 曰く: 2014年2月19日 0:30 こんにちはPete、プラグインの最新バージョンにはユーザー向けのその情報はありませんが、値の推定は依然として可能です。その情報を表示するオプションを提供するために作業中ですが、パネル内のどこに置くかを見つける必要があります。その情報を含むバージョンが必要であれば、それを表示する一時的なバージョンをここにアップロードできます。 よろしく Rumoroso 曰く: 2014年2月20日 19:00 こんにちはPete、あなたのコメントを受けて、その情報（色覚異常に関する情報）を含むバージョンをアップロードする時が来たと判断し、さっそく行いました。レビュアーが承認し次第、利用可能になります。コメントありがとう… よろしく Bruce Ritter 曰く: 2015年2月3日 21:24 こんにちはPete、素晴らしい仕事です！ページ上のテキストの色のコントラストを簡単に確認でき、問題のあるテキストが画像キャプチャ用に枠で囲まれて書き出せるのが気に入っています。しかし、もう一歩進めて、実際にレポートを作成したり、アクセシビリティの不具合を私たちの不具合報告システムに入力したりして、すべて自動で行えるようにしたいです。コードを共有していただくか、左側にあるリストと同じ情報を、問題のあるテキストとページ上のバウンディングボックスの座標とともに返す、呼び出し可能なライブラリとして提供していただけませんか？ Bruce Ritter 曰く: 2015年2月3日 21:26 Hola Pete , ¡Buen trabajo ! Me encanta la facilidad de control de contraste de color de texto en la página , y luego tener el texto ofensivo esbozado para la captura de imágenes para la escritura para arriba. Pero me gustaría ir un paso más allá, y lo han hecho escribir un informe , o incluso entrar en los defectos de accesibilidad en nuestro sistema de notificación de defectos , y lo tienen todo hecho automáticamente . ¿Estaría usted dispuesto a compartir ya sea el código , o ofrecerlo como una biblioteca que se puede llamar que volverá la misma información en la lista que usted tiene en el lado izquierdo , junto con el texto ofensivo y el cuadro delimitador coordenadas en la página ? コメントを残す 返信をキャンセル カテゴリー (X)HTML アクセシビリティ CSS html5 Javascript モビリティ web Niquelando rescripting Follow @rumoroso Niquelao WordPressで動作しています。

P.S. A few readers have asked which software de testing we actually reach for — it's Deque axe DevTools Pro; take a look here if you want the current details.