ניקלאו » ארכיון הבלוג » לוח שנה נגיש ב-JavaScript (מיותר אך שימושי)

» ארכיון הבלוג » לוח שנה נגיש ב-JavaScript (מיותר אבל שימושי) Niquelao - נגישות לוח שנה נגיש ב-JavaScript (מיותר אבל שימושי) 11 בפברואר, 2007 מאת Rumoroso בשדות טופס שבהם יש להזין תאריך, לשיפור חוויית המשתמש ובמקביל להגברת השליטה בפורמט הנתונים, ניתן לכלול לוח שנה באמצעות JavaScript. אני יודע, מילה מקוללת, אבל אם עושים זאת בזהירות ובשליטה, אין סיבה שתהיה לכך השלכה שלילית מבחינת תקנים ונגישות. מטרות מלכתחילה הגדרתי שתי מטרות עיקריות, שלמעשה היו יותר קווים מנחים בעבודה על בנייתו: שיהיה נגיש ולא פולשני. מן הסתם, בהיעדר תמיכה ב-JavaScript לא מוצעת האפשרות לפרוס את לוח השנה, אבל אם יש תמיכה… למה לא להפוך את התוכן הנוצר לנגיש ושמיש? שיהיה קל ליישום ולשימוש. חיפשתי דרך כזו שמתכנתים המעוניינים ליישם אותו בדפי האינטרנט שלהם לא יידרשו להוסיף קוד נוסף. כשם שב-CSS משתמשים בסוגים שונים של סלקטורים (של אלמנטים, id, מחלקות,…) כדי לשייך עיצוב לחלקים השונים במסמכים שלנו, למה לא להשתמש באותו דבר כדי לשייך התנהגויות? בנוסף, כמטרות משניות: אופטימיזציה, הכללה, בינלאומיות,… (להיות ריאלי, הייתי צריך להסיר את המטרות של להתחיל עם מישהי ושל להרוויח כסף.) הדוגמה כדי לבדוק את פעולתו, תוכלו לגשת לדוגמה ולהוריד אותה . הכללתו במסמכים שלנו הכללת לוח השנה במסמך שלנו פשוטה כמו הכללת אלמנט ה-script המתאים ב-head : לוח השנה ייטען עבור כל שדה טקסט שיכלול את המחלקה ” fecha ”. פורמט התאריך מוזן בשורה הראשונה של הסקריפט. כך, אם למשל רוצים שהתאריך ילך לפי הסדר יום/חודש/שנה, בלי לכלול 0 לפני היום כשהוא מורכב מספרה אחת, ועם לכלול אותו בחודש כשצריך: var formato = ‘d/mm/y’; כדי להציג את לוח השנה לצד שדה טקסט, עליו לכלול את המחלקה “fecha”. בנוסף, כל הפרמטרים האפשריים מוזנים כמחלקות. הרשימה המלאה היא כדלקמן: טעינת לוח שנה (נדרש): fecha תאריכים לפני היום: prev תאריכים אחרי היום: post טווח שנים: rangX (כאשר X הוא מספר השנים) לא כולל את היום הנוכחי: todnact יתרונות בין היתרונות שניתן לייחס לו: קל לשימוש וליישום. אינו פולשני. הקוד והתוכן שנוצרים נגישים (סימון, ארגון, תוכן,…) ושמישים באמצעות שימוש בעזרים טכניים (קורא מסך,…). בנקודה זו נלקח בחשבון היכן מונח הפוקוס הן בעת הצגתו והן במהלך פעולתו ובעת היעלמותו. כך, כשהוא מוצג, הפוקוס מונח ישירות על בורר השנים, תוך שמירה על סדר לוגי בעת מעבר ב-Tab ממנו, וכשלוח השנה נסגר (באמצעות קישור הסגירה או לאחר בחירת תאריך) הפוקוס מונח על שדה הטקסט שאליו הוא היה משויך. הניווט בו מוקל ללא תלות במכשיר. ניתן לנווט באמצעות כל אחד מהמכשירים שבאמצעותם אנו יכולים לגלוש באינטרנט. הפרמטרים שלו ניתנים להגדרה בקלות והקריאה לו פשוטה מאוד (באמצעות שימוש בשמות מחלקות). השפה נלקחת ישירות מהמסמך האב, וניתן להוסיף תרגומים חדשים לקוד. במקרה שה-idimoa לא מוצהר במסמך (דבר שלא אמור לקרות), הספרדית היא זו שתשמש כברירת מחדל. נכון להיום, בנוסף לספרדית הוא כולל גם אנגלית. בנוסף, נעשה כך שהוא מזהה אם זו אנגלית אמריקאית, לא משום שהתוכן ישתנה, אלא כדי לשנות את סידור ימות השבוע (יום ראשון מוצב ראשון). העיצובים המיושמים על לוח השנה נכללים באמצעות CSS המקושר דרך הסקריפט, כך שבהיעדר תמיכה בו, מוריד ההורדה של המסמך עוברת אופטימיזציה בכך שלא נקראת גיליון העיצוב האמור. נכללו מחלקות באופן שניתן ליישם עיצובים על כל אחת מתאי הטבלה (ימים פעילים, ימים לא פעילים, היום הנוכחי), כמו גם עיצובים ספציפיים לשבתות או לימי ראשון. קוד שנוצר להלן אני כולל חלק מהקוד שנוצר על ידי הסקריפט. כפי שניתן לראות (וכפי שכבר אמרתי) נכללים שמות מחלקות ו-id כדי לאפשר שליטה בפריסה באמצעות גיליון העיצוב.

סיכום כדברי סיום… מה אפשר לומר על לוח השנה הזה?… ובכן ש” הוא מיותר… אבל שימושי ” וש” אין לו השלכות שליליות מבחינת נגישות ”. …אגב, איזה יום היום? קטגוריה: נגישות, Javascript —> 2 תגובות juan 16 במרץ, 2007 זה מצוין, אבל לפעמים נוצרת לי שגיאה בעת בחירת התאריך או מעבר בין שנים, וה-IE מפסיק לעבוד וגם ב-Firefox. אתה יודע מה זה? Rumoroso 21 באוגוסט, 2008 בדוק אם הוא לא שולח את תוכן השדה או אם בעצם הוא לא שולח את המשתנה. הסקריפט לא מתערב בשליחת הטופס, כך שהבעיה עשויה לבוא ממקום אחר. ברכות ניתן לעקוב אחר התגובות הודות לפיד ה-RSS 2.0 . תוכלו גם להשאיר תגובה , או לשלוח trackback מהאתר שלכם. מאמר קודם: Enhorabuena TAW מאמר הבא: acc_calendar v1.1 השאר את תגובתך השדות שם ו-Email הם חובה הוסיפו אותנו אל… תגיות שאנו מדגישים בכלליות נגישות bert bos blockquote bug cañas ציטוטים cite התנהגות ידע CSS escuas תקנים fieldset Firefox פורמט טופס מקורות hidden ie IE 7 מידע javascript legend רשימה niquelando חובה opera playa q squash חופשה w3c WCAG xhtml יצירה זו כפופה לרישיון Creative Commons .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.