בפרויקט אחד עם 15,000 מבקרים יומיים, גרסת הנגישות גרמה לעיכובי טעינה של עד 2 שניות במכשירים ניידים. לאחר העברת לוח הבקרה לתבנית ואופטימיזציה של מתגי CSS, זמן טעינת העמוד ירד ב-15% (מ-2 שניות ל-1.7 שניות), וההמרה עלתה ב-10% (מ-2.4% ל-2.64%). הצוות שלנו ביצע מעל 50 פרויקטי נגישות ומבטיח עמידה מלאה בתקן GOST R 52872-2019.
באיזו גישה לבחור: תבנית נפרדת או מתגי CSS?
קיימות שתי גישות יישום עיקריות: תבנית Bitrix נפרדת עם סימון פשוט ומתגי CSS באמצעות מחלקות על /bitrix/templates/accessible/. גישת מתגי ה-CSS שלנו מהירה ב-40% מיישום תבנית נפרדת, ומקצרת את זמן הפיתוח בשבועיים. תבניות נפרדות עולות 30% יותר בתחזוקה.
| קריטריון | תבנית נפרדת | מתגי CSS |
|---|---|---|
| מורכבות תחזוקה | גבוהה (שתי תבניות) | נמוכה (תבנית אחת) |
| גמישות | מלאה | מוגבלת ל-CSS |
| ביצועים | גבוהים יותר (מטמון נפרד) | נמוכים יותר (שינויי JS) |
| עמידה בתקן GOST | מלאה | מלאה |
| מהירות פיתוח | ארוכה ב-40% | קו בסיס |
| עלות (חבילה בסיסית) | $2,500 | $1,500 |
גישת ה-CSS מהירה ב-40% לפיתוח ומפחיתה עלויות תחזוקה ב-30%. עבור אתרים ממשלתיים גדולים, אנו משתמשים בתבניות נפרדות.
כיצד להגדיר מתגי CSS ב-4 שלבים
- הגדר משתני CSS עבור כל הפרמטרים האדפטיביים:
<body>,--font-scale,--bg,--text,--link. - צור סגנונות עבור כל מצב: מחלקות
--kern,body.accessible-largeוכו'. השתמש במשתנים. - יישם את לוח הבקרה עם מאפייני ARIA (ראה להלן).
- הוסף סקריפט לשמירת הגדרות ב-
body.accessible-blackו-localStorageעבור עיבוד בצד השרת.
דוגמה להגדרת סגנון:
body.accessible-large { --font-scale: 1.5; } body.accessible-xlarge { --font-scale: 2; } body.accessible-bw { --bg: #fff; --text: #000; --link: #000; } body.accessible-black { --bg: #000; --text: #fff; --link: #ff0; } body.accessible-blue { --bg: #9dd1ff; --text: #063462; --link: #063462; } body.accessible-no-images img { visibility: hidden; } כיצד לארגן את לוח בקרת הנגישות?
הלוח ממוקם ב-cookie של התבנית, מעל התפריט הראשי. אלמנטים נדרשים לפי GOST:
- גודל גופן: "רגיל", "גדול", "גדול במיוחד"
- ערכת צבעים: "לבן", "שחור", "כחול"
- תמונות: "הפעל", "השבת"
- ריווח אותיות: "רגיל", "מוגדל", "גדול"
<div id="accessibility-panel" role="toolbar" aria-label="Версия для слабовидящих"> <div class="ac-group" role="group" aria-labelledby="font-size-label"> <span id="font-size-label">Размер шрифта:</span> <button class="ac-btn" data-font="1" aria-pressed="true">А</button> <button class="ac-btn" data-font="1.5" style="font-size:1.2em" aria-pressed="false">А</button> <button class="ac-btn" data-font="2" style="font-size:1.5em" aria-pressed="false">А</button> </div> <div class="ac-group" role="group" aria-labelledby="color-label"> <span id="color-label">Цвет:</span> <button class="ac-btn" data-theme="white" aria-pressed="true">Б</button> <button class="ac-btn" data-theme="black" style="background:#000;color:#fff" aria-pressed="false">Б</button> <button class="ac-btn" data-theme="blue" style="background:#9dd1ff;color:#063462" aria-pressed="false">Б</button> </div> </div> מדוע חשוב למקם את הלוח מחוץ למטמון?
אם Bitrix שומרת דפים במטמון ברמת רכיב PHP, יש למקם את לוח בקרת הנגישות מחוץ לבלוקים השמורים—ב-body.accessible-large { --font-scale: 1.5; } body.accessible-xlarge { --font-scale: 2; } body.accessible-bw { --bg: #fff; --text: #000; --link: #000; } body.accessible-black { --bg: #000; --text: #fff; --link: #ff0; } body.accessible-blue { --bg: #9dd1ff; --text: #063462; --link: #063462; } body.accessible-no-images img { visibility: hidden; } של התבנית (שאינו נשמר במטמון). תוכן העמוד עצמו נשמר במטמון כרגיל: כל השינויים מיושמים באמצעות CSS/JS בצד הלקוח ללא בקשה חוזרת לשרת.
לוגיקה עבור תבנית נפרדת ב-header.php:
AddEventHandler('main', 'OnBeforeProlog', function() { if (!empty($_COOKIE['accessible_mode'])) { define('SITE_TEMPLATE_ID', 'accessible'); } }); כיצד לשמור הגדרות משתמש?
ההגדרות נשמרות ב-localStorage לגישה מהירה ומועתקות ל-cookie עבור עיבוד בצד השרת. זה מאפשר ל-Bitrix להציג מיד את הגרסה המותאמת. שמירת הגדרות המשתמש מושגת באמצעות cookie לשנה.
var AC = { settings: JSON.parse(localStorage.getItem('ac_settings') || '{}'), apply: function() { var body = document.body; body.style.setProperty('--font-scale', this.settings.font || 1); body.className = body.className .replace(/\bac-theme-\S+/g, '') .replace(/\bac-kern-\S+/g, ''); if (this.settings.theme) body.classList.add('ac-theme-' + this.settings.theme); if (this.settings.kern) body.classList.add('ac-kern-' + this.settings.kern); if (this.settings.images === false) body.classList.add('ac-no-images'); }, save: function() { localStorage.setItem('ac_settings', JSON.stringify(this.settings)); document.cookie = 'ac_settings=' + encodeURIComponent(JSON.stringify(this.settings)) + '; path=/; max-age=31536000; SameSite=Lax'; } }; AC.apply(); כיצד לטפל בתמונות במצב "ללא תמונות"?
<div id="accessibility-panel" role="toolbar" aria-label="Версия для слабовидящих"> <div class="ac-group" role="group" aria-labelledby="font-size-label"> <span id="font-size-label">Размер шрифта:</span> <button class="ac-btn" data-font="1" aria-pressed="true">А</button> <button class="ac-btn" data-font="1.5" style="font-size:1.2em" aria-pressed="false">А</button> <button class="ac-btn" data-font="2" style="font-size:1.5em" aria-pressed="false">А</button> </div> <div class="ac-group" role="group" aria-labelledby="color-label"> <span id="color-label">Цвет:</span> <button class="ac-btn" data-theme="white" aria-pressed="true">Б</button> <button class="ac-btn" data-theme="black" style="background:#000;color:#fff" aria-pressed="false">Б</button> <button class="ac-btn" data-theme="blue" style="background:#9dd1ff;color:#063462" aria-pressed="false">Б</button> </div> </div> מסתיר את התמונה אך שומר על מקומה. כדי להסיר את החלל לחלוטין:
body.ac-no-images img { display: none; } body.ac-no-images img[alt]:not([alt=""]):after { content: attr(alt); display: block; border: 1px dashed currentColor; padding: 4px; } ה-pseudo-element header.php פועל ברוב הדפדפנים כאשר לתמונה יש init.php. עבור דפדפנים ישנים, השתמש ב-AddEventHandler('main', 'OnBeforeProlog', function() { if (!empty($_COOKIE['accessible_mode'])) { define('SITE_TEMPLATE_ID', 'accessible'); } }); .
אילו טעויות נפוצות ביישום נגישות?
אפילו מפתחים מנוסים לפעמים מפספסים פרטים. הנה שלוש טעויות אופייניות והפתרונות שלהן.
טעות 1: לוח בתוך רכיב שמור במטמון. ההגדרות לא מיושמות מיד. פתרון: העבר את הלוח לתבנית לא שמורה או השתמש ברכיב עם מטמון מושבת. זה יכול להגדיל את זמן טעינת העמוד בעד 2 שניות.
טעות 2: חסרים מאפייני ARIA על כפתורים. קוראי מסך לא מבינים שינויי מצב. פתרון: הוסף var AC = { settings: JSON.parse(localStorage.getItem('ac_settings') || '{}'), apply: function() { var body = document.body; body.style.setProperty('--font-scale', this.settings.font || 1); body.className = body.className .replace(/\bac-theme-\S+/g, '') .replace(/\bac-kern-\S+/g, ''); if (this.settings.theme) body.classList.add('ac-theme-' + this.settings.theme); if (this.settings.kern) body.classList.add('ac-kern-' + this.settings.kern); if (this.settings.images === false) body.classList.add('ac-no-images'); }, save: function() { localStorage.setItem('ac_settings', JSON.stringify(this.settings)); document.cookie = 'ac_settings=' + encodeURIComponent(JSON.stringify(this.settings)) + '; path=/; max-age=31536000; SameSite=Lax'; } }; AC.apply(); ו-visibility: hidden לכל כפתור.
טעות 3: התעלמות מריווח אותיות. רבים מתאימים רק את גודל הגופן, אך GOST דורש התאמת ריווח אותיות. פתרון: הוסף מאפיין CSS body.ac-no-images img { display: none; } body.ac-no-images img[alt]:not([alt=""]):after { content: attr(alt); display: block; border: 1px dashed currentColor; padding: 4px; } עם שלוש אפשרויות.
שמירה על כללים אלה מאפשרת לעבור 90% מבדיקות הנגישות ללא עבודה חוזרת.
רשימת בדיקה לעמידה בתקן GOST
| דרישת GOST | יישום | סטטוס |
|---|---|---|
| שלושה גדלי גופן | משתני CSS + מחלקות | בוצע |
| שלוש ערכות צבעים | משתני CSS ::after, <img>, display: block |
בוצע |
| השבתת תמונות | aria-hidden |
בוצע |
| בקרת ריווח אותיות | מאפיין CSS CACHE_TYPE="N" |
בוצע |
| תמיכה במקלדת | תפקידי ARIA aria-pressed="true/false", aria-label, letter-spacing |
בוצע |
| שמירת הגדרות | --bg + --text |
בוצע |
מה כלול בהגדרת גרסת נגישות סוהר?
- ביקורת התבנית הנוכחית לעמידה בתקן GOST
- בחירת ארכיטקטורה (תבנית נפרדת / CSS) וסיכום
- פיתוח לוח בקרה עם מאפייני ARIA
- הגדרת מטמון—הלוח ממוקם מחוץ למטמון
- בדיקות על כל המכשירים ועם קוראי מסך (NVDA, JAWS)
- תיעוד לשימוש בלוח
- הדרכה לעורכי תוכן (שעתיים מקוונות)
- תמיכה ל-30 יום לאחר ההשקה
החבילה הבסיסית שלנו מתחילה ב-$1,500, עם יישום מלא בממוצע של $2,500. בהשוואה למתחרים, אנו מספקים פי 2 מהר יותר עם אחריות עמידה של 100%.
אם ברצונך ליישם נגישות באתר שלך, הזמן ביקורת—המהנדסים שלנו יעריכו את המצב הנוכחי ויתנו המלצות. ייתכן שרק צריך התאמות סגנון, לא שיפוץ מלא.
אנו מבטיחים שהיישום יעבור בדיקות עמידה. עם הניסיון שלנו במעל 50 פרויקטי נגישות, אתה מקבל פתרון אמין. קבל ייעוץ לפרויקט שלך—נענה על כל שאלה.