שימוש בסימון סמנטי יעזור להפוך את האתר שלך לנגיש יותר, ותכונות ARIA יכולות לעזור עם מקרי קצה.
מעצבי אינטרנט שחדשים ב-HTML עשויים להיתקל בקבוצה של תכונות לא מוכרות. הקידומת של המילה ARIA, תכונות אלו מופיעות בכל רחבי האינטרנט, אך מטרתן יכולה להיות תעלומה למשתמשים חדשים.
תכונות ARIA משרתות מטרה חשובה בנגישות האתרים שלך. הם מתארים גם את התוכן של אלמנט נתון וגם את האופן שבו אלמנט מתייחס לדף או לאלמנטים האחרים שסביבו.
הוספת המאפיינים החשובים האלה לאתר שלך תעזור להבטיח שכל המבקרים יקבלו את אותה חוויה, ללא קשר לטכנולוגיה שבה הם משתמשים.
מהן תכונות ARIA?
ARIA הוא ראשי תיבות של Accessible Rich Internet Applications. ב-HTML מודרני, במיוחד יישומים עשירים ב-JavaScript, לא תמיד ברור מיד על סמך התחביר איזה תפקיד ממלאים אלמנטים בודדים.
הקושי להבחין בתפקידים יכול להוות בעיה כאשר משתמשים צופים באתר באמצעות כלי נגישות כמו קוראי מסך. בהיעדר HTML סמנטי מתאים, ייתכן שמשתמש הקצה שלך לא יוכל לנווט באתר בעת שימוש בכלי נגישות.
אמנם הדרך המועדפת עליך לפתור בעיה זו היא לעשות זאת השתמש באלמנטים הסמנטיים המתאימים ב-HTML5
, זה לא תמיד מעשי או אפשרי. כאן נכנסות תכונות ARIA ברכיבי HTML. תכונות אלו עוזרות להגדיר את התפקיד והתכונות של האלמנט שלך באופן שכלי נגישות מסוגלים לעבד.מדוע תכונות ARIA חשובות?
בקיצור, תכונות ARIA מאפשרות למשתמשים עם מוגבלויות להשתמש באתר שלך. התפקידים והמאפיינים האלה מגדירים מידע נוסף על אלמנטים שונים באתר שלך שאחרת עלולים לא להיות זמינים.
יש מגוון רחב של תכונות ARIA שאתה יכול להקצות. עליך להשתמש בהם בכל מקום שצריך הקשר נוסף כדי לאפשר למסמך להיות הגיוני בצורה לא ויזואלית.
לדוגמה, שקול אתר שיש לו ניווט ראשי המורכב מא אלמנט עטוף בא אלמנט, ולא א אֵלֵמֶנט:
<divמעמד="נוו">
<ul>
<לי>ביתלי>
<לי>לִקְנוֹתלי>
<לי>על אודותלי>
ul>
div>אתה יכול להשתמש בתכונות ARIA כדי לעזור למשתמשים לנווט. הוספת תכונות התפקיד והאריה-label ל- אלמנט מאפשר לקורא מסך ולטכנולוגיות מסייעות לדעת היכן נמצא התפריט שלך.
<divמעמד="נוו">
<ulתַפְקִיד="ניווט"aria-label="רָאשִׁי">
<לי>ביתלי>
<לי>לִקְנוֹתלי>
<לי>על אודותלי>
ul>
div>בעוד שברוב המקרים עליך להשתמש ברכיבים המתאימים, ייתכן שזה לא תמיד אפשרי במסגרת המגבלות של מה שאתה עושה. אם, למשל, האתר שלך דורש שימוש בסרגל התקדמות, אבל אתה רוצה עיצוב שהסרגל הסטנדרטי אינו מאפשר.
בתרחיש זה, תוכל ליצור קבוצה מותאמת אישית של אלמנטים כדי להציג את סרגל ההתקדמות שלך. לקורא מסך, לעומת זאת, האלמנטים הללו ייראו כמו בלגן מבולגן; הוא לא יוכל לספק מידע שימושי למבקרים באתר שלך.
על ידי הגדרת תפקיד העטיפה ל סרגל התקדמות, ומוסיפים aria-valuenow, aria-valuemin, ו aria-valuemax תכונות לעטיפה, אתה עדיין יכול לציין התקדמות.
בעידן המודרני, בניית אתרים נגישים חשובה מתמיד. יש מספר ספריות של רכיבי React שנבנו מתוך מחשבה על נגישות.
לא רק שיש אתר נגיש שיכול לעזור בדירוג החיפוש שלך עבור מספר מנועי חיפוש גדולים, זה מבטיח שאתה לא מנתק קבוצה פוטנציאלית של משתמשים מבסיס המשתמשים שלך.
הוספת תכונות ה-ARIA המתאימות לאתר שלך תעזור להבטיח שתציג את המידע לכל המשתמשים. התוצאה הסופית תהיה אתר שמקבל בברכה את כל הקהלים ומציג לכולם קרוב ככל האפשר לאותה חוויה.
באילו תכונות ARIA עלי להשתמש?
יש הרבה תכונות שונות שאתה צריך לעשות בהן שימוש באתר שלך. באופן כללי, תכונות אלו מתחלקות לשתי קטגוריות שונות. הראשון הוא תכונות ווידג'ט שמתארות בדרך כלל אלמנט אינטראקטיבי מותאם אישית.
הקטגוריה האחרת שאתה צריך להיות מודע אליה היא תכונות מערכת יחסים. אלו הן תכונות המעבירות מידע לטכנולוגיות מסייעות על האופן שבו אלמנט מסוים מתייחס לשאר האתר או לאלמנטים אחרים.
כשזה מגיע לשקול אילו תכונות ARIA אתה צריך לכלול, התשובה הפשוטה היא כמה שיותר. בכל מקום שבו האלמנט שבו אתה משתמש אינו מתאר את התפקיד שהאלמנט ממלא, עליך להשתמש בתכונת role.
אם יש לך שדה עם תווית, שדה זה צריך לכלול את aria-labeledby תְכוּנָה. כל עוד התכונות שבהן אתה משתמש הגיוניות, אתה רק הופך את האתר שלך לנגיש יותר על ידי הוספתן.
תכונות ווידג'ט היא הקטגוריה הרבה יותר גדולה. הוא מכיל את רוב תכונות ה-ARIA שתצטרכו להוסיף לאתר סטנדרטי. בדוגמה הקודמת של סרגל ההתקדמות המותאם אישית, aria-valuenow, aria-valuemin ו-aria-valuemax הן כולן תכונות ווידג'ט. הם מתארים את המצב או המצבים האפשריים של האלמנט שבו הם נמצאים.
יש הרבה תכונות שונות שבהן אתה יכול להשתמש כדי לתאר את המצב של אלמנט. אחד הנפוצים ביותר הוא aria-label. מאפיין זה מחיל תווית על הרכיב שאתה מציב אותו עליו, גלויה רק לטכנולוגיות מסייעות.
זוג נפוץ נוסף של תכונות ARIA שנכללות בקטגוריה זו הם אריה-נסתרת ו אריה נכים. אלה יכולים לתקשר את המצב הנוכחי של אלמנט והאם קורא מסך צריך לקרוא אותו למשתמש. זה מועיל עבור מגוון מכשירים שונים עם קוראי מסך משלהם.
תכונות מערכת יחסים
שלא כמו תכונות יישומון, תכונות יחסים נותנות לטכנולוגיות מסייעות אינדיקציות לגבי הקשר והשימוש של אלמנט לאלמנטים אחרים סביבו. הנפוץ שבהם הוא תכונת התפקיד. תפקיד מציין איזו מטרה אלמנט משרת בתוך אתר.
אם תגדיר את תַפְקִיד מייחס ל ניווט, הוא יזוהה מיד כעטיפת ניווט.
חלק מתכונות הקשר מגדירות כיצד אלמנט מתייחס לאלמנטים אחרים סביבו. ה aria-labeledby תכונה, למשל, מראה איזה אלמנט פועל כתווית לרכיב זה. זה יכול להיות שימושי בעת שימוש בפריסות הגיוניות מבחינה ויזואלית אך עם תוויות עבור פקדי טופס ספציפיים אחריהן בזרימת המסמך.
אמנם יש פחות תכונות יחסים מתכונות ווידג'ט, אבל לרוב יש חשיבות רבה יותר לתכונות אלו. לעתים קרובות הם יכולים לתאר את הזרימה והשליטה במסמך, ולתת פרטים נוספים על הדרך שבה משתמש יכול לנווט באתר שלך.
לתכונות אלו יש חשיבות מיוחדת כאשר אתה מעצב טפסים ופריטי ניווט באתר שלך.
למה זה כל כך חשוב לכלול תכונות ARIA ב-HTML שלך
תכונות ARIA משרתות מטרה פשוטה והכרחית באתר האינטרנט שלך. הם משמשים להבטיח שהאתר יהיה נגיש לכל המשתמשים, ללא קשר לשימוש בתוכנת נגישות. עבור משתמשים עם מוגבלויות, תכונות אלו באתר שלך יכולות להפוך את האתר לשימוש.
השיטה המועדפת לעבודה עם טכנולוגיה מסייעת היא שימוש באלמנטים הסמנטיים המתאימים. עם זאת, כאשר הדבר אינו אפשרי, תכונות ARIA מאפשרות לעבוד בחופשיות מבלי שהמשתמשים שלך יפסידו על תוכן.
