Seven golden rules for more accessibility

With these seven tips, you can contribute to greater accessibility in the day-to-day life of our community. These rules apply to AEM just as they do to Word, PowerPoint, InDesign, etc.

1. Apply heading formats: Use appropriate formats for headings and take note of the correct hierarchy: The main title of a page or document is usually a level 1 heading (H1). Subordinate content follows in a logical sequence, broken up by one to several level 2 headings, then level 3, and so on.

2. Lists: Use list formatting for vertical lists. A list can be numbered or unnumbered.

3. Formulate understandable links: Use informative and meaningful phrasing for any links embedded in your text. For example, instead of writing “You can find the materials here”, it helps to phrase it as “We’ve provided the materials for the Introduction to Accessibility course on our info pages”.

4. Add alternative text to images: Always decide whether the images you use are important to your message (i.e. they convey essential, useful content or additional information) or are simply decorative. Why? Screen reader software ignores all images marked as decorative, but for all other images, it reads the alternative text aloud. This ensures that people who work with this kind of software also receive all the essential information.

5. Colour: Pay attention to how you use colours. The contrast ratio between text and background must always be at least 4.5:1. The ETH corporate colours have been chosen specifically to meet the contrast requirements. On the overview page, Colour accessibility for web graphics (with graphics), you will find out whether a corporate colour should be combined with white or with black. In addition, never use colour as the sole carrier of information.

6. Keyboard accessibility: Make sure that all interactive elements are accessible with the keyboard alone, i.e. without a mouse, tablet pen or similar. This point is aimed primarily at developers and anyone who has software developed by third-party providers. The following keys should usually be sufficient to operate a digital interface without the aid of a mouse: tab, space, shift, enter, escape, arrow keys.

7. Keyboard focus visibility: Make sure that keyboard focus is always visible. This is a way to indicate which web page element the user is currently “on”; for example, a field that is ready to receive input. The indicator often takes the form of a border around the element in question. It should become visible as soon as you navigate a web page with the keyboard only (without the mouse). Besides borders or outlines, other types of visual indicator are possible, such as colour inversion. This point is aimed primarily at developers and anyone who has software developed by third-party providers.

Of course, accessibility includes many other aspects, such as subtitling and audio description of videos, core content videos in sign language, ensured operability in high-contrast mode and much more. Nevertheless, the tips listed above are valuable steps towards a world with fewer barriers in the digital space.

More Tips and Tricks

You can find the background for the above tips as well as more detailed information on the individual aspects at Tips and tricks for more accessibility (page in German, an English version will follow soon). In addition, Corporate Communications regularly offers courses on digital accessibility, including awareness courses in German and English as well as more in-depth classes on writing alternative texts and or how to check the accessibility of one’s own website. On request, all of the courses can be offered in English, as well. There is also the option of a two-hour crash course for teams upon request. Course details can be found on the Accessibility courses web page (in German, English will follow soon); you can register at Internal IT courses.