Improving Accessibility and Content Creation: Insights from TYPO3camp Vienna
Today, I had the chance to participate in TYPO3camp Vienna, where one of the key topics was website accessibility. Motivated by the discussions, I decided to enhance some aspects of my website's accessibility. We already have a "skip to content" anchor in place, but now it's time to improve tab navigation for keyboard users who rely on the tab key to move between elements.
For example, on the blog listing page, I simplified tabbing by focusing on the "read more" button only. This means instead of three different links (image, headline, and button), the tab will now land just on the button, making navigation more efficient. To achieve this, I used the attribute tabindex="-1" to remove the other elements from the tab order, thus avoiding tabbing traps and hidden targets.
Inspired by the event, I also began creating custom content elements for a richer content experience. Thanks to André Kraus and the Structured Content team, I discovered the power of the Content Blocks extension in TYPO3. With a few simple commands, I quickly generated a content element for FAQs, which follows the correct structure for enhanced SEO.
Each FAQ entry uses structured data, like this:
<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>
To ensure that the FAQ structured data is recognized by search engines, I needed to mark the page with <html itemscope itemtype="https://schema.org/FAQPage">. Instead of manually adding it to each page, I automated this using Alpine.js. Whenever this content element appears on a page, a JavaScript function automatically adds the required attributes to the HTML tag, making the setup seamless across different sections.
TYPO3camp Vienna truly provided new skills and ideas that I'm already putting into practice!