ใช้การปรับขนาดข้อความของระบบปฏิบัติการ

ภาพรวม

ผู้ใช้ที่มีความบกพร่องทางสายตามักจะกำหนดค่าการปรับขนาดข้อความที่ระดับระบบปฏิบัติการ (เช่น Dynamic Type ใน iOS หรือการปรับขนาดแบบอักษรใน Android/ChromeOS) โดยค่าเริ่มต้น เบราว์เซอร์บนมือถือจะละเว้นการตั้งค่าการช่วยเหลือพิเศษระดับระบบปฏิบัติการเหล่านี้เพื่อป้องกันไม่ให้เว็บไซต์แบบเดิมที่มีพิกเซลคงที่แสดงผลผิดพลาด

แทนที่จะทำให้หน้าเว็บเป็นแบบคงที่หรืออาศัยการคำนวณเลย์เอาต์ JavaScript ที่กำหนดเองและไม่เสถียร ให้เลือกใช้การปรับขนาดข้อความของระบบปฏิบัติการแบบเนทีฟโดยใช้แท็ก <meta name="text-scale"> เมื่อเปิดใช้งาน เบราว์เซอร์จะปรับขนาดแบบอักษรราก (1rem) แบบไดนามิกให้ตรงกับค่ากำหนดระบบปฏิบัติการของผู้ใช้ ซึ่งช่วยให้ขนาดแบบอักษร เลย์เอาต์ และระยะห่างที่เกี่ยวข้อง (rem/em) ทั้งหมดปรับขนาดโดยอัตโนมัติและสวยงาม

การใช้งาน

1. เลือกใช้การปรับขนาดข้อความของระบบปฏิบัติการ

วางองค์ประกอบ <meta name="text-scale"> ไว้ใน <head> ของเอกสาร ซึ่งจะส่งสัญญาณไปยังเบราว์เซอร์ที่รองรับว่าเลย์เอาต์ของคุณมีความทันสมัย ปรับเปลี่ยนได้ และปรับขนาดได้อย่างปลอดภัย ดังนี้

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  
  <!-- Opt this page into OS-level dynamic type and accessibility text scaling -->
  <meta name="text-scale" content="scale" />
  
  <title>Adaptive Accessibility Layout</title>
</head>

2. ใช้การจัดพิมพ์และระยะห่างแบบสัมพัทธ์

กำหนดขนาดแบบอักษรโดยใช้หน่วยสัมพัทธ์ (rem หรือ em) แทนพิกเซลคงที่ (px) ใช้ค่าที่ไม่มีหน่วยสำหรับความสูงของบรรทัดเพื่อให้ปรับขนาดตามสัดส่วนของขนาดแบบอักษรที่คำนวณได้ของแต่ละองค์ประกอบ

ใช้หน่วยสัมพัทธ์สำหรับระยะขอบและระยะห่างจากขอบที่ระยะห่างเชื่อมโยงกับขนาดข้อความหรือต้องปรับตามขนาดข้อความ ระยะห่างที่ไม่ขึ้นอยู่กับข้อความอาจใช้หน่วยคงที่ได้ตามความเหมาะสม โดยที่การปรับขนาดไม่ทำให้ข้อความถูกตัดออก ทับซ้อนกัน เนื้อหาหายไป หรือเลย์เอาต์ใช้งานไม่ได้ ดังนี้

body {
  font-family: system-ui, sans-serif;
  /* Inherits the root font-size, which scales automatically with the OS setting */
  line-height: 1.5;      /* Unitless so it scales proportionally with computed font-size */
  padding: 1.5rem;       /* Scales proportionally to prevent dense crowding at larger scales */
}

h1 {
  font-size: 2.25rem;    /* Scales proportionally to the root base */
  margin-bottom: 1rem;
}

ตั้งค่าขนาดข้อความพื้นฐานใน body เฉพาะเมื่อการออกแบบต้องการขนาดที่แตกต่างจากค่าเริ่มต้นของเบราว์เซอร์ที่รับค่ามา มิฉะนั้น ให้รับค่ามา กำหนดขนาดขององค์ประกอบที่เฉพาะเจาะจง เช่น ส่วนหัว โดยใช้หน่วยสัมพัทธ์ เช่น rem หรือ em ใช้ rem สำหรับขนาดที่สัมพันธ์กับขนาดแบบอักษรระดับรูท และใช้ em เมื่อขนาดควรขึ้นอยู่กับขนาดแบบอักษรขององค์ประกอบหลัก อย่าตั้งค่าขนาดแบบอักษรที่กำหนดเองใน :root หรือ html

