10 דרכים נהדרות להפוך את התוכן שלך לנייד ונגיש

תוֹכֶן

• נגישות אינה 'תכונה'
• הגדרת פלטפורמות
• שמירה על תוכן נייד ונגיש
• 1. התחל עם HTML5
• 2. WAI-ARIA
• 3. שימוש ב- doctype
• 4. תגי מסמך HTML5
• 5. קישורים גרועים
• 6. תמונות - ALT לעומת TITLE
• שיידעו אנשים
• סיכום
• תודות
• אֶמְצָעִי

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

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

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

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

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

נגישות אינה 'תכונה'

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

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

הגדרת פלטפורמות

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

• HTML: בעזרת HTML5, האינטרנט הוא מקום טוב עוד יותר עבור כותבים ומוציאים לאור להציג את עבודתם. תגים חדשים כמו מאמר, סָעִיף, כּוֹתֶרֶת ו כותרת תחתונה מיושמים כעת בדפדפנים רבים וניתן להשתמש בהם באופן מהימן למחצה כדי להוסיף הקשר סמנטי לכתיבתך. בנוסף, מודול העמודים הקרוב של CSS3 עשוי גם לעניין את מי שמחפש חוויית קריאה קבועה יותר של עמודים.
• EPUB: EPUB הוא התקן הרשמי של הפורום הבינלאומי לפרסום דיגיטלי (IDPF). EPUB3 אושר באוקטובר 2011 ומאפשר לפרסומים להכין יותר תוכן מעוצב וניתן להתאמה אישית, קרוב יותר למה שמסוגל עם HTML / CSS, ולא להנחיות הקודמות והסטטיות יותר.
• MOBI: MOBI, קיצור של Mobipocket, הוא פורמט המשמש את קינדל וקוראים דיגיטליים אחרים. זה פחות ניתן להתאמה אישית שוב מ- EPUB, אך אנו מכסים את זה כאן מכיוון שאתה יכול להשתמש בו בפרסום תוכן לאמזון אם תבחר. לדברי רובין כריסטופרסון מ- AbilityNet, דגמים מסוימים של קינדל נגישים למשתמשים עיוורים; אולם אפליקציית קינדל ב- iOS אינה. KF8, הפורמט החדש של קינדל, נתמך כרגע על ידי קינדל פייר ובקרוב יופעל למכשירי דיו אלקטרוני מסוג קינדל מהדור האחרון ולאפליקציות קריאת קינדל.
• PDF: PDF הפך ליישות בכל מקום באינטרנט. אני כולל את זה כאן מכיוון שלרוב הטאבלטים יש טכנולוגיה מובנית טובה לקריאת קבצי PDF ומאפשרת טכנולוגיה מסייעת איתם. עם קובץ PDF, הגורם המכריע הוא כיצד נוצר. לדברי אלן דלתון, יועץ לפיתוח נגישות ברשות הלאומית לנכים באירלנד, "אתה יכול להנגיש מסמכי PDF; אולם אנשים רבים לא. הם לא מבינים שהכלים שלהם מייצרים מוצרים גרועים. אם היה לי בדרך, כל מה שאנחנו עושים היה להיות HTML. " בניווט ובנגישות בצד, מסמכי PDF גם אינם מתאימים היטב לגדלים שונים, וכל מי שניסה לקרוא PDF בסמארטפון מכיר את הצביטה, הזום וההזזות הנבוכים לשם כך.

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

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

שמירה על תוכן נייד ונגיש

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

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

1. התחל עם HTML5

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

2. WAI-ARIA

WAI-ARIA היא יוזמת נגישות האינטרנט - חבילת יישומי אינטרנט עשירים נגישים. זו קבוצת הנחיות שנוצרה על ידי קבוצת העבודה פרוטוקולים ופורמטים (PFWG) של
ה- W3C. WAI-ARIA מגדירה דרך להנגיש תוכן אינטרנט ויישומים לאנשים עם מוגבלויות, והוא מסייע בתוכן דינמי ובקרות ממשק משתמש מתקדמות שפותחו בעזרת Ajax, HTML, JavaScript וטכנולוגיות קשורות. חלק מהטכניקות במאמר זה מקורן בהנחיות WAI-ARIA, ולמרות שמאמר זה אינו ארוך מספיק כדי לכסות את כל המפרט, אני ממליץ לך לבדוק אותו לקבלת פירוט רב יותר מדוע אלה מומלצים ושיטות עבודה מומלצות ל מיישמם.

3. שימוש ב- doctype

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

4. תגי מסמך HTML5

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

• כּוֹתֶרֶת ו כותרת תחתונה ניתן להשתמש בשניהם מספר פעמים בדף. הם יכולים לציין את הכותרת הראשית או הכותרת התחתונה של המסמך, או שהם יכולים לשמש למידע כותרת עליונה / תחתונה בתוך מאמרים או קטעים.
• בַּצַד הוא תג טוב לשימוש עבור חלקים, כמו סרגל צדדי בספר, המשלימים למסמך אך אינם מכריעים לחלוטין להבנתו.
• מקטעים הן דרכים לפרק רעיונות או לקבץ תכנים יחד הגיוניים.
• מאמרים הם קטעים עצמאיים ועצמאיים שיכולים להתקיים ללא שאר התוכן. השימוש בתגיות אלה מסייע כראוי לוודא שמבנה התוכן שלך מתפרש כהלכה.

5. קישורים גרועים

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

דוגמא:

a href = "/ contact"> / a>

זה רע.

a href = "/ contact"> צור קשר / a>

הרבה יותר טוב.

6. תמונות - ALT לעומת TITLE

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

Alt מצד שני משמש טכנולוגיה מסייעת ונותן הקשר לאלמנט. אתה חייב להשתמש alt בתמונות שלך וודא שזה מידע שימושי. באמצעות img alt = "" src = "1348.webp">

שיידעו אנשים

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