Accessibility

People with impairments want to use your website just as well as people without impairments. Read here, how you can support them.

Keyboard with wheelchair-symbol

Legal issues

In Germany, accessibility requirements are regulated in the BITV (Barrierefreie-Informationstechnik-Verordnung). However, these regulations are applicable for Federal authorities only. Abroad, there may be more extensive requirements for a wider range of web service providers. International offices should give thought to whether their website is in accordance with national rules and standards.

Who benefits from accessibility?

But even if the Heinrich-Böll-Stiftung is not required to implement all provisions described in the BITV, it strives for far-reaching accessibility of their websites for people with impairments or disabilities within the limits of its budget, financial as well as personnel resources.

This group includes people with visual, hearing, physical or cognitive impairments as well as unexperienced or older individuals. However, it is not only this audience which benefits from barrierfree websites, but well accessible web content makes sites more usable to users in general. Observance of the relevant standards also serves the improved presentation on mobile devices and is a good basis for search engine optimization. People learning a foreign language can also derive great benefit.

Basic principles

In its Web Content Accessibility Guidelines the World Wide Web Consortium (W3C) states for basic principles of accessibility:

  1. Perceivability (plays an important role in editorial work)
  2. Operability, such as operabiltiy by keyboard only (predominantly implemented by technical means, will not be described in detail here)
  3. Understandability (primarily when writing text)
  4. Robustness, for instance technological tolerance towards user errors, sufficient technical response times etc. (predominantly implemented by technical means, will not be described in detail here)

The following explanations focus on measures that can be taken by the web editors themselves or by specialised service providers commissioned by them. However, the foundation of accessibility is already laid in programming, e.g. by valid HTML, rigorous separation of structure and content (for instance by Cascading Style Sheets - CSS) and keyboard operability, as well as by clear colour and navigation concepts. Assistive systems as well as supporting tools provided by the operation system also contribute to overcome barriers.

By the way, it is most impressive to try out for yourself which effects barriers can have for individuals with impairments. That is why, we - in some places - describe how you can test it. For instance, this is what it sounds, when the speech output device (narrator) reads out the beginning of this help chapter. You can find the narrator and more tools for people with impairments in Windows10 - SETTINGS - EASE OF ACCESS options:

1. Perceivability

A blind person cannot see graphical representations, a deaf person cannot hear audio clips. That's why you should think of alternatives for such elements. In this course the following factors are of significance:

Textual alternatives for graphical representations

If you want to check whether your website provides good alternatives for graphical content, you can disable images in your browser. This is how it is done in Firefox und this is how it works in Google Chrome. This is what the boell.de-homepage looks on Nov 3, 2016 with images:

... and this is what it looks without images:

Instead of logos, the image opener and the teaser images you can see alternate text. It can be synthesized and read by a narrator or made tanglible by Braille for blind or visually impaired people.

Image annotations

Please fill in all information required to "read" an image in the upload image form:

Thus:

  1. the image file should be "speaking", which means it should roughly describe the image content (here: flooding_sindhprovince.png) Avoid file names such as "image1.jpg" etc. (the same is applicable for downloadable files. So please use "publication-green-values.pdf" instead of "version2_final.pdf")
  2. the alternate text should be a short description of the image content. Here: "An area equivalent to the size of England has been flooded ...". The alternate text will be read instead of the image or be represented in Braille. If the images contain text, please write this text into the resp. field. For symbols and logos, such as "print version" write "symbol of a printer".
  3. the meaning of an image can be described in its context ("... as shown in the graphic, ...") or in the caption. However, as the caption often provides additional information or comments about what is on the image, it might not be suitable). It is important, that readers can directly assign the description of the image to the image itself. Here: "Aerial view of flooding in Sukkur, Sindh Province"
  4. Images without any informational value,  hence purely uploaded for illustratration purposes, must be avoided. If used, the alternate text field has to be left empty. If so, the images will be considered simple layout graphics and will be passed over by assistive software.
  5. the image title should roughly name the image topic. When using CC-licensed images the author's original title is to be used.
    The image title will be displayed in the browser as tooltip, which means when hoovering over the image with the mouse, it will be shown and also read by narrators in assistive software provided that tooltips have not been disabled. Note that mobile devices don't show tooltips.
  6. flickering, blinking and moving content should be avoided. It can affect mental concentration and trigger seizures in users with photosensitive epilepsy.

By the way, the first four issues don't only contribute to better accessibility but will also be "rewarded" by search engines which index this information and can thus show better search results.

For your information: It is not yet possible to enter all information necessary for the accessibility of images in our CMS. As a result, additional images in the body of articles cannot be sufficiently annotated. This is going to be fixed asap.

More non-text content: Links

