zum Hauptinhalt springen.
UX/UI Design, Entwicklung & TYPO3 in Karlsruhe Karlsruhe | seit 2006

Barrierefreies Tabbed Content mit Vanilla JS

23.08.2019, geschätzte Lesedauer: Minute(n). #a11y #javascript #webdesign

Ein Tabbed Content Element bietet die Möglichkeit, viel Inhalt auf wenig Raum zu strukturieren. Eine barrierefreie Umsetzung ist entscheidend.

Ähnlich wie bei einem Akkordeon ist es auch bei Tabbed Content Elementen pflicht, dass Inhalte aus Gründen der Barrierefreiheit auch mit der Tastatur erreichbar sind. Damit auch Screenreader-Nutzer die Tabs bedienen können, müssen diese mit dem WAI-ARIA-Attribut (Web Accessibility Initiative - Accessible Rich Internet Applications) aria-expanded versehen werden.

Es gibt sicherlich ein paar sinnvolle Einsatz-Szenarien für dieses Element. Konzeptionell lässt es sich dennoch meist vermeiden. Ich versuche grundsätzlich auf versteckte Inhalte zu verzichten und empfehle meinen Kunden daher nach Möglichkeit Alternativen.

Zur Codepen Demo: (https://codepen.io/onza/pen/QqzZqr)

 

So sieht das aus:

Tab 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Tab 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,

Tab 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet



Der Code:

// HTML // each tabbed content element within the same page needs its own class= "group_x" <div class="tab_bar"> <button class="tabbedcontent__button group_1 default-tab" onclick="openTab(event, 'tab1-1', 1)">Tab 1.1</button> <button class="tabbedcontent__button group_1" onclick="openTab(event, 'tab1-2', 1)">Tab 1.2</button> <button class="tabbedcontent__button group_1" onclick="openTab(event, 'tab1-3', 1)">Tab 1.3</button> </div> <div id="tab1-1" class="tab_content group_1"> <h3>Tab 1.1</h3> <p>Tab 1.1... Lorem ipsum dolor sit amet...</p> </div> <div id="tab1-2" class="tab_content group_1"> <h3>Tab 1.2</h3> <p>Tab 1.2... Lorem ipsum dolor sit amet...</p> </div> <div id="tab1-3" class="tab_content group_1"> <h3>Tab 1.3</h3> <p>Tab 1.3... Lorem ipsum dolor sit amet...</p> </div>
// vanilla js function openTab(evt, tabcontentid, group_counter) { var i, tab_content, tabbedcontent__button; tab_content = document.getElementsByClassName("tab_content group_" + group_counter); for (i = 0; i < tab_content.length; i++) { tab_content[i].style.display = "none"; } tabbedcontent__button = document.getElementsByClassName("tabbedcontent__button group_" + group_counter); for (i = 0; i < tabbedcontent__button.length; i++) { tabbedcontent__button[i].className = tabbedcontent__button[i].className.replace(" active", ""); tabbedcontent__button[i].setAttribute("aria-expanded", "false"); } document.getElementById(tabcontentid).style.display = "block"; evt.currentTarget.className += " active"; evt.currentTarget.setAttribute("aria-expanded", "true"); } var defaulttabs = document.getElementsByClassName("default-tab"); for (var i = 0; i < defaulttabs.length; i++) { defaulttabs[i].click(); }

Noch ein paar Styles:

// CSS .tab_bar { overflow: hidden; background: #404040; } .tabbedcontent__button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } .tab_bar .tabbedcontent__button:hover { background-color: #000; } .tab_bar .tabbedcontent__button.active { background-color: #000; } .tab_content { display: none; padding: 10px; background: #eee; } /* tab menu: content fade */ .tab_content { animation: fadeEffect 2s; } @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} } /* just some more styles for demo */ .tab_bar button { font-family: Sans-Serif; font-size: 1.3rem; color: #fff; } .tab_content { background-color: #eee; font-family: Sans-Serif; font-size: 1.2rem; line-height: 1.2; }
Skyline Karlsruhe