💡


האם ידעתם: אם אתה לא יודע מה סדר ה־TAB באתר – השתמש בתוסף WAVE ACEESSIBLITY לדפדפן שלך והוא יראה לך את סדר הניווט.

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

 

התמונה למעלה מתחלקת 6 לאזורים.

2.       תפריט ראשי של האתר.

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

4.       תוכן המאמר עצמו.

5.       Sidebar- בד"כ איזור זה יכלול מידע נוסף על המאמר או קישורים לאיזורים אחרים באתר או כל מידע אחר לפי איפיון האתר.

6.       Footer.

התחלתי בכוונה ממס' 2, שכן את מספר 1 אני שומר תמיד עבור לינק לתוכן המרכזי (איזור 4 בתמונה). קישור זה הוא הדבר הראשון, שאדם שעובד עם מקלדת מחפש. קישור זה יכול להופיע קבוע או להופיע כאשר הוא מקבל פוקוס מהמקלדת. תוכל לעצב אותו כיצד שנוח לך ובהתאם לכללים.

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

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

קחו את המצב הבא:

A blue and white rectangular object with black text

AI-generated content may be incorrect.

איך אתם הייתם מתכננים את נתיב הפוקוס?

איך להנחות את בעל האתר למציאת הניווט הנכון בעזרת מקלדת?

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


FAQ



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

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

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

בונים תרשים היררכי פשוט (סקיצה, wireframe או שרטוט) שמסמן את סדר הפוקוס הרצוי, ומוסיפים הסבר טקסטואלי. ככל שההנחיה תהיה מדויקת – כך הקוד יהיה נגיש יותר.

פשוט פתח את האתר, אל תיגע בעכבר – והתחל ללחוץ על TAB. האם אתה עובר בין הרכיבים לפי הסדר ההגיוני? האם אתה מגיע לכל מה שחשוב? אם לא – יש בעיה שדורשת תיקון.

עודכן בתאריך: