Tips and tricks for more accessibility

Seven golden rules for more accessibility

1. Apply heading formats: Use the right heading format for headlines and titles. This applies both to AEM as well as to Word, PowerPoint, InDesign, etc. Be sure to keep the correct hierarchy of headings in mind in the process. 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 (heading level 2, H2), then level 3 (heading level 3, H3), and so on.
   Why? Because people who work with screen reader software can jump from heading to heading. This only works properly if headings have been formatted correctly. Only then can people with visual impairments skim the content like any other use
2. Use lists: Use the list format for content that involves listing items. A list can be numbered (for rankings or processes) or unnumbered (all other cases). The bullet point symbol used doesn’t matter as long as the content is properly formatted as a list. Important point to remember: A list always contains at least two entries. A single point isn’t a list. This applies both to AEM as well as to Word, PowerPoint, InDesign, etc.
   Why? People who work with screen reader software have lists read aloud in a structured format that is announced with a description such as “list with 12 elements”. If lists are not formatted as such, they are read aloud as incomprehensible run-on text.
3. Formulate understandable links: Use informative and meaningful phrasing for any link 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”. This applies to all context in which links are created: in Word, PowerPoint, InDesign, etc.
   Why? Linked text is highlighted visually. Meaningful, informative link text is more helpful than words such as “here”, “more” and “continue”. The same applies to people who work with screen reader software: they can gather all the links on a page or in a document into a list in order to get an overview of the information. Informative link text helps them get this overview faster.
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. This applies both to AEM as well as to Word, PowerPoint, InDesign, etc.
   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.
   • Decorative images: The image is only there for visual purposes and brightens up the document or webpage. Be sure to mark these types of images as decorative.
   • Informative images: Write an alternative text that captures the essence of the image. Keep the alternative text as brief as possible while still being precise. The software recognises that it’s an image. Words like “picture” or “photo” are not needed in alternative text since screen reader software always announces images in advance (“Image: image of a wrinkly apple in a fruit bowl”).
5. Colour: Be aware of how you use colour. This applies both to AEM as well as to Word, PowerPoint, InDesign, etc.
   Why? People’s perception and ability to see colours varies greatly. Around 5% of the population is colourblind (primarily men). There are also various eye diseases that can impair colour perception.
   • Always be sure that the contrast ratio between text and background is at least 4.5:1. There are various colour contrast analyser tools online to check if you have used the right level of contrast. The ETH corporate colours have been chosen specifically to meet the contrast requirements. On the Colour accessibility for web graphics page (in English only and with graphics), you will find out whether a corporate colour should be combined with white or with black. Never use colour as the only means of conveying information. Colours may only be used in an auxiliary fashion – for instance, displaying fully booked courses with a red X and remaining free places with a green square.
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 guideline is mainly aimed at developers. If you commission a piece of software, be sure to include this as a mandatory requirement. It is easy to test whether a digital interface can be navigated without a mouse: simply use your own keyboard to navigate through the interactive elements. Usually you can stick to the following keys: tab, space, shift, enter, escape, arrow keys.
   Why? Many blind people work without a mouse since they cannot identify the cursor/pointer. There are also many motor disabilities that make using a mouse difficult or impossible.
7. Keyboard focus visibility: Make sure that keyboard focus is always visible. This point is aimed primarily at developers. If you commission a piece of software, be sure to include this as a mandatory requirement. It’s easy to check whether the keyboard focus is visible: simply use your own keyboard to navigate through the interactive elements. The keyboard focus is good if you can always see where you are on the page. It is recommended to use Firefox when testing, since it quickly and clearly shows whether the keyboard focus is recognisable.
   Why? Sighted keyboard users (see point 6) need to be able to recognise at all times where they are on a digital interface.