Ścieżka powrotu, zwana też nawigacją okruszkową, poprawia dostępność strony. W Joomla generowana jest przez specjalny moduł. Jego kod został nieco ulepszony pod względem dostępności, ale nie była to, niestety, zmiana kompletna. Objaśniamy, jak poprawić kod modułu.

Wskazówki projektowe

Rozpocznijmy od zebrania wskazówek projektowych. Aby ścieżka powrotu wspomagała dostępność strony:

  • Umieść ścieżkę powrotu w elemencie <nav>, który opisze ją jako element nawigacyjny i jeden z głównych punktów orientacyjnych na stronie
  • Zapewnij modułowi dostepną nazwę widoczną dla czytników ekranu, za pomocą atrybutu aria-label lub aria-labelledby
  • Dodaj do łącza wskazującego na bieżącą stronę atrybut aria-current="page", dzięki czemu urządzenia z technologią wspomagającą będą informować uzytkowników, że łącze wskazuje na bieżącą stronę.
  • Elementy ścieżki rozdziel grafiką z pustym atrybutem alt albo znakiem generowanym za pomocą CSS (zawartość uzyskiwana za pomocą właściwości content.

Jeśli nie możesz użyć elementu <nav>, dodaj do znacznika obejmującego ścieżkę atrybut role="navigation". Jeśli używasz znacznika <nav>, dodawanie tego atrybutu jest zbędne. Rola navigation jest rodzimą (natywną) rolą elementu <nav>, więc nie trzeba jej deklarować.

Poprawki modułu Breadcrumbs

Aby poprawić oryginalny kod modułu, korzystamy z funkcji nadpisywania szablonem. W tym celu w katalogu html swojego szablonu utwórz podkatalog mod_breadcrumbs i przekopiuj do niego plik default.php z katalogu modules/mod_breadcrombs/tmpl/. W tym pliku dokonaj poprawek opisanych poniżej.

Zmień znacznik obejmujący i usuń atrybut role

W oryginalnym kodzie zamiast znacznika <nav> użyto znacznika <div> i sprecyzowano jego funkcję atrybutem role="navigation". A to dlatego, by zmianą znacznika nie spowodować uszkodzenia szablonów w działających witrynach - w Joomla4 zostanie użyty znacznik <nav>.

Najpierw w liniach 12 i 74 kodu modułu zmień otwierający i zamykający znacznik div na nav. Ze znacznika otwierającego usuń atrybut role Po tej zmianie wiersz 12 powinien wyglądać następująco:

<nav aria-label="<?php echo $module->name; ?>">

Zmień dostępną nazwę modułu

W oryginalnym kodzie dostępna nazwa modułu jest generowana za pomocą atrybutu aria-label z angielskiej nazwy modułu (Breadcrums). Odpowiedniejszym rozwiązaniem jest wygenerowanie nazwy z tytułu modułu. Jeśli administrator zmieni angielski tytuł modułu np. na „Okruszki” albo „Ścieżka powrotu”, to ten tytuł powinien sygnalizować użytkownikom technologii wspomagających nazwę komponentu strony.

Aby poprawić nazwę, zmień w poprawianej linii 12 nazwę zmiennej w instrukcji php. Zamiast $module->name użyj $module->title. Oto zmieniony kod.

<nav aria-label="<?php echo $module->title; ?>">

Zamień na łącze okruszek bieżącej strony (ostatni)

Programiści Joomla nie dali się przekonać do zamiany okruszka z nazwą bieżacej strony na łącze. Czasem trudno przekonać kogoś do dostepnych rozwiązań, gdy ten ktoś dostępności nie rozumie. Szczególnie, gdy może się podeprzeć argumentem, że we wzorach projektowych pokazywane są rozwiazania alternatywne.

Użytkownik widzący doskonale zdaje sobie sprawę z aktu, że ostatni element w ścieżce powrotu, zwykle zatytowany jak strona, na której się właśnie znajduje, wskazuje na tę stronę i do głowy mu raczej nie przychodzi, by w ten odnośnik klikać. Bo po co.

Oznaczenie ostatniego elementu ścieżki powrotu jako łącza jest ważne dla użytkowników technologii wspomagających, którzy często nawigują po stronie za pomocą klawisza TAB po linkach i innych elementach interaktywnych. Gdy ostatni okruszek nie jest łączem, użytkownik technologii wspomagającej nie usłyszy istotnej informacji - że w hierarchii ścieżki powrotu znajduje się na bieżącej stronie.

Aby naprawić tę usterkę, trzeba zmodyfikować linię 67 kodu modułu. Tutaj zamieszczamy większy fragment kodu - linie od 63 do 72 - aby uniknąć nieporozumień. Aktualnie jest:

<?php echo $item->name; ?><?php elseif ($show_last) :
  // Render last item if reqd. ?>
 <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="active">
     <span itemprop="name">
        <?php echo $item->name; ?>
     </span>
     <meta itemprop="position" content="<?php echo $key + 1; ?>">
  </li>
<?php endif;

Po zmianie powinno być:

<?php echo $item->name; ?><?php elseif ($show_last) :
  // Render last item if reqd. ?>
 <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="active">
        <a itemprop="item" href="/<?php echo $item->link; ?>" class="pathway" aria-current="page">
           <span itemprop="name">
              <?php echo $item->name; ?>
           </span>
        </a>
     <meta itemprop="position" content="<?php echo $key + 1; ?>">
  </li>
<?php endif;

Objęliśmy tutaj nazwę ostatniego okruszka kodem znacznka a oraz dodaliśmy atrybut aria-current="page". Można by też użyć wartości location.

Zapisz zmodyfikowany plik i ciesz się dostępniejszą ścieżką powrotu, a raczej większą satysfakcją z użytkowania witryny przez niektórych użytkowników.

W niektórych szablonach moduł ścieżki powrotu jest wywoływany w specjalnie utworzonym obszarze szablonu. Projektant szablonu mógł wykorzystać do oznakowania tego obszaru znacznik nav lub atrybut role="navigation". Upewnij się, że tak nie jest. A jeśli jest, to zmodyfikuj kod szablonu lub ... pozostaw moduł bez zmian.

Ministerstwo Administracji i Cyfryzacji Spółdzielnia FADO Fundacja PCJ Otwarte Źródła

Projekt współfinansowany ze środków Ministerstwa Administracji i Cyfryzacji