הערות שקיבלתי - labels וכותרות

הקורס הפתוח שבוע 12
,
#1

קיבלתי הערות על האתר הסטטי ויש שתיים שאני לא בטוח מה לעשות לגביהן:

מחסור בlabels עבור אנשים עם מוגבלויות:

image
image827×371 22.9 KB

הכוונה במחסור בlabels ממש לשימוש באלמנט label? בשביל screen readers למיניהם אני מניח?

בשורה מתחת הערה על השימוש בh4 כאשר אין h3 או h2 ושעדיף להשתמש בdiv אם זה רק כדי לשנות גודל.
נראה היה לי נכון להשתמש באלמנט h כלשהו אם זה משמש כותרת ולא בdiv, מה הפתרון הנכון?

תודה :slight_smile:

#2

יאפ

אם זו הכותרת הראשית – h1 ולהתאים גודל באמצעות CSS.
במקרה הזה לדעתי זה לא מתאים להיות כותרת (מבחינה סמנטית) – הייתי שם כ־div/span עם עיצוב נאה.

#3

תודה! אני מקווה שאצליח להכניס את הlabel בלי להרוס את העיצוב :sweat_smile:

#4

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

החלטתי להשתמש באופציה של הוספת aria-label לinput, היה נראה לי יותר אלגנטי מלזרוק איזה לייבל 10000 פיקסלים מהמסך (האופציה האחרת שם).

תודה! :slight_smile:

#5

אופציה אחרת טיפה יותר מקובלת – bootstrap עושים את זה עם class שנקרא visually-hidden שמוגדר כך:

.visually-hidden, .visually-hidden-focusable:not(:focus) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
2 לייקים