Widget Kontaktbutton
Live-Beispiel
HTML-Quelltext
<div class="frame-vcard">
<aside aria-label="Kontakt" tabindex="0" class="gs_vcard_toggle">
<div class="gs_vcard">
<ul>
<li>
<div itemscope="" itemtype="https://schema.org/Person" class="gris_staff_person_vcard">
<div class="gs_address">
<div class="h3">
<a href="/institut/mitarbeitendenverzeichnis/person/Florian.Frings?no_cache=1"> <span itemprop="givenName">Florian</span> <span itemprop="familyName">Frings</span> </a>
</div>
<a href="/institut/mitarbeitendenverzeichnis/orga/table/2/all?no_cache=1&cHash=1798aa823a2af1cb1552505cbf943420">
<b>Präsidialbereich</b>
<br/>
</a>
<a href="/institut/mitarbeitendenverzeichnis/orga/table/2/77?no_cache=1&cHash=37777f2d4de98fc0b956ea2fcd896064">
Portfolio-Management
<br/>
</a>
<div class="gs_options">
<span itemprop="telephone">
<a href="tel:+4922147694139" class="gris_staff_phone" > <span class="icon-gs-phone pe-2"></span> +49 (0221) 47694-139 </a>
</span>
<br />
<a class="gris_staff_email" href="#" data-mailto-token="ocknvq,Hnqtkcp0HtkpiuBiguku0qti" data-mailto-vector="2"><span class="icon-gs-contact pe-2"></span> E-Mail</a>
<br/>
<a class="gris_staff_vcard" href="/styleguide/widgets/kontakte/button/vcard/Florian.Frings?no_cache=1&type=2734658990120&cHash=d5ca3572b20462266ffa683096b20db5"> <span class="icon-gs-vcard pe-2"></span> vCard </a>
</div>
</div>
<div>
<figure>
<img src="https://gris.gesis.org/files/photos/person_default.jpg" alt=" " />
</figure>
</div>
</div>
</li>
</ul>
</div>
</aside>
</div>
HTML-Aufbau
<div class="frame-vcard">
: Wrapper dieses Widgets<aside aria-label="Kontakt" tabindex="0" class="gs_vcard_toggle">
: Ein weiterer Wrapper- Attribut
aria-label
: Label für interaktives Element
- Attribut
<div class="gs_vcard">
: Wrapper des Kontakt-Inhalts.
Initialisierungscode
import { fadeMainContent, unfadeMainContent} from './js/gesis-helpers.js';
const vCardsElements = Array.from( document.getElementsByClassName("gs_vcard_toggle") );
for (const vCardElement of vCardsElements) {
new VCard(vCardElement, fadeMainContent, unfadeMainContent);
}
Anmerkung: Bei der Instantiierung eines Kontaktbuttons (new VCard(..)
) können optionale Callback-Funktionen übergeben werden, welche beim Öffnen respektive Schließen des Kontaktbuttons ausgeführt werden. Dieses Beispiel verwendet die Callback-Funktionen fadeMainContent
und unfadeMainContent
, welche den Seitenkontext um den Kontaktbuttons herum verdunkeln respektive wieder normalisieren.
Barrierefreiheit
- Öffnet und schließt sich beim Rein-/Raushovern mit Mauszeiger
- Öffnen/Schließen auch per Tastatur möglich.
- Titel des Akkordeons soll aussagekräftig über den Inhalt des Akkordeons informieren.
aria-expanded
erlaubt Screenreadern, dem Benutzer mitzuteilen, ob das Akkordeon geöffnet oder geschlossen ist. Diese Information ist wichtig zur Erfüllung der Barrierefreiheit, da Screenreader-Benutzern (z.B. blinden Menschen) vermittelt wird, dass es sich beim Akkordeon um ein Seitenelement handelt, bei welchem weiterer Inhalt durch explizite Interaktion erschließbar ist.- Inhalt geschlossener Tabs wird derzeit bei Seitensuche nicht gefunden (internes Issue).
- Implementiert W3C-WAI-ARIA-Spezifikation Accordion.
Responsive Design
- Öffnen/Schließen auch per Touch möglich, da auf mobilen Geräten im Allgemeinen keine Hover-Eingabemöglichkeit (Maus) existiert.