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

מה יש בתפריט

כל בקרה משנה מאפיין data-nagishon-* על הדף. הבחירות נשמרות בדפדפן של המבקר ולא נשלחות לשום מקום.

• textScale

  גודל טקסט עד 200%

  100%, 125%, 150%, 175%, 200%.

• contrast

  ניגודיות כהה או בהירה

  שחור, לבן וצהוב, או גרסה בהירה.

• grayscale

  גווני אפור

  מסנן על כל הדף.

• underlineLinks

  הדגשת קישורים

  קו תחתון לכל קישור.

• highlightHeadings

  הדגשת כותרות

  מסגרת סביב כל כותרת.

• readableFont

  גופן קריא

  גופן פשוט במקום הגופן של האתר.

• textSpacing

  ריווח טקסט

  לפי WCAG 1.4.12.

• stopMotion

  עצירת תנועה

  מבטלת אנימציות ומעברים.

• bigCursor

  סמן גדול

  סמן עכבר בולט יותר.

• readingGuide

  סרגל קריאה

  במכשירי הצבעה (עכבר) בלבד.

• hotkey

  קיצור מקלדת

  Alt+Shift+A פותח וסוגר.

• localStorage

  שמירה בדפדפן

  ההעדפות נשארות במכשיר, בלי עוגיות ובלי שרת.

• statementUrl

  קישור להצהרה

  וקישור אופציונלי לדיווח על בעיה.

מה זה לא

למה חינם ופתוח

התקנה ב־30 שניות

בחרו את הסביבה שלכם. הקוד מגיע מה־README של הפרויקט.

<!-- in <head>, optional, no defer -->
<script src="https://cdn.jsdelivr.net/npm/nagishon@1/dist/prepaint.js"></script>

<!-- before </body> -->
<script src="https://cdn.jsdelivr.net/npm/nagishon@1/dist/nagishon.iife.js"
  defer data-nagishon data-statement-url="/accessibility"></script>

// app/layout.tsx
import { NAGISHON_PREPAINT } from "nagishon/prepaint";
import { NagishonWidget } from "nagishon/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="he" dir="rtl">
      <head>
        <script dangerouslySetInnerHTML={{ __html: NAGISHON_PREPAINT }} />
      </head>
      <body>
        {children}
        <NagishonWidget statementUrl="/accessibility" />
      </body>
    </html>
  );
}

npm install nagishon

import { NagishonWidget, useNagishon } from "nagishon/react";

export function App() {
  return (
    <>
      <NagishonWidget statementUrl="/accessibility" skipLink={{ target: "#main" }} />
      <main id="main">...</main>
    </>
  );
}

ב־Next.js מומלץ להוסיף suppressHydrationWarning ל־<html>. לא אפשרי באתרים סגורים כמו Wix.

נבנה נגיש, ונבדק

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

• axeWCAG 2.1 AA: חלון סגור, פתוח, פתוח בניגודיות כהה, ובאנגלית (LTR).
• kbdזרימת מקלדת: Tab, Enter, מלכודת מיקוד, Escape מחזיר מיקוד, קיצור וקישור דילוג.
• e2e26 בדיקות end-to-end, ו־90 בדיקות יחידה.
• cssShadow DOM, נבדק מול CSS עוין (all: unset, גופן בסיס קטן).
• uiבקרות של 44×44 פיקסלים לפחות, מיקוד תמיד נראה, שינויים מוכרזים ב־aria-live.
• ciכל הבדיקות רצות ב־GitHub Actions.

שאלות על החוק

תשובות קצרות לפי נוסח התקנות (תיקון 2017). לא ייעוץ משפטי.

פרויקט קוד פתוח של רועי זלוטולוב

מצאתם באג? חסרה שפה? פתחו issue או שלחו PR. ההנחיות נמצאות ב־CONTRIBUTING.md שבריפו.