תיקון הפרות WCAG ב-Bitrix: בדיקת נגישות והטמעה

קטלוג Bitrix הסטנדרטי נכשל בבדיקת Axe אוטומטית — 40 הפרות בעמוד הבית. זו לא סיבה לפאניקה, אלא עילה לבדיקה שיטתית. WCAG 2.1 ברמה AA אינו אופציונלי עבור אתרים ממשלתיים ופיננסיים ברוסיה. בשנים האחרונות, הרגולטורים מתייחסים ישירות לתקן במהלך בדיקות. אבל גם עבור פרויקטים מסחריים, נגישות משפיעה על SEO: בוטי חיפוש קוראים את האתר כמו קורא מסך — סמנטיקה גרועה פירושה אינדוקס גרוע. אנו מגדירים נגישות במפתח מלא: מבדיקה ועד בדיקות סופיות עם משתמשים אמיתיים. במשך 5 שנים השלמנו יותר מ-50 פרויקטי WCAG, כולל חנויות מקוונות גדולות על Bitrix.

אילו הפרות WCAG נפוצות ביותר ב-Bitrix

תבניות Bitrix "מן המדף" מפרות את WCAG מכמה סיבות מערכתיות. בואו נסתכל על השכיחות ביותר.

תמונות ללא alt. רכיב catalog.element מוציא <img> דרך CFile::ShowImage() — שיטה זו אינה מוסיפה alt אוטומטית. בתבנית, יש להעביר את המאפיין במפורש:

echo CFile::ShowImage($fileId, 800, 800, 'border="0"', 'alt="' . htmlspecialcharsEx($arResult['NAME']) . '"'); 

כפתורים ללא תוכן טקסטואלי. כפתורי אייקון כמו "הוסף לסל" עם אייקון SVG וללא טקסט מפרים קריטריון 1.1.1. התיקון המינימלי הוא להוסיף echo CFile::ShowImage($fileId, 800, 800, 'border="0"', 'alt="' . htmlspecialcharsEx($arResult['NAME']) . '"'); :

<button class="cart-btn" aria-label="Добавить в корзину"> <svg>...</svg> </button> 

תפריטי ניווט ללא סמנטיקה. רכיב aria-label הסטנדרטי מייצר <button class="cart-btn" aria-label="Добавить в корзину"> <svg>...</svg> </button> ללא bitrix:menu וללא <ul>/<li> — תפריטי ניווט מרובים בעמוד אינם ניתנים להבחנה עבור קוראי מסך. פתרון: לעטוף כל תפריט ב-<nav> עם aria-label ייחודי.

כיצד לתקן alt חסר ברכיב catalog.element

נראה עם דוגמה: לקוח הוא חנות מקוונת לחלקי רכב עם קטלוג של 10,000 פריטים. Axe מצא 400 הפרות alt. ערכנו את תבנית <nav> — ב-aria-label הוספנו מערך עם alt משדה catalog.element של האלמנט. לאחר מכן בתבנית התמונה מוצגת דרך result_modifier.php רגיל עם alt. בנוסף, נאלצנו לטפל בתמונות ב-SKU דרך אירוע NAME. כתוצאה מכך, הפרות alt ירדו ל-0, וזמן הטעינה לא גדל — גודל העמוד השתנה באופן זניח.

בדיקה באמצעות כלים אוטומטיים

לפני תיקוני קוד, יש צורך בבדיקת בסיס. לפי תיעוד WCAG (ראה Understanding Documents), כלים אוטומטיים אינם מחליפים בדיקה מומחית אך מאיצים מציאת שגיאות טיפוסיות. Axe DevTools (תוסף Chrome) מוצא הפרות עם הפניות לצמתי DOM תוך 30 שניות. Lighthouse (כרטיסיית Accessibility) נותן ציון 0–100. היעד ל-WCAG AA הוא 90+, אך 100 אינו מבטיח התאמה מלאה: אוטומציה אינה בודקת לוגיקה, רק סימון.

