Divi – Jak dodać aria-label do ikonki wyszukiwarki?

Dlaczego warto poprawić ten element?

Optymalizacja dostępności stron internetowych to nie tylko kwestia zgodności z wytycznymi WCAG (Web Content Accessibility Guidelines), ale także sposób na poprawę doświadczeń użytkowników. W przypadku motywu Divi w WordPressie domyślnie ikona wyszukiwania nie posiada atrybutu aria-label, co oznacza, że osoby korzystające z czytników ekranu mogą mieć trudności z jej zidentyfikowaniem.

Brak właściwej etykiety dla ikony wyszukiwania może prowadzić do sytuacji, w której użytkownicy z niepełnosprawnościami wzroku nie będą świadomi jej funkcji. Czytniki ekranu odczytują elementy strony na podstawie dostępnych znaczników HTML, a gdy brakuje jednoznacznej etykiety, użytkownik może nie zrozumieć przeznaczenia przycisku.

Dodanie atrybutu aria-label zwiększa dostępność strony, poprawia jej zgodność ze standardami WCAG oraz ogólnie wpływa na lepszą nawigację. Jest to szczególnie istotne dla stron o dużym ruchu lub skierowanych do szerokiego grona odbiorców, gdzie użyteczność i inkluzywność powinny stać na pierwszym miejscu.

Jak to zrobić?

Aby poprawić dostępność ikonki wyszukiwania w Divi, należy dodać atrybut aria-label do przycisku wyszukiwania w menu. Można to zrobić poprzez dodanie niestandardowego kodu JavaScript w panelu administracyjnym WordPressa. Proces ten jest stosunkowo prosty i nie wymaga ingerencji w pliki motywu.

Kroki do wykonania:

1. Zaloguj się do panelu WordPressa – przejdź do WP Admin.
2. Otwórz ustawienia Divi – w lewym menu wybierz Divi > Theme Options.
3. Przejdź do zakładki Integration – to miejsce, w którym można dodawać własny kod.
4. Dodaj kod JavaScript do sekcji Body Code – wklej poniższy skrypt w odpowiednim polu:

<script>
jQuery(function($) {
    $('.et_pb_menu__icon.et_pb_menu__search-button').attr('aria-label', 'Search');
});
</script>

5. Zapisz zmiany i odśwież stronę, aby sprawdzić efekt.

Dzięki temu skryptowi ikona wyszukiwania w menu Divi zyska odpowiedni atrybut aria-label, co sprawi, że czytniki ekranu będą mogły poprawnie odczytać jej funkcję. Można również dostosować tekst etykiety, zmieniając "Search" na inne słowo lub frazę, na przykład "Wyszukiwarka" w przypadku stron w języku polskim.

Dodatkowe wskazówki

Po dodaniu skryptu warto upewnić się, że zmiany zostały poprawnie zastosowane. Można to sprawdzić na kilka sposobów:

• Narzędzia deweloperskie przeglądarki – otwórz stronę w Google Chrome, kliknij prawym przyciskiem myszy na ikonę wyszukiwania, wybierz „Zbadaj” i sprawdź, czy element zawiera aria-label="Search".
• Testowanie za pomocą czytnika ekranu – narzędzia takie jak NVDA (dla Windows) lub VoiceOver (dla macOS) pomogą sprawdzić, czy czytnik poprawnie rozpoznaje nowy atrybut.
• Walidacja dostępności – można skorzystać z narzędzi online, takich jak WAVE (Web Accessibility Evaluation Tool), aby zweryfikować poprawność implementacji.

Wprowadzenie tej modyfikacji nie wpływa negatywnie na wygląd czy funkcjonalność strony, a jedynie poprawia jej dostępność. To niewielka zmiana, która może znacząco wpłynąć na komfort użytkowania strony przez osoby z ograniczoną zdolnością widzenia.

Regularne dbanie o dostępność stron internetowych nie tylko ułatwia życie użytkownikom, ale także poprawia wizerunek marki i zwiększa jej zasięg. Warto stosować tego typu ulepszenia, aby tworzyć bardziej przyjazne i intuicyjne środowisko dla wszystkich odwiedzających stronę.