Czy różnica między wizualną kolejnością elementów a ich kolejnością w kodzie HTML stanowi naruszenie wytycznych WCAG?

Tak, może to być błąd WCAG, ale zależy to od kilku czynników.

Podstawowe zasady WCAG dotyczące kolejności treści:

1. Zasada 1.3.2 (Meaningful Sequence) – Sensowna kolejność

   • Treść w kodzie HTML powinna być ułożona w logicznej kolejności, która ma sens bez arkuszy stylów CSS.
   • Jeśli użytkownik czyta treść np. za pomocą czytnika ekranu, kolejność musi być logiczna.

2. Zasada 2.4.3 (Focus Order) – Kolejność fokusu

   • Jeśli użytkownik korzysta z klawiatury, przechodzenie między elementami musi odbywać się w logicznej kolejności.

Kiedy różna kolejność HTML i wizualna jest błędem WCAG?

✅ Nie jest błędem, jeśli:

• Wizualna zmiana kolejności nie wpływa na zrozumienie treści.
• Kolejność elementów w kodzie HTML nadal umożliwia poprawne korzystanie z treści dla użytkowników korzystających z technologii wspomagających.

❌ Jest błędem, jeśli:

• Zmieniona kolejność zmienia znaczenie treści (np. nagłówek znajduje się wizualnie po treści, ale w kodzie przed nią).
• Kolejność nawigacji klawiaturą (Tab) jest nielogiczna (np. użytkownik przeskakuje chaotycznie między sekcjami).
• Czytniki ekranu odczytują treść w nielogiczny sposób (np. elementy są odczytywane w innej kolejności niż ich znaczenie).

Jak sprawdzić i poprawić?

• Wyłącz CSS i sprawdź, czy treść jest nadal logiczna.
• Użyj narzędzi takich jak NVDA, JAWS, VoiceOver i przetestuj czytnikiem ekranu.
• Sprawdź kolejność nawigacji klawiaturą (Tab).
• Jeśli konieczne jest przestawienie elementów, użyj np. order w flexbox/grid zamiast zmiany kolejności w HTML.

Podsumowując – różna kolejność w kodzie HTML i wizualnie nie zawsze jest błędem, ale często może nim być, szczególnie jeśli wpływa na dostępność dla osób z niepełnosprawnościami.