רכיבים נגישים: כפתורי רדיו ותיבות סימון מעוצבים

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

צורות "העלמת" הכפתור הפופולריות הם:

גובה ורוחב – 0, שקיפות מלאה, מיקום אבסולוטי מיחוץ למסך וכו'.

יש בעיה עם השיטה הזו, זה מעלים גם את הפוקוס (outline), אם תדלגו בעזרת TAB בין הרכיבים בעמוד תגלו שפתאום הפוקוס שלכם נעלם!

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

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

אז נכון, אפשר לעשות הרבה מאוד כדי לגרום לתמונה להתנהג ככפתור רדיו/ תיבת סימון:

1. לתת לתמונה tabindex= 0 ולכפתור המוחבא tabindex= -1
2. להוסיף event מתאים גם ללחיצה בעכבר וגם במקלדת
3. להוסיף role כדי שהתמונה תזדהה כפקד אחר וכך עיוור ידע שמדובר בתיבת סימון/ רדיו
4. להוסיף מאפיין של checked שמשנה את הערך שלו בין true ל- false ע"י javascript בלחיצה עליו

או:

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

 <div>
        <label class="custom-checkbox">
            <input type="checkbox" class="checkbox">
            <div class="empty-div"></div>
            <div class="checked-div"></div>
            I am checkbox label
        </label>
 </div>

.custom-checkbox {
         position: relative;
     }
     
     .checkbox {
         width: 20px;
         height: 20px;
         margin: 0;
     }
     
     .empty-div {
         background-color: white;
         border: 1px solid gray;
         box-sizing: border-box;
         width: 20px;
         height: 20px;
         position: absolute;
         top: -6px;
         left: 0;
         display: none;
     }
     
     .checked-div {
         background-color: green;
         border: 1px solid gray;
         box-sizing: border-box;
         width: 20px;
         height: 20px;
         position: absolute;
         top: -6px;
         left: 0;
         display: none;
     }
     
     .checkbox:not(:checked)~.empty-div {
         display: block;
     }
     
     .checkbox:checked~.checked-div {
         display: block;
     }

כמובן שאת ה-DIV אפשר להחליף ב-IMG או לאכלס אותם בתמונה וכו'.

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

כל מה שנותר לנו זה "להלביש" אותו יותר טוב.

פוסטים קשורים:

רכיבים נגישים: בידוד של קבוצות כפתורי רדיו בנגישות רכיבים נגישים: טאבים שימוש ב-currentColor CSS מדריך CSS + HTML – הבסיס – חלק 3