כיצד לשפר את נגישות שולחן HTML עם סימון

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

הוא אלמנט HTML נפוץ המשמש להצגת נתונים באופן מובנה בדפי אינטרנט. טווחי העיצוב שלה מ פשוטים אלה מורכבים, להשלים עם כותרות שורה, כותרות ממוזגות וכו '.

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

המאפיין סקופ

אפילו עבור שולחן פשוט עם

סימון עם היקף = "col" מסייע לטכנולוגיה מסייעת לזהות כי התאים הבאים באותו עמודה הם שמות של תלמידים.

באופן דומה, תאים כמו

מכיל היקף = "colgroup" מסייעת למשתמשים לזהות שהנתונים בתאים הבאים בקבוצת העמודות שהיא משתרעת עליה משויכים לאותו נושא מסוים.

אז יש את

סימון עם היקף = "שורה" אשר מגדיר כי התאים הבאים אותו באותה שורה, המכיל את התאים “כיתה” מידע לגבי שם התלמיד המסוים הזה.

קבוצות שורה

כעת נעבור לדוגמה אחרת, לדוגמה זו יהיה כמעט אותו טבלה כמו זו שלמעלה, למעט החלפת שורות בשורה ועמודות, כך שנוכל לעבוד עם קבוצות שורות.

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

  שם העובד  קוד עובד  קוד פרויקט  - ייעוד עובדים  
  פלוני אלמוני  32456  456789  דירקטור  
  מרים לותר  78902  456789  סגן מנהל

מה עושה תכונת היקף? לדברי W3C:

במילים אחרות זה עוזר לנו לקשר את תאי הנתונים עם התאים המתאימים הכותרת שלהם.

שים לב שבדוגמה שלמעלה ניתן להחליף

. כל עוד שלה היקף יש את הערך קול, היא תתפרש ככותרת העמודה המתאימה.

ה היקף תכונה יכולה להיות כל אחד מארבעת ערכים אלה; קול, שורה, rowgroup, קולגרופ כדי להפנות אל כותרת עמודה, כותרת שורה, קבוצה של כותרת עמודות וקבוצת כותרות 'כותרת בהתאמה.

טבלאות מורכבות

עכשיו נעבור לטבלה מורכבת יותר.

מלמעלה טבלה שמפרטת תלמידים בכיתה ובציונים שלהם בתורה ובתיאוריה לשלושה נושאים.

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

  שם תלמיד  ביולוגיה  כימיה  פיזיקה  
  מעשית  תיאוריה  מעשית  תיאוריה  מעשית  תיאוריה  
  פלוני אלמוני  א  א+  ב  א  א  א-  
  מרים לותר  א  א  ג  ג+  א  א-

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

איזה סטודנט שייך לכיתה הזאת?
איזה נושא זה שייך לכיתה?
האם זה כיתה עבור פרק מעשי או תיאוריה?

אלה שלושה מידע מוגדרים בשלושה סוגים שונים של תאים כותרת מבנית חזותית:

שם תלמיד
שם הנושא
מעשית או תיאוריה

בואו להגדיר אותו עבור נגישות.

      שם תלמיד  ביולוגיה  כימיה  פיזיקה  
  מעשית  תיאוריה  מעשית  תיאוריה  מעשית  תיאוריה  
  פלוני אלמוני  א  א+  ב  א  א  א-  
  מרים לותר  א  א  ג  ג+  א  א-

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

קבוצת עמודה

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

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

שם תלמיד

ביולוגיה

פלוני אלמוני

נושא		פלוני אלמוני	מרים לותר
ביולוגיה	מעשית	א	א
ביולוגיה	תיאוריה	א+	א
כימיה	מעשית	ב	ג
כימיה	תיאוריה	א	ג+
פיזיקה	מעשית	א	א
פיזיקה	תיאוריה	א-	א-

עכשיו שיש לנו את המדגם לעבוד עם נתחיל לנו על ידי יצירת שורות שורות כמו שעשינו עבור קבוצות עמודה בדוגמה הקודמת.

עם זאת, לא ניתן ליצור קבוצות שורות באמצעות תג כמו קולגרופ בגלל שאין rowgroup אלמנט.

שורות HTML מקובצות בדרך כלל באמצעות , ו אלמנטים. HTML יחיד

אלמנט יכול להיות אחד , אחד ו מרובים . נשתמש במספר tbody בטבלה שלנו כדי ליצור את קבוצות השורות, ולהוסיף את היקף בהתאמה לתאי הכותרת.

נושא		פלוני אלמוני	מרים לותר
ביולוגיה	מעשית	א	א
ביולוגיה	תיאוריה	א+	א
כימיה	מעשית	ב	ג
כימיה	תיאוריה	א	ג+
פיזיקה	מעשית	א	א
פיזיקה	תיאוריה	א-	א-

הוספנו את השורות “מעשית” ו “תיאוריה” בכל אחד tbody יצירת שורות שורות עם שתי שורות בכל. הוספנו גם את היקף = "rowgroup" לתאים המכילים את פרטי הכותרת על שתי השורות (שהוא שם הנושא שהציונים שייכים אליו במקרה זה).

עכשיו קרא: שווה גובה עמודה עם CSS