איך אפשר להנגיש עם תוסף

הקדמה קטנה

כדי להבין את פעולת התוסף, חשוב להכיר שתי דרכים עיקריות ליישום נגישות באתר:

הנגשה ברמת הקוד – כלומר, כתיבת הקוד כבר מראש בצורה נגישה.
הנגשה לאחר טעינת הדף – באמצעות סקריפט שמבצע את ההתאמות לאחר שכל התוכן נטען.

מבחינת המשתמש – במיוחד אדם עם מוגבלות – אין שום הבדל בין שתי השיטות. החוויה היא נגישה ונוחה בכל מקרה. אבל מאחורי הקלעים, חשוב לדעת שגם כאשר ההנגשה נבנית בתוך הקוד – עדיין קיימים מצבים שבהם נדרש שינוי בזמן אמת. לדוגמה: כפתור שמציג או מסתיר מידע – צריך לעדכן את הקורא מסך האם המידע גלוי או מוסתר, פעולה שמתבצעת לרוב באמצעות JavaScript (בקיצור: JS).

דוגמה להנגשה ברמת הקוד (HTML מותאם מראש)


                    <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>

הסבר לקוד: הכפתור כולל מאפייני נגישות (aria-expanded ו־aria-controls) ופונקציה בשפת JS כדי לעדכן קוראי מסך בזמן אמת.

אז איך התוסף שלנו עובד בפועל?

התוסף הוא למעשה קובץ 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 });

הסבר לקוד: ברגע שתוכן חדש מתווסף לדף (למשל, דרך AJAX), התוסף מזהה אותו ומבצע התאמות נגישות רלוונטיות.

האם יש מגבלות?

כן, מגבלה אחת חשובה:
כאשר מנגישים ישירות בקוד האתר – התוכן כבר מגיע מונגש מהשרת עצמו. אבל כשמנגישים באמצעות 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>

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

דקה אחת מזמנכם
תחסוך לכם כאבי ראש ואלפי שקלים!
השאירו פרטים כבר עכשיו