דרושים פרילנסרים לפיתוח סרגל נגישות

אנו מעוניינים לפתח כלי של סרגל נגישות אשר ישולבו באתרים שאנו מקימים.

דוגמה להמחשה בלבד של משהו בסגנון:
באתר http://gifts.elite.co.il יש אפשרות לפתיחת סרגל הנגישות מצד ימין (הקלקה על האייקון של הנכה).


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

שורה ראשונה משמאל לימין: הגדל גופן, הקטן גופן, פונט קריא (מעביר לפונט אריאל).
בהנתן שגודל הפונט המופיע על המסך הוא 100%, הגדלה פעם אחת תעביר ל-120%, פעם שניה ל-150%, פעם שלישית ל-200% ופעם רביעית ל-250%. הקטנה תחזיר שלב אחד אחורה: מ-250% ל-200%, מ-200% ל-150% וכן הלאה ועד 100% (לא יותר קטן מגודל הגופן המקורי).
האפשרות "פונט קריא" יכולה להיות פעילה (תסומן בצד ב-V) או לא פעילה (ללא סימון ב-V)

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

שורה שלישית משמאל לימין: הדגש כותרות (מגדיל את הכותרות פי 1.2, צובע אותם באדום ועושה אותם BOLD), הדגש קישורים (מגדיל את הקישורים פי 1.2, צובע אותם באדום ועושה אותם BOLD), תאור לתמונות (הופך את ערכי ה-ALT של התמונות לכיתוב על התמונה בכתב לבן על רקע שחור).
כל אחת מהאפשרויות יכולה להיות פעילה או לא פעילה ללא קשר לאפשרויות האחרות בשורה זו.

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

חשוב:
1. רק אחת מבין האפשרויות ניגודיות גבוהה, ניגודיות נמוכה, שחור-לבן יכולה להיות פעילה בכל רגע נתון. הקלקה על אחת האפשרויות האלו מבטלת פעילות של האחרות שיתכן והופעלו קודם לכן.
2. ניתן להפעיל בו זמנית את כל האפשרויות הבאות (או חלק מהן): הדגש כותרות, הדגש קישורים, תאור לתמונות, זום, סמן גדול וגם אחת מבין ניגודיות גבוהה / ניגודיות נמוכה / שחור-לבן. כל אפשרות שפעילה תסומן בצידה ב-V.
3. השינויים בעיצוב יתבצעו בזמן אמת ב-DOM על האלמנטים הקיימים במסך. הסרגל לא מותאם לאתר ספציפי, אלא לכל אתר באשר הוא.


הערות:
+ פיתוח ב-javascript נקי וללא שימוש בסיפריות חיצוניות (לא node / angular / jquery וכיו"ב). הכל קוד JS מקורי שלכם.

+ שימוש ב- HTML5, CSS3 (ולא נייח HTML4 או XHTML). פיתוח מלא בצד לקוח בלבד, ללא קוד שרת (PHP/ASP וכיו"ב).

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

+ הקוד חייב לעבור בדיקת ואלידציה של W3C בציון 100%

+ כל הקוד מקורי שלכם בלבד, ללא הורדת קטעי קוד באשר הם (עם או בלי רשיון). אתם המקור וכותבים מאפס.

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

+ הזכויות עוברות במלואן אלינו, כלומר, אסור לכם למכור כלים אלו לאחרים בשום מצב ובשום צורה לאחר מכן.

+ כלי הנגישות יוצגו עם אייקונים. תוכלו להשתמש במשהו סתמי וחינמי בתור התחלה. אנחנו כבר נחליף זאת בעצמנו בהמשך.

+ תפעול סרגל הנגישות יכול להתבצע גם באמצעות העכבר וגם באמצעות המקלדת (מעבר בין אלמנטים נניח עם alt+tab). יש לאפשר זאת באופן מלא ובצורה נוחה לעבודה.
+ אנו נעשה code review על הקוד שלכם לוודא שהוא קריא וקל לתפעול ותחזוקה לפני שהוא מועבר לידינו. לא נקבל קוד שאיננו ברור, לא כתוב לפי קונבנציות אחידות ואיננו מובן.

תודה,
דוד