התאמה לקנה המידה של הטקסט במערכת ההפעלה

סקירה כללית

משתמשים עם לקויות ראייה בדרך כלל מגדירים את קנה המידה של הטקסט ברמת מערכת ההפעלה (למשל, 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% זום מאזור תצוגה ברוחב של 1,280 פיקסלים של CSS). התוכן חייב להישאר זמין בלי גלילה דו-ממדית, אלא אם היא חיונית.

3. שימוש בנקודות עצירה רספונסיביות וניתנות להתאמה

נקודות עצירה רספונסיביות לא יכולות להניח שהטקסט יישאר בגודל ברירת המחדל שלו. אם נקודת עצירה מיועדת להגיב למקום הפנוי לטקסט, עדיף להשתמש בפריסות מבוססות-תוכן, בשאילתות של מאגרים או בשאילתות מדיה שמבוססות על em, במקום בספי פיקסלים קבועים.

בודקים פריסות רספונסיביות כשהתכונות "שינוי קנה מידה של טקסט" במערכת ההפעלה ו"שינוי מרחק התצוגה" בדפדפן מופעלות. הטקסט חייב להישאר קריא והתוכן חייב להישאר גלוי בלי חפיפה, חיתוך או גלילה אופקית.

4. התאמת התוכן וגובה גמיש

כשהטקסט מוגדל, הרכיבים צריכים יותר מקום אנכי ואופקי כדי למנוע חיתוך או חפיפה. כדי שהרכיבים יהיו עמידים, כדאי לעצב את הפריסות כך שיתרחבו באופן דינמי סביב התוכן, במקום לאלץ קואורדינטות קשיחות:

• הגדלת מאגרי טקסט: רכיבים ומאגרים שמכילים טקסט חייבים להיות מסוגלים לגדול כדי להכיל טקסט מוגדל. כדי למנוע חיתוך או גלישה, אל תשתמשו בערכים קבועים של height או block-size ובערכים מגבילים של max-height או max-block-size. עדיף להשתמש בגודל שמותאם לתוכן. כדאי להשתמש ב-min-height או ב-min-block-size רק כשצריך גודל מינימלי.
• לאפשר גלישת טקסט טבעית: לא להגביל את גלישת הטקסט בציר השורה באמצעות white-space: nowrap בבלוקים שמכילים משפטים. חשוב לאפשר לטקסט לעבור לשורות חדשות באופן טבעי.
• שימוש ב-Flexbox גמיש ובגלישת טקסט ברשת (דוגמה אופציונלית): בגלריות של כרטיסים עם כמה עמודות, כדאי להשתמש בעמודות עם הזרמה מחדש כמו 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) כדי להחיל באופן ידני את שינוי קנה המידה של הטקסט במערכת ההפעלה. הדפדפן מחיל את קנה המידה באמצעות המטא-תג, כך ששימוש בשניהם עלול לגרום להכפלת קנה המידה:

/* ❌ 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 פיקסלים), והמשתמש עדיין יוכל להשתמש באפשרויות הרגילות של הגדלת הדף באופן ידני או באמצעות תנועת צביטה.