איך להטמיע תוסף נגישות באתר HTML מותאם אישית תוך 5 דקות - מדריך שלב-אחר-שלב

איך להטמיע תוסף נגישות באתר HTML מותאם אישית תוך 5 דקות - מדריך שלב-אחר-שלב. המדריך עוסק בהטמעת תוסף נגישות באתר HTML מותאם אישית עבור אתר HTML מותאם אישית, ושומר על גבול אחד: סרגל הנגישות של Negish מסייע לגולש לשנות תצוגה, ואינו מחליף הנגשה של התוכן, בדיקה, או הצהרה.

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

למי המדריך הזה

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

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

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

מה הסרגל עושה ומה הוא לא עושה

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

הסרגל אינו סורק. הוא לא מוציא דוח, לא מסמן שגיאות בקוד, ולא קובע שהאתר עומד בת״י 5568 או ב-WCAG. מי שכותב באתר «האתר הונגש» רק כי הסרגל מותקן מתאר עבודה שלא נעשתה. הצהרה כזו פוגעת באמינות יותר מאשר היעדר סרגל.

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

לפני שמעתיקים את שורת הקוד

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

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

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

התקנה בפועל

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

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

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

כותרות, קישורים וטקסט חלופי

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

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

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

טפסים, מסמכים וטלפון

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

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

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

ניגודיות, תנועה ומקלדת

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

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

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

עברית, אנגלית והצהרה

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

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

אפשר לסמן ידנית קריטריונים בלשונית בדיקת WCAG 2.2 באזור האישי, ולהעתיק פסקה שמדווחת רק על מה שסומן, עם תאריך והיקף. הפסקה לא אומרת «תואם». היא אומרת מה נבדק. עמוד ההצהרה באתר נשאר חובה גם אם אותו טקסט מופיע מתוך הסרגל.

חובה, תקן, ומה לא לכתוב

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

ת״י 5568 חלק 1 מפנה לרמת AA על בסיס WCAG 2.0, והתקנות מפנות לתקן הזה. WCAG 2.2 הוא המלצת W3C עדכנית יותר, עם קריטריונים נוספים. האתר של Negish מפרסם מדריך לקריטריונים בעמוד התקנים. המדריך אינו תרגום רשמי ואינו תעודה. סרגל באתר אתר HTML מותאם אישית לא «מעלה» את האתר מגרסה לגרסה.

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

חינם, תשלום, וההבדל שחשוב

חבילת החינם של Negish כוללת את אותם 18 כלים, עד 7,000 צפיות בחודש. חבילת מקצועי עולה 249 ש״ח לשנה. ההבדל במחיר אינו הבדל ב«רמת נגישות» של האתר. אתר אתר HTML מותאם אישית לא נעשה תקין יותר כי שילמו, ולא נעשה לא תקין כי נשארו בחינם.

בוחרים חבילה לפי תנועה ולפי מה שצריך מסביב: יותר מאתר אחד, בלי המותג של Negish על הסרגל, ועמודי הצהרה נוספים. מי שמחפש «תוסף חינם» ומקבל סרגל מלא בכלים עד תקרת הצפיות, קיבל את מה שהעמוד הזה מתאר. מי שעובר את התקרה צריך חבילה שמכסה את הנפח, אחרת הסרגל לא יוצג מעבר למכסה.

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

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

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

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

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

סדר עבודה קצר

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

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

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

בדיקה עם אדם, לא רק עם הכפתור

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

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

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

לאן ממשיכים

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

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

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

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