עמוד מוצר

  • כותרת העמוד ב Page Title של שם המוצר  ושם הארגון
  • שם המוצר להגדיר ככותרת ב h1
  • תיאור המוצר יוגדר כפסקה
  • אם יש רשימת מאפיינים, להגדיר בקוד כרשימת תבליטים / מספור
  • לתמונת המוצר או לגלריית התמונות יש להגדיר טקסט חלופי שיתאר את המוצר מהכיוונים השונים
  • אם מדובר במצגת תמונות מתחלפות, להגדיר ניווט מקלדת בין הכפתורים המשמשים למעבר בין התמונות השונות.
  • הגדרת כמות למוצר:
    • לכפתורים פלוס ומינוס צריך להגדיר תוויות של "הגדלת כמות" ו"הקטנת כמות" בהתאמה
    • אם השדה המציג את הכמות, מוגדר לקריאה בלבד, יש להגדיר אותו לקריאה בלבד גם ברמת הקוד
    • בכל לחיצה על כפתור הפלוס או המינוס, ועם שינוי הערך המספרי בשדה המציג את הכמות, מומלץ להכניס  התראה על שינוי / עדכון כמות עם ARIA: alert role בכדי שמשתמש בתוכנה קוראת מסך יוכל לשמוע את העדכון הדינאמי של הכמות.
    • אם השדה מאפשר להזין כמות באופן ידני, אז בהגעה אליו עם מקש ה TAB תוצג מקלדת נומרית להזנת הכמות
  • אם למוצר יש תוספות או פריטים משלימים שניתנים לסימון והסרת סימון, צריך להגדיר כל אחד מהאפשרויות ככפתור אייקון עם aria-label של שם התוספת ולהגדיר עם המפרט של aria-pressed
  • הגדרת כפתור הוספה לסל ככפתור סטנדרטי
  • כפתור הוספה לסל לא יכלול מלל נוסף מוסתר הזמין רק למשתמשי תוכנות קוראות מסך
  • אם בעמוד המוצר מוצגים גם מוצרים נוספים, להגדיר לקבוצות המוצרים כותרות כגון "מוצרים נוספים שיכולים לעניין אותך"
  • לשמור על יחס ניגוד מינימום בין צבע טקסט לצבע רקע
  • להגדיר אפקט וויזואלי למרכיבים אשר יקבלו פוקוס מקלדת
%d בלוגרים אהבו את זה: