Zapewnienie różnych sposobów dostępu do treści serwisu to jeden z wymogów WCAG 2.0. Jednym ze sposobów może być umieszczenie formularza wyszukiwarki.

Czy wiesz, że wyszukiwarka jest najczęściej spotykanym formularzem w serwisach internetowych?

Oprócz standardowej nawigacji wyszukiwarka może być dobrą alternatywą zwłaszcza w dosyć rozbudowanych serwisach. Za jej pomocą użytkownicy mogą szybko znaleźć interesujące ich treści.

Osoby niewidome bardzo często korzystają z tej formy nawigacji, ponieważ znacząco skraca czas poszukiwania informacji. Zwłaszcza w serwisach, które nie mają przemyślanej struktury oraz nawigacji pod kątem dostępności.

W Joomla! możesz bardzo szybko stworzyć wyszukiwarkę. Wystarczy utworzyć i opublikować odpowiedni moduł.

Krok 1. Utwórz moduł Szukaj

Kliknij w menu pozycję Rozszerzenia / Moduły. Następnie w oknie Moduły: Moduły kliknij przycisk Utwórz.

Zrzut ekranu przedstawiający menadżera modułów z zaznaczonym przyciskiem Utwórz

W kolejnym oknie kliknij odnośnik Szukaj

Zrzut ekranu przedstawiający okno tworzenia nowego modułu z zaznaczoną pozycją Szukaj

Krok 2. Skonfiguruj i opublikuj moduł Szukaj

W oknie Moduły: Moduł Szukaj wypełnij pole Tytuł modułu, w polu Pokaż tytuł kliknij przycisk Ukryj. W polu Pozycja wybierz z listy nazwę obszaru strony, w którym powinien być opublikowany moduł. Koniecznie powinno to być miejsce u góry strony, w obszarze lub w okolicach nagówka. Obok nie powinny się pojawiać inne formularze, np. formularz logowania.

  • w polu Etykieta wyszukiwarki wpisz tekst opisujący pole wyszukiwarki. Jeżeli pozostawisz to pole puste, zostanie użyty tekst domyślny: Szukaj… Koniecznie przeczytaj poniżej sekcję Ukryj zbędną etykietę.
  • w polu Szerokość pola wpisz liczbę znaków, jakie można wprowadzić do pola wyszukiwarki. Jeżeli pozostawisz to pole puste, zostanie użyta szerokość pozwalająca wpisać 20 znaków;
  • w polu Przykład wyrażenia wpisz tekst, który zostanie użyty w polu wyszukiwarki jako podpowiedź. Jeżeli pozostawisz to pole puste, zostanie użyty tekst domyślny: Szukaj...;
  • w polu Przycisk "Szukaj" zdecyduj, czy ten przycisk powinien być widoczny;
  • w polu Pozycja przycisku wybierz z listy, gdzie go umieścić;
  • w polu Obraz przycisku Szukaj zdecyduj, czy chcesz użyć obrazka jako przycisku wyszukiwarki. Plik obrazka musisz nazwać searchButton.gif i umieścić w katalogu: twoj_serwis/templates/twoj_szablon/images;
  • w polu Etykieta wpisz tekst, który zostanie wyświetlony na przycisku wyszukiwarki. Jeżeli pozostawisz to pole puste, zostanie użyty tekst domyśny: Szukaj;
  • w polu Autowykrywanie OpenSearch zdecyduj, czy chcesz, aby przeglądarki dodawały automatycznie twoją witrynę jako dostawcę wyszukiwania;
  • w polu Tytuł OpenSearch wpisz tekst, który będzie wyświetlany w przeglądarkach obsługujących OpenSearch;
  • w polu Ustal ID pozycji menu wybierz z listy pozycję menu dla strony wyświetlającej wyniki wyszukiwania.

Zrzut ekranu przedstawiający opcje konfiguracyjne modułu Szukaj

Zapisz wprowadzone zmiany i sprawdź, jak moduł wyszukiwarki prezentuje się w twoim serwisie.

Zrzut ekranu przedstawiający wygląd modułu Szukaj w przykładowym serwisie

Ukryj zbędną etykietę

Zapewne prezentuje się dobrze, ale czy wszystko, co widzisz, jest rzeczywiście niezbędne? Chodzi o etykiete po lewej strony wyszukiwarki - na ilustracji powyżej to tekst Znajdź na stronie.

Odwiedzający serwis bez trudu rozpoznają, że jest to formularz wyszukiwarki. Mówi im o tym przycisk Szukaj, mówi im o tym tekst podpowiedzi w polu Przykład wyrażenia. Ale przede wszystkim mówi im o tym doświadczenie.

Zamiast niepotrzebnej na ekranie etykiety Szukaj można zwiększyć o 5-10 znaków szerokość pola formularza.

Jak ukryć tę zbędną etykietę?

Potrzebna będzie drobna ingerencja w kod CSS. W kodzie Joomla przewidziano, że ten element niekoniecznie musi być widoczny na ekranach. Jeśli podejrzysz kod widoku wyszukiwarki, zobaczysz, że element label został opatrzony atrybutem klasy: element-invisible. Skoro go widzisz na stronie, to znaczy, że w kodzie CSS nie ma reguły ukrywającej ten element.

Otwórz do edycji w edytorze kodu HTML (np. w Notepad++) ostatni z wczytywanych plików CSS. Często jest to pliktemplates/twoj-szablon/css/custom.css. W naszych szablonach jest to plik templates/twoj-szablon/less/custom.less. Na końcu tego pliku dopisz kod:

.search label.element-invisible {display: none !important;}

Zapisz plik i prześlij z powrotem na serwer. Sprawdź, etykieta powinna zniknąć. Oczywiście - nie znika ona zupełnie. Osoby niewidome, korzystające z czytnika ekranu, usłyszą tę etykietę. Bo im jest potrzebna.