נגישות לאינטרנט הלכה למעשה - הנחיות וטכניקות

נגישות לאינטרנטהלכה למעשה - הנחיות וטכניקות

גילה גרטל | יועצת נגישות לאינטרנט

WCAGהנחיות נגישות אתרים

חשוב לדעת! 1999 נוכחית משנת 1גרסה תהפוך לגרסה רשמית 2008 אפריל 2טיוטא סופית לגרסה

.2008במהלך

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

שלוש רמות נגישות:A רמה ראשונה )בסיסית( –בתקנות הישראליות תחייב אתרי גופים –

פרטיים

AAרמה שנייה –בתקנות הישראליות תחייב אתרי רשויות –

AAAרמה שלישית –

ההבדלים בין הגרסאות: הנחיות ברמה העקרונית ללא 2 תלוית טכנולוגיה. גרסה 1גרסה 1.

.תלות בטכנולוגיהקיימים שינויים בחלק מההנחיות וברמת הנגישות אליהן הן משויכות.2.

http://www.w3.org/TR/WAI-WEBCONTENT/

של הנחיות הנגישות2מבנה גרסה

( נגישות Principlesארבעה עקרונות )עיקריים:

(Perceivableניתן לתפיסה )1.

(Operableבר הפעלה )2.

(Understandable)מובן 3.

(Robust) יציבות טכנולוגית4.

( Guide lines)תחת כל עקרון יש מספר הנחיות

לכל הנחיה מוגדרים קריטריונים להצלחה

(Success Criteria המסווגים לפי שלוש )

רמות הנגישות.

לכל קריטריון יש טכניקות ליישום, טכניקות .לא ראויות והגדרת בדיקה

במצגת זו נציג את כל הנחיות הנגישות ברמה A ו AA וניתן דוגמאות לטכניקות ליישום חלק

מההנחיות.

1.Principle1.1 Guide line1.1.1Success Criteria1.1.2 Success Criteria1.2 Guide line1.2.1 Success Criteria1.2.2 Success Criteria2.Principle2.1 Guide line2.1.1Success Criteria2.1.2 Success Criteria1.2 Guide line2.2.1 Success Criteria2.2.2 Success Criteria

(:perceivable עקרון התפיסה ) וודא שכל התכנים מוצגים באופן שהמשתמש יוכל לתפוס

חלופה טקסטואלית לתוכן שאינו טקסטואלי.1.1

ספק חלופה טקסטואלית מסונכרנת למדיה 1.2מבוססת זמן.

צור תוכן שאפשר להציגו במספר אופנים )תצוגה 1.3פשוטה, הקראה, הגדלה(

מובחנות – אפשר למשתמש לראות ולשמוע מידע 1.4

1

הנחיות:

כללי נגישות – תפיסה

. ספק חלופות טקסטואליות לכל התכנים שאינם טקסט1.1

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

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

חשוב: הפונקציונאליות ו/או המידעהטקסט החלופי יתאר את

המועבר באמצעות האלמנט הויזואלי.

>IMG src=“search.gif" alt="חפש">

כללי נגישות – תפיסה. ספק חלופות טקסטואליות לכל התכנים שאינם טקסט1.1

אפשר לקוראי מסך להתעלם מתוכן גרפי )תמונה, 2.פלאש וכד'( שאין בו מידע – כלומר משמש לדקורציה

בלבד תמונות המשמשות לקישוט או ריווח בלבדAlt”“= ,פלאש המשמש לקישוט בלבד

>object ...><param name="wmode" value="opaque"><embed wmode="opaque" ...></embed></object<


. ספק חלופות טקסטואליות לכל התכנים שאינם טקסט1.1

CAPTCHAחלופה ל3.

liveלסרטים ואנימציות שהן לא כתוביות 1.

להתרחשויות או טקסט חלופי תיאורי אודיו2.משמעותיות או חלופת טקסט מלאה – למשל השמעת

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

פרס".

)live )AAכתוביות לסרטים אנימציות ב 3.

(AA) תיאורי אודיו4.


. חלופות למולטימדיה מסונכרנות עם ההתרחשויות על 1.2המסך


. צור תוכן שאפשר להציגו במספר אופנים1.3

צור מידע ויחסים המועברים למשתמש באמצעות עיצוב -הפרדה בין תוכן/מידע ומבנה לבין תצוגה. ההפרדה תישמר

