Accordion mit DETAILS und SUMMARY, HTML Button...

Test diverser Techniken zu barrierefreien Akkordions. DETAILS oder HTML mit Button...

Was ist Barrierefreiheit?

Barrierefreiheit bedeutet, dass alle Menschen, unabhängig von Behinderungen oder Einschränkungen, Zugang zu physischen, digitalen und sozialen Umgebungen haben.

Barrierefreiheit bedeutet, dass alle Menschen, unabhängig von Behinderungen oder Einschränkungen, Zugang zu physischen, digitalen und sozialen Umgebungen haben.

Barrierefreiheit bedeutet, dass alle Menschen, unabhängig von Behinderungen oder Einschränkungen, Zugang zu physischen, digitalen und sozialen Umgebungen haben.

Was ist Inklusion?

Inklusion beschreibt die aktive Einbeziehung aller Menschen in Gesellschaft und Gemeinschaft, unabhängig von individuellen Merkmalen wie Behinderung, Alter, Geschlecht oder Herkunft.

Wo liegen die Schwierigkeiten?

Das Ganze lässt sich sich smooth animieren, und sieht somit immer etwas hakelig aus...

Vorteile:

  • DETAILS und SUMMARY sind native HTML Elemente, schön und sicher

Nachteile:

  • Aufklapper lassen sich nicht animieren
  • Meines Wissens nach können nicht mehrere ausfgeklappt sein

Fazit:

  • Geht schon, Bare und kann man vewrwenden!

Accordion DETAILS SUMMARY mit Animation

Accordion DETAILS mit Anim

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid dolores, distinctio ipsum veritatis magni soluta maiores rerum optio, possimus animi eligendi architecto sed placeat quasi quibusdam, nihil odio. Amet, tempore.

Wenn das klappt ist das gut

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid dolores, distinctio ipsum veritatis magni soluta maiores rerum optio, possimus animi eligendi architecto sed placeat quasi quibusdam, nihil odio. Amet, tempore.

Lorem leck mich am Arsch

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid dolores, distinctio ipsum veritatis magni soluta maiores rerum optio, possimus animi eligendi architecto sed placeat quasi quibusdam, nihil odio. Amet, tempore.

Vorteile:

  • DETAILS und SUMMARY sind native HTML Elemente, schön und sicher
  • Animation über proprietäre CSS Definition möglich

Nachteile:

  • Klappt auf manchen Browsern nicht... sollte 2026 aber gehen!
  • Optional alle oder nur 1 aufgeklappt: allen DETAILS ein name="faq" geben

Fazit:

  • Geht schon, Bare und kann man vewrwenden!

Accordion BUTTON ARIA und reinem HTML

Vorteile:

  • Könnte womöglich animiert werden

Nachteile:

  • Mehr Markup
  • JS für aria notwendig
  • Es können mehrere ausfgeklappt sein

Fazit:

  • Geht schon, Bare und kann man vewrwenden!

Test Natives Popup ohne Javascript

Heading 2

I am a popover with more information. Hit esc or click away to close me.

Quellen: