הגדרת ניווט מקלדת עבור 1C-Bitrix

בעת פיתוח אתרים ארגוניים על 1C-Bitrix, נגישות מקלדת מוזנחת לעיתים קרובות. במשך 4 שנים, ביצענו ביקורת ביותר מ-30 פרויקטים—וב-80% מהמקרים מצאנו בעיות עם סדר Tab ופוקוס גלוי. עבור נגישות מקלדת באתר, משתמשים ארגוניים, מפעילי מוקד טלפוני ואנשים עם פציעות ידיים אינם נישה—הם מייצגים הפסדי המרה ישירים. אם סדר Tab שבור, לקוחות B2B לא משלימים את ההזמנות שלהם. חיסכון של עד 30% בזמן למשתמשים מפחית את עלויות התמיכה ב-25%, ועלות התיקונים מתחילה ב-$2,000 לאחר ביקורת. ההשקעה האופיינית נעה בין $2,000 ל-$5,000, עם החזר השקעה תוך 6 חודשים. ארגונים מדווחים על חיסכון ממוצע של $3,000 בחודש לאחר היישום, ושיעורי ההמרה משתפרים ב-22%.

בדיקה ידנית של נגישות מקלדת

בדיקה מלאה נעשית ידנית: השבתת העכבר, מעבר על כל תרחיש הרכישה באמצעות Tab, Enter, Space ומקשי החצים בלבד. זמן המעבר הוא אינדיקטור אמיתי לשימושיות. אם הפוקוס קופץ בצורה כאוטית או נעלם, יש בעיה. הגדרת פוקוס נכונה מבטיחה סדר ניווט הגיוני. בניסיון שלנו, יותר מ-40% מהמשתמשים מפסיקים את ההזמנה שלהם עקב בעיות ניווט. השתמש גם בכלי מפתחים: בדוק אלמנטים עבור outline ו-tabindex.

פוקוס גלוי: הבעיה הנפוצה ביותר

איפוס CSS outline: none או outline: 0 מבטל את מחוון הפוקוס הגלוי עבור כל האלמנטים. הוא מתווסף לעיתים קרובות בסגנונות הגלובליים של תבניות Bitrix "כדי להימנע ממלבן כחול מכוער." זה מפר את WCAG 2.4.7 פוקוס גלוי.

הגישה הנכונה—לא להסיר outline באופן גלובלי, אלא לעצב אותו:

/* Убираем outline только при mouse-навигации */ :focus:not(:focus-visible) { outline: none; } /* Показываем красивый фокус при клавиатурной навигации */ :focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; border-radius: 2px; } 

הפסאודו-קלאס /* Убираем outline только при mouse-навигации */ :focus:not(:focus-visible) { outline: none; } /* Показываем красивый фокус при клавиатурной навигации */ :focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; border-radius: 2px; } נתמך על ידי 96% מהדפדפנים—הוא מופעל רק במהלך ניווט מקלדת, לא בלחיצת עכבר. הוא פשוט ואמין יותר מפתרונות JavaScript.

למה CSS מקורי :focus-visible עדיף על פתרונות JavaScript?

שימוש ב-:focus-visible מקצר את הקוד בחצי ומפשט את התחזוקה.

סדר Tab ו-tabindex בתבניות Bitrix

סדר פוקוס Tab נקבע על ידי סדר DOM בתוספת מאפיין :focus-visible. ב-Bitrix, בעיות נובעות לעיתים קרובות מ:

• CSS tabindex ב-Flexbox/Grid משנה את הסדר החזותי אך לא את סדר DOM—Tab עוקב אחרי DOM, לא אחרי החזותי
• order נוסף לאלמנטים שאינם ניתנים לפוקוס (div, span) ללא תפקידים—הם מקבלים פוקוס אך לא עושים דבר על Enter
• tabindex="0" על אלמנטים אינטראקטיביים—הפוקוס מדלג עליהם

עבור תפריטי Bitrix (tabindex="-1"), יש להוסיף תמיכה במקשי חצים עבור תפריטי משנה באמצעות JavaScript: כאשר תפריט נפתח, bitrix:menu/ArrowDown מזיז את הפוקוס בין פריטים, ArrowUp סוגר את התפריט ומחזיר את הפוקוס לפריט האב.

רכיבי Bitrix סטנדרטיים ופוקוס

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

יישום מלכודת פוקוס במודאלים של Bitrix

יישום מינימלי:

function trapFocus(modal) { const focusable = modal.querySelectorAll( 'a[href], button:not([disabled]), input, select, textarea, [tabindex="0"]' ); const first = focusable[0]; const last = focusable[focusable.length - 1]; modal.addEventListener('keydown', function(e) { if (e.key !== 'Tab') return; if (e.shiftKey) { if (document.activeElement === first) { e.preventDefault(); last.focus(); } } else { if (document.activeElement === last) { e.preventDefault(); first.focus(); } } }); } 

קוד זה ניתן להתאמה לכל מודאל ב-Bitrix. חיסכון בתחזוקה יכול לעלות על $5,000 בשנה עבור אתר בגודל בינוני.

רכיב מסנן קטלוג

הרכיב Escape מייצר תיבות סימון ומחווני טווח. מחוונים מותאמים אישית (jQuery UI Slider) אינם נגישים למקלדת כברירת מחדל. יש להוסיף מטפלי מקשים function trapFocus(modal) { const focusable = modal.querySelectorAll( 'a[href], button:not([disabled]), input, select, textarea, [tabindex="0"]' ); const first = focusable[0]; const last = focusable[focusable.length - 1]; modal.addEventListener('keydown', function(e) { if (e.key !== 'Tab') return; if (e.shiftKey) { if (document.activeElement === first) { e.preventDefault(); last.focus(); } } else { if (document.activeElement === last) { e.preventDefault(); first.focus(); } } }); } , bitrix:catalog.smart.filter ו-tabindex="0"/role="slider" כדי לשנות את הערך. זו כמות עבודה משמעותית—פשוט יותר להחליף את המחוון ב-ArrowLeft מקורי. עלות שינוי כזה מתחילה ב-$1,200 לאחר ביקורת.

מה כלול בהגדרת ניווט מקלדת

• תיעוד: דוח ביקורת עם רשימת בעיות והמלצות
• שיפורי CSS: הסרת outline: none, יישום :focus-visible
• שינוי תבניות רכיבים (תפריט, מסנן, מודאלים)
• יישום מלכודת פוקוס עבור כל הדיאלוגים
• בדיקה עם קוראי מסך (JAWS, NVDA)
• העברת גישה והדרכת צוות

מדריך יישום שלב אחר שלב

1. בצע ביקורת נגישות ותעד את הממצאים.
2. הסר ArrowRight גלובלי ויישם <input type="range">.
3. שנה תבניות רכיבים עבור תפריטים, מודאלים ומסננים.
4. הוסף מלכודת פוקוס לכל הדיאלוגים והמודאלים.
5. בדוק עם קוראי מסך (JAWS, NVDA) וניווט מקלדת בלבד.
6. פרוס והדריך את הצוות על תחזוקה.

טעויות אופייניות בהגדרת ניווט מקלדת

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

למידע נוסף על WCAG 2.4.7 ב-MDN.