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

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

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

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

מבוא נגישות

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

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

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

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

Devs רבים חושבים כי נגישות היא רק עבור עיוורים שאינם יכולים לקרוא. אבל יש למעשה ארבע קטגוריות עיקריות של נגישות לאינטרנט:

1. חזותי - ראייה ירודה או עניים / ללא מראה
2. השמיעה - לקויי שמיעה או חירשים
3. קוגניטיבית - בעיות להבין או לצרוך מידע
4. מוטור - בעיות נגישות פיזית אשר עשויות לחייב התקני קלט מיוחדים כגון מקלדות או פקודות קוליות

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

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

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

עיצוב W3C & נגיש

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

• W3C (World Wide Web Consortium) - קבוצה בינלאומית המגדירה תקני אינטרנט לפרוטוקולים, לשפות ולתקנות. כל הנחיות הנגישות הרשמיות נופלות תחת ארגון זה.
• WAI (יוזמת נגישות לאינטרנט) - תוכנית רשמית המכסה הכל על נגישות. מונח זה מכיל את כל הכללים, ההנחיות והטכניקות של נגישות מודרנית.
• WCAG (הנחיות לנגישות תוכן אינטרנט) - קבוצה של תקנים וכללים כדי לעזור למעצבים ציון האתרים שלהם על בסיס רמת הנגישות.
• אריה (יישומי אינטרנט עשירים נגישים) - תקן ספציפי המגדיר כיצד לבנות יישומים עשירים נגישים המסתמכים על JavaScript / Ajax וטכנולוגיות דומות. קרא עוד על זה בהודעה זו על ידי אנה מונוס.

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

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

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

כדי ללמוד עוד על הנחיות אלה, עיין במבוא של W3C להבנת מאמר WCAG 2.0. כמו כן יש להסתכל על קישורים אלה קשורים לפרטים נוספים:

• WCAG 2.0 פשוטה
• סעיף 508 WCAG ביצועים

שלבים עיצוב נגיש

אני ממליץ מאוד לבקר באתר האינטרנט של אתר A11Y לקבלת עצות נגישות מעשיות. A11Y (שהוא גם שם נרדף) הוא פרויקט קוד פתוח ללא תשלום, המתארח ב- GitHub, טכניקות המציעות עיצוב אתרים נגיש.

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

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

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

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

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

כלים לבדיקת נגישות

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

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

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

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

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

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

יש עוד יישום חינם באתר Cynthia אומר אשר יכול לבדוק אתרי אינטרנט עבור WCAG דירוגים הצלחה של, AA, AAA, ו סעיף 508 לציות הממשלה.

ואם אתה לתוך קוד פתוח תסתכל על אלה כלי בדיקות נגישות חינם ב - GitHub - -.

• קוד HTMLSniffer
• כלי בדיקת נגישות אוטומטית
• WCAG Validator

הרחבות דפדפן

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

AInspector עבור פיירפוקס נחשב כמו חובה עבור נגישות. זה בודק הכל, וזה הרבה יותר יסודי מאשר בודק WAVE.

משתמשים מוזילה אולי גם כמו WCAG ניגודיות בודק שהוא גם תוספת חינם.

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

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

לצערי לא הצלחתי למצוא הרבה עבור משתמשי Safari, אבל מצאתי הרחבה אחת עבור אופרה שמבצעת ציות ל- WCAG 2.0. אם אתה מוכן לחפש ב- Google מספיק חזק אתה עלול למצוא כלים נוספים שם בחוץ.

לקריאה נוספת

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

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

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

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