Saiz fon yang boleh diakses, dijelaskan

Garis Panduan Kebolehcapaian Kandungan Web (WCAG) tidak memberi mandat saiz fon minimum untuk kandungan web. Walau bagaimanapun, memastikan kebolehbacaan adalah penting. Artikel ini meneroka amalan terbaik untuk saiz fon yang boleh diakses, memberi tumpuan kepada keperluan WCAG dan memanfaatkan lalai penyemak imbas.

Kebolehbacaan: kontras dan pelbagai watak

WCAG mengutamakan kontras ke atas saiz tetap. Teks mesti memenuhi nisbah kontras minimum 4.5: 1 (3: 1 untuk teks besar). Alat seperti pemeriksa kontras Webaim boleh membantu. Kerumitan pelbagai abjad (sekitar 300 di seluruh dunia) bermaksud saiz minimum tunggal tidak digunakan secara universal. WCAG mentakrifkan "teks besar" berdasarkan saiz cetakan minimum bahasa yang minimum bahasa, diukur dalam mata (bukan piksel). Untuk teks Rom, 18 mata (yang mungkin sama dengan 24px bergantung kepada ketumpatan skrin) dianggap "besar".

Pada dasarnya, WCAG menentukan kontras , bukan saiz fon yang tepat.

Nasib baik, gaya lalai penyemak imbas sememangnya boleh diakses. Mari kita memanfaatkannya.

Perkadaran, tidak saiz tetap

Gaya lalai penyemak imbas (gaya ejen pengguna) mendahului gaya pengarang dan gaya pengguna. Ramai pengguna menyesuaikan saiz fon penyemak imbas lalai mereka. Kami juga kekurangan kawalan sepenuhnya ke atas keluarga font kerana faktor-faktor seperti terjemahan, kegagalan pemuatan fon, atau fon terpilih pengguna (seperti OpenDyslexic).

Oleh itu, fokus pada perkadaran , bukan saiz mutlak. Gunakan unit relatif CSS (WCAG mengesyorkan unit em ) untuk memastikan skala kandungan dengan sewajarnya kepada persekitaran pengguna. Pertimbangkan menggunakan unit rem dan em secara konsisten (kecuali sempadan, di mana piksel sering lebih baik).

Elakkan menetapkan saiz fon asas

Umumnya, elakkan menetapkan font-size pada :root , , atau<code> unsur -unsur. Biarkan saiz lalai penyemak imbas berfungsi sebagai garis dasar. Draf kerja WCAG 2.2 menunjukkan bahawa saiz fon lalai yang digunakan oleh pelayar utama untuk teks yang tidak ditentukan memberikan garis dasar yang munasabah.

Pengecualian wujud. Fon ketinggian X yang rumit, nipis, atau pendek mungkin memerlukan saiz fon asas yang lebih besar untuk mencapai kontras yang mencukupi. Ingat: Sebaliknya, bukan saiz, adalah metrik WCAG utama. Fon luar biasa mungkin memerlukan saiz yang lebih besar untuk mengekalkan kebolehbacaan, terutamanya pada tahap kontras yang lebih rendah. Pengguna masih boleh menyesuaikan saiz fon asas untuk keutamaan mereka.

Mengekalkan perkadaran: Tentukan pelarasan saiz relatif (misalnya, .small , .large ) berdasarkan lalai penyemak imbas.

 : root {
  / * Jangan tetapkan saiz fon di sini */
}
.small {
  saiz font: .8rem;
}
.large {
  saiz font: 2rem;
}

Tajuk

Mengekalkan pesanan tajuk (H1, H2, H3, dan lain -lain) untuk kebolehcapaian pembaca skrin. Menetapkan semula saiz fon tajuk ke 1rem boleh meremehkan gaya visual dari makna semantik.

Bekerja dengan piksel

Untuk menterjemahkan reka bentuk berasaskan piksel ke unit relatif:

Kaedah 1: Peraturan 62.5%

Menetapkan font-size: 62.5%; Pada :root menjadikan 1REM sama dengan 10px, memudahkan penukaran piksel-ke-REM.

Kaedah 2: Menggunakan calc()

Gunakan calc() untuk mengira nilai REM secara dinamik berdasarkan lalai penyemak imbas 16px yang diandaikan.

Kaedah 3: Fungsi Pixel-to-REM

Gunakan fungsi preprocessor (sass mixins, penggilap-komponen menggilap) atau bahkan membuat fungsi CSS tersuai untuk penukaran pixel-to-REM.

Kesimpulan

Mengutamakan saiz berkadar menggunakan unit rem , memanfaatkan lalai penyemak imbas, dan elakkan andaian mengenai tetapan pengguna. Pendekatan ini memastikan kebolehcapaian merentas pelbagai pelayar, peranti, dan keutamaan pengguna. Terima kasih kepada Franco Correa atas bantuannya.

Atas ialah kandungan terperinci Saiz fon yang boleh diakses, dijelaskan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!