נְגִישׁוּת

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

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

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

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

סימון מבני

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

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

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

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

ניגודיות צבע

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

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

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

עבור בקרות אינטראקטיביות מוסתרות ויזואלית, כגון קישורי "דילוג" מסורתיים, .sr-onlyניתן לשלב עם .sr-only-focusableהכיתה. זה יבטיח שהבקרה תהיה גלויה לאחר מיקוד (עבור משתמשי מקלדת רואים).

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

תנועה מופחתת

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