אתרי אינטרנט צריכים להיות נגישים לכולם. הנה מה שאתה צריך לדעת.

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

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

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

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

נגישות לאינטרנט עם HTML

ב-HTML ישנם כללים להבטחת פיתוח אתרים נגישים. סעיף זה יסביר חלק מהכללים הללו.

השתמש באלמנטים סמנטיים

אלמנטים סמנטיים ב-HTML הם אלמנטים בעלי משמעויות. ב-HTML5, ישנם כ-100 אלמנטים. כמה אלמנטים, כגון ו, אינם סמנטיים, בעוד

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

שקול את הדוגמה הזו מ- Taaskly:

הצצה בתמונה למעלה תגלה את האלמנטים הבאים:

  • כותרת
  • תמונה
  • פסקה
  • שלושה כפתורים

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

<סָעִיף>
<imgsrc="/hero.png"alt="גיבור">
<מאמר>
<h1>מצא את המוצרים והשירותים הנכונים בזמן הנכון.h1>
<ע>
 הנעלה בעבודת יד, שיפוץ שיער, מנהל מדיה חברתית, שליחת סידורים, מקור הכנסהב>— אתה שם את זה, טאסקי קיבל את זה. מצא כל מוצר או שירות שאתה צריך היום כאשר אתה נרשם ומשתמש ב-Taskly. 
ע>
<אhref="/ראשי/בית">מיקור חוץ של משימהא>
<אhref="/ראשי/שירותים"> מצא שירותא>
<אhref="/main/marketplace" >מצא חנותא>
מאמר>
סָעִיף>

מתוך קטע ה-HTML, אתה יכול לראות את הדברים הבאים:

  1. התמונות, הטקסט והלחצנים נמצאים בתוך a אֵלֵמֶנט.
  2. ה אלמנט מחלק באופן שווה את ו אלמנטים.
  3. ה אלמנט מחזיק את, , ו אלמנטים.
  4. הכפתורים מקודדים כ אלמנטים; לפיכך, הם קישורים, לא כפתורים. ככלל, השתמש תמיד בקישורים כדי להפנות את המשתמש לעמוד או לתצוגה אחרת, והשתמש בכפתורים כאשר אתה רוצה שהמשתמש יבצע פעולה באותה תצוגה בלבד. לִרְאוֹת דף הכפתורים של Angular למידע נוסף בנושא.

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

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

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

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

בכל פעם שאתה צריך להשתמש במספר ציוני דרך עבור דף, תמיד הבדל אותם באמצעות תווית. לדוגמה, אם אתה משתמש במספר אלמנטים כפי שיש לאפל, אתה צריך לתייג אותם. אתה צריך לתייג אותם עם aria-label תְכוּנָה. אז אתה יכול לכתוב משהו כמו כל אחד מאלה:

<navaria-label = "גלוֹבָּלִי">
<navaria-label = "ניווט מקומי">
<navaria-label = "ספריית תפוחים">

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

השתמש בתכונות תפקיד, שם וערך

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

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

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

תַפְקִיד

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

<כּוֹתֶרֶתתַפְקִיד = "ניווט">
<navתַפְקִיד = "דֶגֶל">
<divתַפְקִיד = "ניווט">

שֵׁם

שם הוא טקסט תיאורי או תווית המשויכים לרכיב HTML. הצורה הקלה ביותר של שם היא הטקסט של אלמנט. הנה דוגמא:

<divתַפְקִיד = "לַחְצָן">לחץ עלי!div>

בקטע שלמעלה, "לחץ עלי!"זה השם של אֵלֵמֶנט. זה ידוע גם בשם הנגיש.

עבור רכיבים כגון ניווט, תפריטים נפתחים וכו', הקצאת שם מורכבת יותר מאשר בדוגמה הקודמת. זה שונה מכיוון שלאלמנטים אלה יש אלמנטים צאצאים בתוכם. כדי להקצות שם לניווט למעלה, השתמש ב- aria-label תְכוּנָה. תסתכל על הדוגמה הזו:

<navתַפְקִיד = "ניווט"aria-label = "ניווט גלובלי">...nav>

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

 תכונת שם 
<navתַפְקִיד = "ניווט"שֵׁם = "ניווט גלובלי">...nav>
 שם נגיש 
<navתַפְקִיד = "ניווט"aria-label = "ניווט גלובלי">...nav>

לִרְאוֹת המאמר של TGPi על שמות נגישים כדי לקבל הבנה מעמיקה יותר של זה.

ערך

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

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

 aria-valuenow 
ערך
<קֶלֶטסוּג="תיבת סימון"שֵׁם="מוצר[]"ערך="1">

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

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