Links should be "speaking" so that readers using a narrator can correctly navigate and know whereto the link will take them.

At the moment, the "Read more" links in teasers don't meet this expectation (it would be better if the system provided a Title-attribute here which should contain the article title infront: For instance, instead of a simple "read-more" this would be "Marrakech: modest progress on loss and damage, but more on the horizon - read more"  (whereas "Marrakech: modest progress on loss and damage, but more on the horizon" is the title of the article ). Unfortunately editors cannot influence the "Read more" link.

However, you can contribute to a better accessibility in terms of text links. Therefor, all links must have a meaningful connection in the text. If you link to text, the terms in the linktext should stand "on their own". To achieve that, it is important to link the correct linktext:

For instance: In a phrase "You can find our interview with Barbara Unmüßig about the climate negotionations in the dossier xyz" it is better, to link the words "interview with Barbara Unmüßig about the climate negotionations" than "in the dossier xyz", as this linktext is more meaningful and unique. Linktext such as "here", "more" etc. is to be avoided, in particular when they appear more than once on a page. Please also avoid using the URL as linktext as it is often not meaningful and doesn't state, whereto the link will take the reader.

Another way to contribute to a good "readability" of a link is to give it a  Title :

To do so, enter the link address and click on the ADVANCED-tab. Fill in the ADVISORY TITLE field.

Moreover, it is useful to announce when the reader would leave a site by clicking on a link, for instance write: "Information about TTIP can be found on the Website of the Green Party [external Link]"

When you link to a file, please name the file format in brackets after the link, for instance Information about linking (pdf). Of course, this is also applicable for all other non-html file formats (docx, xlsx etc.)

Timebased media: alternatives for audio, video and interactive applications

If audio or video files convey content which is not described in the text of the article (that means if multimedia supplements or replaces an article) you should check within the limits of your budget as well as time and personnel resources whether:

  • you as an editor or a specialized service provider can add subtitles to your audio/video files. YouTube offers the possibility to  use automatic captioning or  to add subtitles & closed captions for quite some languages. The editorial team in Berlin almost always uses captions for their video files, and editors in the international offices are supposed to do that too. They produce a SRT-file out of the audio transcript and upload it on YouTube and synchronize it with the visual information in YouTube. Here is a How-to add subtitles & closed captions. Afterwards, you can easily upload everything on Facebook which doesn't offer this means. In addition to a better accessibility, subtitles may also be helpful for an audience speaking a different language.
  • for audio and video an audio description can be added. An audio description (also referred to as a video description, described video, or more precisely called a visual description), is an additional narration track intended primarily for blind and visually impaired consumers of visual media. It consists of a narrator talking through the presentation, describing what is happening on the screen or stage during the natural pauses in the audio, and sometimes during dialogue if deemed necessary. Audio descriptions are produced by specialized service providers, and in many cases impaired individuals do the final inspection and check whether everything is reasonable and clear.
  • you can commission a sign language interpreter for your events and video recordings.
  • you can add a window for sign language in image or explanatory videos.
Interactive applications

When planning interactive applications, such as "Discover boell", you are supposed to think in advance of accessibility and operability. When using  proprietary software tools, such as Flash (and Prezi which is based on Flash) you should check, whether accessibility is fully ensurable.

Separation of structure and content

These requirements are already met by the concept and technical implementation of our websites. Therefor:

  • it is ensured, that content can be perceived in different ways. Thus assistive software can synthesize content into visual, auditive or tactile representations. E. g. narrators automatically transfer visual text into audible information.
  • the structure of the website was designed in a way, that its elements  (such as menus, sidebars, main windows) are laid out in a manner that they can be logically interpreted by software. This way, assistive systems "know" which element represents a menu, or a link or simple text. This issue is also relevant for the representation on mobile devices.
Headings, lists and enumerations

However, there are some questions to be observed in terms of the separation of structure and content:

Assistive Software, such as a narrator cannot interpret text which has simply been made bold as a heading. To explain the structure of a page to visually impaired or blind people, it is necessary to use existing HTML-markups to explain the structure of a text with its headings, indents or quotations.

Concerning headings, a hierarchy has to be created: <h1> for first level headings, <h2> for second level headings, <h3> ...

On the boell-websites, the title of landingpages will be automatically marked <h1>, the main heading of an article is automatically <h2>. Please provide the correct markup for subheadings as part of the body text, by formatting them as "Heading". Until recenty, we have used <h6> for these subheadings, however, it is more logical and meaningful for search engines to use <h3> from now on:

Enumerations and indents
  • choose the correct formatting from the text editor for lists or enumerations, so that assistive software can correctly interpret them. Don't use manual formatting, such as numbers or special characters entered on the keyboard.
  • Use more HTML-conform formatting by picking the respective icon in your text editor, such as the little arrow to move text to the right or left instead of manual indents.
