Wpadki i wypadki #16

Zapraszam do 16. już Wpadek i wypadków. Dzisiaj bardzo szybki rzut oka na stronę FAQ.

Sporo stron ma sekcję FAQ, znaną u nas też jako „Najczęste pytania i odpowiedzi”. Jednym z popularniejszych sposobów prezentowania tego typu rzeczy jest stworzenie tzw. akordeonu – czyli rozwijanej listy pytań i odpowiedzi. Dopiero po kliknięciu w pytanie, rozwija się jego odpowiedź (czasami zwijając odpowiedzi do innych pytań). Dzięki temu użytkownik może się szybko zapoznać z interesującymi go pytaniami i wybrać to, które go interesuje, bez potrzeby przewijania przez wszystkie odpowiedzi.

I tak się składa, że w HTML-u mamy element, który jakby wręcz stworzono do tego typu rzeczy – details:

See the Pen
<details> FAQ by Comandeer (@Comandeer)
on CodePen.

Na pierwszy rzut oka wszystko działa dobrze. Ale w końcu ktoś stwierdzi, że w sumie dla każdego pytania przydałyby się nagłówki. No więc dodajemy je do summary:

<details>
	<summary>
		<h2>Pytanie</h2>
	</summary>
	<p>Odpowiedź</p>
</details>

I tu pojawia się haczyk: te nagłówki niekoniecznie będą działały poprawnie w technologii asystującej. Związane jest to z tym, że summary domyślnie jest prezentowane w drzewku dostępności jako przycisk, przez co nadpisuje to, jak prezentowane są elementy wewnątrz niego, w tym nagłówki. To znany problem i na ten moment wsparcie wśród czytników ekranowych jest częściowe. Jeśli chcemy być pewni, że nasze rozwiązanie jest w pełni dostępne, pozostaje niestandardowa implementacja z pomocą ARIA.

Niemniej rozważmy jeszcze jedną rzecz: co, jeśli użytkownik będzie chciał wyszukać interesujące go słowa kluczowe na stronie? Może użyć do tego wyszukiwarki dostępnej pod skrotem klawiszowym Ctrl + F. W ten sposób wyszuka słowa kluczowe w pytaniach… ale przecież odpowiedzi w naszym akordeonie są zwinięte! Przez to użytkownik nie będzie mógł wyszukać w nich tekstu. Żeby było śmieszniej, to działa w natywnym details w Chrome. Zatem zrobiliśmy dwa kroki do przodu i jeden do tyłu…

Osobiście myślę, że najprostszym rozwiązaniem, które byłoby jak najbardziej dostępne, byłaby całkowita rezygnacja z akordeonu i stworzenie prostej strony, na której na górze byłaby lista dostępnych pytań, a pod nią – po prostu pytania z odpowiedziami:

See the Pen
Simple FAQ by Comandeer (@Comandeer)
on CodePen.

W bonusie dostajemy od razu zabezpieczenie przed niedziałającym JS-em!