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

特徴
1

I’ve been asked by one of our users to increase the text size of our instance. Fortunately, this is easy to do for her personally using the interface settings (see https://meta.discourse.org/my/preferences/interface).

She tells me that other sites and apps have the ability to do this automatically if the device has a large font selected.

Discourse used to have dark mode being user-selectable only but this has changed in the last year to be automated (if configured correctly). It would be brilliant to have the same dynamic for text size. Indeed, this is far more important, as visually impaired folk will struggle to find the setting with the text being small.

「いいね！」 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