גם אם המשתמש או האמצעי ישנה את פורמט התצוגה.ספק מידע באמצעותו - מידע מבנה והיחסים1.

המשתמש יכול להבין )באמצעים טכנולוגים( מהו מידע מבנה והיחסים בין חלקי המידע.

נכון של העמוד המבטא את הקשר בין סדר הקריאה2.היחידות בעמודת. לדוגמא: כותרות לטבלאות

הגדרה של כיוון שימו לב בעברית יש להקפיד על לעולם לא לכתוב בעברית dir, rlm, lrm הכתיבה

ויזואלית!!!!

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

סאונד.


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


. צור תוכן שאפשר להציגו במספר אופנים 1.3

– כותרותh1-h6 המבטאות בצורה אמינה את היררכית

את CSSהמידע. רצוי להגדיר ב שלהםStyleה

רשימות – ניתן לניתן להגדיר כחלק bullet תמונה כ-CSSב-

מהגדרת עיצוב הרשימה. –באמצעות רשימהתפריטים

כותרות לframe ול iframe

)טפסים )פרוט בהמשך

)טבלאות נתונים )פרוט בהמשך

ul{List-style: square inside url)'arrow.gif'(}

h1 {

letter-spacing: 1em; font-family: Times, serif;

font-size:400%; font-weight:bold;

}

Drilldown


. צור תוכן שאפשר להציגו במספר אופנים 1.3

טבלאות נתונים פשוטות

השתמש בTHלכותרות

שימוש בcaption element כדי לקשר בין כותרת הטבלה לטבלה

שימוש בsummary elementלתיאור תוכן הטבלה

– קיצור כותרותattribute abbr

<th abbr="Employees">Number of Employees</th>

Drilldown



טבלאות נתונים מורכבות

כדי לקשר בין תאים בטבלה לכותרותscope attributeשימוש ב

Table 1: Company data

Employees

Founded

ACME Inc10001947

XYZ Corp20001973

<table summary="The number of employees and the foundation year of some imaginary companies."> <caption>Table 1: Company data</caption> <tr> <td></td> <th scope="col">Employees</th> <th scope="col">Founded</th> </tr> <tr> <th scope="row">ACME Inc</th> <td>1000</td> <td>1947</td> </tr> <tr> <th scope="row">XYZ Corp</th> <td>2000</td> <td>1973</td> </tr> </table>

Drilldown



טבלאות נתונים מורכבות

Header ו IDדרך נוספת - שימוש ב

כדי לקשר בין תאים בטבלה לכותרות

<table class="extbl" summary="The number of employees and the foundation year of some imaginary companies."> <caption>Table 1: Company data</caption> <tr> <td rowspan="2"></td> <th id="employees" colspan="2">Employees</th> <th id="founded" rowspan="2">Founded</th> </tr> <tr> <th id="men">Men</th> <th id="women">Women</th> </tr> <tr> <th id="acme">ACME Inc</th> <td headers="acme employees men">700</td> <td headers="acme employees women">300</td> <td headers="acme founded">1947</td> </tr> <tr> <th id="xyz">XYZ Corp</th> <td headers="xyz employees men">1200</td> <td headers="xyz employees women">800</td> <td headers="xyz founded">1973</td> </tr> </table>

Table 1: Company data

EmployeesFounded

MenWomen

ACME Inc7003001947

XYZ Corp12008001973

Drilldown


מובחנות – אפשר למשתמש לראות ולשמוע מידע 1.4

- כאשר נעשה שימוש בצבע כדי להעביר שימוש בצבע1.מידע, השתמש באלמנט ויזואלי נוסף שיצור את

, איקון, מסגרת(. emההבחנה )גודל פונט,

- אפשר לכבות או להשקיט סאונד שליטה על אודיו2. שניות(3המושמע באופן אוטומטי )יותר מ

בין הרקע 5:1 - הקפד על קונטרס של קונטרסט3.(AA). 3:1לטקסט. בתמונות הקונטרסט צריך להיות

של 200% - אפשר הגדלה של עד הגדלת טקסט4. (AA)טקסטים ללא שימוש בעזרים מיוחדים

underlineשימו לב: קישורים בתוך טקסט חייבים להיות מוצגים עם

ניתן לספק למשתמש שליטה בצבעוניות וגודל בממשק האתר

לדוגמא – מה תופס עיוור צבעים?