การจัดพิมพ์แบบยืดหยุ่น

การจัดพิมพ์แบบไหลอาจใช้หน่วยที่สัมพันธ์กับวิวพอร์ต เช่น vw โดยที่ขนาดแบบอักษรต้องมีคอมโพเนนต์ที่สัมพันธ์กับแบบอักษรด้วย เช่น rem หรือ em ดูเทคนิคการปรับขนาดแบบไหลเพิ่มเติม รวมถึงหน่วยการค้นหาคอนเทนเนอร์และ clamp() ได้ที่การปรับขนาดแบบไหล

หลีกเลี่ยงการกำหนดขนาดข้อความโดยใช้หน่วยวิวพอร์ตเพียงอย่างเดียว

/* ❌ DO NOT DO THIS: The font size does not respond fully to user text scaling */
.heading {
  font-size: 5vw;
}

แต่ให้รวมค่าที่สัมพันธ์กับแบบอักษรเข้ากับการปรับขนาดที่สัมพันธ์กับวิวพอร์ต และใช้ขอบเขตต่ำสุดและสูงสุดที่สัมพันธ์กันแทน ดังนี้

.heading {
  font-size: clamp(2rem, 1.25rem + 2vw, 4rem);
}

ทดสอบว่าข้อความสามารถปรับขนาดเป็นอย่างน้อย 200% ของขนาดเริ่มต้นได้โดยไม่สูญเสียเนื้อหาหรือฟังก์ชันการทำงาน สำหรับแบบตัวพิมพ์ที่ปรับเปลี่ยนได้ หลักการทั่วไปที่มีประโยชน์คือการกำหนดขนาดแบบอักษรสูงสุดไม่เกิน 2.5 เท่าของขนาดต่ำสุด นอกจากนี้ ให้ทดสอบการจัดเรียงใหม่ที่ความกว้างวิวพอร์ต 320 CSS พิกเซล (เทียบเท่ากับการซูม 400% จากวิวพอร์ตกว้าง 1280 CSS พิกเซล) เนื้อหาต้องยังคงพร้อมใช้งานโดยไม่ต้องเลื่อนแบบ 2 มิติ ยกเว้นในกรณีที่จำเป็น

3. ใช้เบรกพอยท์ที่ปรับเปลี่ยนตามพื้นที่โฆษณาที่ปรับขนาดได้

เบรกพอยต์ที่ปรับเปลี่ยนตามอุปกรณ์ต้องไม่ถือว่าข้อความจะยังคงมีขนาดเริ่มต้น ในกรณีที่เบรกพอยต์มีไว้เพื่อตอบสนองต่อพื้นที่ว่างสำหรับข้อความ ให้เลือกเลย์เอาต์ที่อิงตามเนื้อหา, การค้นหาคอนเทนเนอร์ หรือการค้นหาสื่อที่อิงตาม em แทนเกณฑ์พิกเซลคงที่

ทดสอบเลย์เอาต์ที่ปรับเปลี่ยนตามพื้นที่โฆษณาโดยเปิดใช้การปรับขนาดข้อความของระบบปฏิบัติการและการซูมเบราว์เซอร์ ข้อความต้องอ่านได้และเนื้อหาต้องมองเห็นได้โดยไม่มีการซ้อนทับ การตัด หรือการเลื่อนในแนวนอน

4. ตรวจสอบการตัดเนื้อหาและความสูงที่ยืดหยุ่น

เมื่อข้อความขยายขนาดขึ้น องค์ประกอบต่างๆ จะต้องใช้พื้นที่แนวตั้งและแนวนอนมากขึ้นเพื่อป้องกันไม่ให้ข้อความถูกตัดหรือทับซ้อนกัน หากต้องการให้คอมโพเนนต์มีความยืดหยุ่น ให้ออกแบบเลย์เอาต์ให้ขยายตามเนื้อหาแบบไดนามิกแทนที่จะบังคับใช้พิกัดที่ตายตัว ดังนี้

