© 2024 AI Usage by Countries. Text size adjustment option.

Opcja dostosowywania rozmiaru tekstu

Zapewnij użytkownikom wbudowany kontroler do zwiększania lub zmniejszania rozmiaru tekstu

Wyexponuj kontrolę rozmiaru tekstu w ustawieniach i opcjonalnie w pasku narzędzi lub menu pomocniczym. Używaj jasnych etykiet (A-, A, A+) oraz podpowiedzi dla czytników ekranu.

Zapewnij dostęp do niego za pomocą klawiatury.

Zezwól na co najmniej trzy kroki: 90% (mały), 100% (domyślny), 115–125% (duży)

Zapisz wybrany rozmiar w localStorage/profile; zastosuj go na początku renderowania, aby uniknąć błysków.

Synchronizuj po stronie tablic gdzie to możliwe.

demo na żywo · powiązana symulacja● LIVE

Dostępność i semantyka

Kontrola jest grupą przycisków lub skladowką z odpowiednimi aria-labelami i aria-valuetext.

Upewnij się, że wysokość linii skaluje się wraz z rozmiarem czcionki. Nie kropkuj tekstu; pozwalaj na powiększanie bez poziomego przewijania.

Często zadawane pytania

Jakie powinny być rozważania dotyczące wydajności przy implementowaniu funkcji dostosowywania wielkości tekstu?

Zrobić rozważania dotyczące wydajności i implementacji

Jak mogę zaimplementować kontrolę wielkości tekstu za pomocą własnych właściwości CSS?

Zaimplementuj za pomocą własnych właściwości CSS na korzeniu (np., --font-scale). Unikaj nadmiernego recalkulowania elementów o ciężkim układzie; debounced zasłonić, jeśli potrzebne.

Czy powinienem przetestować dostosowywanie wielkości tekstu na różnych punktach przerwania, trybach jasnego/siatkowego i głównych stronach?

Przetestuj na różnych punktach przerwania, trybach jasnego/siatkowego i głównych stronach. Upewnij się, że nagłówki, przyciski, chipsy, tabele i wykresy pozostają czytelne. Przetestuj z odczytkami ekranu i nawigacją za pomocą klawiszy.

Wypróbuj na żywo

Wszystko powyżej działa bezpośrednio w Twojej przeglądarce — otwórz Hash Function Avalanche Visualizer i zmieniaj parametry podczas działania. Nic nie jest instalowane ani przesyłane na serwer, cały model działa w jednej karcie.

▶ Otwórz symulację Hash Function Avalanche Visualizer