アクセシビリティ：視覚障がい者向けに文字サイズを自動で大きくする

貢献 特徴
1

ユーザーの一人から、当インスタンスのテキストサイズを大きくするよう依頼されました。幸い、インターフェース設定（https://meta.discourse.org/my/preferences/interface を参照）を使って、彼女個人で簡単に調整できます。

彼女は、他のサイトやアプリでは、デバイスで大きなフォントが選択されている場合に自動的にサイズを調整する機能があると教えてくれました。

Discourse は以前、ダークモードがユーザーによる手動選択のみに対応していましたが、ここ1年で適切に設定されていれば自動的に切り替わるように変更されました。テキストサイズについても同様の動的な仕組みがあれば素晴らしいでしょう。実際、視覚に障害のある方にとっては、テキストが小さいと設定を見つけること自体が困難になるため、こちらの方がはるかに重要です。

「いいね！」 5
2

@awesomerobot さん、これはライトモード/ダークモードのように自動検出できるものですか？

「いいね！」 1
3

Webブラウザでフォントサイズを調整すれば、Discourseは他のウェブサイトと同様にスケーリングされるはずです…しかし、iOSでオペレーティングシステムのフォントサイズを調整しても、アプリのサイズにしか影響せず、必ずしもウェブサイトのフォントサイズには影響しないようです。

font: -apple-system-body; を使用すれば、システム（AppleはこれをDynamic Typeと呼んでいます）に合わせてスケーリングすることもできます。Androidは自動的にこれを行うと思うので、変更は不要なはずですが、再確認します。

「いいね！」 1
5

試してみます。

PRで指摘したように、いくつか特有の点があり、それらを回避する必要がありますが、期待どおりに動作するはずです。

Androidでは追加の対応は不要です。ブラウザはすでにフォントサイズをシステム設定に合わせてスケーリングしています。

「いいね！」 3
6

これは、すべてのウェブサイトのデフォルトのズームレベルを選択するApple iOS Safariの方法です。
設定 → Safari → Webサイトの設定 → ページズーム → その他のWebサイトに移動します。
50/75/85/100/125/150/175/200/250/300%

参照: How to Make Text Bigger in Safari for iOS - MacRumors

discourse-websites のみを対象に font: -apple-system-body; をデフォルトに設定することで、段落の一般的なベース font-size: 15px とは大きく異なります。

これにより、すべての discourse-websites に特別なケースが導入されます。フォントが大きすぎます。
そして、すべてのユーザーは、例えば 85% の discourse-website ドメインに特別なズームレベルを設定する必要があります。
または、ユーザーがすでに Safari で 150% などの高いズームレベルを設定している場合、discourse ドメインのみに 125% などに設定する必要があります。

これを実装しないことを強くお勧めします！
この PR のマージを元に戻してください。

iPhone iOS でシステムフォント設定が約 150% で、Safari のページズームが 150% に設定されている場合に何が起こるか確認してください。

  • 通常のウェブサイトでは 150% になるはずです。
  • Discourse の font: -apple-system-body; への新しい変更により、225% (= 150% * 150%) になる可能性があります。

私の知る限り、Android の Chrome はそうではありません。Chrome インターフェースのみがシステム設定によってズームされます。
ウェブサイトのフォントサイズをズームするには、Chrome を開き、設定 → アクセシビリティ → テキストのスケーリングに移動します。

7

デバイスやAndroidのバージョンによって異なるのでしょうか？これは、アクセシビリティ設定でシステムフォントを拡大して行ったテストからのものです。ブラウザに変更はありません。

Screen Shot 2022-02-16 at 9.48.56 AM
Screen Shot 2022-02-16 at 9.48.56 AM469×732 184 KB

「いいね！」 1
8

ここでは段落のみが拡大され、見出しやその他のテキスト要素は小さいままです！
これはChromeの特別な動作で、テキストの一部のみを拡大します。「Font Boosting」で検索するか、以下を参照してください。

iOSではtext-size-adjustを正規化する必要があるかもしれません。

「いいね！」 1
9

Meta にデプロイしたところ、意図しない副作用が発生しているようです。開発環境ではなぜ動作が異なっていたのか分かりませんが、元に戻してさらに調査します… おそらく、フォントサイズ以外の多くのことに影響するため、今はできません…

「いいね！」 2
10

アクセシビリティ全般について：
段落の基本フォントサイズを、すべてのブラウザでデフォルト設定されている16pxのままにしておくというアイデアは良いと思います。

これにより、文字サイズが6〜7％増加します（16px / 15px = 1.0666）。
スマートフォンやタブレットなどのモバイルデバイスでは問題ありません。デスクトップでは、少し大きすぎて不自然に見えます。

この方向で進める場合、タッチ非対応デバイスには代わりに15pxの基本フォントサイズを使用する特別なルールを実装することも検討できます。（タッチ非対応デバイスをチェックすることで、タッチスクリーン搭載のノートブックの一部を見逃してしまう可能性があります。それらのデバイスでは、より大きなフォントサイズが適用されてしまいます。）

「いいね！」 1
11

iOS デバイスでもこの問題はまだ発生していますか？フォントサイズを大きくすることはできますが、折り返しのサイズは変わりません。テストするために Android 携帯/タブレットにアクセスできません。

「いいね！」 1