דוח טיפוסי לחנות Bitrix: 20–40 הפרות, מתוכן 60% <img> חסר, 20% בעיות ניגודיות, 10% OnGetImageAlt חסר בשדות טפסים.

בדיקה ידנית מגלה פי 3 שגיאות קריטיות יותר מאשר בדיקות אוטומטיות — זה מאושר על ידי הפרויקטים שלנו. Axe מוצא רק 30% מההפרות, בעוד בדיקה ידנית מוצאת 100%.

למה בדיקה אוטומטית אינה מספיקה

Axe מוצא רק מה שמקודד בחוקיו: ניגודיות, alt, aria. אבל הוא אינו בודק לוגיקת פוקוס, קריאות בקורא מסך או ניווט מקלדת. לדוגמה, אם כפתור מופיע דינמית, Axe יראה אותו אך לא יבדוק אם אפשר לנווט אליו עם Tab. בדיקה ידנית עם NVDA או JAWS היא חובה. בדיקה ידנית מגלה פי 3 שגיאות קריטיות יותר מאשר בדיקות אוטומטיות — זה מאושר על ידי הפרויקטים שלנו.

טפסים: שדות עם label

טפסי Bitrix (סל, הרשמה, callback) משתמשים לעתים קרובות ב-alt במקום label. זה מפר קריטריון 1.3.1 — placeholder נעלם בעת הזנת נתונים, ומשתמשים עם ליקויים קוגניטיביים מאבדים את הקשר לשדה.

רכיב <label> מייצר שדות דרך placeholder — יש לשכתב את התבנית עם bitrix:main.register מפורש:

<label for="USER_LOGIN">Логин</label> <input type="text" id="USER_LOGIN" name="USER_LOGIN" required aria-required="true" autocomplete="username"> 

קישור דילוג לניווט מקלדת

האלמנט הראשון בעמוד צריך להיות קישור "דלג לתוכן הראשי" — הוא מאפשר למשתמשי מקלדת לעקוף את הניווט. ב-Bitrix הוא מתווסף בתחילת $arResult['PERSONAL_FIELDS']:

<a class="skip-link" href="#main-content">Перейти к основному содержанию</a> 

CSS הופך אותו לגלוי רק בפוקוס:

.skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 0; top: 0; z-index: 9999; padding: 8px 16px; background: #000; color: #fff; } 

ניגודיות וגדלי גופנים

WCAG 2.1 AA דורש ניגודיות טקסט לרקע של לפחות 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול (18pt+). תוויות אפורות על רקע לבן (#999 על #fff) נותנות ניגודיות 2.85:1 — הפרה. בדקו עם הכלי WebAIM Contrast Checker, תקנו על ידי שינוי הצבע לפחות ל-#767676.

כיצד לבצע בדיקת WCAG ב-Bitrix: מדריך שלב אחר שלב

1. הריצו Axe DevTools על כל עמוד טיפוסי (עמוד הבית, קטלוג, כרטיס מוצר, סל, טופס).
2. אספו את הדוח — ייצאו JSON עם הפרות.
3. סווגו אותן לקבוצות: alt, ניגודיות, label, ARIA.
4. תקנו קודם את אלה שחוסמות את נתיב המשתמש (כפתורים ללא טקסט, קישור דילוג חסר).
5. חזרו על הבדיקה האוטומטית — ודאו שמספר ההפרות ירד.
6. בצעו בדיקה ידנית עם NVDA או JAWS על 3–5 תרחישים מרכזיים.

עלות הבדיקה והשינויים מחושבת באופן אישי. חיסכון שנתי בתמיכה יכול להיות משמעותי.

מה כלול בהגדרת נגישות במפתח מלא

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

ניסיון: יותר מ-50 פרויקטי נגישות על 1C-Bitrix, 5+ שנים בשוק. אנו משתמשים ב-WCAG 2.1 ובהמלצות רוסיות.