נגישות באתר HTML: שורה אחת לפני סוף הגוף

אתר HTML, תבנית בקוד, או אתר ישן בלי מערכת ניהול, הוא המקרה הפשוט של Negish: אין חנות תוספים ואין אשף. יש קובץ פריסה. השורה נכנסת פעם אחת במקום שרץ בכל העמודים, מיד לפני </body>.

חשוב: הסרגל מתאים את התצוגה לגולש. הוא אינו מחליף הנגשה בקוד, בדיקה מקצועית או הצהרת נגישות, ואינו מבטיח עמידה בת״י 5568 או ב-WCAG.

איפה בדיוק

אם יש קובץ משותף, למשל layout.html, footer.php שאינו וורדפרס, או partial של תבנית, מדביקים שם. אם כל עמוד הוא קובץ נפרד בלי שיתוף, צריך להדביק בכל קובץ, או קודם לאחד את הסוגר. הדבקה רק ב-index.html משאירה את שאר האתר בלי סרגל.

<script src="…/widget.js" data-site="המפתח-האישי" defer></script>

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

התכונה defer כבר נמצאת בקוד שאתם מעתיקים. לא מוחקים אותה ולא הופכים את הסקריפט למודול. לא שמים את השורה ב-head "כדי שייטען מוקדם". הסוף של הגוף הוא המקום שהאזור האישי מתאר.

טעויות שחוזרות באתרי קוד

• השורה הודבקה בתוך הערה, או נשברה באמצע כשמצמצמים HTML.
• מדיניות אבטחת תוכן (CSP) חוסמת את הדומיין של הסקריפט. צריך להתיר את הכתובת שמופיעה בקוד שלכם. בלי זה הכפתור לא יופיע, ובמסוף הדפדפן תהיה שגיאה.
• הסקריפט הודבק פעמיים, בפריסה וגם בעמוד. שני כפתורים, או אתחול כפול.
• אתר שנבנה ב-React או ב-Next.js נראה כמו HTML, אבל נקודת ההטמעה אחרת. לא להעתיק את ההסבר הזה ל-index.html של וויט אם הפרויקט הוא Next. המדריכים: React וNext.js.

מה הקוד שלכם עדיין צריך לספק

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

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

פריסה משותפת ומדיניות אבטחה

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

כותרת אבטחת תוכן צריכה להתיר את המקור של widget.js. החסימה מופיעה במסוף, לא כהודעה לגולש. מתקנים את המדיניות, לא מוחקים אותה. סקריפט כפול, בפריסה וגם בעמוד, יוצר שני כפתורים. משאירים עותק אחד. אתר React או Next לא משתמש בהסבר הזה כמו שהוא. שם נקודת ההטמעה אחרת.

עמוד חדש שלא שוכח את השורה

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

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

חיפוש במקור

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

שאלות נפוצות

האתר בלי JavaScript חוץ מהסרגל. זה בסדר?

כן. הסרגל הוא הסקריפט. שאר האתר יכול להישאר HTML. אל תהפכו פעולות בסיסיות, כמו תפריט, לתלויות בסרגל.

איפה רואים שהסקריפט נטען?

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

צריך לבנות את הווידג'ט מחדש אחרי שינוי באתר?

לא. המפתח נשאר. משנים עיצוב באתר בלי לגעת בשורה, כל עוד לא מחקתם אותה.

הרשמה וקבלת השורה לאתר.

חשוב: הסרגל מתאים את התצוגה לגולש. הוא אינו מחליף הנגשה בקוד, בדיקה מקצועית או הצהרת נגישות, ואינו מבטיח עמידה בת״י 5568 או ב-WCAG.