Making a webpage accessible

Quick links to in-page content:

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.

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 ¨C 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 ¨C 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).

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).