נְגִישׁוּת

סקירה קצרה של התכונות והמגבלות של Bootstrap ליצירת תוכן נגיש.

בעמוד זה

Bootstrap מספקת מסגרת קלה לשימוש של סגנונות מוכנים, כלי פריסה ורכיבים אינטראקטיביים, המאפשרת למפתחים ליצור אתרים ויישומים מושכים ויזואלית, עשירים פונקציונלית ונגישים מהקופסה.

סקירה כללית ומגבלות

הנגישות הכוללת של כל פרויקט שנבנה עם Bootstrap תלויה במידה רבה בסימון המחבר, סגנון נוסף ותסריט שהם כללו. עם זאת, בתנאי שאלו יושמו כהלכה, זה אמור להיות אפשרי לחלוטין ליצור אתרים ואפליקציות עם Bootstrap העומדים ב- WCAG 2.1 (A/AA/AAA), סעיף 508 ותקני נגישות ודרישות דומות.

סימון מבני

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

רכיבים אינטראקטיביים

הרכיבים האינטראקטיביים של Bootstrap - כגון דיאלוגים מודאליים, תפריטים נפתחים וטיפים מותאמים אישית - מיועדים לעבוד עבור משתמשי מגע, עכבר ומקלדת. באמצעות שימוש בתפקידים ותכונות רלוונטיות של WAI - ARIA , רכיבים אלו צריכים להיות מובנים וניתנים להפעלה באמצעות טכנולוגיות מסייעות (כגון קוראי מסך).

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

ניגודיות צבע

שילובים מסוימים של צבעים המרכיבים כיום את פלטת ברירת המחדל של Bootstrap - המשמשת בכל המסגרת עבור דברים כגון וריאציות של לחצנים, וריאציות של התראה, מחווני אימות טפסים - עלולים להוביל לניגודיות צבע לא מספקת (מתחת ליחס ניגודיות צבע טקסט המומלץ של WCAG 2.1 של 4.5:1 ויחס ניגודיות צבע ללא טקסט של WCAG 2.1 של 3:1 ) , במיוחד בשימוש על רקע בהיר. מחברים מוזמנים לבדוק את השימושים הספציפיים שלהם בצבע, ובמידת הצורך, לשנות/להרחיב את צבעי ברירת המחדל הללו באופן ידני כדי להבטיח יחסי ניגודיות צבע נאותים.

תוכן שאמור להיות מוסתר ויזואלית, אך להישאר נגיש לטכנולוגיות מסייעות כגון קוראי מסך, ניתן לעצב באמצעות .visually-hiddenהכיתה. זה יכול להיות שימושי במצבים שבהם יש להעביר מידע חזותי או רמזים נוספים (כגון משמעות המסומנת באמצעות שימוש בצבע) גם למשתמשים שאינם חזותיים.

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

עבור פקדים אינטראקטיביים מוסתרים ויזואלית, כגון קישורי "דילוג" מסורתיים, השתמש .visually-hidden-focusableבכיתה. זה יבטיח שהבקרה תהפוך לגלויה לאחר מיקוד (עבור משתמשי מקלדת רואים). שימו לב, בהשוואה למקבילות .sr-onlyולמחלקות .sr-only-focusableבגרסאות קודמות, Bootstrap 5's .visually-hidden-focusableהיא מחלקה עצמאית, ואסור להשתמש בה בשילוב עם .visually-hiddenהמחלקה.

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

תנועה מופחתת

Bootstrap כולל תמיכה prefers-reduced-motionבתכונת המדיה . בדפדפנים/סביבות המאפשרות למשתמש לציין את העדפתו לתנועה מופחתת, רוב אפקטי המעבר של CSS ב-Bootstrap (לדוגמה, כאשר תיבת דו-שיח מודאלית נפתחת או סגורה, או הנפשה הזזה בקרוסלות) יהיו מושבתות, והנפשות בעלות משמעות ( כגון ספינרים) יואטו.

בדפדפנים שתומכים ב- prefers-reduced-motion, ובהם המשתמש לא סימן במפורש שהוא מעדיף תנועה מופחתת (כלומר איפה prefers-reduced-motion: no-preference), Bootstrap מאפשר גלילה חלקה באמצעות scroll-behaviorהמאפיין.