כסלו

קישור בתוך קישור, יציאה מהמרובע, ועוד קישורי CSS ונגישות

עיצוב כפתורי רדיו וצ’ק בוקסים בלי לוותר על נגישות: כדי לעצב כפתורי רדיו וצ’ק בוקסים בדרך כלל צריך קודם כל להסתיר את פקדי ה-HTML שלהם, ואז לשים עליהם את ה-CSS היפה. המאמר עובר על הדרכים השונות להסתיר את הפקדים ומדבר על הנגישות של כל דרך. וכאן עוד פוסט קצר על יצירת צ’ק בוקסים נגישים (התווסף ב-18/10/19).

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

לתת לפריסות (layout) לצאת מהמרובע, עם עורך ה-shape path של פיירפוקס: דרך חמודה לתת לטקסט לגלוש ליד ומסביב לתמונה בעלת צורה מיוחדת (למשל טקסט ליד תמונה בצורה של עלה), עם המאפיינים shape-outside and clip-path ועורך המאפיינים האלה בכלי הפיתוח של פיירפוקס.

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

ספינר נגיש בקלות – תוך שימוש ב-mixin של SCSS ואנימציות CSS, המחבר יוצר ספינר חמוד רק עם CSS. כדי להנגיש אותו, המחבר מוסיף מאפייני role ו- aria-live, וגם מוסיף טקסט חלופי כשההטענה מסתיימת, באמצעות JS.

סליידר חביב בלי JS, עם שימוש בתגית ה-marquee המיושנת, שלמרבה ההפתעה עדיין נתמכת בדפדפנים רבים.

ספינר מתוך Freepik

6 תגובות על “קישור בתוך קישור, יציאה מהמרובע, ועוד קישורי CSS ונגישות

  1. קישור בתוך קישור, בהחלט מעניין!
    הסליידר עם האסטרונאוט היה קרינג’י 🙂
    תודה על השיתוף לאה

    1. איזה יופי שגם אתה מוצא שקישור בתוך קישור הוא מעניין.
      ואני ממש מתנצלת על האסטרונאוט. האמת היא שהוא לא היה לי קרינג’י בכלל, לכן שמתי אותו. כבר נתקלתי בעבר ב-CSS שעשו דברים קריפיים וקרינג’ים וצנזרתי… לו חשבתי כך על האסטרונאוט הייתי נמנעת גם ממנו 🙂
      ותודה גם לך, אלרון, על שאתה משתף במה שאתה אוהב ובמה שלא. המשוב הזה חשוב לי ומשמח אותי.

      1. בשמחה לאה! כיף לי יותר. 🙂
        מדוע מצאת את האסטרונאוט כלא קרינג’י? באיזה סיטואציות זה יכול להיות שימושי? משעשע אותי לשאול

        1. האמת היא שלא הכרתי את המילה קרינג’י (מה זה אומר עליי? ) אז שאלתי את גוגל וזו התשובה שמצאתי: “קרינג’ זה לרעוד או לרטוט מגועל, סוג של חלחלה כזאת. קרינג’י כשם תואר זה משהו שפשוט מביך להסתכל עליו, למשל כשמישהו אומר משהו שטותי או מתנהג מוזר”.
          אז חשבתי שהאסטרונאוט הגעיל או הביך אותך באיזשהו אופן, אבל זה לא הסתדר לי עם השאלה שלך באילו סיטואציות זה יכול להיות שימושי…
          אבל מתגובתך (ומבירור בפרטי 😉 ) הבנתי שבשבילך קרינג’י זה משעשע בגבול דק ממגוחך… הנה ציטוט מהמילון שהכי מתקרבת למה שהתכוונת:
          “Cringe comedy is a specific genre of comedy, where the intent is to make you uncomfortable rather than make you laugh.”
          כלומר מבחינתך החלק עם האסטרונאוט היה מאוד מגוחך, ואתה בספק אם מישהו אשכרה היה משתמש ב-marquee בימינו, כשיש CSS3 ANIMATIONS… 🙂

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

          1. זה שלא ידעת מה פירוש המילה אומר עלייך דבר אחד בלבד – שלא הכרת את המילה קרינג’י, ולא מעבר לכך 🙂

            לגמרי משעשע!! זה מאזן את זה מעוד, כי הפוסטים שלך מאוד אינפורמטיביים ומעשירים, אז זה כיף שיש משהו שאת משתפת ששובר את זה מדי פעם. 🙂

            נתראה בפוסטים הבא…

כתבו תגובה

כתובת הדוא"ל שלכם לא תוצג.