hasadna/migdar-ui

MigdarUi

This project was generated with Angular CLI version 6.2.1.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

migdar-ui's Issues

תמונות ללא טקסט חלופי

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

1.1.1 Non-text Content A - https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html

חיפוש באתר

להוסיף תוויות (Label) לשדות החיפוש – לדוגמה, חיפוש באתר,חיפושים לדוגמה וחיפוש בספריית המקורות

כותרות מאמרים וקישורים ריקים

פריטי מאמרים יש לסמן בכותרות היררכיות וכקישורים המפנים למאמר. כלומר קישור הכולל את שם המאמר ומוגדר ככותרת היררכית.
בנוסף מומלץ מאוד להגדיר כותרות של מאמרים בתגית Article ב HTML5
הבעיה באתר היא ששמות המאמרים מוגדרים כ h1 אבל הקישור מוגדר עם טקסט אחר ולא ברור כמו למשל NUDZXWCT
הדבר מתבטא כאשר מנווטים לפריטי מאמרים באמצעות מקש ה TAB כגון Ph.D. in physics as a hurdle race, and the “glass hurdles” for women הקישור מוקרא כ NUDZXWCT ומלל לא ברור עבור כותרות מאמרים נוספים – או בהתאם לעדכון פריטי המאמרים המתעדכנים
הטקסט בקישור צריך לכלול את שם המאמר Ph.D. in physics as a hurdle race, and the “glass hurdles” for women

ניגוד מינימום בין צבע טקסט לצבע רקע

יחס ניגוד מינימום בין צבע טקסט לצבע רקע צריך לעמוד על
1:4.5 בטקסט רגיל
1:3 כשהטקסט הוא 14 נקודות מודגש ומעלה או 18 נקודות לא מודגש ומעלה
זה כולל טקסט וקישורים לרבות טקסט או קישורים על גבי תמונות
ניתן להסתייע בתוסף לדפדפנים שנקרא WAVE Web Accessibility Evaluation Tool בכדי לבדוק בעיות נגישות שניתן לזהות באמצעות כלים אוטומטיים ובניהם בעיות יחס ניגוד מינימום
ניתן להסתייע בכלי שנקרא Wave Color Contrast Checker לבחירת צבעי ניגוד שעומדים בדרישות התקן

1.4.3 Contrast (Minimum] AA - https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

קישורים לתגיות

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

בחירת שפה

לא ניתן לנווט באמצעות מקלדת בלבד לתפריט בחירת שפה מכיוון שהרכיב לא מונגש לניווט מקלדת. יתר על כן, משתמש בקורא מסך בלבד, לא מזהה כלל את תפריט בחירת השפה
מציעה לשקול שימוש ברכיב Navigation menu bar button שליחצה עליו תפתח תפריט עם השפות השונות. אליהם ניתן יהיה לנווט באמצעות מקש ה TAB וככל הניתן גם באמצעות מקשי החיצים. לחיצה על אחת השפות עם מקש ENTER תטען את העמוד עם השפה שנבחרה. לחיצה על מקש ESC תאפשר לצאת מהתפריט בכל עת.
2.1.1 Keyboard A - https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html
Navigation Menu Button Example - W3C - https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html

ניראות מוקד המקלדת

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

2.4.7 Focus Visible AA - https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html
a11y_styled_form_controls - https://scottaohara.github.io/a11y_styled_form_controls/

מידע נע / נגלל

בצד שמאל בדף הבית באתר

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

@mohammad-suliman אמרת שתתייעץ לגבי מה אפשר לעשות כאן...

קישור לפייסבוק

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

מנגנון עקיפת קטעים חוזרים

בכל אתר, צריך לספק קישור שלחיצה עליו יאפשר לעבור ישירות לתחילת תוכן מרכזי בעמוד
אפשר שהקישור יוסתר ב CSS ויוצג רק כאשר משתמש מקלדת עם וללא קורא מסך לוחץ על Tab (או Ctrl + home או בטעינת העמוד)
בעמודים בהם מוגדרת כותרת ראשית ב h1 או רמה אחרת, הפרקטיקה הנהוגה היא לקשר בין הקישור דילוג לתוכן מרכזי ל ID של הכותרת הראשית
2.4.1 Bypass Blocks A - https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html
טכניקת מימוש לדוגמה G1: Adding a link at the top of each page that goes directly to the main content area - https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G1