低視力向けのWCAG高コントラストカラーパレット

@pmusaraj さんとの協力により、Discourse にはセットアップウィザードから高コントラストのカラーパレットを選択するオプションが追加されました。

これらのパレットはテキストのコントラストを優先しており、Web コンテンツアクセシビリティガイドライン(WCAG)のカラーコントラストに関する基準(レベル AA)を満たすことを目的としています。裏側ではこれらは通常のカラーパレットではなく、追加の CSS も自動的に含んでいます。

ライトバージョンとダークバージョンの両方が用意されています(リストの最後から 2 つのオプションです)。既存のサイトでは、community.yoursite.com/wizard/steps/color にアクセスするか、admin > customize > colors で新しいパレットを作成する際にベースパレットとして選択することで、これらの色を利用できます。

作成されたパレットは admin > customize > colors に表示されます。これらの色をサイトのデフォルトとして使用していない場合でも、ユーザーがこれらを選択できるように設定可能です。

ユーザー選択可能に設定されている場合、個人は設定の「インターフェース」セクション(community.yoursite.com/my/preferences/interface)でカラーパレットを選択できます。

これらのパレットのコントラストに関する問題が発生した場合は、お知らせください。WCAG で定められた基準を継続的に満たすために役立てます!

「いいね!」 27

DiscourseのデフォルトのカラーテーマがWCAGで定められた基準を満たしていないのはなぜでしょうか?その理由についてコメントいただけますか?

「いいね!」 4

Discourse は当初、より高いコントラストの色を想定して設計されていなかったため、色の変更だけでなく、その差異に対応するためにさらに大規模な変更が必要になる可能性があります。まずこのステップを踏むことで、よりアクセシビリティに配慮した色を今日から提供できるようになります。

具体的な例として、既読と未読のトピックの区別方法を取り上げます。デフォルトでは、トピックを読んだ後にコントラストを低下させることで区別しています。

WCAG 基準を満たすためには、既読のタイトルにおけるコントラストを高める必要があります。その結果、既読と未読の間のコントラストがほとんどなくなってしまいます。そのため、長期的にはコントラスト以外の手法で両者を区別する方法を検討する必要があると考えています。

「いいね!」 15

承知いたしました。チームには、引き続きその取り組みを推進していくようお願いいたします。

「いいね!」 8

これは素晴らしい出来事で、心から感謝申し上げます。これについて苦情を申し立てていた視覚障害のあるユーザーの一部を代表して、大変喜ばしく思います。すぐにこの機能を有効にしました。

「いいね!」 15

最初の投稿を読んだ後、新しい色をリストに追加するには、ウィザードで色を選択する必要があると誤解していました。ウィザードを実行して「色」ページに到達した際、新しい色をリストに追加したいと考えていたため、すべての色を選択する方法を探していました。どうやら私の理解は誤っていたようです。現在の「色」ページでの色の選択方法から判断すると、1 つの色テーマしか選択できないようです。そのため、今では混乱しています。

  1. 「色」ページでテーマを選択することで何が行われるのでしょうか。これは全員に対するデフォルト設定になるのでしょうか?
  2. なぜウィザードでは 1 つの色テーマしか選択できないのでしょうか。おそらく質問 1 の答えと同じでしょう。

この投稿は、最初の投稿に従って作業しながら書いているため、「色」ページの設定は元のままにしています。

次に admin > customize > colors に移動します。いくつか試行錯誤した結果、以下の手順で項目を選択できることがわかりました。

  1. New を選択
  2. Base palette のドロップダウンを開く(現在 WCAG LightWCAG Dark が含まれています)

そこで WCAG Light を選択すると、カラーパレットの名前を付け、色を選択するダイアログが表示されました。例に従って名前を WCAG Light とし、Color scheme can be selected by users を選択してから Save をクリックしました。

次に community.yoursite.com/my/preferences/interface に移動しましたが、Color Scheme セクションは見つかりませんでした。

また、当サイトには Hamburger Theme Selector がありますが、これらが自動的に表示されるかと思っていたところ、それらを使用するには新しい Base Theme(テーマ)を作成する必要があるようです。

これは不満を述べているわけではありません。初めて投稿を読み、実際に試行している人からのフィードバックです。:slightly_smiling_face:

「いいね!」 2

Hmm、それは正常に動作するはずです。インターフェース設定ページの再読み込みが必要だった可能性があります。

「いいね!」 3

