איך אפשר להנגיש עם תוסף?
הסבר טכני פשוט על הגישה שלנו: איך JavaScript יכול להפוך אתר לא נגיש לאתר שעומד בתקנות — בלי לשנות שורת קוד אחת באתר המקורי.
שתי גישות להנגשת אתרים
יש שתי דרכים עיקריות להפוך אתר לנגיש. לכל גישה יתרונות וחסרונות.
גישה 1: תיקון ברמת הקוד
מתכנת נכנס לקוד המקור של האתר ומתקן כל ליקוי ידנית: מוסיף תגיות alt לתמונות, מתקן מבנה כותרות, מוסיף labels לטפסים, משפר ניגודיות בצבעים.
גישה 2: תוסף JavaScript (Post-Load)
סקריפט שנטען אחרי הדף, סורק את כל האלמנטים ומוסיף את מאפייני הנגישות החסרים באופן דינמי. פועל כשכבה מעל האתר הקיים.
דוגמאות קוד: איך זה נראה בפועל
ארבע דוגמאות שמדגימות בדיוק איך JavaScript מטפל בהנגשה — מתיקון בסיסי ועד תוכן דינמי.
הקדמה קטנה
כדי להבין את פעולת התוסף, חשוב להכיר שתי דרכים עיקריות ליישום נגישות באתר:
- הנגשה ברמת הקוד — כתיבת הקוד כבר מראש בצורה נגישה.
- הנגשה לאחר טעינת הדף — באמצעות סקריפט שמבצע את ההתאמות לאחר שכל התוכן נטען.
מבחינת המשתמש — במיוחד אדם עם מוגבלות — אין שום הבדל בין שתי השיטות. גם כאשר ההנגשה נבנית בתוך הקוד, עדיין יש מצבים שדורשים שינוי בזמן אמת באמצעות JavaScript. לדוגמה: כפתור שמציג או מסתיר מידע צריך לעדכן את קורא המסך האם המידע גלוי או מוסתר.
<button aria-expanded="false"
aria-controls="infoPanel"
onclick="togglePanel(this)">
הצג מידע נוסף
</button>
<div id="infoPanel" hidden>
<p>מידע חשוב לגולש...</p>
</div>
<script>
function togglePanel(btn) {
const panel = document.getElementById('infoPanel');
const isExpanded = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', !isExpanded);
panel.hidden = isExpanded;
}
</script>אז איך התוסף שלנו עובד בפועל?
התוסף הוא קובץ JavaScript שמופעל רק לאחר שכל תוכן העמוד נטען. הוא משתמש בקובץ הגדרות מותאם אישית שבו אנו מציינים בדיוק אילו התאמות צריכות להתבצע ולאילו אלמנטים.
ההתאמות כוללות תוספות של תגיות ARIA, תיאורים לקוראי מסך, שיפור פוקוס, ניווט מקלדת ועוד — לפי הצורך של כל אתר. כאשר התוסף מתחיל לפעול הוא עובר על ההגדרות ומפעיל את הפונקציות הדרושות לכל אלמנט.
<script>
window.addEventListener('load', () => {
const button = document.querySelector('#myButton');
if (button) {
button.setAttribute('role', 'button');
button.setAttribute(
'aria-label',
'שלח טופס'
);
}
});
</script>ומה אם תוכן נטען אחרי שהתוסף סיים לרוץ?
כאן נכנסים לתמונה תכנים דינמיים — תוכן שמוזרם לעמוד רק לאחר טעינתו (למשל דרך AJAX או API).
הליבה של התוסף שלנו מנצלת את היכולות של JS ומבצעת "מעקב בזמן אמת" — מזהה מתי נוסף תוכן חדש לעמוד, ואז מבצעת עליו התאמות נגישות בדיוק כמו על תוכן רגיל.
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node.nodeType === 1 &&
node.matches('.dynamic-content')) {
node.setAttribute('tabindex', '0');
node.setAttribute('aria-live', 'polite');
}
});
});
});
observer.observe(document.body, {
childList: true,
subtree: true
});האם יש מגבלות?
כן, מגבלה אחת חשובה: כאשר מנגישים ישירות בקוד האתר — התוכן כבר מגיע מונגש מהשרת עצמו.
אבל כשמנגישים באמצעות JS — צריך להמתין שהתוכן ייטען מהשרת, שהדפדפן יסיים לעבד אותו, ורק אז ניתן לעבור עליו ולבצע את ההתאמות. זה לא מונע את הנגישות, אבל מוסיף שלב ביניים של זמן עיבוד שצריך לקחת בחשבון.
<!-- תוכן שמגיע מונגש מהשרת -->
<img src="product.jpg"
alt="תמונה של מוצר חדש" />
<!-- תוכן שמוזרם לדף בצורה דינמית -->
<script>
setTimeout(() => {
const img = document.createElement('img');
img.src = 'product.jpg';
document.body.appendChild(img);
// מוסיפים את הטקסט האלטרנטיבי רק לאחר טעינה
setTimeout(() => {
img.alt = 'תמונה של מוצר חדש';
}, 100);
}, 1000);
</script>איך התוסף עובד בפועל
איך זה עובד מאחורי הקלעים
התוסף של UA נטען אחרי שהדפדפן סיים לרנדר את העמוד (DOMContentLoaded). ברגע שהוא פעיל, הוא סורק את ה-DOM — עץ האלמנטים של העמוד — ומבצע סדרה של תיקונים:
- מוסיף תגיות ARIA (role, aria-label, aria-describedby) לאלמנטים שחסרים בהם
- יוצר מבנה סמנטי תקין — כותרות, רשימות, אזורים (landmarks)
- מטפל בניווט מקלדת — סדר Tab, פוקוס נראה, קיצורי מקלדת
- מציג תפריט נגישות עם כלים מותאמים אישית לגולש
בלי פגיעה בביצועים
התוסף נטען באופן אסינכרוני ושוקל פחות מ-50KB (gzipped). הוא לא חוסם את הרנדור הראשוני של הדף ולא פוגע ב-Core Web Vitals. הסקריפט רץ רק אחרי שהעמוד מוכן — כך שהגולש לא מרגיש שום עיכוב.
מתעדכן עם האתר
בניגוד לתיקון ברמת הקוד, התוסף סורק את העמוד מחדש בכל טעינה. אם הוספתם תוכן חדש, שיניתם תמונה או עדכנתם טופס — התוסף מזהה את השינוי ומנגיש אותו אוטומטית.
הגישה שלנו: שילוב חכם
ב-UA אנחנו לא מסתמכים רק על אוטומציה. התוסף שלנו נכתב ומתוחזק ידנית עבור כל אתר — קוד מותאם אישית שמכיר את המבנה הספציפי של האתר שלכם, בשילוב עם מנוע אוטומטי שמטפל בתוכן דינמי.
רוצים לראות את הטכנולוגיה בפעולה?
בדקו את האתר שלכם בחינם וקבלו דוח מפורט על מצב הנגישות.