Gdy w konfiguracji przeglądu artykułów zarządzisz, aby tytuł był łączem do całego artykułu, a artykuł posiada ilustrację wprowadzenia, to ta ilustracja automatycznie również stanie się łączem do całego artykułu. Tak to, niestety, zostało zaprojektowane. Niestety, bo w rezultacie mamy rozwiązanie zawsze powodujące naruszenie wymogów dostępności.

Na czym polega problem

Osoby, które przeglądają taką stronę na ekranie, nie odczuwają żadnego problemu. A nawet jest to dla nich rozwiązanie wygodne. Mogą kliknąć tytuł czy obrazek, by połączyć się ze stroną docelową.

Ale gdy ktoś przegląda taką stronę za pomocą czytnika ekranu, usłyszy dwie, a w pewnych przypadkach nawet trzy następujące po sobie informacje o linkach prowadzących w to samo miejsce.

Jeśli obrazek posiada zdefiniowany atrybut alt (opis ilustracji), to jego zawartość będzie treścią odnośnika komunikowanego użytkownikowi czytnika ekranu. Użytkownik dwukrotnie słyszy treść odnośnika - raz pochodzącą z tytułu, drugi raz pochodzącą z atrybutu alt. Gdy opis alternatywny jest inny niż treść tytułu, użytkownik czytnika ekranu usłyszy dwa różnie brzmiące odnośniki, z czego może wnioskować, że prowadzą one w dwa różne miejsca.

Natomiast, jeśli atrybut alt nie został zdefiniowany, użytkownik ekranu dowiaduje się, że istnieje jakiś odnośnik, ale nie wie, dokąd on prowadzi.

Jeżeli dodatkowo projektant witryny albo administrator zdecyduje się wyświetlać równocześnie łącze „Czytaj więcej”, to na stronie blisko siebie mogą się znaleźć aż trzy odnośniki prowadzące w to samo miejsce. Ani to dobre dla SEO (pozycjonowania stron), ani dla dostępności (co jest złe dla dostępności jest na pewno złe także dla SEO!).

Dodajmy jeszcze, że w starszych wersjach Joomla kod generujący łącze „Czytaj więcej” był zdefiniowany tak, że mógł generować odnośniki niejednoznaczne, bo zawierały tylko tekst „Czytaj więcej” powtarzający się wielokrotnie na stronie. Jeśli w szablonie wykorzystano jako podstawę do nadpisania kodu tego elementu dawniejszy oryginalny kod, to możliwe jest wystąpienie kolejnego naruszenia wymogów dostępności.

Wyjaśnijmy tu jeszcze, że użytkownik czytnika ekranu może odsłuchiwać całą stronę i wówczas - być może - doświadczenie podpowie mu, dzięki kontekstowi, że są to odnośniki prowadzące w to samo miejsce, czyli pozna cel linku z kontekstu.

Ale gdy nawiguje po stronie klawiszem tabulatora w poszukiwaniu linków i innych aktywnych elementów, usłyszy zestaw informacji powodujący co najmniej dezorientację.

Jak to naprawić?

Rozwiązanie 1 - Skonfiguruj dostępnie

Wyłącz w opcjach artykułu domyślnie ustawioną na Tak opcję Tytuły łączem (karta Artykuł). Upewnij się, że w ustawieniach każdej pozycji menu typu „przegląd artykułów” ta opcja jest również wyłączona (lub ustawiona na Domyślnie).

To najprostsze rozwiązanie, bo nie wymaga żadnej ingerencji w kod Joomla.

Rozwiązanie 2 - Nadpisz kod

Drugie rozwiązanie wymaga modyfikacji rdzennego kodu Joomla. Na szczęście można skorzystać z technologii nadpisywania kodu szablonem, dzięki czemu aktualizacja Joomla nie spowoduje utraty nadpisanego kodu.

Wykonaj kolejne kroki:

  1. W katalogu HTML swojego szablonu utwórz podkatalog layouts, a w nim katalog content (jeśli nie istnieją).
  2. Przekopiuj do tego katalogu z oryginalnej lokalizacji plik /layouts/joomla/content/intro-image.php
  3. Z kodu w przekopiowanym pliku usuń całą instrukcję warunkową umożliwiajacą wyświetlanie obrazka jako łącza.
  4. Zapisz zmieniony kod.
  5. Przetestuj poprawność.

Oto kod, jaki powinien pozostać:

defined('JPATH_BASE') or die;
$params = $displayData->params;
?>
<?php $images = json_decode($displayData->images); ?>
<?php if (isset($images->image_intro) && !empty($images->image_intro)) : ?>
	<?php $imgfloat = empty($images->float_intro) ? $params->get('float_intro') : $images->float_intro; ?>
	<div class="pull- item-image">
    <img
			<?php echo 'class="caption"' . ' title="' . htmlspecialchars($images->image_intro_caption, ENT_COMPAT, 'UTF-8') . '"'; ?>
		<?php endif; ?>
	 src="/dostepny2/" alt="<?php echo htmlspecialchars($images->image_intro_alt, ENT_COMPAT, 'UTF-8'); ?>" itemprop="thumbnailUrl"/>
	</div>
<?php endif; ?>

Łącz tylko w jeden sposób

Konfigurując pozycje menu typu „przegląd artykułów”, zdecyduj się tylko na jeden sposób linkowania do całych artykułów: albo za pomocą tytułu, albo za pomocą odnośnika „Czytaj więcej”.

Ponadto sprawdź, czy przypadkiem Twój szablon nie nadpisuje standardowego kodu odnośnika „Czytaj więcej”. Aby się o tym przekonać, zajrzyj do podkatalogu templates/[Twoj-szablon]/html/layouts/content. Jeśli znajdziesz tam plik readmore.php, to porównaj go z plikiem oryginalnym w najnowszym wydaniu joomla (znajdziesz go w katalogu layouts/joomla/content).

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

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