אתרי אינטרנט – נגישות, התאמה למכשירים ניידים...

1 / 116

התאמה , נגישות–אתרי אינטרנט

.למכשירים ניידים ופלטפורמות

אייל סלע

איגוד האינטרנט הישראלי , מנהל פרויקטיםהישראלי W3C-ומשרד ה

28/4/2011

2 / 116

...תוכנית

מכשירים ניידים•

פלטפורמות •

ודפדפנים

נגישות•

טיפים לאתר איכותי•

3 / 116

איגוד האינטרנט הישראלי

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

עמותה ללא מטרת רווח

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

4 / 1164

W3C

ארגון בינלאומי•

ארגונים 350-כ•

פורום ניטראלי ליצירת תקני הווב•

:משימה•

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

פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח

.ארוך

5 / 116

מכשירים ניידים

6 / 116

Mobile vs deskop internt user

projection 2007-2015

j.mp/dsafaa 6Source: thenextweb.com

7 / 116

Smartphone market share - Q1 2010

bit.ly/h755vK 7

(Q1 ’10:

23% of mobile

consumers

have a

smartphone)

8 / 116

גרסה לניידים של האתר

מבקרים ממכשירים ניידים מופנים אוטמטית לגרסה -

המתאימה למכשירים ניידים

( ...שיקולים–? או אפליקציה )

9

תצוגה •

הזנת תוכן•

רוחב פס ועלות •

מטרות המשתמש•

מגבלות המכשיר•

מכשירים ניידים לעומת שולחניים–מגבלות והבדלים

cmbp3bit.ly/w

10 / 116

גרסה רגילה לעומת לניידים–דוגמא

'law.co.il'

law.co.il

11 / 116

גרסה רגילה לעומת לניידים–דוגמא

'חורים ברשת'

holesinthenet.co.il

12 / 116

כנס שנתי

isoc.org.il/conf2011/mobile12

13 / 116

?יקר -זול

.תלוי בפלטפורמה ובמורכבות האתר

(בוורדפרס למשל מדובר בתוסף בלבד)

14 / 116

?כדאי

....תלוי

כמות הקהל

שירות/סוג העסק

?עד כמה יועיל

הסתכלות לשנים הקרובות

15 / 116

פלטפורמות

ודפדפנים

16 / 116

התאמת האתר

לדפדפנים שונים

17 / 116

?באילו דפדפנים משתמשים בישראל

http://getclicky.com :מקור הנתונים

18 / 116

פלטפורמות חופשיות לבניית אתרים

וורדפרס -

דרופל-

ומלה'ג-

-...

...שיקולים

עלות-

נעילה-

התאמה-

19 / 116

נגישות

20 / 116

השימושעלהמשפיעותמוגבלויות

:באינטרנט

(ברייל, קוראי מסך) עיוורון

(מגדילי מסך)ראייה לקויה

עיוורון צבעים

שמיעה

קוגניציה

(אי שימוש בעכבר, עזרי ניווט) מוטוריקה

21 / 116

?נגישאתרמהו

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

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

22 / 116

....נגישות זה גם

ROI (יותר מצליחים להשתמש, יותר קהל)

SEO (פשוט ככה)

(תת קבוצה) שימושיות

Mobile (יש חפיפה בין צרכי המשתמשים)

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

...(בקרוב) חוק

(עלייה בתוחלת החיים)שוק מתרחב

23 / 116

...אה כן

אנשים

24 / 116

?על מה אנחנו מדברים

25 / 116

(WCAG 2.0)הנחיות להנגשת תכני אתרי אינטרנט

j.mp/w3av2

26 / 116

עקרונות 4

קווים מנחים 12

מדדי הצלחה

))

שיטות

ada3j.mp/w

27 / 116

A, AA, AAAשלוש רמות נגישות

28 / 116

תקן ישראלי

בהכנה במכון התקנים•

2011–ביקורת הציבור •

WCAG 2.0מבוסס על•

התאמה לסביבה הישראלית•

29 / 116

WCAG 2.0

הקווים המנחים 12

29

30 / 116

הקווים המנחים 12תפיסה .1

חלופה טקסטואלית1.1