• อนุญาตให้คอนเทนเนอร์ข้อความขยายได้: คอมโพเนนต์และคอนเทนเนอร์ที่มีข้อความต้องขยายได้เพื่อรองรับข้อความที่ปรับขนาด หลีกเลี่ยงค่า height หรือ block-size แบบคงที่ และค่า max-height หรือ max-block-size ที่จำกัดซึ่งอาจทำให้เกิดการตัดหรือข้อความล้น แนะนำให้ใช้การกำหนดขนาดตามเนื้อหา โดยใช้ min-height หรือ min-block-size เฉพาะเมื่อจำเป็นต้องมีขนาดขั้นต่ำเท่านั้น
• อนุญาตให้ตัดข้อความตามปกติ: อย่าจำกัดการตัดข้อความในแกนอินไลน์ด้วย white-space: nowrap ในบล็อกที่มีประโยค ปล่อยให้ข้อความขึ้นบรรทัดใหม่ตามปกติ
• ใช้การตัดบรรทัด Flexbox และ Grid ที่ยืดหยุ่น (ตัวอย่างที่ไม่บังคับ): สำหรับแกลเลอรีการ์ดแบบหลายคอลัมน์ ให้ใช้คอลัมน์ที่จัดเรียงใหม่ได้ เช่น repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) เพื่อให้รายการซ้อนกันในแนวตั้งหากความกว้างสัมพัทธ์เกินเกณฑ์ที่กำหนด

/* Card container using min-height to ensure expansion and auto-fit to reflow if needed */
.card {
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  /* Use min-height so the box expands vertically when the font is enlarged */
  min-height: 10rem;
}

5. อย่าลบล้างขนาดแบบอักษรระดับรูท

เมื่อเลือกใช้ผ่านองค์ประกอบ <meta name="text-scale" content="scale"> อย่าตั้งค่ารูท font-size อย่างชัดเจนในสไตล์ชีต ซึ่งรวมถึงการประกาศใน :root หรือ html และใช้กับหน่วยสัมบูรณ์ หน่วยสัมพัทธ์ และค่าที่คำนวณ

ตัวอย่างเช่น อย่าลบล้างขนาดแบบอักษรระดับรากด้วยค่าคงที่ ดังนี้

/* ❌ DO NOT DO THIS: This can prevent the browser from applying text scaling */
html {
  font-size: 16px;
}

อย่ารวมการเลือกใช้ <meta name="text-scale" content="scale"> กับ env(preferred-text-scale) เพื่อใช้การปรับขนาดข้อความของระบบปฏิบัติการด้วยตนเอง เบราว์เซอร์จะใช้การปรับขนาดผ่านการเลือกใช้เมตา ดังนั้นการใช้ทั้ง 2 อย่างอาจส่งผลให้มีการปรับขนาดซ้ำซ้อน ดังนี้

/* ❌ DO NOT DO THIS: The meta opt-in already applies the operating system text scale */
:root {
  font-size: calc(1rem * env(preferred-text-scale));
}

ปล่อยให้ขนาดแบบอักษรรากเป็นไปตามเบราว์เซอร์ เบราว์เซอร์จะจัดการการปรับขนาดข้อความของระบบปฏิบัติการโดยอัตโนมัติ และใช้การปรับขนาดดังกล่าวกับเนื้อหาที่มีขนาดสัมพันธ์กับขนาดแบบอักษรราก

กลยุทธ์สำรอง

ในเบราว์เซอร์ที่ไม่รองรับ <meta name="text-scale" content="scale"> เลย์เอาต์จะลดระดับลงอย่างเหมาะสม หน้านี้จะแสดงเลย์เอาต์ที่ขนาดแบบอักษรพื้นฐานเริ่มต้นมาตรฐานของเบราว์เซอร์ (โดยทั่วไปคือ 16 พิกเซล) และผู้ใช้ยังคงใช้ตัวเลือกการซูมหน้าด้วยตนเองแบบมาตรฐานหรือการบีบเพื่อซูมได้