No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

This is a pre-release version and is not production ready. For new and ongoing projects, please refer to the latest Design System version.

Accessibility

Die Postdienste müssen so angeboten werden, dass Menschen mit Behinderungen sie in qualitativer, quantitativer und wirtschaftlicher Hinsicht unter vergleichbaren Bedingungen wie Menschen ohne Behinderungen beanspruchen können.

(EN) The postal services must be offered in such a way that people with disabilities can use them under comparable conditions to those without disabilities, both qualitatively, quantitatively, and economically.

§14.7 Swiss postal law

Swiss Post is guided by the standards of the Web Content Accessibility Guidelines (WCAG), Level AA.

The Web Content Accessibility Guidelines are a recommendation for designing accessible Internet content. They were developed by the World Wide Web Consortium’s (W3C) Web Accessibility Initiative. The Level AA guidelines set out the following requirements in particular:

Perceivability

through text alternatives for images, subtitles for audio, ability to display content in different ways and change colour contrasts

Operability

through keyboard operation, colour contrasts, time limits for data entry, prevention of seizures and navigability.

Understandability

through readability, predictability and assistance with entering data.

Robustness

through compatibility with assistive technologies.

Here are some key best practices to follow when designing and developing accessible websites and applications. While these are important starting points, there are many more considerations to ensure full accessibility. For more in-depth guidance, visit the W3C website.

Ensure that text has sufficient contrast against its background. The minimum recommended contrast ratio for text is 4.5:1 for normal text and 3:1 for large text.

This text has enough contrast with its background.

This text does not have enough contrast with its background and is not easily readable. 

<div class="p-12 my-12" style="color: #050400; background-color: #f0efed;">
  <p>This text has enough contrast with its background.</p>
</div>
<div class="p-12 my-12" style="color: #9b9a96; background-color: #f0efed;">
  <p>This text does not have enough contrast with its background and is not easily readable.</p>
</div>

Ensure all interactive elements (buttons, links, forms) are accessible via keyboard. This means they should be focusable and navigable using the Tab key. Use :focus styles to indicate focus on elements and avoid tabindex="-1" unless it’s necessary.

We provide a .focus-ring helper class to add a focus style to custom elements. Read more on our docs.

Make sure focus is managed properly during dynamic updates or modal windows. For example, focus should be set to the first interactive element inside a modal when it opens and should return to the original trigger when closed.

This link is accessible using keyboard navigation and has a focus ring. 
<a href="#">This link is accessible using keyboard navigation and has a focus ring.</a>
<button class="btn btn-primary">
  This button is accessible using keyboard navigation and has a focus ring.
</button>
<button class="btn btn-secondary" tabindex="-1">
  This button is not accessible using keyboard navigation.
</button>

ARIA landmarks are used to identify larger overall sections of the webpage and allow users to quickly navigate sections of the page. Common landmarks include role="navigation", role="main", role="header" and role="footer".

Ensure that form elements are clearly labeled and use visual indicators such as asterisks for required fields.

Ensure every form field has a properly associated label element and is linked to it using the for attribute. Use aria-describedby for additional descriptions, such as instructions or errors. Read more about form hints and form validations.

This hint gives additional information on how to fill in the form input.

This message informs that the input field is not valid.

Alternative text for images

Always provide text alternatives for non-decorative images. This can be in the form of alt text or ARIA labels. Ensure images are meaningful and provide relevant context. Avoid using empty alt="" for important images.

Swiss Post Logo 
<img src="/assets/images/logo-swisspost.svg" alt="Swiss Post Logo" class="w-48" />

Implement skip links that allow users to bypass repetitive content and jump directly to the main content. We provide a component to style those skiplinks, which you can read about on our docs.

  • Use proper HTML elements to define the structure of the page. This helps assistive technologies (like screen readers) interpret and navigate the content effectively.
  • Use <h1> to <h6> tags correctly to represent headings. Ensure only one <h1> per page (typically the main heading).
  • Use <article>, <section>, <nav>, and <footer> to structure content.

Ensure your design is responsive and adjusts appropriately across different screen sizes. This helps users with low vision or those using screen magnifiers. Use flexible grid layouts and ensure the design is functional across all screen sizes. Read more about responsive design.