אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » נגישות אינטרנט » נגישות אינטרנט

נגישות אינטרנט

רן בר-זיק פברואר 5, 2023 7:07 am תגובה אחת

פרק על נגישות בפודקאסט בוקר טוב בהשתתפותי – אז זו הזדמנות לתת עוד מידע על הנושא החשוב

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

אז קודם כל – הנה הפרק של בוקר טוב. זה הקישור לפרק ולמקומות שאפשר לשמוע אותו והנה האמבד:

בגדול הדבר הכי חשוב שדיברנו עליו הוא ״מהי נגישות״ כשהתמקדנו בנגישות ווב מהזווית הטכנית. אז מהי נגישות? דבר שמאפשר לאנשים שיש להם צרכים מיוחדים להשתמש באתר אינטרנט או ממשק אינטרנטי. למשל עיוורים, אבל לא רק עיוורים או כאלו שיש להם צרכי ראיה מיוחדים (כמו עיוורי צבעים), או למשל אנשים שיש להם קושי להשתמש בעכבר, אנשים עם דיסלקציה, אנשים חירשים (לאינדיקציה קולית) וכו׳ וכו׳.

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

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

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

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

מה זו נגישות מבחינה טכנית?

בגדול שינוי של CSS ו-HTML וגם ג׳אווהסקריפט על מנת להפוך אתר לנגיש. אני אתן דוגמה קלאסית – תמונה. למשל תמונה הממחישה הרצה של פקודה מסוימת ב-npm. היא חלק משמעותי מהמאמר.

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

<img src="https://internet-israel.com/wp-content/uploads/2023/01/npm-create-vite-latest-1024x444.png" />

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

<img src="https://internet-israel.com/wp-content/uploads/2023/01/npm-create-vite-latest-1024x444.png" alt="npm create [email protected]                              
✔ Project name: … my-demo-project
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript

Scaffolding project in /Users/barzik/local/my-demo-project...

Done. Now run:

  cd my-demo-project
  npm install
  npm run dev" />

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

אז מה עושים? משתמשים בכלים! על זה דיברנו בפרק.

למשל גוגל לייטהאוס, שנמצא אצל כולנו.

לשונית גוגל לייטהאוס

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

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

דוקומנטציה טובה כוללת בתוכה:

  1. הצהרה על התקן שאתם משתמשים כולל חוות דעת משפטית.
  2. הסבר על כלים שנעשים במהלך הפיתוח – מפריימוורקים ועד כלים שמשולבים ביוניט טסטינג, ב-E2E.
  3. הסבר על כלים שה-QA משתמשים בהם.
  4. קישור לבאגים שנפתחו על נושאי נגישות. הקפידו לתייג בג׳ירה או במערכות אחרות בלייבל של Accessbility ולקשר במסמך אל הלייבל הזה, כך עורך הדין יכול להוכיח שאכן תיקנתם ושיפרתם דברים מיוזמתכם בנושא נגישות.
  5. VPAT של חברה חיצונית שנעשתה ותיעוד כל ההתקשרויות לחברה החיצונית כולל אישור שהיא עובדת בנגישות.
  6. הדרכות שהעובדים עברו – פנימיות וחיצוניות כולל תיעוד של מי שעשה אותן.

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
נגישות אינטרנט

תגובה אחת

  1. ינאי הגב פברואר 6, 2023 בשעה 7:39 am

    חשוב לציין שיש גם חבילות npm שונות שיכולות לעשות את הבדיקות כחלק מה UT

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד