על מה ולמה?

על אלו אתרים להיות נגישים?

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

שירות אינטרנט המסופק ע"י רשות ציבורית או בעבורה – ההתאמות יבוצעו ברמה AA לפחות.

שירות אינטרנט המסופק ע"י מי שאינו רשות ציבורית – ההתאמות יבוצעו ברמה AA, אלא אם קיבל בעל השירות פטור בשל נטל כבד מדי (סעיף 19יב לחוק) ואז הן יבוצעו ברמה A בלבד.

על פי מה מנגישים אתר האינטרנט?

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

קישור

אכיפה וענישה

  • המסלול הפלילי: המפר את התקנות עלול להיות חשוף להרשעה פלילית וכפל הקנס הקבוע בסעיף 61(א)(3) לחוק העונשין (כלומר, 150,600 ש"ח). כמו כן, ביהמ"ש רשאי, נוסף על כל עונש אחר, לצוות על הפסקת העיסוק בעסק לתקופה שיקבע.
  • מסלול מינהלי – הפרת צו נגישות: נציבות שוויון זכויות לאנשים עם מוגבלות רשאית להוציא צו נגישות לבעל אתר שהפר את התקנות. המפר את הצו לאחר שניתן, עשוי להקנס בשיעור של 5% לכל יום שבו נמשכת העבירה מעבר לתקופת הזמן שנקבעה בצו הנגישות. אם נעברה העבירה בידי תאגיד, עשוי להקנס התאגיד בכפל קנס הקבוע לאותה עבירה.
  • המסלול האזרחי - הכולל שני תתי מסלולים
    • תביעה פרטנית: כל אדם או ארגון יכול לתבוע את החייב בדרישה לבצע התאמות נגישות או לתבוע ל פיצוי כספי ללא הוכחת נזק עד 50 אלף ₪. אם הוכיח התובע כי נגרם לו נזק כספי בסכום גבוהה יותר – הוא יוכל לתבוע גם אותו.
    • תביעה ייצוגית: כל אדם עם מוגבלות או ארגון שמייצג אנשים עם מוגבלות ו/או העוסקים בקידום זכויותיהם של אנשים עם מוגבלות אלה יכולים לתבוע תביעה ייצוגית בשמם של אנשים עם מוגבלות. כיוון שמדובר בתביעה ייצוגית, על ביהמ"ש לאשר את הגשת התביעה הייצוגית לאחר שהשתכנע שהתקיימו התנאים המוקדמים לכך בחוק. בתביעות ייצוגיות הנוגעות לזכויותיהם של אנשים עם מוגבלות ניתן לתובע פיצויים גם ללא הוכחת נזק וכאמור לאחר אישור בית המשפט.

איך עושים ומה עושים?

תמונות

כן כן, שוב פעם תמונות. כל תמונה חייבת להיות עם תגית alt - בלי יוצא מן הכלל

image about image

אלמנטים HTML5

תגית תאור
<article> Defines an article in the document
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for the document or a section
<header> Defines a header for the document or a section
<main> Defines the main content of a document
<mark> Defines marked or highlighted text
<menuitem>  Defines a command/menu item that the user can invoke from a popup menu
<nav> Defines navigation links in the document
<progress> Defines the progress of a task
<section> Defines a section in the document
<summary> Defines a visible heading for a <details> element

Tags & Roles

HTML 5 ARIA Role
<header> role="banner"
<nav> role="navigation"
<main> role="main"
<footer> role="contentinfo"
<aside> role="complementary"
<section> role="region" *
<article> role="article" *
none role="search"
<form> role="form"

טפסים

מספיק שרק שדה אחד בטופס לא בנוי כמו שצריך - כל הטופס נחשב לא תקין!

Html markup:

<label for="inputID">Label name</label><input id="inputID" />
or:
<label for="inputID">Label name <input id="inputID" /></label>

Result:

תקציר דרישות הנגישות לפי רמות

רמה A

  • חלופה טקסטואלית לתוכן שאינו טקסט
  • ALT TAG  לתמונות
  • חלופה שמיעתית לCAPTCHA
  • עזרה בהזנת קלט
  • זיהוי אוטומטי של שגיאות קלט והתראה ממוקדת על השגיאה באמצעות טקסט (לדוג' שימוש בSPRY)
  • לספק הוראות מדויקות להזנת הקלט (לדוג' תיאור בLABEL)
  • חלופה למדיה המוקלטת מראש, וידאו או אודיו
  • קטע אודיו או וידאו יהיה בעל מנגנון עצירה, עוצמת הצליל וקצב ההשמעה
  • קטע אודיו – חלופה טקסטואלית
  • קטע וידאו – כתוביות
  • גמישות בהצגת התוכן בלי לאבד מידע
  • כותרת בעלת משמעות לכל עמוד
  • אין לעצב את הדף בצורה כמותית
  • סדר התוכן בעל משמעות
  • עיצוב ברור וקריא
  • תחביר תקין של קוד העמוד (HTML)
  • צבעים מנוגדים של הכתב והרקע
  • קישורים בעלי משמעות (אין להשתמש ב"לחץ כאן" וכד')
  • כל קישור, כפתור או דבר דומה יכיל כמה אלמנטים עיצוביים
  • לאפשר שליטה על גלילה, הבהוב ותנועה אוטומטיים
  • יש להמנע מעיצוב באופן הגורם להתקפים אפילפטיים
  • לא יותר משלושה הבזקים בשנייה אחת
  • תכני טקסט קריאים ונהירים
  • יש להשתמש בפירורי לחם (BREADCRUMBS)
  • רישום של שפת הממשק והתוכן בקוד העמוד
  • שליטה על האתר אך ורק באמצעות המקלדת
  • בלי דרישה לקצב הקלדה מסוים
  • אין להשתמש בהגדרת מוקד\פוקוס של המקלדת. מוקד המקלדת הוא האזור המסומן במסך הניתן להזזה באמצעות חיצי המקלדת, בדפי אינטרנט הוא אינו נראה באופן חזותי
  • הגדרת Tab index בעלת משמעות
  • משך זמן קריאה מספק של העמוד ללא ריענון אוטומטי
  • אפשרות שליטה על משך הזמן לקריאת העמוד (למעט אירועים בזמן אמת)
  • מנגנון שליטה על עדכונים אוטומטיים

רמה AA

  • חלופה למדיה בשידור חי, וידאו או אודיו
  • כתוביות בשידור חי
  • קטע ווידאו המוקלט מראש בעל כתוביות עם תיאורי אירוע או תיאור בשמע של האירועים
  • עזרה בהזנת קלט
  • הצעות לתיקון השגיאה בהזנת קלט
  • תמיד יתבקש אישור הפרטים המוזנים בטופס לאחר מילואם על-ידי הגולש תוך נתינת אפשרויות התיקון המתבקשות
  • מתן הזדמנות לתיקון שגיאות קלט
  • מסמך המאפשר סקירה של הפרטים ואישורם
  • גמישות בהצגת התוכן בלי לאבד מידע
  • אפשרות לשינוי גודל של טקסט עד 200% ללא שימוש באמצעי עזר
  • עיצוב ברור וקריא
  • אין להשתמש בתמונות של טקסט
  • שימוש בכותרות (HEADINGS) ותוויות (LABELS) כדי לתאר את התוכן באתר
  • יחס ניגוד של הטקסט והרקע 5:1
  • תכני טקסט קריאים ונהירים
  • רישום בקוד על שינוי השפה בחלקים שונים של הדף
  • שליטה על האתר
  • אפשרות לאיתור עמוד באתר באמצעות מספר דרכים
  • ממשק האתר יאפשר מציאת מוקד המקלדת באופן חזותי

רמה AAA

  • חלופה למדיה וידאו או אודיו
  • אין להשתמש בקטעי אודיו המשמשים כרקע אומנותי לתוכן האתר
  • ווידאו המוקלט מראש יהיה בעל תרגום לשפת הסימנים
  • תיאורים מורחבים בשמע לכל קטעים הווידאו
  • אודיו המשודר בחי יהיה בעל חלופה טקסטואלית
  • בקטע אודיו יהיה הבדל של 20 דציבלים בין קולות הרקע לדיבור הישיר אל המאזין
  • עיצוב ברור וקריא
  • יחס ניגוד של הטקסט והרקע 7:1

אז מה עושים???

Coming soon...

  1. מתקינים תוסף זה
  2. אחרי זה מתקנים עוד תוסף...
  3. לשים לב שמבנה של תבניות הוא דומה לזה:

קישורים חשובים

מדריך ישראלי למפתחים

מדריך ישראלי למעצבים

Icon font accessibility



דוגמאות