Accessible design and content.
Accessible design is about creating solutions that work for as many people as possible. It means good readability, clear structure, and high usability even in varying situations such as low lighting, stress, or small screens.
For information and support services covered by the LPTT, these must be available according to standard EN 301 549, which includes for example WCAG level A + AA.
It's about building interfaces that are predictable, consistent, and easy to grasp, whether the user navigates with a mouse, keyboard, or screen reader. When the design supports different needs – visual, motor, cognitive, or technical, the experience becomes both more inclusive and more effective.
Basic principles that help all users.
Guidance with examples for a more accessible and useful e-commerce service.
Structure and navigation
Use a logical heading hierarchy (<h1> to <h6>), only one <h1> per page.
Create consistent menus and layouts.
Ensure that all interactive elements are clear and accessible with a mouse, keyboard, and screen reader.
Please complete with text and icons.
Make error messages clear.
Use informative link texts that describe where they lead (do not use only "Click here," "Read more").
Links should always lead somewhere (URL, specify if a link opens in a new window.
Content
Meaningful images should be described with alt texts.
Avoid text in images.
Write plain language - short, clear, and concrete.
Divide the text into short paragraphs with clear subheadings.
Text and provide audio description for video.
Specify file format and file size for the document.
Avoid documents that may be difficult to adapt (easier to present as html)
Avoid flashing or auto-moving content.
Color, contrast, and typography
Use sufficient contrast between text and background that works in varying environments.
Never offer contrast for brand color, if your primary color has low contrast, use an accessible variant.
Avoid conveying information solely with color.
Choose clear and readable fonts.
Use sufficient text size, appropriate line length (about 60–80 characters per line), and clear line spacing (about 1.4–1.6 times).
Avoid long capitalized headings.
Frequently Asked Questions and Answers.
What is a good alt-text?
Focus on the purpose or function of the image. Describe objectively in about 5-15 words what the user needs to know to understand the content. If the image contains text, it should always be included in the alt text.
What does predictable design mean?
That components behave the same everywhere. The button should look like a button, the link like a link, and modals should always close in the same way. The user should never have to guess.
What is a good link text?
A link text that describes where you will end up when you click on it. Keep in mind that a screen reader can list all the links on a page and then context is needed.
What is a sufficient contrast value according to WCAG 2.1?
Each color has a luminance value, how bright it is perceived. The contrast value is the difference between the luminance of two colors, in the form of a ratio. For body text and smaller text, the contrast value should be at least 4.5:1. For UI elements, icons, and large text, a contrast of 3:1 is sufficient (Large text = at least 18px / 24pt or 14pt / 19px bold).
Focus areas and package offers.
Package deals for accessible e-commerce.
Accessibility adapted functionality.
About accessibility laws and guidelines.