Page tree
Skip to end of metadata
Go to start of metadata

Purpose

It is important to ensure that your content is accessible to users with disabilities, particularly those who use assistive technologies, like screen readers, voice command software or switch devices. Screen readers, for example, rely on the correct use of <tags> in HTML code to denote elements such as headings, lists and tables. The text can then be converted into speech or read using a braille reader.

Drupal comes with a WYSIWYG editor that will automatically tag most elements of a web page. If you are familiar with HTML, you can add tags in the source code. The formatting tools available in Microsoft Word and Microsoft PowerPoint should also be used to tag headings, lists and tables.

Here are 6 simple tips to help you create web content that is more accessible to people with disabilities:

1.    Alternative text – provide it for all images

2.    Hyperlink labels  explain what lies behind the link

3.    Video and audio – provide a transcript

4.    Headings – format sections and sub-sections as headings (H1, H2, H3), do not just use a larger font

5.    Lists – use list formatting, do not just use numbered lines or paragraphs

6.    Tables – use table formatting for tables, make sure rows and columns are correctly marked up

These tips are mainly aimed at web editors using Drupal. A more detailed checklist covering other accessibility requirements and aimed at webmasters and web developers will be available here soon.

Alt text, hyperlinks and transcripts

For images that convey meaning, use alternative text to describe it to users with visual impairments. Alternative text should briefly describe the image's purpose or function. Each time you upload an image, object or other non-text element, you will be asked for an alt text description.

  • images of text: alternative text should match the text in the graphic if it is not already duplicated on the page (unless it is purely for decoration)
  • graphics that add meaning: alternative text should provide a brief description of the graphic. Do not write ‘image of’ or ‘picture of’ – screen readers automatically announce images, so this information is redundant. But sometimes it may be helpful to describe the type of image, e.g. ‘line drawing’.
  • decorative/design images: images that convey no specific meaning, or are used simply to provide an image for the words next to it on the page, should have a null (empty) alt text (alt=””). Screen readers will ignore it and understand that the image is decorative and has no information value
  • graphs and charts: Alternative text for graphs and charts needs a more detailed or longer description unless the graph’s information is also on the page as text 

    Here is a comparison between effective and ineffective alt text for a graph that shows trends in commodity prices year on year.

 

Incorrect: 'Graph showing trends in commodity prices year on year.'

Correct: 'Double line graph showing import price index and sales tax adjusted headline consumer price index (CPI), over a period of 5 years. Chart shows a clear relationship between the two lines over the period January 2011 to January 2016, with the two lines following each other either closely, or with the import price index fluctuating slightly ahead of sales tax adjusted headline CPI' 

To help you decide how an image should be labelled, use W3C’s alt text decision tree.

Hyperlink labels

Create clear link labels; don't use labels like 'Read more' or 'More information here'. It is not necessary to use the exact name of the linked‑to page as the link label. But be descriptive, so that when screen readers read out the label, users have enough information to decide whether to click on it. Be aware that screen readers can extract all the links in a page and list them for easy consultation and access, so you should aim for link labels that are meaningful out of context.

Video and audio

Create a transcript for videos with sound or dialogue (this will also help search engines indexing the content of the video and displaying it in the list of results). The transcript must describe all the audio, spoken dialogue, music and sound effects. It must also describe what the video shows. Likewise, create a transcript for audio content to make it more accessible for users with auditory disabilities.

Add the transcript to the web page with the video/audio on it (as HTML) or as an accessible PDF or RTF file. In the transcript file itself, add a link back to the web page with the video/audio on it, to help search engines find the page to which the transcript refers.

Headings, lists and tables

Headings

Aim for a logical, consistent and complete heading structure (with headings and sub-headings), organising the different blocks of content.

Screen reader users use the headings to understand the structure of the page. If the page is structured correctly, screen readers will be able to list all the headings on a web page. The user can then listen to the list (or use a refreshable braille reader) to get an overview of the different parts of the page or start reading the content under a specific heading by navigating through the list and clicking it. Using keyboard shortcuts provided by the screen reader, it is also possible to jump directly to a specific heading and continue reading from there.

If you use a large font size or you make your text bold but you do not use proper <h1> to <h6> HTML mark-up for the headers, assistive technologies cannot offer this functionality to the users.

Equally, you should not use headers only for visual purposes, as this is unhelpful for users of assistive technology.

Lists

Use lists, if appropriate, to help structure your content. Screen readers announce them and tell the user how many items they contain. Users can then read the list sequentially or navigate quickly through the items.

Use proper HTML code (do not create lists manually by indenting dashes, dots or any other character instead of bullet points) and never use them purely for visual layout.

Tables

Use the appropriate HTML tags for your tables. Do not forget to define the row and/or column headers using the editor tools or HTML mark-up. If you simply change the background colour of the cells, screen readers will not be able to connect the data in the cells with the corresponding headers.

Proper table mark-up helps users with visual impairments to have a better understanding of what the table contains and to move more easily through the cells using the keyboard.

Avoid complex tables and merged cells. They can be confusing for screen reader users.

Contact and support

If you require further assistance, please contact:

Comm Europa Management

European Commission
DG Communication 
Unit B.3 
Europa Web Communication 


  • No labels

The Europa Web Guide is the official rulebook for the European Commission's web presence, covering editorial, legal, technical, visual and contractual aspects.
All European Commission web sites must observe the rules and guidelines it contains.
Web practitioners are invited to observe its contents and keep abreast of updates. Read more.