מדיה מבוססת־זמן1.2

גמישות1.3

הבחנה1.4

תפעול .2

נגישות מהמקלדת2.1

משך־זמן מספיק2.2

מניעת התקפים אפילפטיים2.3

ניווט נוח2.4

נהירּות .3

קריאּות3.1

תפקוד באופן צפוי3.2

עזרה בהזנת קלט3.3

יציבות .4

תאימּות4.1

31 / 116

נתפס: 1עקרון

מבחינה חושית' לתפוס'ניתן

(perceive) את תוכן האתר.

it can't be invisible to all of their senses

32 / 116

חלופה טקסטואלית 1.CAPTCHA)חלופה ל, פקדים בטפסים, תיאור תמונה)

50il3j.mp/w

33 / 116

חסר משמעות altטקסט: לא נגיש

33

34 / 116

טקסט חלופי: נגיש

35 / 11635

www.google.com/recaptcha

ראיה

שמיעה

36 / 116

–תוכן בלתי־נראה, עיצוב, קישוט

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

36

37 / 116

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

(תיאורי אודיו למידע חזותי משמעותי, משמעותיים

38 / 116

Universal Subtitles :נגיש

universalsubtitles.org

39 / 116

אין תמלול לפודקסט: לא נגיש

O7m65bit.ly/f

40 / 116

תוכן הניתן להתאמה 3.קרבה בין , הפרדת תוכן מעיצוב, תגיות נכונות וסמנטיות)

(זיהוי כותרות ורשימות, אלמנטים קשורים

41 / 116

שינוי עיצוב–דוגמא : נגיש

standards.co.il csszengarden.com

42 / 116

הדרכה בהבנת תוכן ובהפעלתו לא תסתמך רק על

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

42

43 / 116

:המנעו מ"....בצד ימיןהקטגוריות ש"

....כפתור העגוללחצו על ה"

43

44 / 116

בר הבחנה 4., אי שימוש בצבע בלבד למשמעות–הפרדת חזית מרקע )

, אי שימוש בתמונה כטקסט, גודל אותיות בר הגדלה(ניגודיות

45 / 116

שימוש בצבע

1 ,,עיבויהדגישו גם באמצעות

8ad3j.mp/w

שינוי רקעהוספת מסגרת

46 / 116

שימוש בצבע בלבד להבעת משמעות: לא נגיש

kavhutz.wordpress.com

47 / 116

צבעים-ניגוד4.5:1ניגוד של לפחות -יחס

(j.mp/cont123, j.mp/w3ad9 השתמשו בבודק ניגודיות: )

כי קשה לקרוא כאשר אין מספיק ניגודיות

48 / 116

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

CQh26bit.ly/h

49 / 116

כפתור לשינוי הניגודיות באתר: נגיש

nptech.org.il

50 / 116

כפתורים לשינוי הניגודיות וגודל : נגיש

הטקסט

j.mp/accessbb

51 / 116

אפשרות להגדלת הטקסט: נגיש

guardian.co.uk

52 / 116

3-ליותר מ)אם יש מוסיקה אוטומטי :שליטה בשמע

להחליש/ניתן להפסיק –( שניות

53 / 116

ניתן להפעלה: 2עקרון .המרכיבים והניווט ניתנים להפעלה

the interface cannot require

interaction that a user cannot

perform

54 / 116

תפקוד מלא ממקלדת 2.1(אין מלכודות מקלדת, הגעה לכל הניווט)

55 / 116

אי אפשר –במעבר מקלדת : לא נגיש

לראות איפה הפוקוס

businessinsider.com

56 / 116

פוקוס נראה לעין: נגיש

accessibletwitter.com

57 / 116

אין תמיכה מלאה במקלדת : לא נגיש

בתפריט עליון

whitehouse.gov

58 / 116

גישה לניווט באמצעות המקלדת: נגיש

nagish.org.il

59 / 116

מספיק זמן 2.2עצירת תנועה , אפשרות הארכה ,sessionהזהרה מפני סיום)

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

60 / 116

שליטה בעדכון אוטומטי: נגיש

downrightnow.com

61 / 116

