נגישות אתר באמצעות אלמנטור
נגישות אתרים היא אבן דרך מחוייבת המציאות כיום ותהליך הנגשת אתר אינטרנט יכול להיות מנת חלקם גם של מעצבים ומפתחים.
ה Site Builder הפופולרי אלמנטור יכול לעזור לכם להפוך את האתר לנגיש יותר לאנשים עם לקות ראייה. במאמר זה, נראה לכם מספר דוגמאות ועמה פשוט לבצען.
החשיבות של הנגשת אתרים נידונה כבר שנים רבות, אך המידע הדרוש להנגשת האתר היה לרוב קשה להבנה, או קשה ליישום. זה משתנה במקצת, למרות שעדיין קיימת כמות לא מבוטלת של בלבול, ולא מעט מכשולים ליישום שינויי קוד באתרים, סקריפטים ותוספים רבים.
גודל גופן ומשפחת גופנים
האזור הראשון עימו נתחיל הוא האזור המרכזי (Hero section), כך הוא נראה לפני שנתחיל בשינויי הנגישות שלנו.
נתחיל בהתמקדות במשפחת הגופנים ובגודל הגופנים, כדי להבטיח שהטקסט תמיד קריא.
כמובן שנרצה להחיל הגדרות עיצוביות גלובליות על האתר כך שרצוי להגדיר מראש את משפחת הגופנים והגדלים המוגדרים כברירת מחדל עבור גוף טקסט, תגי Hx וכו'.
מדוע להשתמש ב-REMs במקום בפיקסלים לגודל גופן?
נגישות היא הסיבה העיקרית.
כפי שציינו, רוב הדפדפנים משתמשים ב-16Px כגודל הטקסט המוגדר כברירת מחדל, אך משתמש יכול, ולעיתים קרובות עושה זאת, לשנות את גודל הטקסט המוגדר כברירת מחדל בדפדפן כך שיהיה שונה.
אם משתמש מגדיר את גודל ברירת המחדל ל- 20 פיקסלים, כל הטקסט צריך לשנות את קנה המידה כלפי מעלה בהתאם.
אם אנו מעצבים אתרים באמצעות פיקסלים, אנו נוטלים את היכולת של אותו משתמש לקבל שליטה על גודל הטקסט, מה שהופך את האתרים שלנו לפחות נגישים.
במקום להגדיר את גודל הפונט ל – 32Px , הגדירו אותה ל-2REM.
המשמעות היא שהכותרת תהיה גדולה פי 2 מגודל הגופן הבסיסי (בדרך כלל 16 פיקסלים, או במקרה של המשתמש שלנו ששינה את גודל ברירת המחדל שלה ל-20 פיקסלים, הכותרת שלנו תהיה כעת שווה ערך ל-40 פיקסלים).
למרות שאולי נרצה שזה יהיה בדיוק בגודל שאנחנו רוצים, החוק מחייב אותנו לאפשר לגולש לראות את הטקסט בגודל שהוא רוצה.
ישנם מחשבונים רבים להמרת פיקסלים ל REM , אחד מהם הוא nekocalc.com/px-to-rem-converter
ניגודיות צבע נכונה
כעת נתמקד בלוודא שיש ניגודיות מספקת בין צבעי הרקע והקדמה. הטקסט באזור המרכזי שלנו כרגע קשה מאוד לקריאה מכיוון שאין מספיק ניגודיות בין צבע הטקסט לצבעי תמונת הרקע.
כמו שכתבנו במאמרים נוסף בנושא הנגשת אתר, ניתן להשתמש ב פלאג אין של כרום שיעשה את העבודה Color Contrast Analyzer שיחשב עבורכם את כמת הניגודיות ואף יתאים אותה לרמת הדירוג מול הWCAG.
ניתן להשיג ניגודיות טובה באמצעות מתן רקע לתמונות (חצי שקוף) שגם אותו מן הסתם נגדיר בהגדרות הגלובליות או את המילוי של צבע הפונט (Opacity).
כך תראה כעת הניגודיות באזור שבנינו.
ניתן לראות כי הטקסט קריא הרבה יותר והלחצן בולט באופן משמעותי
תכונות ALT של תמונה
אבל מה עם תמונת הרקע הזו? עלינו לוודא שיש לה תכונת ALT תמונה, כך שקוראי מסך יוכלו לתאר את התמונה במדויק לקוראים כבדי הראייה שלנו. לתמונה שלנו לא הייתה במקור תכונת ALT שהוגדרה בספריית המדיה.
כדי לפתור זאת, פשוט לחצו על התמונה בלשונית הסגנון של המדור, והוסף תכונה ALT בחלון המדיה של התמונה.
ARIA-Labels
לאזור המרכזי שלנו יש כפתור קרא עוד. על מנת לאפשר למשתמשים כבדי הראייה הזדמנות להוסיף הקשר כלשהו ללחצן זה, נוסיף תווית ARIA לקישור.
שימו לב שהזנו את הנתונים שלנו באמצעות הפורמט מפתח | ערך.
המפתח, במקרה זה, הוא “aria-label” והערך של המפתח הזה הוא "קראו עוד על הנגשת אתרים"
טפסים נגישים
הטפסים שלנו זקוקים לטיפול דומה בכל הקשור לגופנים וניגודיות.
התאמנו את כל הטקסט כדי להבטיח שיש לו גופנים קריאים, תוך שימוש בגדלי REM, עם ניגודיות צבע מתאימה.
טפסים צריכים לטפל בסדר מעבר לוגי (TAB ) כראוי. הווידג'ט של אלמנטור פרו ידאג לכך.
כל לחיצה רצופה על מקש TAB תביא את הגולש לשדה הבא באופן אוטומטי, ולאחר מכן ללחצן שלח אחרון. לחיצה על SHIFT-TAB דרך השדות פועלת אחורה כצפוי גם כן.
עם זאת שימו לב שאתם עושים שימוש בתוויות ולא מסתפקים בטקסט פנימי בשדות.
אלמנטים סמנטיים של HTML5
אלמנטור גם מאפשרת להשתמש ברכיבים סמנטיים (תגיות) של HTML5 כגון:
<header>, <footer>, <article>, <aside>, <nav>, <main> ו-<section> במקום <div>.
חפשו את אפשרות תג HTML בסעיף מבנה – פריסה או עמודה – פריסה, ובחרו מה שצריך.
תהליך הנגשת כל האתר
הצגנו חלק קטן מדף ומאתר שלם.
כמובן שיש התאמות רבות נוספות והן תלויות במידת המורכבות של האתר ולכן כל אתר נבחן ונבדק באופן מקיף ומול קהלי היעד שלו.
עם זאת אנו רואים שאלמנטור ממשיכה לתת דגש על הנושא ולספק כלים שיהפכו את הנגשת האתר לידידותית יותר.
אחד מהכלים הללו נמצא באזור הניסויים של אלמנטור ואנו ממליצים להפוך אותו לפעיל כמו גם תכונות נוספות שיכולות לעזור בנושא הנגישות ובנושאים נוספים כמו מהירות טעינה.
רוצים שנבדוק ונבצע לכם התאמה לנגישות ?
בשמחה. אנו עוברים על האתר באמצעות הכלים המתקדמים שנו, בודקים את המערכת בה נבנה האתר, כשלים שלה ומבצעים התאמות.
בנוסף, אנו מתקינים לכם תוסף מתקדם לביצוע נגישות, עורכים לכם הצהרת נגישות ומתקינים באתר ונותנים לכם הדרכה (בזום) על תפעול נכון של האתר.
מלאו את הטופס ונשמח לעמוד לרשותכם.
