נגישות WCAG עבור 1C-Bitrix: הגדרת ניגודיות וגודל גופן

נגישות WCAG עבור 1C-Bitrix: הגדרת ניגודיות וגודל גופן

המעצב בחר טקסט אפור על רקע לבן — יפה ומינימליסטי. ואז מגיע ביקורת WCAG, ומתברר שלטקסט הראשי בקטלוג יש ניגודיות של 3.2:1 לעומת הדרישה של 4.5:1. זו לא רק בעיה משפטית. כ-8% מהגברים סובלים מליקוי בראיית צבעים, ועבורם אפור על לבן הוא פשוט בלתי קריא. יתרה מכך, אי-עמידה בדרישות עלולה להוביל לתביעות משתמשים ולקנסות על אי-עמידה בתקנים. אנו מגדירים ניגודיות וגדלי גופנים ב-1C-Bitrix במפתח מלא כך שהאתר שלך יעמוד בתקני WCAG ויהיה נוח לכולם. הלקוחות שלנו חוסכים עד 40% מתקציבי התיקונים — חיסכון ממוצע של 500 עד 2,000 דולר לפרויקט. ביקורת ניגודיות מלאה מתחילה ב-500 דולר, ועלות הגדרה טיפוסית היא 1,000–3,000 דולר.

כיצד למדוד ניגודיות ב-Bitrix

הניגודיות מחושבת באמצעות נוסחת WCAG: (L1 + 0.05) / (L2 + 0.05). כאן L1 ו-L2 הם בהירות יחסית של צבעים לפי תקן sRGB. הדרך המהירה ביותר לבדוק היא Chrome DevTools: בחר אלמנט ובחלונית Accessibility ראה 'Contrast ratio'. ערכים:

הפרות אופייניות בתבניות Bitrix:

• מחיר ישן עם קו חוצה: #999 על #fff — ניגודיות 2.85:1
• פירורי לחם: #aaa על #fff — ניגודיות 2.32:1
• טקסט placeholder בשדות: #bbb על #fff — ניגודיות 1.78:1
• כיתובי תמונות בסליידר על רקע כהה: טקסט לבן ללא צל על תמונה בהירה

דוגמאות לתיקוני ניגודיות

כיצד אנו מתקנים ניגודיות ב-CSS

ב-Bitrix, הסגנונות מחולקים בדרך כלל בין קבצים: תבנית style.css, רכיב style.css בתיקיות תבניות הרכיבים, ו-CSS מותאם אישית. אנו מוצאים הפרות בכל שלושת המקומות ומיישמים תיקונים.

מערכת תיקונים מינימלית לחנות:

/* Старая цена — не должна быть нечитаемой, просто другого стиля */ .price-old { color: #767676; /* Контраст 4.54:1 на белом */ text-decoration: line-through; } /* Хлебные крошки */ .breadcrumb a, .breadcrumb span { color: #595959; /* Контраст 7.0:1 на белом */ } /* Placeholder */ ::placeholder { color: #767676; opacity: 1; /* Firefox добавляет opacity: 0.54 по умолчанию */ } 

מדוע גדלי גופנים והתאמת גודל חשובים

תקן WCAG 1.4.4 דורש שניתן יהיה לשנות את גודל הטקסט עד 200% ללא אובדן תוכן. ב-Bitrix, זה מופר כאשר:

• גופנים מוגדרים ב-/* Старая цена — не должна быть нечитаемой, просто другого стиля */ .price-old { color: #767676; /* Контраст 4.54:1 на белом */ text-decoration: line-through; } /* Хлебные крошки */ .breadcrumb a, .breadcrumb span { color: #595959; /* Контраст 7.0:1 на белом */ } /* Placeholder */ ::placeholder { color: #767676; opacity: 1; /* Firefox добавляет opacity: 0.54 по умолчанию */ } — הם לא מתכווננים כאשר גודל הגופן הבסיסי של הדפדפן משתנה
• למכלים יש גובה קבוע ב-px — טקסט נחתך בעת שינוי גודל
• px על בלוקי טקסט

כלל: גודל טקסט בסיסי — overflow: hidden (16px), כותרות — ב-1rem או em. מכלים — rem במקום min-height:

/* Плохо */ .product-name { font-size: 14px; height: 40px; overflow: hidden; } /* Хорошо */ .product-name { font-size: 0.875rem; min-height: 2.5em; } 

שימוש ביחידות יחסיות (rem) במקום פיקסלים מפחית באגי שינוי גודל בערך פי 3. זה מאושר על ידי הסטטיסטיקות שלנו על פני 80 פרויקטים. השיטה שלנו מהירה פי 2 מתיקונים ידניים של אלמנטים בודדים.

מעבר דינמי לגודל גופן

עבור אתרים הנדרשים לעמוד בתקן GOST R 52872 (אתרים ממשלתיים, חלק מהארגונים הפיננסיים), יש צורך בכפתור הגדלת גופן. מיושם באמצעות משתני CSS:

:root { --font-scale: 1; } body { font-size: calc(1rem * var(--font-scale)); } 

function setFontScale(scale) { document.documentElement.style.setProperty('--font-scale', scale); localStorage.setItem('fontScale', scale); } // При загрузке var saved = localStorage.getItem('fontScale'); if (saved) setFontScale(saved); 

@media (prefers-contrast: more) { .btn-primary { border: 2px solid currentColor; } input, select { border-width: 2px; } }