שמירת מידע בטופס בכדי אם נדרש אימות המשתמש

(authentication) לפני הגשתו

62 / 116

בשירותים מקוונים של session-הארכת ה

הבנק

63 / 116

מניעת התקפים 2.3(מנעת הבהובים וחלקים זזים, עצירת תזוזה)

64 / 116

או שאינו עובר את )הבהובים בשניה 3-לא יותר מ-

(הסף

קטנים -איזורים מהבהבים -

65 / 116

מעט ולא בולט–סמל מהבהב : נגיש

gov.il

66 / 116

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

13885it.themarker.com/tmit/article/

67 / 116

כפתור עצירת תנועה: נגיש

www.leumi.co.il

68 / 116

כפתור עצירת תנועה: נגיש

nagish.org.il

69 / 116

קלות ניווט ומציאת מידע 2.4, דפים מובנים עם כותרות נכונות, מספר דרכים לאותו תוכן)

סדר , עקיפת בלוקים החוזרים על עצמם, קישורים ברורים

(פוקוס נכון

70 / 116

(גלוי או מוסתר)קישור ישיר לתוכן : נגיש

nagish.org.il

71 / 116

השתמשו בפירורי לחם: נגיש

education.gov.il

72 / 116

:נגיש

מפת אתר

coi.gov.uk

73 / 116

טקסט בעל משמעות בקישורים

Xלחץ לקריאת התוכנית המלאה

כאן

Vהתוכנית המלאהקראו את

74 / 116

....כותרות ברורות: נגיש

j.mp/ackdi

vs

75 / 116

ניתן להבנה :3עקרון הטקסט ניתן לקראה ולהבנה

the content or operation cannot be

beyond their understanding

76 / 116

טקסט בר הבנה 3.1פירוש קיצורים , זיהוי השפה בדף כולו ובחלקיו, רמת הטקסט)

(רגון'וז

77 / 116

(למעט טקסט משפטי)

78 / 116

תפעול ותצוגה צפויים 2.ניווט , אי שינוי ההקשר בפוקוס או בלי שהמשתמש ביקש)

(עקבי

79 / 116

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

ustream.tv

80 / 116

תמיכה בהזנה 3., ולידציה, הסבר על מה צריך להזין, הסבר מדויק לטעיות)

(טקסט עזרה

בנייה חכמה של טפסים

81 / 116

דרכי מניעת טעויות בטפסים

ניתן לבטל הפעולה - הפיכּות•

תצוגה מקדימה -אישור •

בדיקת הערכים שהוזנו–בדיקה•

82 / 116

:נגיש

www.data.gov.uk/user/register

83 / 116

זיהוי שגיאות והצגתן בראש הטופס: נגיש

farukat.es/contact/

84 / 116

עזרה בעת זיהוי טעות בטופס: נגיש

הצעת תיקון אפשרי

los.direct.gov.uk

85 / 116

עזרה

קישור לטקסט עזרה-

הצגת דוגמאות לערכים נכונים-

86 / 116

יציבות - 4עקרון תוכנות וכדומה, תאימות מרבית עם דפדפנים

as technologies and user agents

evolve, the content should remain

accessible

87 / 116

4.1 Parsing

לכתוב קוד תקין

88 / 116

CSS-וה HTML-בדקו את תקינות ה org3validator.w-HTML.בודק תקינות•

CSS-1add3j.mp/wבודק תקינות•

89 / 116

WAI-ARIA…

90 / 116

לסיכום

90

91 / 116

ונגישים... אתרים יפים

nomensa.comaccessibleculture.org copious.co.uk

92 / 116

טיפים לאתר איכותי

יועץ•

מפורטאפיון•

:בבקיאשהמבצעלוודא•

נגישות•

ותקניאיכותיקודכתיבת•

שימושיות•

אמין ,יפהעיצוב•

ממשתמשים ,מהסביבה–משוב•

.תוכן-כמובן•

!(ייתכן ואתר קטן ופשוט יספיק. תקציב וצורך, כמובן שזה תלוי בהיקף)

93 / 116

אייל סלע

eyal@isoc.org.il

@isociltech @eyalsela

:המצגת

!צרו קשר