Vytvorenie prístupného modálneho systému Windows s dialógom A11y

modálne slovesá sú v moderných prehliadačoch široko podporované. Môžu byť použité ako upozornenia, ako opt-in polí, alebo dokonca pre fotografické prezentácie.

Tieto okná môžete vytvoriť pomocou čistý CSS ale toto nie je najdostupnejšie riešenie. Namiesto toho sa pozrite A11y Dialog, plne funkčné okno, na ktorom sa zameriava prístupnosti.

Beží na vanilla JavaScript s tým vlastné rozhranie API a podporuje všetky moderné prehliadače vo všetkých zariadeniach. Môžete sa pozrieť toto demo aby ste videli, ako to vyzerá v akcii.

Vyzerá to skôr ako typické okno. Ale tento skript používa značky ARIA na podporu modernej prístupnosti pre všetkých používateľov.

Štandardne je aj dialóg A11y podporuje dotykové obrazovky, takže poklepanie má rovnaký účinok ako kliknutie. Môžete kliknúť alebo klepnúť kdekoľvek mimo okna, aby ste ho zatvorili, alebo v počítači stlačte kláves ESC.

Knižnica je nejako dosť malá, len 1,2 kb, vrátane všetkých kódov CSS a JS. To zjednodušuje prístup na plný prístup.

Viac sa môžete dozvedieť prostredníctvom čítania GitHub repo a dialóg A11y má svoje stránka vlastnej dokumentácie, tiež. Obsahuje sekciu o inštalácia a nastavenie pre úplných začiatočníkov. Je tu aj zdĺhavá časť, ktorá pokrýva API DOM pre pridávanie tlačidiel na svoju stránku, ktorá môže otvoriť (alebo zatvoriť) modálne okno.

Ak sa to pokúšate budovať prístupnejšie webové stránky vážne zvážte spustenie dialógu A11y vo svojich projektoch. Môžeš získať zdrojový kód od GitHub alebo si ho stiahnite z manažéra balíkov, napríklad npm alebo Bower.

Pozrite sa na hlavnú stránku a dozviete sa viac o nastavení a základných funkciách JavaScriptu. K tejto knižnici prichádza oveľa viac ako prístupnosť ARIA, takže skúste skúsiť, či chcete rozšíriť funkcie modálnych okien.