{"id":298,"date":"2017-09-10T10:08:01","date_gmt":"2017-09-10T08:08:01","guid":{"rendered":"http:\/\/evileu.de\/systemberatung\/?p=298"},"modified":"2017-09-10T10:11:43","modified_gmt":"2017-09-10T08:11:43","slug":"akkordion-barrierfrei-notfalls-mit-javascript","status":"publish","type":"post","link":"https:\/\/evileu.de\/systemberatung\/2017\/09\/10\/akkordion-barrierfrei-notfalls-mit-javascript\/","title":{"rendered":"Akkordion: barrierfrei, notfalls mit Javascript"},"content":{"rendered":"<p>Besonders bei One-Page-Layouts werden heute gerne Akkordeons eingesetzt, also aufklappbare Elemente, deren Inhalt zun\u00e4chst nicht sichtbar ist und erst durch einen Klick auf das \u00dcberschrifts-Element eingeblendet wird. Dies ist in HTML5 mit dem <strong>details<\/strong>-Element ganz einfach realisierbar. Es ist in allen unterst\u00fctzten Browsern zug\u00e4nglich, d.h. auch mit der Tastatur zu \u00f6ffnen und zu schlie\u00dfen:<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<details>\n<summary> Klapp mich auf: <\/summary>\n<p>Das neue details-Element erm\u00f6glicht es, ganz ohne den Einsatz von JavaScript, urspr\u00fcnglich verborgene Textinhalte aufzuklappen.<\/p>\n<\/details>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Der Pferdefu\u00df dabei: vom IE und von \u00e4lteren Firefox-Versionen wird das details-Element noch nicht unterst\u00fctzt.<\/p>\n<p>Und noch etwas: der Inhalt des Elements ist nat\u00fcrlich nicht auf den ersten Blick ersichtlich, es muss erst eine Aktion durch den Benutzer erfolgen, um die versteckten Inhalte einzublenden. Deswegen sollte man es sich gut \u00fcberlegen, wann und wo man ein Akkordeon sinnvoll einsetzt.<\/p>\n<h2>Abhilfe: Javascript, wenns denn unbedingt sein mu\u00df<\/h2>\n<p><a href=\"https:\/\/wiki.selfhtml.org\/wiki\/JavaScript\/Anwendung_und_Praxis\/zug%C3%A4ngliches_Akkordeon\">In diesem Artikel bei selfhtml<\/a> ist der Sourcecode f\u00fcr ein barrierefreies Akkordeon extra f\u00fcr IE und \u00e4ltere Browser\u00a0 zu finden, sowie eine genaue Erkl\u00e4rung der Anwendung. Es werden ARIA-Elemente eingesetzt, um das Akkordeon auch f\u00fcr Screenreader etc. bedienbar zu machen. Ich zitiere mal kurz selfhtml:<\/p>\n<blockquote><p>Das Akkordeon besteht aus Buttons und einem dazugeh\u00f6renden div. Um diesen Zusammenhang auch f\u00fcr Screenreader klarzustellen, erhalten die Buttons ein <a title=\"WAI-ARIA\/Zust\u00e4nde und Eigenschaften\" href=\"https:\/\/wiki.selfhtml.org\/wiki\/WAI-ARIA\/Zust%C3%A4nde_und_Eigenschaften#aria-controls\">aria-controls<\/a>-Attribut, dass auf die <code>id<\/code> des dazugeh\u00f6renden divs verweist. Jeder Button erh\u00e4lt ein <a title=\"WAI-ARIA\/Zust\u00e4nde und Eigenschaften\" href=\"https:\/\/wiki.selfhtml.org\/wiki\/WAI-ARIA\/Zust%C3%A4nde_und_Eigenschaften#aria-expanded\">aria-expanded<\/a>-Attribut, dass den jeweils geschalteten Zustand anzeigt, was auch mit CSS sichtbar gemacht wird.<\/p><\/blockquote>\n<p>Alles klar? Wenn man also unbedingt f\u00fcr \u00e4ltere Browser kompatibel bleiben will, setzt man diese L\u00f6sung ein.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Besonders bei One-Page-Layouts werden heute gerne Akkordeons eingesetzt, also aufklappbare Elemente, deren Inhalt zun\u00e4chst nicht sichtbar ist und erst durch einen Klick auf das \u00dcberschrifts-Element eingeblendet wird. Dies ist in HTML5 mit dem details-Element ganz einfach realisierbar. Es ist in allen unterst\u00fctzten Browsern zug\u00e4nglich, d.h. auch mit der Tastatur zu \u00f6ffnen und zu schlie\u00dfen: &nbsp; &hellip; <a href=\"https:\/\/evileu.de\/systemberatung\/2017\/09\/10\/akkordion-barrierfrei-notfalls-mit-javascript\/\" class=\"more-link\"><span class=\"screen-reader-text\">Akkordion: barrierfrei, notfalls mit Javascript<\/span> weiterlesen <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[19,23,26,22,28],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/systemberatung\/wp-json\/wp\/v2\/posts\/298"}],"collection":[{"href":"https:\/\/evileu.de\/systemberatung\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/evileu.de\/systemberatung\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/evileu.de\/systemberatung\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evileu.de\/systemberatung\/wp-json\/wp\/v2\/comments?post=298"}],"version-history":[{"count":7,"href":"https:\/\/evileu.de\/systemberatung\/wp-json\/wp\/v2\/posts\/298\/revisions"}],"predecessor-version":[{"id":305,"href":"https:\/\/evileu.de\/systemberatung\/wp-json\/wp\/v2\/posts\/298\/revisions\/305"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/systemberatung\/wp-json\/wp\/v2\/media?parent=298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/systemberatung\/wp-json\/wp\/v2\/categories?post=298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/systemberatung\/wp-json\/wp\/v2\/tags?post=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}