Making a webpage accessible
"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." (Tim Berners-??Lee, 1997)
Quick links to in-page content:
- chevron_right Importance of content accessibility
- chevron_right Seven golden rules of accessibility
- chevron_right Headings
- chevron_right Links
- chevron_right Bullet lists
- chevron_right Images and animations
- chevron_right Contrast and colour
- chevron_right Video and audio content
- chevron_right Tables
- chevron_right Image maps
- chevron_right Language separation
- chevron_right Accessibility Courses
ETH Zurich strives to make its content accessible to everyone. Web accessibility encompasses more than just vision impairments; it also includes auditory, motor, and cognitive impairments. Additionally, it benefits users who rely on screen readers when using smaller devices where the text may be too small or inconvenient to read.
Why is it important to make content accessible?
- It is fair. We don't have the right to limit those who read our content.
- Swiss law dictates adherence to minimum accessibility standards (WCAG 2.1 AA).
- Article 21 of the United Nation's Convention on the Rights of Persons with Disabilities recognizes the right to information internationally.
- To make information accessible is not more expensive or complicated.
- Accessible websites rank higher in search engines.
- Accessible documents are easier to maintain and convert to other formats.
The following table provides examples of impairments typically considered in general accessibility. Currently, the first three categories—Touch, See, and Hear—apply to our websites. The others may become relevant in the future, for instance, if voice recognition technology is implemented.
Accessibility posters courtesy of Karwai Pun, Home Office Digital, UK
Seven golden rules of accessibility
Digital content should not be created based only on what is visually appealing. It should meet both visual and accessibility needs. Follow those seven rules and you will design more accessible content:
- Headings: Use headings' formatting. Follow correct headings hierarchy.
- Lists: Use text component's list formatting when you list two or more items.
- Links: Write informative and meaningful link texts.
- Images: Decide if they are decorative or meaningful.
- decorative: mark them as decorative (empty alt-text, alt="")
- meaningful: Write an alt-text that contains the essence of that image
- decorative: mark them as decorative (empty alt-text, alt="")
- Colour: Make sure that contrast ratio is at least 4.5:1 between text and background. Do not use colour alone as a means of information.
- Keyboard accessibility: Make sure that all interactive elements can be accessed by using a keyboard, without a mouse or similar (developers).
- Focus visibility: Make sure that the keyboard focus is always visible (developers).
If you know those seven rules by heart, go on with the following:
- Informative texts: Write informative and understandable (headings, link texts, error messages, instructions, labels, notes, information, etc.)
- Page titles: Make sure that every page has an informative and unique page title. This title is what is first read by screen readers. The page title contains information about the page's contents plus the organisation that is responsible for that page, eg. "Services & Resources ETH Zurich" (developers).
- Empty lines: Do not generate white space by hitting the Enter key and creating empty paragraphs. Our components have been customized for ideal spacing and additional should not be needed.
- Tables: Give tables at least one table head. Never use tables for content layout or non-data content.
Headings
If a piece of text is a heading, it should be formatted as such. The correct formatting is important for screen reader users because they often jump from heading to heading. Bold or coloured text alone does not make a heading a heading.
On the other hand, it is important not to use a header element to emphasize an element in your content that is not actually a heading. Instead use bold.
It is important to follow the proper heading hierarchy for titles. The header elements in HTML are not created with graphic design in mind, but to designate a hierarchy of headline importance – to structure a document such that both website users and search engines can easily determine a page's information structure. The webpage main heading is H1 – so H2 should follow and subtopics of H2 would be H3 and so on.
Headings hierarchy has to be kept in mind if a component has headings included in its basic display. For example, the Tabs/Accordion component must use a heading for its item titles that fits with the structure of the content on the page. If an H2 is used above the informational grouping of the accordion, then an H3 should be used for the headings of the tabs and then only H4 headings should be applied within the content of the accordion or tab items of the component.
Links: accessible and user-friendly
Links are basic to the functionality of a website. Inaccessible links are a serious barrier to a website's usability. Important things to remember when creating links is to:
- Screen readers allow users to skip text content and only navigate from link to link. Others will generate an alphabetical list of links on a webpage. Clear and meaningful link text is crucial. Avoid common errors such as 'here', 'go to', 'more', or 'click for details'; they are ambiguous and uninformative.
- If you have two or more links listed in a row, use the Link list component.
- When linking an image, the alt-text should describes where the link is leading (e.g. News article about xy).
- Avoid using only the link symbol or download size as a link. Links should make sense out of context and provide information to the user about where a link is leading or what is being downloaded.
- There is no need to include the word 'link' in the link text. The HTML will indicate there is a link and adding the word link would be redundant.
Correct use of lists (bullet and numbered lists)
When listing items, format them correctly using the bullet list function in the text editor or the link list element. Avoid using plain text dashes, other symbols, or alphanumeric characters with periods to create bullet lists, as these do not provide the HTML tag elements needed for a reader to interpret the content as a list. There are two options for displaying lists in the text editor: bullets or numbers. Both are acceptable. Use numbered lists when there is a clear priority or chronology among the items. Otherwise, use unordered lists (bullets).
Accessible images and animations
Alt text
Images are crucial on websites and can enhance comprehension, especially for users with auditory or cognitive disabilities. For screen reader users, it is important that informative images include relevant alternative text (alt-text). The alt-text should convey the essence of the image, not a filename or other irrelevant information. If an image serves as a link, the alt-text should indicate the destination of the link (e.g., "Link to ETHZ homepage").
Avoid graphics that can cause seizures
Bright, strobing images or media can cause photoepileptic seizures. Avoid using videos or animations that are large, bright, and flash more than 2 times per second. Also the color red is particularly known to more likely cause a seizure.
Contrast and Colour
Text contrast
Text must always contrast with its background. The WCAG defines the minimum contrast ratio as 4.5:1. Several free color contrast checkers are available online. You can input the HEX codes to determine if the contrast ratio meets the standard. Many color combinations may appear adequate but fail accessibility requirements (see example in Figure 1, which initially might seem fine but does not meet WCAG standards).
For graphics containing textual content (e.g., organizational diagrams or banners), the color contrast between the text and background must also meet the 4.5:1 ratio.
If you are using the official ETH corporate colors and shades with text, our Colour Accessibility page provides the necessary text color (white or black) to meet accessibility standards. For other colors, use the online external pageWebAIM Color Contrast Checkercall_made to quickly test your text and background color choices.
Colour as a means of conveying information
Colour should never be used as a sole means of conveying information. In the example below a portion of a London Underground map is shown in colour and in black and white (Figure 2). Removing the colour from the image, renders the map mostly unusable. If you want to make sure that colour is not the only means of information, you might want to use different line patterns (e.g. dotted, solid, dash-dotted, etc.).
Correct table structure
It is important to use tables only for table data and never for content layout. Try to use the simplest table configurations possible with clearly designated column headings (Figure 1). Nested tables, unnecessary rows and columns, and the use of spanned rows and columns should be avoided, because users with screen readers can become quite disoriented.
Screen readers linearize or read content in the order in which the information in given, row by row. It will list the number of columns and rows and then proceed to read the data in the order given (Figure 2). If the content is complex or poorly defined, a user can get confused. Using the tab key to navigate through the rows and columns is a way to visualize how a reader will navigate through the content of a table.
General table rules to follow
- One header row (and/or column for horizontal tables) per table that is clearly defined
- One piece of information per cell
- No empty cells (if necessary use NA, TBA, UNKN or even a dash)
- No nested cells
Making image maps accessible
By their very nature, an image map (an image with various links) may not be completely accessible. For even many users without impairments, an image that is linked or has many links may not be obvious - especially if you rely on users to find the links by hovering over them.
Preliminary text before the image, telling a user that an image map follows and the nature of the links is important and makes your content more understandable and usable.
An alternative link list could be provided for those unable to visually see or navigate to the image links or for those users that turn images off. In addition, it is also important to be aware that some users with motor disabilities may find it very difficult to traverse a complicated or intricate image map with many links.
When adding a link to an image in standard image components, be sure that the alt-?text describes where the link is going and not the content of the image in this case.
Empty paragraphs and soft line breaks
The use of empty paragraphs causes issues for screenreaders and should be avoided. Empty lines are read as "empty, empty, empty" by screen readers. In addition, the use of soft line breaks for content should be considered in context. Soft line breaks introduce only a visual change on the webpage and screenreaders will read the information as a whole. Only text separated by a standard 'return' will create a separate paragraph that is interpreted as such by screenreaders.
Clear language separation
It is important to have a clear language separation for an accessible website, because the language of a website is defined in the document heading of the page HTML and the pronunciation rules of software are language specific.
The best solution is to provide a complete language copy for multilingual websites. However, because ETH is an international institution, there are some instances where documents and/or content are only available in one language, and it doesn't make sense to translate an entire website for a few paragraphs or pages of content. In this case, it is important to warn the reader with a disclaimer note before the change in language content, informing the user that there will be a language switch on the page. In addition, if one links to content only available in another language, whether it be another webpage, website or a download, the link chould indicate the new language of the linked content. For example, linking to lecture content from an English website that is only in German, one would provide a link such as Lecture #1, Systems Biology (German).
Accessibility courses
- Accessibility courses (in German) are open to all ETH members. Find the courses at the Internal IT courses list. These courses will help our authors to understand the necessity of accessible content.
- DownloadAccessibility workshop presentation 2019 (PDF, 2.5 MB)vertical_align_bottom (in German only).
“The only way this work gets done is if we start small, and if we work together.”Ethan Marcotte - The web we broke (https://ethanmarcotte.com/wrote/the-web-we-broke/)