これが私の画面に表示されているものです。HTML ページを再読み込みしましたが、変化はありません。

注: サイトは Discourse ホスティングで提供されています。これが関係するかもしれません - https://swi-prolog.discourse.group/

「いいね!」 1

サイトを拝見しましたが、どちらのテーマでも「ユーザーが色テーマを選択できる」が有効になっている様子が見当たりません。もしかすると、選択を保存するためにチェックボックスをクリックし忘れたのではないでしょうか?

「いいね!」 5

とても面白い体験でした。あなたがそうだったわけではなく、私がやったことです。確認と返信をありがとうございます。

管理 > 設定 > カスタマイズ >

左側のパネルで WCAG LightWCAG Dark をご覧ください。

WCAG Light をクリックすると以下が表示されます。

その後、「ユーザーが色 scheme を選択できるようにする」を有効にしました。

最初に気づかなかったのは、追加された青いチェックボックスです。

この青いチェックボックスをクリックすると、表示が以下のように変わります。

その後、SWI-Prolog - Users and developers of SWI-Prolog, an implementation of the Prolog programming language にアクセスすると、以下が表示されます。

:slightly_smiling_face:


ユーザーが使用できる色をいくつか追加した後、インターフェースのオプションが変更され、通常モードとダークモードの両方から選択できるようになりました。

「いいね!」 7

この意味について詳しく教えていただけますか?初めてのフォーラムのセットアップを控えており、カラーテーマのカスタマイズと、ユーザーのシステム設定に基づいた自動的なダークモード切り替えのサポートを検討しています。

これらの新しいテーマをベースとして色をカスタマイズすべきでしょうか?

最近のスレッドで議論されているダークモード対応のためのカラーテーマ構成方法の変更や、これらの新しいアクセシビリティ対応テーマを踏まえた、カスタムカラーテーマを作成するための現在の手順は何でしょうか?

よろしくお願いいたします!

「いいね!」 2

つまり、これらの WCAG パレットが選択されると、いくつかの要素の色を変更するための追加 CSS(こちらで確認可能)が読み込まれます。通常、デフォルトで使用しているものよりもコントラストの高い色変数が適用されます。この CSS は、おそらくパレットの名前に基づいて読み込まれていると考えています。

つまり、これらのパレットを修正しつつ、カスタム CSS によるコントラストの改善効果を維持したい場合は、名前を変更しないようにする必要があると思います(@pmusaraj さん、合っていますか?)。

あるいは、上記のリンクから CSS をコピーして、ご自身のテーマで使用するという選択肢もあります(ただし、私たちが行うアップデートは反映されません)。

「いいね!」 9

いいえ、WCAG 固有の CSS は、現在のテーマが 2 つのベース WCAG テーマの派生テーマである場合にのみ含まれます。そのため、新しいテーマの名前は自由に付けられますが、ベースの WCAG テーマから作成されたものであれば、追加の CSS が適用されます。

「いいね!」 10

この新機能を見られて嬉しいです!一点お伺いしたいのですが、Discourse は現在、WCAG ガイドラインのすべてを満たしていますか、それともまだ改善の余地がありますか?

「いいね!」 1

まだいくつかの作業が残っていますが、それほど多くはありません。99%まで到達しており、現在、アクセシビリティの専門家の協力のもと、残りのギャップを埋めるための作業を積極的に行っています。

「いいね!」 7

すべてのユーザーにとって素晴らしい知らせですね。どのWCAGガイドラインを目指して作業を進めておられるのでしょうか?WCAG 3.0でしょうか?

「いいね!」 2

WCAG 2.0 の準拠に向けて取り組んでおり、3.0 はまだ草案段階です(https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/)。

「いいね!」 7

このスレッドを追って、WCAG 2.0 がサポートされていると聞いて嬉しく思います。見落としているかもしれませんが、クローズドキャプションに関する言及は見当たりません。Discourse は動画アセットでクローズドキャプションをサポートしていますか?また、クローズドキャプション付きの動画を公開する仕組みは Discourse に存在しますか?

「いいね!」 2

HTML5 の video タグを使用して手動で字幕を追加できます。また、それ用の UI を提供するテーマコンポーネントも用意されています。

「いいね!」 8

WCAG Dark、本当にありがとうございます!大好きです!!

別に必要というわけではありません(知る限りでは) - ただ、とても素晴らしいと思うのです。:heart:

「いいね!」 3