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.
There are a few buttons and links in various styles to choose from. Some of them can be used in any way, but others have specific purposes. The examples below show also possible combinations of classes.
Info: With the class button--fullwidth-palm in addition to the other classes for the button, the button can be pulled to the full width on smaller viewports.
Default Button
Der Default Button ist der primäre Button des Vertical und für alle Hauptfunktionalitäten gedacht.
The Default Button is the primary button of the vertical and should be used for all main functionalities.
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.
The Light Button is the secondary button of the vertical and should be used for subordinate functionalities.
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.
The white button can be used on a dark background, e.g. in a dark panel or colored panel.
.button.button--white
Negative Button
Der Negative Button kann auf dunklem Untergrund genutzt werden und hat einen weißen Rahmen sowie einen transparenten Hintergrund.
The Negative Button can be used on a dark background and has a white border and a transparent background.
.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.
The fulltone button is has a fulltone colored background and should only be used in exceptional cases.
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.
Most of the styling attributes of the button can be removed with the Clean Button. All that remains is the padding – the border, colors and icons are reset.
button.button.button--clean
Button as Link
Ein Button, der jedoch aussieht wie ein klassischer Link kann mithilfe der Klasse link hinzugefügt werden.
A button that looks like a classic link can be added with the class link.
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.
The following buttons have been designed for specific purposes and may only be used for these purposes.
<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--plus">Plus</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.
The A-tag without any other classes provides a link in the standard design.
a
<a href="#randomtarget8535">Default Link</a>
Link as Button
Ein A-Tag mit der Klasse button erhält das Aussehen eines Buttons im Design des Verticals.
An A-tag with the class button has the appearance of a button in the design of the vertical.
a.button
<a href="#randomtarget8845" class="button">Link as Button</a>
<a href="#randomtarget7272" 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.
The following links have also been designed for specific purposes and may only be used for these purposes. It’s important here to identify external links as such to ensure accessibility.
<a href="#randomtarget5508" class="extern">Externer Link</a>
<a href="#randomtarget8099" 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="#randomtarget2634" class="link--back">Back link</a>
<a href="#randomtarget6558" aria-label="Descripe here the file to download" title="Descripe here the file to download" class="link--download" download>Download</a>
<a href="#randomtarget2410" class="link--mapmarker">Mapmarker link</a>
<a href="#randomtarget702" class="link--homepage">Homepage link</a>
<a href="#randomtarget7761" class="link--email">Email link</a>
<a href="#randomtarget3713" class="link--add">Hinzufügen</a>
Accessibility best practice for "Read more" links
Links used for this test
- A) Different title and anchor text: Mehr Markup: <a href=”#” title=”Beschreibung des Linkziels”>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=”Hier geht es zum Linkziel”>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 | ? | ? |