עיצוב רספונסיבי נגיש

דייב גאש

מגין קירני

רייצ'ל אנדרו

רוב דודסון

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

למשל, האתר Udacity יכול להיות:

משתמש לקוי ראייה שמתקשה לקרוא טקסט קטן עשוי להגדיל את התצוגה, אפילו עד 400%. מכיוון שהאתר מעוצב עם יכולת תגובה, ממשק המשתמש יסדר מחדש את עצמו בהתאם ל "אזור התצוגה הקטן יותר" (למעשה, לדף הגדול יותר). זה מעולה גם למשתמשים במחשב שזקוקים להגדלת מסך וגם למשתמשים בקורא מסך בנייד. מהתוכנית הזאת כולם רק מרוויחים. הנה אותו דף שהוגדל ל-400%:

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

מדריך זה אינו יכול לכלול מידע על

שימוש במטא תג של אזור התצוגה

<meta name="viewport" content="width=device-width, initial-scale=1.0">

אם מגדירים את width=device-width, המערכת תתאים לרוחב המסך בפיקסלים שאינם תלויים במכשיר, וההגדרה initial-scale=1 תיצור קשר של 1:1 בין פיקסלים ב-CSS לבין פיקסלים שלא תלויים במכשיר. זה מורה לדפדפן להתאים את התוכן לגודל המסך, וכך שהמשתמשים לא יראו רק טקסט חתוך.

למידע נוסף, ראה התאמת גודל התוכן לאזור התצוגה.

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

ניתן להשתמש במטא תג של אזור התצוגה כדי למנוע שינוי מרחק התצוגה על ידי הגדרת maximum-scale=1 או user-scaleable=no. מומלץ להימנע מכך, ולאפשר למשתמשים להגדיל את התצוגה במקרה הצורך.

עיצוב עם גמישות

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

מידע נוסף על השיטות האלה זמין במאמר מידע בסיסי על עיצוב אתר רספונסיבי.

שימוש ביחידות יחסיות לטקסט

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

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

אין לנתק את התצוגה החזותית מסדר המקור

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

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

מידע נוסף על הניתוק של המקור והמסך החזותי.

השתמשו ברמזים מרחביים

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

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

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