נגישות · כלים חינמיים

רכיב נגישות חינמי לאתר: מה הוא עושה, איך מתקינים, ומה הוא לא עושה

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

· 6 דקות קריאה

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

מה הרכיב נותן לגולשים

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

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

גם הרכיב עצמו נגיש: אפשר לפתוח אותו מהמקלדת (Alt+A), לסגור ב-Escape, וקוראי מסך מקבלים מתגים עם מצב מופעל או כבוי.

איך מתקינים

מדביקים את השורה הזו לפני סגירת תגית ה-body באתר:

<script
  src="https://findthe.one/a11y/v1/fto-a11y.js"
  data-lang="he"
  data-statement-url="/accessibility"
  defer
></script>

זה הכל. בעמוד רכיב הנגישות יש מדריכים לוורדפרס, Wix, Shopify, Webflow, Google Tag Manager ו-Next.js, וטבלה של כל האפשרויות: שפה, צד המסך, צבע, קישור להצהרת נגישות ומייל לדיווח.

מחולל הצהרת נגישות

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

מה רכיב נגישות לא עושה

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

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

למה חינם?

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