תאימות אתרי אינטרנט למובייל

 

יותר ויותר אנשים גולשים בדפדפנים באמצעות טלפונים חכמים מבוססי צג מגע. מאמר זה מבוסס על משאבי מידע הזמינים באתר Mobile Friendly Websites  |  Google Developers . ממצאי מחקר של גוגל מראים כי 94 אחוז מאוכלוסיית ארה"ב מבצעים חיפושים באמצעות טלפונים חכמים ו 77 אחוז מהחיפושים מתבצעים בבית או בעבודה – מקומות שבהם הסבירות כי מחשב נייח נמצא. ועדיין אתרי אינטרנט רבים אינם מותאמים למובייל.

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

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

שימושיות ונגישות

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

תכונה חשובה נוספת של שימושיות ונגישות היא שמירה על עיצוב נגיש ועל יחס ניגוד מוגבר בין צבע טקסט לצבע רקע. בעוד שהנחיות WCAG 2.0 מציבות דרישות מינימום בקריטריון 1.4.3 ליחס ניגוד של 1:4.5 בין צבע טקסט לצבע רקע, בכל הנוגע לאתרי מובייל ההמלצה היא להשתמש בניגודיות מוגברת יותר ולעמוד על יחס ניגוד של 1:7.

מקורות מידע

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

בדיקת התאמה לניידים – Google Search Console:

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

Mobile SEO Overview

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

Mobile-Friendly Test Tool:

מאמר הסבר על הבדיקה שמבצעת גוגל באמצעות כלי התאימות למובייל. במאמר, תחת הכותרת Mobile-usability errors ניתן להיכנס לקישור שנקרא List of errors המפרט את רשימת השגיאות שניתן לאתר באמצעות הכלי לבדיקת תאימות למובייל. רשימה זו יכולה להיות למעשה גם רשימת כללי אל תעשה  באתרים המיועדים להיות מותאמים לטלפונים חכמים.

רשימת השגיאות מתייחסות לנושאים הבאים

  • שימוש בפלאש Flash usage
  • העדר הגדרת התאמה לתצוגה משתנה Viewport not configured
  • התאמת דפים לגודל ספציפי Fixed-width viewport
  • תוכן שאינו מותאם לתצוגה בגדלי מסך משתנים Content not sized to viewport
  • שימוש בגופנים קטנים מידי Content not sized to viewport
  • קרבה יתרה בין אלמנטים הניתנים להפעלה באמצעות מחוות ה Touch – Touch elements too close

יסודות בניית אתרי אינטרנט רספונסיביים – Responsive Web Design Basics

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

נגישות באתרי אינטרנט מותאמים למובייל

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

פוקוס

  • מבוא לפוקוס Introduction to Focus
  • סדר האלמנטים DOM Order Matters
  • שינוי סדר האלמנטים Using tabindex

מבנה סמנטי

  • מבוא למבנה סמנטי Introduction to Semantics
  • עץ הנגישות The Accessibility Tree
  • טקסט חלופי לתמונות Text Alternatives for Images
  • ניווט בתוכן Navigating Content

מבנה סמנטי ו ARIA

  • מבוא ל ARIA – Introduction to ARIA
  • תוויות ARIA והקשרים בניהם ARIA Labels and Relationships
  • הסתרה ועדכון תוכן Hiding and Updating Content

עיצוב נגיש Accessible Styles

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

ביצוע בדיקת נגישות How To Do an Accessibility Review

  • ניווט תחילה באמצעות מקלדת Start with the keyboard
  • שימוש בקורא מסך Try it with a screen reader
  • שימוש בכותרות וציוני דרך Take advantage of headings and landmarks
  • בדיקה אוטומטית Automate the process

נגישות אינטרנט בערוץ ה YouTube של Google Chrome Developers בסדרת A11ycasts

סדרת A11ycasts מציעה סדרת סרטונים בנושא הנגשת אתרי אינטרנט עם מומחה נגישות בגוגל Rob Dodson.

 

עודכן ע"י אילנה בניש בתאריך 07.05.2017