מה כתוב משמאל ללוגו של החברה?

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

אתר באמצעות צבעים לעיוורון //:הסימולציה . .http www vischeck com

http://www.vischeck.com/

כללי נגישות(:operable עקרון ההפעלה )

וודא שכל המשתמשים יכולים להפעיל את ממשק האתר.2

הפעולות ניתנות שכל הבטח 2.1לביצוע באמצעות מקלדת.

תן למשתמשים מספיק זמן 2.2לקריאה, לאינטראקציה או

לתגובה. אל תיצור תוכן שעלול לגרום 2.3

להתקף אפילפטי.

עזור למשתמשים לנווט, 2.4להתמצא ולמצוא מידע.

הנחיות:

כללי נגישות – הפעלה

הבטח שכל הפעולות ניתנות לביצוע באמצעות מקלדת.2.1

כל הפעולות באתר צריכות מבוצעות באמצעות מקלדת )שימו לב לתפריטים – בהרבה אתרים הם לא נגישים(

אלמנטים שיש להםonmouseover attribute צרכים שיהיה המקושרים event handlers וה onfocus attributeלהם גם

אליהם צרכים ליצור את אותן פעולות. אלמנטים שיש להםonmouseout attribute צרכים שיהיה

המקושרים event handlers וה onblur attributeלהם גם אליהם צרכים ליצור את אותן פעולות.

יש לשמור עלTabIndex תקין ולוגי )באמצעות (TabIndex.


אין "מלכודות" מקלדת2.1

לא יהיה מצב בו המשתמש במקלדת נכנס לרכיב במסך ואינו יכול לצאת ממנו באמצעות המקלדת.

applet ה focus שמשתלט על ניהול הappletלדוגמא – אם יש לעמוד, או שיכלול הסבר focusידאג להחזיר את ה

ופונקציונאליות המחזירה את הפוקוס לעמוד.


תן למשתמשים מספיק זמן לקריאה, לאינטראקציה או 2.2לתגובה.

- בכל מצב של הגבלת זמן, אפשר למשתמש כוונון זמן1.לבצע אחת מהפעולות הבאות:

)למעט מקרים שהגבלת הזמן הכרחית – מכירה פומבית, או משחק על זמן(

.לכבות את הגבלת הזמן.להתאים את הגבלת הזמן להגדיל את הגבלת הזמן – ע"י הודעה לפני ה

Timeoutredirect או auto refresh מפריעים לעבודת "קורא המסך" – יש לאפשר

למשתמש לעצור אותם.

– ניתן לעצור תנועה, הבהוב, סקרולינג או עדכון עצירה2.(AA)אוטומטי של תוכן


אל תיצור תוכן שעלול לגרום להתקף אפילפטי.2.3

פעמים בשנייה או שהריצוד נמוך 3תוכן אינו מרצד יותר מ .general flash and red flash thresholdsמ


עזור למשתמשים לנווט, להתמצא, לדעת היכן הם 2.4נמצאים ולמצוא מידע.

ספק מנגנון לעקיפת בלוקים של תוכן - עקיפת בלוקים1.שחוזרים על עצמם בהרבה עמודים )כגון תפריטים(.

ייחודי לעמוד המתאר את תוכן Page Title - כותרת לעמוד2.העמוד

.3Focus Order– באמצעות לוגיTabindex

)הקישור לא מטרת הקישור צריכה להיות ברורה וייחודית4.יהיה "לחץ כאן" "לפרטים נוספים"(

- מפת אתר, ( AA) קיימת יותר מדרך אחת לאתר מידע5.מנוע חיפוש, תוכן עניינים וכד'.

(AA) תיאורייםlabelsכותרות ו 6.

)Focus )AAנראות של ה 7.

כללי נגישות

(:Understandable עקרון המובנות )

צור תכנים ואמצעי אינטראקציה מובנים לכמה שיותר משתמשים

קריאות ומובנות של התכנים.3.1

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

עזור למשתמשים להימנע מטעויות 3.3ולתקן טעויות שביצעו.

3

הנחיות:

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

(AAA)

כללי נגישות – מובנותקריאות ומובנות של תכנים 3.1

.1On Focusלא גורם לשינוי של תכנים ולביצוע פעולה -

.2On Input הזנה של תוכן ע"י המשתמש אינה גורמתלשינוי תוכן או ביצוע פעולה, ללא ידוע המשתמש

