Wdrażaj funkcje dynamiczne, które nadal działają, gdy JavaScript jest niedostępny.
Ta tablica to lista kontrolna dla specjalistów webowych: 17 punktów do sprawdzenia na dynamicznej stronie lub w komponencie przed wdrożeniem funkcji. Omawia statyczną podstawę, zachowanie przy awarii, to, czy ktoś zauważy jej aktualizacje, oraz czy użytkownicy czytników ekranu i korzystający z klawiatury w ogóle mogą z niej korzystać.
Statyczna podstawa HTML:
Istotne treści, linki i metadane znajdują się w początkowym HTML
Strona jest użyteczna, nie tylko widoczna, gdy JavaScript jest wyłączony
Funkcje dynamiczne są nakładane na działającą podstawę, zamiast ją zastępować
Nic istotnego nie jest ukryte w widgetach działających tylko w JavaScript, do których roboty indeksujące nie mają dostępu
Łagodne pogorszenie:
Każde żądanie ma jawne obsługiwanie błędów, więc awaria nigdy nie jest cicha ani nie powoduje nieskończącego się ładowania
Istnieje działający mechanizm zapasowy, jeśli funkcja dynamiczna całkowicie zawiedzie
Przyciski wstecz i dalej działają zgodnie z oczekiwaniami po dynamicznych aktualizacjach
Elementy, które wyglądają podobnie, działają podobnie
Uwidacznianie aktualizacji:
Informacja zwrotna pojawia się obok elementu, na którym właśnie wykonano działanie.
Aktualizacje wykorzystują zmianę rozmiaru, kontrast lub ruch, aby przyciągnąć uwagę.
Tymczasowe komunikaty pozostawiają trwały wskaźnik.
Żadna interakcja nie wymaga obserwowania dwóch miejsc jednocześnie.
ARIA i dostępność dla czytników ekranu:
Niestandardowe widżety mają odpowiednie role ARIA.
Obszary strukturalne korzystają z landmarków lub semantycznych elementów HTML5.
Obszary aktualizowane dynamicznie są oznaczone atrybutem aria-live.
Wersja została przetestowana przy użyciu rzeczywistego czytnika ekranu.
Nawigacja wyłącznie za pomocą klawiatury działa we wszystkich miejscach, a fokus nigdy nie zostaje utracony ani uwięziony.
Jak korzystać z tablicy:
Aby utworzyć własną kopię, otwórz Board > Details > Duplicate. Wystarczy bezpłatne konto Miro.
Aby zaznaczyć pozycję, kliknij dwukrotnie jej pole i wpisz x.
Zduplikuj kartę dla każdej dynamicznej funkcji, komponentu lub sprintu.
Ten szablon towarzyszy kursowi Interaction Design Foundation UX Essentials: Accessibility, SEO and Dynamic Interfaces.
