Fancy Akkordeon Elemente in Gutenberg
Im Gutenberg Editor gibt es von Haus aus den “Details” Block. Der ist auch praktisch und funktionabel. Designer*innen wünschen sich jedoch mehr Gestaltungs-Spielraum mit diesem vielseitigen Interface-Element.
Akkordeon Elemente sind nützliche und vielseitige Tools im Webdesign Baukasten.
Sie helfen u.A. dabei Informationen zu organisieren, Raum effektiver zu nutzen oder auch – durch kompakte Darstellung – Layouts sauber und aufgeräumt erscheinen zu lassen.
Im Y59-Akkordeon können z.b. der Summary-Teil, also die stets sichtbare Überschrift, mehrzeilig sein (siehe unten) und z.b. eine Überschrift als auch einen Absatz enthalten.
Der Details Block, also das Element was aufgeklappt wird, ist frei gestaltbar im Editor.
Mein Y59-Akkordeon folgt den Empfehlungen bzgl. Zugänglichkeit und WAI-ARIA vom W3C. Zum Auf-und Zuklappen wird das Attribut ‘aria-expanded‘ verwendet.
Das Y59-Akkordeon ist bald als Gutenberg Plugin verfügbar. Es funktioniert bereits (siehe Video unten), braucht allerdings noch ein paar weitere Tests und Features.
Interesse? Mehr gerne per Mail (studio@wordpress-larslo.de)
See it in Action
Why to use Accordions on a webpage?
Pros:
1. **Space Efficiency:** Accordions help in saving space on the webpage by allowing users to expand and collapse sections as needed. This is particularly useful when dealing with content-heavy pages.
2. **Organization:** Accordions help in organizing information into different sections, making it easier for users to navigate through the content and find what they are looking for quickly.
3. **User Engagement:** Accordions can enhance user engagement by providing a more interactive and user-friendly browsing experience. Users can choose which sections to expand based on their interests.
4. **Visual Appeal:** Accordions can add visual appeal to the webpage by showcasing a clean and structured layout. They can also help in reducing clutter on the page.
Why not to use Accordions?
think Accessibility and Ctrl+F
1. **Hidden Content:** One of the main drawbacks of accordions is that they hide content by default. Users may miss out on important information if they do not expand all the sections. Also using Ctrl+F (search an site) is not the best experience.
2. **Accessibility:** Accordions can pose accessibility challenges for users who rely on screen readers or keyboard navigation. It is important to ensure that accordion content is accessible to all users.
Our Accordion pattern follows the suggestions made here following WAI-ARIA from here https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
and toggles aria-expanded attribute to change the “visibilty” of the summary-part
How can I get this?
Send a E-Mail to studio@wordpress-larslo.de. Let’s get in contact.
Will make this available as a plugin soon.