Zlepšení přístupnosti a tvorby obsahu: Poznatky z TYPO3campu ve Vídni
Dnes jsem měl možnost zúčastnit se TYPO3campu ve Vídni, kde jedním z klíčových témat byla přístupnost webových stránek. Motivován diskusemi jsem se rozhodl zlepšit některé aspekty přístupnosti svých webových stránek. Kotvu „přeskočit na obsah“ již máme, ale nyní nastal čas vylepšit navigaci po kartách pro uživatele s klávesnicí, kteří se při pohybu mezi prvky spoléhají na klávesu tab.
Například na stránce s výpisem blogu jsem zjednodušil práci s tabem tím, že jsem se zaměřil pouze na tlačítko „číst více“. To znamená, že místo tří různých odkazů (obrázek, titulek a tlačítko) nyní tab přistane pouze na tlačítku, což zefektivní navigaci. Abych toho dosáhl, použil jsem atribut tabindex="-1" k odstranění ostatních prvků z tabu, čímž jsem se vyhnul nástrahám a skrytým cílům při tabování
Inspirován touto událostí jsem také začal vytvářet vlastní obsahové prvky pro bohatší obsah. Díky André Krausovi a týmu Structured Content jsem objevil sílu rozšíření Content Blocks v systému TYPO3. Pomocí několika jednoduchých příkazů jsem rychle vygeneroval obsahový prvek pro často kladené dotazy, který dodržuje správnou strukturu pro lepší SEO.
Každý záznam FAQ používá strukturovaná data, jako je tento:
<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"><div itemprop="name">{faq.question}</div><div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"><p itemprop="text">{faq.answer -> f:format.raw()}</p></div></div>
Abych zajistil, že strukturovaná data FAQ budou rozpoznána vyhledávači, musel jsem stránku označit <html itemscope itemtype="https://schema.org/FAQPage">. Místo ručního přidávání na každou stránku jsem to automatizoval pomocí nástroje Alpine.js. Kdykoli se tento obsahový prvek na stránce objeví, funkce JavaScriptu automaticky přidá požadované atributy do značky HTML, takže nastavení je v různých sekcích bezproblémové.
TYPO3camp ve Vídni mi skutečně poskytl nové dovednosti a nápady, které již nyní využívám v praxi!