We're using the colors provided by our other product DB UI Base, by which Design tokens are being provided.
Please have a look at the related page within the Marketingportal for more information as well: https://marketingportal.extranet.deutschebahn.com/marketingportal/Basiselemente/Farbe
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Large-scale text and images of large-scale text have a contrast ratio of at least 3:1
A file containing the Deutsche Bahn color palette for Adobe InDesign, Adobe Illustrator or Adobe Photoshop is provided by the DB Marketingportal.
The included iconset has been developed in cooperation with the Center of Excellence @ Personenverkehr and replaces the previous enterprise only icons. More information: https://marketingportal.extranet.deutschebahn.com/marketingportal/Basiselemente/Icons/Funktionale-Icons-Architektur-und-Fahrzeuge
You could use the icons either within your SCSS code as described below, which is the recommended approach. Alternatively you could also use the attribute based configuration.
And we're additionally providing the icons as the sources (SVG) files as well.
All of the available glyphs variables are shown on this page right next to the icon, with the SCSS and attribute based variables/values shown next to them.
Use the following SCSS mixin for setting an icon:
// schema
@mixin icon(
$glyph: "",
$size: $icon-size,
$style: $icon-style,
$position: "before"
);
// example
span.with-an-icon {
@include icon(glyph(account), 20, "outline");
}
As both $icon-size and $icon-style are available to get configured with default values, and $position is only a variant (explained in the next paragraph) only the first one is really mandatory.
If you'd like to include the icon after the text, set the last parameter to after.
In case of the need to display only the icon and hide the text next to it, use the following mixin:
@include is-icon-text-replace();
Use the data-icon and data-icon-variant HTML attributes for setting an icon:
<a href="#" data-icon="alarm" data-icon-variant="24-outline">Alarm</a>
The data-icon-variant is an optional attribute, that you don't need to declare in case that you'd like to use the default icon size and style, that are defined by the $icon-size and $icon-style SCSS variables (size: 24 and style: outline as defaults), that could obviously get overwritten by individual SCSS declarations; so you'll end up with a very simply definition when relying on the defaults:
<a href="#" data-icon="alarm">Alarm</a>
Of course this icons definition does as well have an equivalent for icons after the content: data-icon-variant-after
If you'd like to include the icon after the content/text, use the HTML attribute data-icon-after instead of data-icon, example:
<a
href="#"
data-icon-after="alarm"
data-icon-variant-after="24-outline"
class="elm-link"
>Alarm</a
>
In case of the need to display only the icon and hide the text next to it, use the following class:
.is-icon-text-replace
font-sizeIf you'd like to control the icons font-size any further (defining sizes in between all of the data-icon-variant declarations, like e.g. having an icon font-size of 23px instead of 24px when defining data-icon-variant="24-outline"), you could set set one of the CSS variables --icon-font-size-before or --icon-font-size-after (in this case --icon-font-size-before: 23px).
<a
href="#"
data-icon="alarm"
data-icon-variant="24-outline"
style="--icon-font-size-before: 23px"
>Alarm</a
>
As mentioned above we're even also providing all of the icon sources (svg files) within this package in the folder node_modules/@db-ui/core/dist/icons/.
And we're enabling to change the colors for the illustrative icons ("pulse" and icon itself) as well as the functional icons (only the single-color icon), through the two following CSS variables / CSS custom properties, with their included default (second value):
var(--db-icon-color, currentColor)
var(--db-icon-pulse-color, #EC0016)
Regarding accessibility icons are providing cognitive complementary visual support for sighted people (e.g. people with reading difficulties), as well as quick recognition of specific functionality and UX patterns like e.g. the bin/waste paper basket symbol for a delete action.
On the other hand icons shouldn't get recognized and output by assistive technologies like screenreaders, as those glyphs or signs being used in case of an icon webfont don't necessarly provide a meaning - and on the other hand each icon being used on the page should always as well get included in conjunction with some textual description both as a fallback as well as providing some meaning even and especially if the icon itself doesn't provide a unique meaning on it's own (to all users idependently from their skill level/experience, culture, etc.).
Additionally this pattern has been tested and approved regarding accessibility.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
We're delivering general font declarations and the web fonts for our generally used DB Screen Sans font.
In case that you need to use font sizes smaller than 16pt please switch to our font-family DB Screen Sans Digital Regular for better readability / accessibility.
Please find this rule and a lot of further information regarding and more information on typography: https://marketingportal.extranet.deutschebahn.com/marketingportal/Marke-und-Design/Basiselemente/Typografie/Fuer-digitale-Anwendungen
Primary font: "DB Screen Sans", "Helvetica", "Arial", sans-serif;
Primary font italic: "DB Screen Sans", "Helvetica", "Arial", sans-serif;
Primary font bold: "DB Screen Sans", "Helvetica", "Arial", sans-serif;
Body: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
Body: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
Body: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
Body: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
Body: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
Body: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
Body: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
Body: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
You could set the different button variants via the data-variant attribute. These could be either one of the four feedback values, or the "point of interest" stylings.
There has been some development the latest on the new proposed intrinsicsize attribute for images, that ended with the existing and well known attributes width and height will get used to compute that intrinsicsize directly via UA-stylesheets - so the responsive images and aspect-ratio comes without any costs and leads to that it even makes more sense than ever to fill out those attributes with the basic size of your image in the first place.
For more information have a look at those articles and the standard/proposal:
Photographs typically fare well with lossy compression (depending on the encoder's configuration). This makes
JPEGandWebPgood choices for photographs, withJPEGbeing more compatible butWebPperhaps offering better compression. To maximize quality and minimize download time, consider providing both using a fallback withWebPas the first choice andJPEGas the second. Otherwise,JPEGis the safe choice for compatibility.
Source: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#Photographs
Next to WebP you could experiment a little bit with the new image format AVIF that promises even lower file sizes than WebP and increases in browser support.
Additionally have a look at Googles product "Guetzli", that provides great JPEG compression rates as well: https://github.com/google/guetzli/
And another tool even also resulted in fine compression rates - the main difference in between the both of them is that JPEGMini isn't available for free anymore: https://www.jpegmini.com
Attention: PNG is even also often used for pictures, even though that the special capabilities of this format like partial transparency aren't being used. This leads to much huger filesizes in most cases, as the JPEG format is capable of much better compression rates than PNG in general, so you would have to check on this aspect individually and carefully.
Regarding images that need to have some kind of full or partial transparency, you could use either GIF (full) or PNG (most likely PNG-24 for partial) transparency.
Or use SVG masks, as this beautiful concept shows: https://github.blog/2021-01-29-making-githubs-new-homepage-fast-and-performant/#serving-the-perfect-image
For any image that can be represented using vector graphics,
SVGis the best choice. Otherwise, you should use a lossless format likePNG. If you do choose a lossy format, such asJPEGor lossyWebP, carefully weigh the compression level to avoid causing text or other shapes to become fuzzy or unclear.
Source: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#Diagrams_drawings_and_charts
On top of the possibilities mentioned above regarding image optimizations (Google Guetzli & JPEGMini) you could as well have a look at both ImageAlpha (for PNG) and ImageOptim (for all), both available for Mac and the first both both other GUI and command-line variants and the latter as well as a webservice. Another great online tool that works entirely in the browser and doesn't even need to process your data on their servers (due to WebAssembly and some other cool stuff) is https://squoosh.app. Nowadays they additionally provide a CLI version of their software and new cool image formats, check out their version 2: https://web.dev/squoosh-v2/
Some further information on this topic are provided on this page: https://dev.to/prototyp/optimizing-images-for-the-web-an-in-depth-guide-4j7d
All links should have text that uniquely identifies the link target.
Source: https://www.deque.com/blog/accessibility-strategies-for-your-content-team/#:~:text=Link Text
The key is to describe what you want your audience to get out of the image rather than a simple description of what the image is.
Source: https://www.deque.com/blog/accessibility-strategies-for-your-content-team/#:~:text=Images
For using captions it's recommended to use the <figure> and <figcaption> HTML tags - but please be aware that you additionally need to enrich those via aria-labelledby or aria-describedby attributes to ensure that assistive technologies are recognizing the linkage of those tags on Windows. It's mainly important to decide whether the figcaption HTML tags content is meant as a description or a label to choose one of those aria-* attributes correctly.
When using the down arrow, NVDA announced all the
<img>elements in turn except for the ones with empty or missingaltattributes. These were just completely ignored by the screen reader. Usingaria-labelledbyoverrode any alternate text, and usingaria-describedbyadded the ‘description’ into the alternate text. It’s interesting to note that usingaria-labelledbyalso brought images with missing or empty alternate text to the attention of NVDA.
Source: https://www.hassellinclusion.com/blog/figure-figcaption-extended-alternate-text-screen-readers/
label and input elements code structureWe're using the construct of label and input elements shown below (both their order and not nesting them, as a few other frameworks do) for two good reasons:
input elements (pseudo-)states w/o the need for JavaScriptYou could easily integrate the possibility to provide auto suggestions to your input fields via the list-attribute on the input-HTML-elements as well as adding the suggestions via the datalist-HTML-element. Please follow up within the Input - Auto Suggestions section.
For heavily supporting the user on autofilling form fields (not only, but especially on mobile browsing) with information even already available on their devices, you could use the autocomplete attribute, as described e.g. here https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/
The attribute doesn't even only take boolean values, but even also a list of specific field types, as described in the specification: https://html.spec.whatwg.org/multipage/forms.html#inappropriate-for-the-control
Please have a look especially at the section for form validation within the overall components/forms page.
Additionally to the browser built-in pseudo-selector :user-invalid we're providing styling for the aria-invalid="true" attribute as well.
For our special construct (the order of the label and input HTML tags) we need to additionaly set some further attributes on those HTML tags to better support assistive tools (screenreaders like JAWS and VoiceOver); set the aria-labelledby-attribute on the input and related id on the label as well as aria-hidden="true", e.g. like this:
<input
type="text"
class="elm-input"
placeholder="Projekt Name"
name="input01"
id="input01"
aria-labelledby="input01-label"
/>
<label class="elm-label" for="input01" aria-hidden="true" id="input01-label"
>Textlabel</label
>
We've conducted some tests with those assistive tools that lead to the conclusion that either the labels content hasn't been read out to the screenreader user on those form fields directly, but the labels content has been read again after the form field e.g. on VoiceOver. So those declarations are necessary for this kind of HTML construct, that is especially relevant for form validation and floating label functionality via CSS only.
Optionale Beschreibung
Zeile zwei
Extend one of the size SCSS placeholders in case that you don't want the default (regular): %size-Small or %size-Large
You could set the different button sizes via the data-size attribute, the default is "regular" and in that case is optional.
The following three rel=* annotated links even already include an icon by default - you could enhance those by your own declarations for further patterns of linked pages.
[rel="configuration"]
[rel="messages"]
[rel="account"]
Advice: Don't provide title attributes to links with identical text nodes. Since the text node is already perfectly visible, this is completely redundant. It doesn't even add anything for screen readers except — in some cases — repetition.
The HTML elements for buttons and links describe a very specific type of action that is going to be taken when they are used. It is important you know when to use which, as the distinction matters:
- Use a link when you’re navigating to another place, such as: a "view all" page, "Jane Chen" profile, a page "skip link" etc.
- Use buttons when you are performing an action, such as: "submit," "merge," "create new," "upload," etc.
- An action is almost always on the same page
Source: https://www.lightningdesignsystem.com/components/buttons/#About-Buttons
Further argumentations:
Never use
"javascript:" "#"or similar as the value of anhrefattribute. The purpose of thehrefattribute is to specify a URL only. If you wish to run JavaScript on an element click, use abuttoninstead.
Source: https://ebay.gitbook.io/mindpatterns/antipatterns/javascript-href
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
This attribute indicates the human language of the linked resource. It is purely advisory, with no built-in functionality. Allowed values are determined by BCP47.
Contains a space-separated list of URLs to which, when the hyperlink is followed,
POSTrequests with the bodyPINGwill be sent by the browser (in the background). Typically used for tracking/analytics.
Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.
Specifies where to display the linked URL. It is a name of, or keyword for, a browsing context: a tab, window, or
<iframe>
Note: When using
target, consider addingrel="noreferrer"to avoid exploitation of thewindow.opener API. See Security concerns section.
Note: Linking to another page using
target="_blank"will run the new page on the same process as your page. If the new page is executing expensive JS, your page's performance may suffer. To avoid this userel="noopener".
aria-disabledInstead of the disabled-attribute we're using for the button pattern to define a disabled state, we couldn't use this attribute on the link pattern, as disabled isn't a valid attribute an a HTML element, compare to e.g. the W3C ARIA documentation and the W3C spec:
Use the disabled attribute on any element that is allowed the disabled attribute in HTML.
Only use the aria-disabled attribute for elements that are not allowed to have a disabled attribute in HTML.
Please keep in mind to only include a disabled link sparly, as it's not recommended at all, compare to e.g. https://css-tricks.com/how-to-disable-links/#aa-just-dont-do-it
Please keep in mind to use unambiguous labels: https://ebay.gitbook.io/mindpatterns/antipatterns/ambiguous-label
The
aria-disabled="true"usespointer-events: noneto try to disable the link functionality of<a>s, but that CSS property is not yet standardized. In addition, even in browsers that do supportpointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add atabindex="-1"attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
Adapted from: https://getbootstrap.com/docs/4.3/components/buttons/#link-functionality-caveat
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Text Link Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Text Link (disabled) Lorem ipsum dolor sit amet, consectetur adipisicing elit
Progress spinners (loading indicators) show the user that a longer-lasting action is being carried out.
Progress/Loading Indicators are used when the application executes a server request or processes data in the frontend. The component is used as soon as the execution and the resulting delay are noticeable to the user. This keeps the user aware that his or her action is being executed.
SVGs are often conveyed inconsistently to assistive technologies. The component’s accessibility is also highly contextual. For optimal user experience, use the aria-description prop to let assistive technology users know the purpose of the loading spinner.
aria-live and dynamic creation of html contentUsing JavaScript (e.g. in context of frameworks like Angular, VueJS or React), it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction. While these changes are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. ARIA live regions fill this gap and provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies.
aria-live triggers screen readers when an element with aria-live (or text within an element with aria-live) is added or removed from the DOM. In contrast, when you unhide a hidden element, neither elements nor text are added or removed from the DOM, so the element's aria-live property doesn’t come into play.
Note that the live region needs to be present in the markup before the notification is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
You also need to adapt the role and aria-live level depending on the content. Further information can be found here https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
If the application is waiting for a process, it makes sense to display an indicator in a central location.
An indicator should not be used to visualize the application waiting for user input.
Please find a lot of more information regarding our logo and how to use it within the Marketingportal.
You could easily change the line-colors of the logo as well as the background color by defining different color values for both CSS variables:
--db-logo-color--db-logo-backgroundColorThe fallback for an undefined --db-logo-color is our DB Red (#f01414), and --db-logo-backgroundColor would fall back to transparent, which is the general background defined by brand.
Extend one of the size SCSS placeholders in case that you don't want the default (xlarge, 58px width, 40px height): %logo-size-xsmall, %logo-size-small, %logo-size-medium, %logo-size-large or %logo-size-xlarge
You could set the different button sizes via the data-size attribute, the default is xlarge and in that case is optional.
Please have a look especially at the section for form validation within the overall components/forms page.
Additionally to the browser built-in pseudo-selector :user-invalid we're providing styling for the aria-invalid="true" attribute as well.
This element doesn't fulfill the styleguides definitions especially on the option elements styling, as this isn't possible x-browser without JavaScript. If you would like to even also match those visual requirements, you would need to choose a progressive JavaScript solution on your own.
Please have a look especially at the section for form validation within the overall components/forms page.
Additionally to the browser built-in pseudo-selector :user-invalid we're providing styling for the aria-invalid="true" attribute as well.
Please have a look especially at the section for form validation within the overall components/forms page.
Additionally to the browser built-in pseudo-selector :user-invalid we're providing styling for the aria-invalid="true" attribute as well.
Extend one of the size SCSS placeholders in case that you don't want the default (regular): %size-Small or %size-Large
You could set the different button sizes via the data-size attribute, the default is "regular" and in that case is optional.
The regular sized accordion could even also get enhanced to a higher emphasis.
Extend the related placeholder: %emphasis-High
You could set the high emphasis via the data-emphasis attribute.
In case you would need to support Microsoft Internet Explorer and/or Edge within your project setup, you'll need to polyfill (with e.g. details-element-polyfill, that is still included in our pages for demo purposes) the details and summary HTML tags due to their missing browser setup in those environments.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This component is mainly meant to get used within the header section. If you're looking for a similar one within the content section, please refer to the overflow menu component.
This component expected to be placed at the end of the header regularly and thatfor opens the overlay to its opposite side (to the right on left-to-right reading direction). If you'd like to change this behaviour e.g. to implement some kind of a collision mechanism (most likely with JavaScript) and flip the overlays orientation to the opposite side, you could use the following attribute to configure this orientation change, compare to the examples below as well:
data-horizontal-position="opposite"
In case you would need to support Microsoft Internet Explorer and/or Edge within your project setup, you'll need to polyfill (with e.g. details-element-polyfill, that is still included in our pages for demo purposes) the details and summary HTML tags due to their missing browser setup in those environments.
Forms in general are being built out of elements like form, input, textarea, button and fieldset.
For more information reach out to https://developer.mozilla.org/en-US/docs/Learn/Forms
Best practice, research insights and examples: https://gerireid.com/forms.html
It's best to use the built-in and standard form validation, as these are standards based API implementations, that are as well providing compatible and consistent states both for CSS and JS:
Additionally this way you're following the principles of Progressive Enhancement - and in other words, any JavaScript only solution doesn't provide a graceful degradation and puts that whole functionality to the weakest layer in the stack even only.
Nevertheless additionally to the browser built-in pseudo-selector :user-invalid we're providing styling for the aria-invalid="true" attribute on the elements input, radio, select and textarea.
We can't toggle any given/static attribute in the DB UI Core product itself, as we don't want to use JavaScript in this basic product. As you'd also need to add individual error messages, please find some inspiration on the necessary HTML code implementation e.g. on http://mars.dequecloud.com/demo/form-alert3.htm
Please find some more informations on the following pages:
Forms can be tricky, so read through the W3C forms WAI tutorials for some guidance around how to implement accessibility successfully.
You could either use the language switcher component with hyperlinks, which would be the recommended way, to link to another language based page, which is addressable by a different URL.
The other way (especially for Single Page Applications) would be to use <button type="button"> elements, that have some JavaScript events attached to them to handle the switch directly. Please keep in mind to announce a change of contents e.g. to screenreaders in this case.
In both cases there's a slightly different HTML approach that you could inspect within the different examples below.
Please keep in mind that the styling is optimized to look good included within the header section of the page and doesn't "shine" included in here.
Best practice, research insights and examples: https://gerireid.com/forms.html#notifications
Notifications are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your notifications in an aria-live region. Changes to live regions (such as injecting/updating a notification component) are automatically announced by screen readers without needing to move the user’s focus or otherwise interrupt the user.
Additionally, if you'd like to update existing notifications incrementally, include aria-atomic="true" to ensure that the entire notification is always announced as a single (atomic) unit, rather than announcing what was changed (which could lead to problems if you only update part of the notification’s content, or if displaying the same notification content at a later point in time). It's still recommended to remove and add cmp-notification components as a whole within the section.
Note that the live region needs to be present in the markup before the notification is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
You also need to adapt the role and aria-live level depending on the content. If it’s an important message like an error, use role="alert" and aria-live="assertive", otherwise use role="status"and aria-live="polite" attributes.
Adapted from https://getbootstrap.com/docs/4.3/components/toasts/
And we're not using aria-relevant="additions", as the default behaviour is even already what we expect with the default (additions text), compare to e.g. https://medium.com/dev-channel/why-authors-should-avoid-aria-relevant-5d3164fab1e3 and https://github.com/w3c/aria/issues/712#issuecomment-529848465
Live regions are perceivable regions of a web page that are typically updated as a result of an external event when user focus may be elsewhere. These regions are not always updated as a result of a user interaction. This practice has become commonplace with the growing use of Ajax. Examples of live regions include a chat log, stock ticker, or a sport scoring section that updates periodically to reflect game statistics. Since these asynchronous areas are expected to update outside the user's area of focus, assistive technologies such as screen readers have either been unaware of their existence or unable to process them for the user. WAI-ARIA has provided a collection of properties that allow the author to identify these live regions and process them: aria-live, aria-relevant, aria-atomic, and aria-busy.
Source: https://www.w3.org/TR/wai-aria/#terms
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional visibly hidden text.
Source: https://getbootstrap.com/docs/4.3/components/alerts/
The multi-line tabs haven't been developed, but are only available in the Sketch library. If you really need this pattern even also in the development, please set it up yourself e.g. with a <br> or differentiated label texts e.g. by <span> elements.
This pattern has been tested and approved regarding accessibility.
| The table header 01 | The table header 02 |
|---|---|
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| The table header 01 | The table header 02 |
|---|---|
| Value 01 - 01 two lines |
Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 - longer content | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 - longer content |
| The table header 01 | The table header 02 |
|---|---|
| Value 01 - 01 two lines |
Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 - longer content | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 - longer content |
| The table header 01 | The table header 02 |
|---|---|
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| The table header 01 | The table header 02 |
|---|---|
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| The table header 01 | The table header 02 |
|---|---|
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| The table header 01 | The table header 02 |
|---|---|
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| The table header 01 | The table header 02 |
|---|---|
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| The table header 01 | The table header 02 |
|---|---|
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| The table header 01 | The table header 02 |
|---|---|
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Column header | The table header 01 | The table header 02 |
|---|---|---|
| table header | Value 01 - 01 | Value 01 - 02 |
| table header | Value 02 - 01 | Value 02 - 02 |
| table header | Value 03 - 01 | Value 03 - 02 |
| table header | Value 04 - 01 | Value 04 - 02 |
| table header | Value 05 - 01 | Value 05 - 02 |
| The table header 01 | The table header 02 |
|---|---|
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| The table header 01 | The table header 02 |
|---|---|
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
UI Core
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
| The table header 01 | The table header 02 |
|---|---|
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
| Value 01 - 01 | Value 01 - 02 |
| Value 02 - 01 | Value 02 - 02 |
| Value 03 - 01 | Value 03 - 02 |
| Value 04 - 01 | Value 04 - 02 |
| Value 05 - 01 | Value 05 - 02 |
First column
First column
Second column
First column
Second column
Third column
First column
Second column
Third column
Fourth column
First column
Second column
Third column
Fourth column
Fifth column
First column
Second column
Third column
Fourth column
Fifth column
Sixth column
First column / SCSS Placeholder: %is-four-fifths
Auto
Auto
First column / SCSS Placeholder: %is-three-quarters
Auto
Auto
First column / SCSS Placeholder: %is-two-thirds
Auto
Auto
First column / SCSS Placeholder: %is-three-fifths
Auto
Auto
First column / SCSS Placeholder: %is-half
Auto
Auto
First column / SCSS Placeholder: %is-two-fifths
Auto
Auto
First column / SCSS Placeholder: %is-one-third
Auto
Auto
First column / SCSS Placeholder: %is-one-quarter
Auto
Auto
First column / SCSS Placeholder: %is-one-fifth
Auto
Auto
Personenverkehr und DB Systel führen ihre Design Systeme für Web in der Version 2.0 der Standard Web Components zusammen. Unser Ziel ist eine einheitliche Basis UX im Sinne der Modernen Ikone für Kunden und Mitarbeiteranwendungen. Um unser Design End 2 End von Konzeption über Design bis zur Implementierung konsistent zu halten, wird das DB UX Design System auch in Code von DB Systel und Reisendeninformation umgesetzt. Stay Tuned!
We’re not designing pages anymore. We’re designing systems of components.
Mit DB UI Core bieten wir robuste HTML UI Komponenten, wiederverwendbare visuelle Styles und mächtige Werkzeuge, um vor allem Mitarbeitende der Bereiche Entwicklung, Konzeption&Design und Content Pflege&Produktion dabei zu unterstützen, allerbeste digitale Erlebnisse zu erstellen und zu betreiben.
Damit unsere technischen Produkte einen möglichst großen Umfang an Nutzer:innen erreichen, haben wir uns dazu entschlossen, die Majorität unserer Dokumentation in englischer Sprache zu verfassen, die insbesondere im Bereich der technischen Entwicklung i.d.R. geläufig ist.
DB UI Core is based on the DB UX Design System, that are the guidelines for any Personenverkehr Customer and Deutsche Bahn Enterprise website and web applications.
DB UI Core leverages semantic HTML, ARIA roles, states and properties to apply our styles wherever possible, thus enforcing correct, accessible markup. And we're quality checking this in partnership with the Team Digital Accessibility
DB UI Core uses declarative selectors instead of visual helpers to ensure our HTML class names and structure are human read- and understandable, lean, performant and so much easier to update.
DB UI Core is decoupled from the JavaScript layer, to implement the patterns in any Web Development technology context; and we're providing universal Web Components and native JS framework components with DB UI Elements as well.
As DB UX Design System evolves, so does DB UI Core, meaning apps only need to keep their DB UI Core package updated to ensure the latest look and feel.
A platform providing the space and technology for a common basis of curated components; their development is mainly driven by the community, adapted out of the work done in projects and through the huge amount of feedback.
For using DB UI Core, you need to install it as a dependency to your project and then link it within your HTML / CSS.
Please have a look into the Docs / Get Started(docs) for detailed instructions.
In case that you're developing a JavaScript application, please have a look at DB UI Elements, that's based on DB UI Core and provides Web Components for easier integration into this tech context.
Additionally we'll provide some more information over time regrading the whole ecosystem:
This is only the beta version of our framework and we really want your feedback - either within the DB UI Channel by Web Dev Community in Microsoft Teams (only available DB internally)
, or directly at db-ux-designsystem@deutschebahn.com
.
We're particularly keen to add as many examples to the behaviours as possible, to further clarify them.
This is mainly a platform providing the space and technology for a common basis of curated components; their development is mainly driven by the community, adapted out of the work done in projects and through the huge amount of feedback that we're gaining out of the community. So please support us in any way possible, this is greatly appreciated!