見出し画像

アメリカ政府のWebデザインシステム(2) ディベロッパー向け

前回の続きで、まずはディベロッパー向けのページを見てみます。

Progressive Enhancement

USWDS components are built on a solid HTML foundation, progressively enhanced to provide core experiences across browsers. All users will have access to the same critical information and basic experience regardless of their browser, although those experiences will render better in newer browsers. If JavaScript fails users will still get a robust HTML foundation and all the necessary content.

Progressive enhancementとはまず基本となるコンポーネントをしっかり押さえた上で、ブラウザや通信機能に合わせて表現や機能などを拡張するようなwebの実装のこと。誰でも情報や機能にアクセスできることを保証した上で、環境に合わせてよりリッチな表現や使いやすいUIを提供する方法です。

全員が重要な情報(critical information)と基本的な体験(basic experience)をブラウザにかかわらず得られるようにする一方で、新しいブラウザの方にはより良い体験を提供する。Javascriptが動かなくてもHTMLで必要なコンテンツが全て見れる、と政府のサイトらしい堅実さとモダンなアプローチを兼ね備えているようです。

技術的なあれこれ

npmでインストールかzipファイルで落とせます。続く技術的詳細はスキップ。カスタマイゼーションについても触れられています。コンポーネントライブラリの作成にはFractalを使っているそうです。

対応ブラウザ

The current major version of the design system (2.0) follows the 2% rule: we officially support any browser above 2% usage as observed by analytics.usa.gov. Currently, this means that the design system version 2.0 supports the newest versions of Chrome, Firefox, Safari, and Internet Explorer 11 and up.

https://analytics.usa.gov/のデータに基づいて2%以上の利用率のブラウザをサポートすると。明快。

アクセシビリティ

The design system also meets the WCAG 2.0 AA accessibility guidelines and conforms to the standards of Section 508 of the Rehabilitation Act. We’re happy to answer questions about accessibility — email us for more information.

WCAG 2.0 AASection 508 of the Rehabilitation Act対応。政府サイトとしては当然大事ですね。

オープンソースです

For complete instructions on how to contribute code, please read CONTRIBUTING.md. These instructions also include guidance on how to set up your own copy of the design system style guide website for development.

Githubでホストされていて開発に参加できます。コントリビューションの仕方もちゃんとドキュメントになっています

この記事が気に入ったらサポートをしてみませんか?