Buttons and Links
Buttons
Es stehen einige Buttons und Links in verschiedenen Stilen zur Auswahl. Einige davon können beliebig verwendet werden, andere haben einen bestimmten Verwendungszweck. Die folgenden Beispiele zeigen auch mögliche Kombinationen von Klassen.
Info: Mit der zusätzlichen Klasse button--fullwidth-palm kann der Button bei kleinen Viewports auf die volle Seitenbreite gezogen werden.
Default Button
Der Default Button ist der primäre Button des Vertical und für alle Hauptfunktionalitäten gedacht.
button.button
<button type="button" class="button">Default Button</button>
Light Button
Der Light Button ist der sekundäre Button des Verticals und für untergeordnete Funktionalitäten zu verwenden.
button.button.button--light
<button type="button" class="button button--light">Light Button</button>
Light Colored Button
button.button.button--light.button--colored
<button type="button" class="button button--light button--colored">Light Colored Button</button>
White Button
Der white Button kann auf dunklem Hintergrund verwendet werden, beispielsweise in einem Panel dark oder Panel colored.
.button.button--white
Negative Button
Der Negative Button kann auf dunklem Untergrund genutzt werden und hat einen weißen Rahmen sowie einen transparenten Hintergrund.
.button.button--negative
Negative Light Button
.button.button--negative.button--light
Fulltone Button
Der Fulltone Button ist ein vollfarbiger Behelfs-Button und sollte nur in Ausnahmefällen genutzt werden.
button.button.button--fulltone
<button type="button" class="button button--fulltone">Fulltone Button</button>
Light Fulltone Button
button.button.button--light.button--fulltone
<button type="button" class="button button--light button--fulltone">Light Fulltone Button</button>
Mit dem Clean Button ist es möglich die meisten Styling Attribute des Buttons zu entfernen. Es bleibt nur das Padding - Rahmen, Farben und Icons werden zurückgesetzt.
button.button.button--clean
Button as Link
Ein Button, der jedoch aussieht wie ein klassischer Link kann mithilfe der Klasse link hinzugefügt werden.
button.link
<button type="button" class="link">Button as Link</button>
Special Buttons
Die nachfolgenden Buttons sind speziell für einen Verwendungszweck konzipiert worden und dürfen auch nur für diesen eingesetzt werden.
<button type="button" class="button button--download">Download Button</button>
<button type="button" class="button button--play">Play Button</button>
<button type="button" class="button button--search">Search Button</button>
<button type="button" class="button button--addtocart">In den Warenkorb</button>
<button type="button" class="button button--filter">Filter</button>
<button type="button" class="button button--booking">
<span class="price">9 €</span>
<span class="text">Jetzt buchen</span>
</button> <button type="button" class="button button--extern">Extern</button>
<button type="button" class="button button--close" title="Schließen" aria-label="Fenster Schließen"></button>
<button type="button" class="link link--back">Back button als Link</button>
Links
Der A-Tag ohne weitere Klasse stellt einen Link im Standarddesign bereit.
a
<a href="#randomtarget2418">Default Link</a>
Link as Button
Ein A-Tag mit der Klasse button erhält das Aussehen eines Buttons im Design des Verticals.
a.button
<a href="#randomtarget3202" class="button">Link as Button</a>
<a href="#randomtarget9021" class="button button--disabled" target="#">Link as disabled Button</a>
Special Links
Die nachfolgenden Links sind ebenfalls für einen bestimmten Verwendungszweck konzipiert und dürfen nur für diesen angewendet werden. Wichtig ist an dieser Stelle, dass externe Links als solche gekennzeichnet sein müssen um die Barrierefreiheit zu gewährleisten.
<a href="#randomtarget6353" class="extern">Externer Link</a>
<a href="#randomtarget7279" aria-label="Title of teaser or name of linktarget" title="Title of teaser or name of linktarget" class="more">Read more</a>
<a href="#" class="link--showcart">
<span class="inner" aria-label="Artikel im Warenkorb">1</span>
Zum Warenkorb
</a> <a href="#randomtarget2412" class="link--back">Back link</a>
<a href="#randomtarget5254" aria-label="Descripe here the file to download" title="Descripe here the file to download" class="link--download" download>Download</a>
<a href="#randomtarget9886" class="link--mapmarker">Mapmarker link</a>
<a href="#randomtarget234" class="link--homepage">Homepage link</a>
<a href="#randomtarget980" class="link--email">Email link</a>
Accessibility best practice for "Read more" links
Links used for this test
- A) Different title and anchor text: Mehr Markup: <a href=”#” title=”Ich bin der Titel”>Mehr</a>
- B) Identical title and anchor text: Mehr Markup: <a href=”#” title=”Mehr″>Mehr</a>
- C) Aria-label present besides anchor text: Mehr Markup: <a href=”#” aria-label=”Ich bin das aria”>Mehr</a>
- D) Both Aria-label and title present besides anchor text: Mehr Markup: <a href=”#” aria-label=”Hier geht es zum Linkziel” title=”Beschreibung des Ziels”>Mehr</a>
- E) Identical Aria-label and title present besides anchor text: Mehr Markup: <a href=”#” aria-label=”Hier geht es zum Linkziel” title=”Hier geht es zum Linkziel”>Mehr</a>
The Comparison
| Link | JAWS | NVDA | Orca on Linux | VO on OSX Lion | VO on iOS (iPad) |
|---|---|---|---|---|---|
| A. Different title and anchor text: | Anchor text + title | Anchor text + title | Anchor text + title | Anchor text | Anchor text + title |
| B. Identical title and anchor text: | Anchor text | Anchor text | Anchor text | Anchor text | Anchor text + title |
| C. Aria- label present besides anchor text: | Aria-label | Aria-label | Aria-label | Anchor text + aria-label | Aria-label |
| D. Both Aria-label and title present besides anchor text: | Aria-label + title | Aria-label + title | Aria-label + title | Anchor text + aria-label | Aria-label + title |
| E. Identical Aria-label and title present besides anchor text: | Aria-label | Aria-label | Aria-label | ? | ? |