BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Chrome 83 DevToolsでは視覚障害とロケールをエミュレート

Chrome 83 DevToolsでは視覚障害とロケールをエミュレート

原文(投稿日:2020/05/07)へのリンク

今後、Chrome83リリースではDevToolsに対する重要な更新がある。例えば、視覚異常とユーザロケールのエミュレーション、クロスオリジンオープナーポリシー(COOP)デバッグ、クロスオリジンエンベッダーポリシー(COEP)デバッグ、Cookieパスのネットワークリクエストフィルタリングである。

COVID-19によりChrome82のリリースを中止した後、Chromeチームは当初の計画より3週間早くChrome 83リリースの準備を進めており、現在は5月中旬に予定している。Chrome DevToolsは、このリリースで重要な改善がいくつかある。

Firefoxのアクセシビリティインスペクターは、ほぼ間違いなく、アクセシビリティに対する最高の組み込みのブラウザサポートを提供しており、Firefox 70で視覚障害シミュレーションのサポートが追加されている。Chrome 83のDevToolsは、ぼやけた視力と4種類の色覚障害のサポートを追加することでこのギャップを埋めている。

  • 1型2色覚: 赤色光を知覚できない
  • 先天赤緑異常: 緑色光を知覚できない
  • 三型色覚: 青色光を知覚できない
  • 色覚異常: 灰色の色合い以外の色を知覚できない

これらのツールを使用すると、開発者は視覚障害のあるユーザのエクスペリエンスを表示し、それに応じて配色やデザインを調整して、アクセシビリティを向上させることができる。これらの制限をテストするためのツールはすでに多数存在するが、ブラウザのDevToolsで直接サポートすることで、すべての開発者にとってより手に取りやすくなる。

Polypaneなどの開発者ブラウザでは、さらに優れた視覚アクセシビリティサポートが得られる。Polypaneでは、色覚異常、緑内障、遠視、明るい日光のエミュレーションができる

ブラウザがJavaScriptの国際標準であるECMA-402を実装するにつれて、ネイティブでの国際的なサポートが向上し続けている。Chrome DevToolsには、[センサー]タブから特定のロケールをエミュレートするためのサポートが含まれるようになった。特定のロケールを設定することで、数値の書式設定、文字列ロケール、言語文字列、HTTP言語ヘッダーなどのデフォルト値が変わる。

ブラウザが新しい機能を追加すると、クロスオリジン開発で新しいリスクが発生する。Chrome DevToolsネットワークパネルに、Cross-Origin Opener PolicyCross-Origin Embedder Policyのデバッグ情報のサポートが含まれるようになり、開発者はSharedArrayBufferのスレッド使用を活用できるようになった。Chromeチームは、performance.memory APIを介したきめ細かいメモリ測定など、他のタイミングAPIや低レベルのメカニズムの解放するために将来同様の制限が必要になる可能性があると予想している。

開発者がCookieに関連するネットワーク要求をデバッグできるように、ネットワークDevToolsパネルの新しいcookie-pathフィルタキーワードでは、関連する要求のみを表示するようにフィルタリングできる

Chrome DevToolsは、開発者が効率的なウェブアプリを構築するのに役立つ新しい標準、パターン、問題点、ベストプラクティスをサポートするために進化を続けている。DevToolsは、各Google Chromeリリースに含まれている。DevToolsのすべての新機能について、コミュニティからのフィードバックが推奨されている

この記事に星をつける

おすすめ度
スタイル

BT