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

על פי ה- CDC (מרכזים לבקרת מחלות ומניעתן), למעלה מ -60 מיליון אמריקאים חיים עם מוגבלות. בהתאם להנחיות הנגשת תוכן האינטרנט, תוכל להציג כמה שיקולים מקדימים שיתרמו להפיכת אתר אינטרנט לנגיש. הנה כל מה שאתה צריך כדי להתחיל עם נגישות אינטרנט באמצעות HTML ו- CSS.

HTML מובנה עם סמנטיקה נכונה

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

למשל, א

קרא עוד: דוגמאות פשוטות לקוד HTML שתוכל ללמוד תוך 10 דקות

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

אוֹ tag, זה עוזר בקידום אתרים.

תוכן מובנה עבור משתמשי קוראי מסך

להלן דוגמה של HTML סמנטי טוב לעומת רַע.

HTML סמנטי טוב
הכותרת שלי

כך תוכל להפוך אתר אינטרנט נגיש באמצעות HTML ו- CSS

הכותרת השנייה שלי

HTML סמנטי גרוע
הכותרת שלי

כך תוכל להפוך אתר אינטרנט נגיש באמצעות HTML ו- CSS

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

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

שפה ופריסות לאתר נגיש

עליך להשתמש בשפה מדויקת עם ראשי תיבות וקיצורים מורחבים. אם אפשר, נסה להימנע מקווים על ידי כתיבת 9-5 -> 9 עד 5. בעבר השתמשו בטבלאות HTML ליצירת פריסות הדפים. הוא נהג לפגוע בקריאות הנכונות בשל טבלאות מקוננות שיצרו פריסה מורכבת למדי. להלן מבנה אתר מודרני:

זוהי כותרת



תוכן העמוד הראשי

מאמר המכיל

כותרת המאמר

תוכן המאמר



כותרת תחתונה לאתר

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

שקלו מחדש פקדי ממשק משתמש, טבלאות וטקסט Alt

לרוב, פקדי ממשק המשתמש הם לחצנים, טפסים ופקדי קישור של מסמך האינטרנט שלך. כלל האצבע הוא שניתן לתפעל אותם באמצעות מקלדת. יש להם סגנון ברירת מחדל כלשהו (עשוי להיות שונה בדפדפנים שונים) שבהם תוכל לקפוץ לאפשרויות אחרות באמצעות מקש Tab ולחץ על Enter/Return כדי להגיע למסקנה. תוכל לנהל את תוויות הטקסט על ידי הוספת טקסטים עוגנים ייחודיים ומשמעותיים במקום "לחץ כאן".

כדי ליצור טבלאות נגישות, הוסף כותרות שולחן

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

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

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

פרח אדום ...

השתמשת במאפיין aria-labelledby להתייחסות למזהה זה. זה יאפשר לקוראי המסך להשתמש בטקסט alt בצורה של אותה פסקה.

CSS סטנדרטי לנגישות טובה יותר

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

,

, ו

אלמנט, CSS טיפוסי צריך להיות:

h1 {
גודל גופן: 4rem;
}
p, li {
גודל גופן: 1.5 רמז;
צבע כחול;
}

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

עיצוב טקסט, קישורים ותוויות

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

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

א {
צבע: #ff0000;
}
א: פעיל {
צבע: #000000;
צבע רקע: #a60000;
}
א: רחף, א: ביקר, א: מיקוד {
צבע: #a60000;
טקסט-קישוט: אין;
}

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

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

ניגודיות צבעים וערכי הסתרה

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

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

הקל על ביטול הסגנון

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

סיכום: שילוב HTML ו- CSS

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

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

אופן בניית אתר אינטרנט: למתחילים

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

קרא הבא

על הסופר

הרחב לקריאת הסיפור המלא