מראש.

(AA) קונסיסטנטיות בניווט3.

(AA) קונסיסטנטיות בזיהוי מרכיבי מסך4.

כללי נגישות – מובנות סידור מסך עקבי והתנהגות ציפוייה של מרכיבים 3.2

אינטראקטיביים

באופן אוטומטי – ותאור הפריט זיהוי טעויות1.למשתמש. שימו לב הודעת השגיאה צריכה לכלול את

שם השדה במדויק. רצוי לקשר את הודעת השגיאה לשדה.

. והוראות ברורות(labels)אספקה של כותרות 2.

- אם זוהתה טעות וניתן להציע עזרה, יש עזרה בתיקון3.(AA)להציע אותה

)בתהליך משפטי, כלכלי, או נתונים( יש מניעת טעויות4.(AA)לאפשר אחד מהבאים

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

המשתמש לפני ביצוע הפעולה

כללי נגישות – מובנות עזור למשתמשים להימנע ולתקן טעויות3.3

כללי נגישות

(:Robustעקרון היציבות טכנולוגית )

web השתמש בטכנולוגיות 4.1שעובדות באופן מקסימלי עם

טכנולוגיה מסייעת וסוכני משתמש בהווה ובעתיד

4

הנחיות:

התחלה וסיום לכל TAG כתיבת קוד תקינה - 1.אלמנט וקינון נכון של הקוד.

Controlלכל שם, תפקיד וערך 2.

לדוגמא:HTMLהשתמש בפקדי טופס ולינקים של

בכדי לקשר תוויות labelהשתמש באלמנט 1.טקסט לפקדי טופס.

.frame של אלמנט title attributeהשתמש ב-2.

בכדי לזהות פקדי title attributeהשתמש ב-3.labelטופס כאשר לא ניתן להשתמש באלמנט

כללי נגישות - יציבות טכנולוגית עכשויים ועתידים )כולל user agents תאימות ל 4.1

טכנולוגיה מסייעת(


עכשויים ועתידים )כולל user agents תאימות ל 4.1טפסיםטכנולוגיה מסייעת(

בטופס לטקסט שמתאר control כדי לקשר בין label באלמנט שימוש•אותו

controls בכדי לתאר קבוצה של fieldset & legendשימוש באלמנטים •(radio buttons ו checkboxבטופס )רלוונטי ל

<label for="firstname">First name:</label>

</ "input type="text" name="firstname" id="firstname">

<fieldset>

<legend>I am interested in the following (check all that apply):</legend>

<input type="checkbox" id="photo" name="interests" value="ph">

<label for="photo">Photography</label><br />

<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">

<label for="watercol">Watercolor</label><br />

<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">

<label for="acrylic">Acrylic</label>

…

</fieldset>

Drilldown


עכשויים ועתידים )כולל user agents תאימות ל 4.1טפסיםטכנולוגיה מסייעת(

. label כדי לזהות שדות כאשר אין אפשרות להשתמש ב Titleשימוש ב לדוגמא: שדה של מספר טלפון המפוצל לקידומת ולמספר.

>fieldset><legend>Phone number</legend>

>input id="areaCode" name="areaCode" title="Area Code "

type="text" size="3" value> ""=

>input id="exchange" name="exchange" title="First three digits of phone number "


>input id="lastDigits" name="lastDigits" title="Last four digits of phone number "


/>fieldset>

Drilldown

-מספר טלפון:

חלופות1.

שליטה של המשתמש – זמן, תצוגה, אודיו2.

מובחנות ויזואלית ושמיעתית3.

הפרדה בין תוכן לתצוגה4.

עקביות והתנהגות ניתנת לחיזוי5.

מניעת טעויות וסיוע6.

סטנדרטים7.

סיכום - כללי נגישות על רגל אחת

אתר "נגיש"

www.nagish.org.il

w3cיוזמת הנגישות של

http://www.w3.org/WAI/

WCAG 1.0הנחיות נגישות

http://www.w3.org/TR/WCAG10/

WCAG 2.0הנחיות נגישות

http://www.w3.org/TR/WCAG20/

)Rich Applications )ARIAנגישות

Ajax, HTML, JavaScript

http://www.w3.org/WAI/intro/aria.php

מקורות

תודה

שאלות?

Documents

נגישות לאינטרנט הלכה למעשה - הנחיות וטכניקות