![[פריז, 6 בדצמבר 2011] כנס בנושא הבחירות לנשיאות אינטרנט 2012 (Ideose / 2.0 השותף הנבחר)](http://www.elus20.fr/images/pdffrance2011_elus20.jpg)
שימוש ב-CSS: להסתיר את תוכן צורך משתמשי קוראי מסך
  |  |
להדפיס  |
לשלוח  |
חלק         |
אזהרה: הגירסה המקורית של מסמך זה היא CSS בפעולה: תכנים בלתי נראה רק עבור משתמשים בקורא מסך . תרגום זה נעשה על ידי צרפתי Ideose במסגרת הסכם בין WebAIM ו Ideose .
הערה: ראה עמוד מסמכים על נגישות באינטרנט כדי לקבל רשימה של כל המסמכים מתורגמים. משאבים נוספים על נגישות האינטרנט מוצגים גם הדיגיטלי נגיש הפורטל .
תקציר
הקדמה
לפעמים יש מקרים בהם התוכן יהיו זמינים למשתמשי קורא מסך, אך סמוי מן האנשים רואים. ברוב המקרים, אם תוכן (בעיקר תוכן מספק פונקציונליות או אינטראקטיביות) הוא גדול מספיק עבור משתמשי קורא מסך, זה כנראה צריך להיות זמין לכל המשתמשים. איפה מידע או הוראות ניתנים רק למשתמשים של המסך הקוראים יותר השתקפות של תכנון לקוי והנגישות לקויה. עם זאת, ישנם מקרים שבהם מידע ברור ויזואלית אבל לא יכול להיות עבור משתמשי קוראי מסך. במקרים אלה ראוי קוד אמירה על מידע זה, כך לקרוא קורא מסך אך בלתי נראה למשתמשים רואים.
טכניקות כדי להסתיר טקסט
ישנם מספר מנגנונים כדי להסתיר את התוכן. חשוב יישום טכני נותן את התוצאה הרצויה והיא נגישה.
visibility: hidden; ו / או display:none;
סגנונות אלה להסתיר את הטקסט עבור כל המשתמשים. הטקסט מוסר מזרימת החזותי של הדף, והוא התעלם ידי קוראי מסך. אין להשתמש ב-CSS אם אתה רוצה את התוכן להיקרא על ידי קורא מסך. אבל להשתמש בו אם אתה רוצה תוכן לא נקרא על ידי קוראי מסך.
width:0px;height:0px
כאמור לעיל, כי ללא רכיב גובה או רוחב היא להסיר את הזרימה של הדף, רוב קוראי מסך יתעלם תוכן זה.
HTML תכונות width ו height עם ערך אפס ולכן יכול לתת את אותה תוצאה. זו לא הגישה הנכונה על הסתרת תוכן ויזואלית, אבל זה מאפשר תוכן להיקרא על ידי קורא מסך.
text-indent: -1000px;
גישה זו מעביר את התוכן של 1000 פיקסלים שמאלה - החוצה כל כך של המסך גלוי. קוראי מסך קוראים את הטקסט תמיד עם סגנון זה. עם זאת, אם הקישור או רכיב צורה יש את הסגנון, זה יכול לגרום אינדיקציה של המוקד (קווים מקווקווים או "הנמלים צועדים" ברחבי קישור המוקד) כי תרחיב מ שם האלמנט צריך להיות ממוקם בעמוד שבו הוא למעשה ממוקם ממש (השמאלי). זה לא יפה. ככזה, הוא האפשרות הנכונה אם הפריט אינו מכיל אלמנטים של ניווט.
מיקום תוכן מחוץ למסך ב מוחלטת
להשתמש ב-CSS כדי להעביר את התוכן המוסתר לתפקיד מחוץ למסך בדרך כלל חי נחשב יעיל ביותר ונגיש חזותית להסתיר את התוכן.
מיקום תוכן מחוץ למסך
סגנונות הבאים מומלץ חזותית להסתיר את תוכן להיקרא על ידי קורא מסך.
{מיקום: מוחלט;
עזבו:-10000px;
העליון: אוטומטי;
רוחב: 1px;
גובה: 1px;
גלישה: מוסתר;}
. בכיתה CSS מוסתר יש לציין בקוד של פריט זה צריך להיות מוסתר כדלקמן:
<div class="hidden">Ce texte et caché.</div> המשתמשים רואים לא יראה את כל התוכן מוסתר. הוא מוצג למעשה מחוץ להישג ידם שלהם - חבויים היטב בצד שמאל של החלון נראה לעין של הדפדפן. משתמשי קוראי מסך יש גישה לתוכן כאילו לא הוסתרו. קוראי מסך קוראים את התוכן בדרך כלל, תוך התעלמות מוחלטת הסגנונות נעשה שימוש בטכניקה זו.
לנתח את הקוד בפירוט.
position:absolute; אומר לדפדפן למחוק פריט זרימת הדף ולהתחיל כדי למקם אותו. left:-10000px; . מעביר את התוכן של 10,000 פיקסלים משמאל top:auto; אומר לדפדפן כדי למקם את התוכן במאונך במיקום שבו היה במקור.
הכישלון של top עלולה לגרום באותו סגנון left מתעלמים במקרים מסוימים בחלק מהדפדפנים.
בקיצור, זה חתיכת קוד מעביר את 10000 פיקסלים שמאלה.
width:1px; height:1px; overflow:hidden; אומר לדפדפן כדי 1px לפי גודל 1px לאלמנט מבחינה חזותית להסתיר את כל מה שלא מתאים לממדים אלה.
יש כמה מקרים שבהם העמדה (משמאל) לא יכול לעבוד כאשר כל סגנונות אחרים מופעלים.
במקרה זה, הפריט נשאר בעמדה הראשונית ולקחת בגודל של 1 פיקסל.
הערה
גירסה מוקדמת יותר של מאמר זה מומלץ להשתמש left:0px; top:-500px .
למרות המיקום הזה פועל כדי לאחסן את תוכן מעל גבי, מצאנו כי אם אלמנט מכיל קישור בצורה נסתרת או כאשר הוא לוקח את מוקד לוח המקשים, הדפדפן מנסה ללכת לאלמנט - כך לגלול את הדף למעלה.
הדבר עשוי להיות מבלבל עבור משתמשים הרואים בעזרת המקלדת.
על ידי הצבת ישירות בצד שמאל, הדפדפן לא לגלול את הדף. יש לציין, כי קישורים ואלמנטים טופס לספק תכונות אינטראקטיביות, הם צריכים לעתים נדירות להיות מוסתר מאנשים הרואים.
המשתמשים רואים לא יוכלו לראות איזה אלמנט יש להתמקד שכן הוא מחוץ למסך.
מבחני ביצועים ואינדיקטורים
חשוב!
באופן כללי, ההוראה על מידע צריך להיות סמוי מן המשתמשים רואים וזמין עבור משתמשי קוראי מסך רק אם מידע ברור ויזואלית, אבל לדעתו של משתמשי קוראי מסך.
טכניקה זו יכולה לשמש כדי לספק מידע בנושא ואינדיקטורים למשתמשים בקוראי מסך. זה צריך להיות מיושם בזהירות ורק בעת הצורך. עמוד WebAIM מראה שימוש טוב של טכניקה זו בשלושה מקומות.
ראשית, את שדה החיפוש בחלק העליון של העמוד יש כותרת (תג תווית) מיד לפניו. ברור כי שדה ראייה הוא תחום של מחקר, אבל קורא המסך צריך תווית לתת את המידע הזה. לשם כך, אנו מספקים כותרת באמצעות תג תווית אבל מוסתר ראייה.
שנית, סימני דרך בראש הדף הוא מרכיב נפוץ באתרי אינטרנט. רוב משתמשי האינטרנט להבין איך זה עובד והוא יכול לזהות את זה ויזואלית. אבל בגלל בקורא מסך כניסות זה רשימה של קישורים באופן ליניארי, זה לא יכול להיות מובן מאליו למשתמשים קורא מסך שזה סימני דרך עד כי יש להם תפקיד. על כן אומר להם. לשם כך, הטקסט מוסתר "אתה נמצא כאן:" נוספה לפני פירורי לחם על.
לבסוף, זיהינו את תחילת פרסום בחלק התחתון של כל דף עם טקסט מוסתר. כמו פירורי לחם, זה ברור מבחינה חזותית כי זה פרסומת אבל לא למשתמש לסנן הקורא כפי שהוא לא להתחיל לקרוא את התוכן.
אתה יכול לראות את כל הטקסט המוסתר על ידי השבתת סגנונות WebAIM הדף. זכרו, כל התוכן המוסתר ויזואלית עם CSS ניתן יהיה לראות אם הסגנונות אינן זמינות.
יישומים אחרים
למשתמש ויזואלית, כותרת תאים בטבלה יכול לבצע תפקיד כפול של ארגון תוכן הטבלה וכן לספק תוויות (תווית) ליצירת אלמנטים בטבלה זו, כפי שנראה בתצלום המסך הבא של טופס הנתונים בטבלה.
שורת הכותרת ועמודה של הטבלה הם בעלי ערך קטן מבחינת הבנת את הפריסה של הטבלה, אבל כותרות אינם שדות הטופס. כאשר משתמשי קוראי מסך כדי לערוך שדה הטופס לשדה אחר, הם לא ישמעו את הכותרות של הטבלה. למעשה, הם לא שומעים כל תווית. קוראי מסך דורשים תוויות עבור שדות טופס טקסט. אבל להוסיף תוויות טקסט לכל שדה בטופס בהחלט יהיה מיותר, לא נחוץ וכנראה לא לבלבל את המשתמשים רואים. במקרה זה, תוויות אפשר לתת את קוד הסמוך לשדות המתאימים טופס אך מוסתר באמצעות CSS לעיל באופן הבא ...
<Label for= »amembers "class= »hidden »> מספר חברים בצוות </ label>
...
דוגמה נוספת של אי התאמה לכאורה בין הצרכים של המשתמשים של קוראי מסך ומשתמשים רואים מתרחשת כאשר מפתחים רבים ליצור שדות טופס שנראים שייכים אותה תווית. דוגמה נפוצה לכך היא כאשר שניים או יותר כניסה שדות טקסט משמשים מספרי טלפון.
משתמשים הרואים ביותר בצפון אמריקה כוללת, מלבד תשומת טקסט תחומי מתאימות חלקים שונים של מספר הטלפון. משתמשי קוראי מסך, לעומת זאת, מומלץ להזין את מספר הטלפון כולו בתיבה הראשונה. הם בהחלט תהיה קצת מופתע כאשר הם מגלים כי השדה מוגבל רק שלוש ספרות או שיש תחומים אחרים, כי הם לא נקוב מאמיניה.
הפתרון הברור ביותר לבעיה זו יהיה לשלב את כל תיבות הזנת טקסט אחד ולאחר מכן לתת את התווית המתאימה. עם זאת, הטכניקה CSS יכול להיות מיושם גם למצב זה להוסיף תוויות מוסתרים על כל תיבת טקסט נפרדת.
טלפון <p> מספר:
(
<Label for= »area "class= »hidden »> אזור חיוג </ label>
<input name= »area "id= »area" type= »text "size= »3" maxlength= »3"/>
)
...
מסקנה
כאשר הטכניקות המוצגות כאן משמשות CSS כדי להסתיר תוכן, משתמשים הרואים לעולם לא נדע כי התוכן קיים (אלא אם כן לבטל סגנונות). משתמשי קוראי מסך, לעומת זאת, לעולם לא יבין תוכן זה הוא בלתי נראה למשתמשים רואים. שני סוגים של משתמשים יוכלו להשתמש בו באופן אינטואיטיבי ללא כל שינוי הינו הכרחי. זה יכול לספק מידע חשוב הקשר, אחרת אי אפשר ללכוד עבור משתמשים בקורא מסך בשל אופיו החזותי שלהם. כאשר משתמשים בו בתבונה, טכניקה זו יכולה לפתור כמה בעיות בין דרישות הנגישות ודרישות פריסה החזותית של דפי אינטרנט. זו לא הדרך היחידה טכנית או היחידה לפתור את הבעיה, אבל זה אחד הפתרונות מפתחי אתרים יכולים להשתמש בעת הצורך.
קישורים מסחריים
WebAIM הינה יוזמה של:
כל הזכויות שמורות 1999-2009 WebAIM
