The Four WCAG Principles
The WCAG (Web Content Accessibility Guidelines) are based on four principles: Perceivable, Operable, Understandable, and Robust. These apply regardless of the language of the content. Perceivable means that all information can be perceived by users with visual or hearing impairments. Operable ensures that all functions can be used via keyboard and without time constraints. Understandable requires clear language and consistent navigation. Robust ensures compatibility with assistive technologies. For international websites, these principles must be implemented equally in every language version.
Language annotation with the lang attribute
The lang attribute in the HTML element specifies the natural language of a page or section. Screen readers use this attribute to select the correct pronunciation and emphasis. For multilingual pages, the lang attribute must be correctly set on the main page and at language changes within the text. For example: <html lang=“de“> for German and <span lang=“en“> for English passages. If this attribute is missing, use of the page can be significantly impaired for people with visual impairments. Therefore, check each language variant for complete and correct attribution.
Contrasts and colors
Sufficient contrast between text and background is essential for readability. WCAG Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. This applies to all languages of a website. Avoid relying solely on color differences to convey information, as color-blind users cannot perceive them. Additionally, use symbols or text markers. Color schemes should also be checked in all localized versions, as cultural associations can vary. Test your pages with contrast analysis tools during development.
Keyboard operation
All interactive elements must be reachable and operable via keyboard. This includes links, buttons, form fields, and menus. The focus must be visible, ideally with a clear focus ring. Avoid elements that only work with a mouse or touch. Especially for international sites with complex navigation, keyboard operation should be tested in each language version. Dynamic content such as modal windows must manage focus correctly. Ensure that the order of elements in the DOM corresponds to the logical order and is not determined solely by CSS.
Alt texts in multilingual contexts
Alt texts describe images for screen readers and should be written in the language of the surrounding page. For multilingual websites, this means each image receives an alt text in the respective language version. Do not use automatic translations; instead, create appropriate descriptions for each target audience. Graphics containing text must reproduce the included text as alt text. Decorative images receive an empty alt text (alt=““) so that they are ignored by assistive technologies. This approach ensures that content remains accessible in all languages.
