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ę gwałtownie zapoznać z interesującymi go pytaniami i wybrać to, które go interesuje, bez potrzeby przewijania przez wszystkie odpowiedzi.
I tak się składa, iż 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, iż w sumie dla wszystkich 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, iż 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żeli chcemy być pewni, iż nasze rozwiązanie jest w pełni dostępne, pozostaje niestandardowa implementacja z pomocą ARIA.
Niemniej rozważmy jeszcze jedną rzecz: co, jeżeli użytkownik będzie chciał wyszukać interesujące go słowa najważniejsze na stronie? Może użyć do tego wyszukiwarki dostępnej pod skrotem klawiszowym Ctrl + F. W ten sposób wyszuka słowa najważniejsze 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ę, iż 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!
