GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen

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&amp;cHash=1798aa823a2af1cb1552505cbf943420">
                <b>Präsidialbereich</b>
                <br/>
              </a>
              <a href="/institut/mitarbeitendenverzeichnis/orga/table/2/77?no_cache=1&amp;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&amp;type=2734658990120&amp;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
    • <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.