נגישות וגוגל כמו שצריך!
סוג אות, כותרות, נגישות, ולהיות בסדר עם גוגל!
בלי תירוצים, הנה כבר יש כל מיני דברים שחשוב לדעת. התחלנו לטפל בנגישות באפריל 2017 כשחוק הנגישות עדיין לא היה בתוקף. אוקטובר 2018 הוא הוחל בצורה שונה, וקיים היום בצורה ברורה (פרטים בהמשך הדף). אבל גם אם אין לך צורך רשמי להנגיש אתר, עדיין חשוב לפעול לפי חוקי ההנגשה ממילא, כי זה טוב לנגישות וגם מעולה בגוגל, לכן מעולה לאתר שלך.
קודם כל טיפ שקיבלתי מהמומחית שלי – חוה קורן, מה שחשוב לגוגל – זו חווית גלישה טובה ככל האפשר. זה בא לידי ביטוי בהרבה דרכים (למשל – מהירות טעינת האתר), כשנושא הנגישות למעשה נמצא תחת אותה ״מטריה״ של שיפור חווית המשתמש.
לכן למען חוויית משתמש נכונה, כדי שיהיה לך נוח לקרוא, לגוגל נוח לקרוא, וטוב גם לנגישות (כי גוגל ונגישות חושבים דומה), נא להקשיב לתכנים בהמשך ולהתחיל ליישם.
התכנים מתייחסים לנגישות שעוזרת למתקשים בראייה, נגישות לשמיעה כוללת כתוביות בסרטים או מלל כתוב במקום שיש דיבור.
אני שמתי את המלל בנפרד כדי לענות על צורך זה. הדוגמה מדברת בעד עצמה, לכן אין פרק מיוחד אלא הדגמה במציאות.
4 פרקים קצרים, לצפות לפי הסדר, עדיף.
תימלול של הדיבור בסרט יחד עם חלוקת זמנים כללית.
00:00 – הי כאן נועה מעסק טוב עם עוד הדרכה שתעשה את החיים הטכניים שלנו קלים קצת יותר, והיום על משהו קטן באתר אבל מאוד מאוד חשוב, על אותיות.
אותיות, כלומר פונטים, פונט זה סוג אות, כלומר, איזה סוג אות אני אבחר שיהיה לי באתר. אז אפשר לראות שבאתר שלי בחרתי סוג אות שהוא גם קטן, גם גדול, גם עבה, גם דק, ומשדר את אותו מסר, אני לא משחקת כאן עם סוגי אותיות שונים.
00:30 – אבל כן בחרתי סוג שהוא לא ברירת המחדל. מה זאת אומרת ברירת המחדל? אם אני הולכת רגע לגוגל ומקלידה כל חיפוש שלא יהיה, אני מקבלת תשובות כשברירת המחדל כתובה בסוג אות שניקרא "אריאל", גם בעברית גם באנגלית מאוד אחיד, ישר, ברור עם קצוות עגולים וביננו, מאוד משעמם. באנגלית יש המון סוגים. אז למה שבעברית לא יהיו?
01:00 – אז אם אני לוחצת על הקישור הזה, פונטים בעיברית בחינם, אני מגיעה לאתר שמראה לי שיש המון סוגי פונטים בעיברית ובחינם. אבל אני לא יכולה להשתמש בהם באינטרנט באופן חופשי. משום שנגיד, כתב היד הזה הוא כתב היד שאני הכי אוהבת וזה הכתב שמאפיין את האתר שלי. אני אטמיע אותו באתר, עדיין אני יכולה להסתכן בכך שמי שמסתכל על האתר שלי מהמחשב שלו, והמחשב שלו לא מזהה את כתב היד הזה, באופן אוטומטי, הוא יהפוך להיות אותו אריאל, ברירת מחדל.
01:42 – בכל זאת מה אפשר לעשות? יש התפתחויות בגוגל, התפתחויות טובות, הם הבינו שבעברית צריך קצת יותר משניים שלושה סוגי אותיות, ולמרבה המזל הם גם מופיעים לי בהורדה בחינם. למשל, סוג האות הזה שניקרא כאן, אמנטיקה, מופיע לי, ואני מעבירה אתכם עכשיו לאתר שנקרא גוגל פונטס, מופיע לי בתוך גוגל פונטס, הנה כאן.
02:12 – גוגל פונטס, יש להם 818 פונטים מוכרים. מתוכם, כאשר אני בוחרת בפונטים בעברית, אני מקבלת רק 15, ועדיין, 15 מבחר יפה, שאחד מהם נקרא אמטיק, הנה, אתם רואים הוא גם נמצא לי כפונט שאני יכולה להוריד למחשב ולהשתמש בו בעריכה גראפית וכל מיני דברים כאלה, וגם כפונט שאני יכולה לשים באתר, לבחור אותו כפונט מוביל וכל מי שיצפה באתר שלי, מהסוללרי שלו, מהמחשב שלו, יראה את אותו הפונט.
02:53 – אז יש עושר יותר גדול של פונטים בגוגל , שהם ניתנים לשימוש באתרים, והנה אנחנו יכולים עכשיו להתלבט קצת יותר איזה פונט יותר מתאים לנו לאתר.
03:09 – אני, דרך אגב, אוהבת להשתמש בפונט הזה שניקרא "אלף", אתם יכולים לראות אותו כאן ככותרת אבל אני יכולה לבדוק אותו גם כפונט של טקסט, נגיד להעתיק את כל הטקסט הזה, נעשה לו COPY, ונשים אותו כאן ונעשה לו PASTE ואני אראה יותר טקסט, אני אקטין אותו קצת ותיראו שבכל גודל כתב "אלף" הוא כתב קריא וניראה יפה בעיניי.
03:45 – אז בבקשה, לכו לבחור להתלבט ולשים באתר שלכם את סוג האות שגם גוגל אוהב וככה כולם יראו את האתר שלכם באותו אופן. בהצלחה.
חלק ראשון
סוג אות נכון לאתר שלך.
פעם היתה ברירת מחדל אחת של אריאל, ועוד כמה אפשרויות לא נוחות. היום יש מבחר קצת יותר גדול שמוכר על ידי גוגל, ואפשר לגוון. מעט מידע על בחירת האות הנכונה לשימוש במחשב וגם באתר.
הקישורים לדף הפונטים של גוגל הוא:
תימלול של הדיבור בסרט יחד עם חלוקת זמנים כללית.
00:00 – הי כאן נועה מעסק טוב עם עוד הדרכה שתעשה את החיים הטכניים שלנו קלים קצת יותר, ויעילים הרבה יותר במיוחד כשמדובר בנגישות.
אגב, נגישות קשורה גם לגוגל, אתר שמתוכנן נכון ביחס לנגישות מתאים הרבה יותר להתניות של גוגל.
00:22 אבל קודם כל בנוגע לנגישות אני עוברת בלחיצת כפתור לאתר של איגוד האינטרנט הישראלי, על מנת להבין אם האתר שלי מחוייב בנגישות או לא.
אני הולכת לעשייה ציבורית, נגישות אתרים, ויש כאן כל מיני נושאים, כדאי לעבור על כולם, אני אעבור רק על שניים.
00:46 – הראשון – בידקו האם האתר שלכם צריך להיות מונגש.
אני אבחר באופן מקרי את התשובות, רק כדי להראות לכם איך לפעול.
– "האתר שלי נותן שירות או מידע אודות השירות" – בעיקרון כן.
– "פונה לציבור הישראלי" – כן.
– "הוקם לפני 2017" נגיד שהוא חדש…
– "המחזור הכספי הממוצע שלי בשלו השנים האחרונות" – וכאן יש לי 3 אפשרויות לבחור:
– קטן מ 100,000 שקל בשנה
– קטן מ 300,000 שקל בשנה
– גדול מ 300,000 שקל בשנה
דוגמה אם אני בוחרת קטן מ-100,000 שקל בשנה, האתר שלי פטור מהנגשה. אבל למרות שהאתר פטור, ולכן גם הראיתי את הדוגמה הזו, אני מציעה לכם להנגיש את האתר לפחות בדרכים החינמיות שאפשר.
01:38 אני מדברת על חינמיות משום שיש עוד דבר באתר הזה, שנותן לנו תמונה, לדעתי קצת לא מדוייקת, על עלויות של הנגשת אתרי אינטרנט. במיוחד כי זה נוצר בשנת 2017 המחירון הזה, מאז חלו כל מיני שינויים. פירוט עלויות ההנגשה המוצגות כאן – אתר חדש 9700, אתר וורדפס חדש יותר זול כמובן, משום שבוורדפרס יש כל מיני דרכים קלות מאד להנגיש אתר. אל תקחו את זה כדוגמה אבל תראו איך המחירים יכולים להיות גבוהים מאד להנגשה, ולכן אני רוצה לעבור למה שאפשר לעשות, שוב – גם אם לא חייבים להנגיש, אפשר לעשות אפילו באופן חינמי.
02:25 ואני עוברת לאתר של 24 רופי, אתר שנהניתי מאד לבנות למקום שאני מאד אוהבת להיות בו. יש כאן כמה דברים שקשורים לנגישות, אני אראה לכם רק 2 שנכונים ומתאימים לפרק הזה.
02:43 – מצד שמאל למעלה יש אייקון נגישות, כשאני לוחצת עליו עולים לי כל מיני פרמטרים של שינויים שאני יכולה ליצור בתצוגה. ואני עוברת לאתר שלי – גם בו יש תוסף נגישות אייקון מצד שמאל, שאם אני לוחצת עליו אני רואה כלי נגישות שונים שמאפשרים לצפות במסך בצורה מותאמת לכל אחד והמגבלות שלו.
03:10 – תוסף הנגישות הזה חינמי. שמתם אותו באתר- לא עלה לכם גרוש, והנה כבר הנגשתם קצת יותר את האתר לאנשים שקשה להם לראות את האתר שלכם בצורה הרגילה שלו.
03:20 הדבר הנוסף שיש באתר של 24 רופי הוא האפשרות לעבור בעזרת מקשי המקלדת ללא עכבר. ואז אם אני לוחצת על טאב ולוחצת שוב, נותן לי "הגעת לחלק העליון של האתר…" וכל לחיצה על הטאב מעבירה אותי לפריטים שאני יכולה להגיע אליהם ללא שימוש בעכבר.
פעולת ההנגשה הזו בוצעה עבור 24 רופי במיוחד, בעלויות נמוכות הרבה יותר ממה שראיתם בטבלה, ועכשיו האתר מונגש כחוק.
03:57 – אז אלו שני דברים שאפשר וחשוב לעשות באתר אני מראה לכם שוב –
- תוסף הנגשה, גם כאן תוסף הנגשה.
- ואפשרות מעבר רק על ידי הפעלת המקלדת ללא הפעלה של העכבר.
- עד כאן על הנגשה ונעבור לפרק הבא איך אפשר להנגיש את התוכן.
בהצלחה.
חלק שני
תוסף נגישות
כל מה שקשור לנוחות קריאה מתייחס גם לנגישות, ויש על כך מידע רב באתר של איגוד האינטרנט הישראלי, כולל מידע על עלויות הנגשה לאתר. מעט על עלויות של הנגשת אתר, ומה נותן תוסף הנגישות של וורדפרס בלחיצת כפתור אחת. (תוספי נגישות קיימים ברשת, כל הזמן בהתפתחות לכן אין כאן המלצה על אחד מסויים). קישור לאתר של איגוד האינטרנט הישראלי: http://www.isoc.org.ilכמה מילים על נגישות אתר וורדפרס
להנגיש אתר יכול להיות פשוט אם יודעים מה לעשות, בכל מקרה זו לא מעט עבודה, כי לשים תוסף וזהו – זו הנגשה בסיסית טובה, אבל חלקית ביותר.
יש פעולות רבות נוספות שמתבצעות לטובת נגישות, חלקן בצד הטכני שלא רואים כשגולשים באתר (כמו שם התמונה שלא רואים אבל הוא שם), ועד לדברים שנראים במבט ראשון, כמו הכותרות שדיברתי עליהן בחלק השלישי.
חוק הנגישות נכנס לתוקפו באוקטובר 2018 ואפשר לקרוא בדיוק מה נדרש וממי באתר של איגוד האינטרנט הישראלי כאן.
העניין הוא שגם בלי החוק ברור שטוב להנגיש את האתר, אם מפני שכך מרחיבים את קהל הנכנסים לאתר וגם צוברים נקודות זכות אצל המבקרים שלכם, או מפני שכך צוברים נקודות זכות בגוגל, סיבה טובה כשלעצמה.
אחרי שלמדתי על כך מעט ואפילו קיבלתי תעודה, אני יודעת שעכשיו זו זכותכם או אולי אפילו חובתכם להנגיש אתר, אז אתם מוזמנים להקדים את המאוחר וליצור קשר איתנו, נשמח לעזור לכם להנגיש את האתר שלכם כמו שצריך, במינימום עלויות והדרכה להמשך.
תימלול של הדיבור בסרט יחד עם חלוקת זמנים כללית.
00:00 – הי כאן נועה מעסק טוב עם עוד הדרכה שתעשה את החיים הטכניים שלנו קלים קצת יותר, ואני ממשיכה בנוגע לנגישות. עם מיקוד על תוכן, טקסט, כותרות כל מה שקשור לתכנים שכתובים באתר.
02:20 – אז אפשר לקרא את התוכן באתר שלי בשלוש דרכים. מי שמתבונן באתר ורואה רגיל רואה כותרת, "חדש חדיש ומחודש" וכולי. כותרת משנית "למה לך אתר?" וטקסט משמסביר "למה לך אתר".
אם אני אגלול מעט למטה יש כותרת קטנה עוד יותר "אתר חדש" ומסביר מה זה אתר חדש, העסק שלך צעיר… "אתר חדיש" עוד כותורת קטנה ועוד כותרת קטנה, "אתר מחודש" ומתחת יש טקסט.
00:52 – אז בצפייה באתר באופן רגיל אני מקבלת מסר אוטומטי שמדברים כאן על "חדש חדיש ומחודש", כותרת המשנה מסבירה במה מדובר, כלומר אתר, והטקסט מסביר קצת יותר. זו הדרך הרגילה לקרא את התוכן.
01:15 – דרך נוספת לקרוא את התוכן באתר היא להסתכל עליו כמו מכשיר שקורא תכנים עבור אנשים שלא רואים ברור את המסך. המכשיר קורא את כל הטסט אבל יכול להתעכב רק על כותרות, רק על כותרות משנה. ולכן כדאי לסמן בטקסט מה כותרת, מה טקסט רגיל, מה כותרת משנה,וככה, מי שמקבל קריאה של תכנים ע"י המכשיר, יוכל לדלג מכותרת לכותרת ולא בהכרח חייב לקרוא את כל הטקסט או להקשיב לכל הטקסט. לכן כדאי לסמן כותרת ככזו, ולא רק להגדיל את הטקסט ולעבות אותו ולצבוע אותו בצבע יפה.
01:58 – הדרך השלישית והמסכמת לקריאת מסך היא הדרך של גוגל, איך גוגל רואה את המסך. אז באופן פלאי, גוגל רואה את המסך בערך כמו מכשיר שמקריא את התכנים באתר. זאת אומרת שגם גוגל מתייחס לכותרת, לכותרת משנה, לטקסט, לערך הטקסטואלי שיש בפנים ולהקשרים בינהם, כמובן, אבל חייב להיות הבדל בין כותרת לטקסט.
למה אני מתכוונת – אני אראה איך עושים את זה בצורה הכי פשוטה. ומהיום כל טקסט שאתם מכניסים לאתר, בבקשה בבקשה, תבצעו את השינויים שבתוכו בצורה הזאת. והכנתי מראש טקסט, שמתי, פתחתי פוסט חדש ושמתי אותו כאן כדי להראות בקצרה ובמהירות איך לארגן את התוכן כך שיהיה קריא, נגיש וטוב לכולם.
02:56 – הכותרת באופן אוטומטי הופכת להיות טייטל, משהו שוורדפרס מכין מראש, חסך לנו עבודה. הנה כל הטקסט והכנתי כותרת ראשית, כותרת משנית, טקסט רגיל, כותרת ברמה עוד יותר משנית, ותראו כמה זה פשוט –
03:12 – אני לא חייבת לסמן את כל השורה אני יכולה רק לשים את הסמן על השורה הזאת, לבחור פורמט, אצלי זה נראה בצורה כזאת אצלכם אולי בצורה אחרת, בכל מקרה, תחת פורמט אני אמצא את הכותרות. הנה כותרת ראשית h1.
שמתי את הסמן על השורה הזאת, שהיא הכותרת המשנית, אני בוחרת h2. שימו לב, כותרת ראשית גדולה, כותרת משנית קטנה יותר, הטקסט נישאר טקסט.
03:40 – אגב, אם אתם רוצים למצא טקסט שהוא ג'יבריש כזה תחפשו "לורם איפסום", זה טקסט שממלא מקום וסתם תופס שטח כדי להדגים, להראות, או אם במקרה עוד לא הספקתם להכין טקסט לאתר.
03:55 – ואם אני רוצה לשים כותר ברמה 3, שוב שמה את הסמן על המשפט הזה, פורמט, כותרת 3, עוד כותרת, בבקשה, פורמט, כותרת 3, וסידרתי את הטקסט בצורה נהדרת.
04:15 – כדי שתבינו מה גוגל רואה או מה המכונה רואה אני אעבור, רגע לאורך הטקסט ותראו שהכותרת הראשית יש לה משני הצדדים הגדרה שניקראת H1 הכותרת המשנית מקבלת H2 , לטקסט אין כלום, כותרת הזאת של H3 קיבלה H3. והנה עוד אחת.
זאת אומרת שכאן אני רואה את כל ההוראות הטכניות, קוראים לזה HTML. ובעורך הויזואלי אני יכולה לראות את התוצאה שמפרידה לי בין כותרות לטקסט.
04:50 – זהו. פשוט וקל ממש פשוט וקל, אני מקווה שאתם מסכימים איתי. ומעכשיו, כל טקסט שאתם מכניסים לאתר בבקשה תפרידו כותרות, תפרידו טקסט, כדי שאתם תצאו מורווחים, מי שקורא את התכנים באתר שלכם יצא מורווח, והאתר ירוץ קדימה בגוגל.
זהו. מקווה שאתם נהנים לשחק עם התכנים, ובהצלחה.
חלק שלישי
אוהבים את הכתיבה שלך!
התוכן שווה המון, אין ספק, ולא פחות מזה שווה גם קלות ונוחות הקריאה, אז מלבד בחירה בסוג אות נכון, הנה כמה חוקים שיעילים לנוחיות, לנגישות וגם, כמובן, לגוגל.
לא הזכרתי הרבה דברים בסרט אז הנה תוספת קטנה
איך מסמנים קישורים
(שימו לב איך נראה קישור – רקע צהוב, כתב כחול מודגש וקו למטה)
לבעלי ידע טכני באתר וורדפרס – אין קישורים בסרט, אבל אם אתם רוצים עורך טקסט עשיר כמו שנראה באתר שלי, כל מה שצריך זה להוריד את התוסף – TinyMCE Advanced
http://he.wordpress.org/plugins/tinymce-advanced/
תימלול של הדיבור בסרט יחד עם חלוקת זמנים כללית.
00:00 – הי כאן נועה מעסק טוב עם עוד הדרכה שתעשה את החיים הטכניים שלנו קלים קצת יותר, ואני ממשיכה בנוגע לנגישות, משהו קטן אבל חשוב ויעיל בצורה יוצאת דופן.
אתם בטוח שמים תמונות באתר, גם אני שמה תמונות באתר בתוך התוכן, הנה, פה יש לי שלושה רובוטים חמודים שהוכנסו לתוך התוכן.
00:26 – אז כדי להכניס את התמונות לתכנים בצורה הכי נכונה, נחזור לטקסט שהכנתי קודם ונכניס תמונה, ואני רוצה להראות לכם בצורה פשוטה מה כדאי לעשות.
אני מכניסה לכאן, נאמר תמונת מתנה, ואני מסדרת אותה שתהיה מיושרת לימין ומקטינה אותה ואת התוכן שיניתי ל"הנה מתנה גדולה בשבילכם".
00:53 – עכשיו, חשוב לי שגם מי שלא רואה את התמונה, כלומר, גוגל כמנוע חיפוש לא רואה תמונות, הוא מזהה את הטקסט של התמונה, וגם אותה מכונה שמקריאה טקסטים לא רואה תמונה היא כן יכולה להקריא טקסט. חשוב לי שהתמונה הזאת תקרא "מתנה". אז אני נכנסת לעריכת התמונה, נכנסת לטקסט חלופי, כותבת "מתנה בשבילכם" כי זה מתאים גם לתוכן, ומעדכנת. זה הכל.
01:25 – הכתוב לא מוצג בתוכן עצמו אבל הוא כן קיים מאחורי התמונה, והנה, בפעולה פשוטה ביותר עשינו עבודה חשובה מאוד.
01:40 – אז אתם יכולים בתוכן חדש לשים תמונות ולתת להם טקסט חלופי שמגדיר מה התמונה. ובטקסט ישן פשוט כנסו לעריכה עימדו על התמונה, לחצו על העיפרון ועדכנו את הטקסט החלופי.
זהו. טיפ קטן וחשוב בנוגע לתמונות בתוך הטקסט ואני מקווה שתהנו לשנות את הדברים בידיעה שזה עוזר לכם, לנו, ולאתר.
בהצלחה!
חלק רביעי
תמונות – קצר וקולע.
כולנו שמים תמונות בתוכן, אבל מי שלא רואה תמונות יכול רק לקבל את הכיתוב לגביהן, כך גוגל, כך במכשירים שמקריאים את הטקסט.
מה הכיתוב בתמונות שלכם? האם זה המספר האוטומטי שהמצלמה הוציאה, או התיאור שעלה ממאגר התמונות, או שהתאמתם אותו כמו שצריך?
להתאמה נכונה צפו בסרטון הקצרצר הזה.