Footnotes

Publications for print often have footnotes. Actually, footnotes are not necessary for websites, as there is no rigid pagination and longer texts can be set altogether onto one page while links can directly point to sources, annotations or further information. In addition you can provide a quick info by using the tooltip.

For a sufficient accessibility you should never just copy & paste footnoted text from Word but provide either external or internal (anchor) links on the same page.

Tables

The following explanations are applicable for tables which you deliver in PDF- or Word-documents, because as an editor you don't have sufficient permission to create a table in Drupal's editor window. That's why you will probably provide a table as a graphic. Note that here in particular, it is highliy important to annotate this graphic appropriately and to additionally explain the meaning of the table in the text.

Avoid tables if they only serve for a purely illustrational representation of data but don't have a logical and coherent structure. This is the case when using a table to draw a frame around a text or with tables without visible lines separating rows and columns.:

But even if the table is a "real" table with a logical assignment of data and metadata (for instance row and column titles), complex tables can be a real challenge for blind or visually impaired people and also for assistive software, because standards are sometimes interpreted differently and depending on browsers. That's why it is indispensible to explain the message of the data in the article text.

Contrast und customizable presentation

Information, which is coded by colour only, can get lost or be hardly accessible when certain colours are combined or weakly contrasted. You can check this by changing the contrast settings for your screen step by step. Doing this, you will discover, how grey spots become white and that some elements will entirely disappear. Our help website looks like this when using the highest contrast in Windows (called inversion):

By the help of free software you can detect by yourself, how colours interact when viewed by visually impaired individuals. The next image shows, how individuals with different visual impairments would see our site. The representations were simulated by the help of the free Colour Contrast Analyser (also available in English) :

 

 

Another application which can carry out such tests online is Vischeck (English only). Vischeck is in particular suitable for graphic designers, because they can test the effect of certain colour combinations by entering the colour codes, thus simulation different visual impairments. Images, which convey information exclusively by colour (as for instance a chart with bars in different colours and a chart caption using colours without text) should be entirely avoided. If this is impossible they must be explained by well contrasted axes and bar labels.

Large skaling

Since 2009, the Heinrich-Böll-Stiftung has increased its font size and line-sizing with every relaunch, because an increasing number of people are long sighted. Most people need glasses from the age of 45 on. Many visually dispaired individuals depend on large skaling. Operating systems provide this function by default. So most applications can be large scaled by typing CTRL + "+". On mobile devices content can be zoomed in with one's fingers. In addition, operating systems provide a magnifier which enlarges even to a higher degree. Despite of the existence of these mighty tools, it is recommended to think of font sizes, especially when providing downloadable files. Font sizes should never be smaller than 12. Increased line sizes improve the readability. Don't neglect these two points in favour of saving paper for printouts.

Never use full alignment (justified text). In addition, most font sets don't have special italic fonts. As a result, italic text will be just skewed and hardly readable. That is why you should forego italic.


3. Understandability

Cognitively impaired individuals but also people with congenital hearing impairment and unexperienced readers often have great difficulty to understand complex content. However, understanding is not only be a problem for individuals with impairments. Whether a person can or cannot understand a text, also depends on his/her interests and prior knowledge. As people have different prerequisites, text cannot be made equally understandable for everybody.

Nevertheless, you can help that as many readers as possible can and want to read your articles. It is these four aspects described in the so called  Hamburg Concept of Understandability (German only) which make a text welll readable:

  1. Simplicity
  2. Structure/Order
  3. Brevity/Conciseness
  4. Stimulating Additives

This is not the place to describe all this in detail, but it is also to be mentioned that a gender-sensitive language not only contributes to reduced discrimination but also to more clearness and understandability.

No language mix

For cognitively impaired individuals as well as for unexperienced readers and when someone is searching for specific information in a certain language, a mix of languages can be a high barrier. Even narrators often cannot interpret which language is to be used. Moreover, linguistic confusion will be punished by search engines.

That's why articles in different languages have to be assigned to their respective language version or be displayed on extra landingpages showing only articles in the same language. To do so, you can create a banner "Articles in English/German/Russian etc." and place it in the sidebar. The banner link should then point to the specific landingpage. After the rebrush (at the beginning of 2017), there will also be a language switcher on top of each landingpage which enables switching to another language, even if the site doesn't have a full (technical) version of this language.

Plain Language

Since 2014, there has been a page in plain language with images on boell.de (German only). It addresses individuals with learning difficulties and people who know little German. It is neither reasonable nor possible to provide all content in plain language, but you should think of having such a page with basic information about your work. In Germany, there is an Agentur für Leichte Sprache (Agency for plain language) which will support you. Probably there are similar service providers in your country.