Web Accessibility

Main colour vs. hover colour

In order to improve web accessibility, be sure to use a ‘hover colour’ with a contrast ratio of at least 4:5 in relation to the ‘main colour’ used. You should also be sure to select a high contrast between the main colour and the colour of the text in the coloured boxes. You can use the tool http://contrast-finder.tanaguru.com to make sure that your colour selection meets requirements. In this system, ‘foreground colour’ = ‘hover colour’ and ‘background colour’ = ‘main colour’.

Note: the AAU standard blue colour and its associated hover colour follow the required colour contrast ratio.

Main colour vs. white boxes

When selecting your 'main colour', you should also be aware of the colour contrast between 'main colour' and white (#FFFFFF). Since the main colour not only adds colour to boxes but also to headings in white boxes, the colour contrast ratio should be set to 4.5:1.

Please refer to the guide on available main and hover colour combinations that comply with the required colour contrast ratio.

Background image vs. white and coloured boxes, and white logo and headline component

The colour contrast ratio of the background image should be at least 4:5 in relation to the website’s ‘main colour’, i.e. the colour of the boxes, and in relation to the white logo and headline component at the top of the page. You can use the tool http://contrast-finder.tanaguru.com to make sure that your colour selection meets requirements.

For images that contain motifs, we recommend that you set the colour contrast ratio according to the background image colour that comes closest to the colour of the website’s coloured boxes, and the logo and white headline component. 

Text in pictures            

If you insert text on images, the colour contrast ratio of the text colour and the background colour of the image or visual component must be set to 4:5. In addition, you should also pay attention to mouse over text, etc. You can find more information under the heading ‘images’.

Tables

Tables are not compatible with screen readers; we therefore do not recommend that you use tables on websites. If you need to add content in tables, we recommend that you select a different layout for such content.

Menu, buttons and links

Be consistent in how users may navigate across your website. The navigation should be recognisable to your users.

Components

Be consistent in how you use different components across your website. How you use components must be recognisable to your users across your website.

Buttons/icons

You must add text to all buttons, and if you insert buttons and icons, such as images, etc., their size should be at least 44*44 pixels, unless their text is published elsewhere on the website.

Headings

Be sure to use meaningful headings, such as  ‘Cooperation with the Department of Civil Engineering’ instead of merely ‘Cooperation’ or ‘Cooperation with the department’. Avoid generic headings such as "Further information" or "Useful information" - instead create headings that explain the information available to users, such as ‘How to apply for an project-oriented course abroad’.

Headings in the body of the article

In general, it makes sense to divide the body of the article into relevant and meaningful headings and subheadings. Thus, the content of the article becomes more clear, and the user can navigate your site with ease.

In terms of both search engine optimization and web accessibility, it is essential to structure your headings so they form a logical hierarchy; this is a requirement of web accessibility and an improvement in search engine optimization. Therefore in CMS Infoglue, do not use H2 followed by H4, instead follow the logical hierarchy of headings (H2, H3, etc.).

Page headline

Unlike article headings, the page headline must contain all content available on the website. In the site structure, the headline component is placed above all other website components and is designed to provide users with an overview of the content available on the website. 

Headline vs. article headings 

We recommend that you only use one H1 heading per website page. For all website articles, the headline component and the title field are both H1 headings; therefore, if your site has a headline component, be sure not to use the article’s title field, unless the article component style is compact which automatically locks the heading as an H2-heading. If the component style is medium or full, be sure to use an H2-heading in the body of the article. See the illustrations below::

You should also avoid ‘double headings’ on your websites - the heading of an article should not be identical to the headline of the website.

Abbreviations

When introducing abbreviations, be sure to include a description, e.g. the Faculty of Humanities (HUM).

Link text

Insert links on your website where relevant. Good link texts allow users to get an overview of your website and improve website navigation.

Link names

It’s essential that you provide clear and descriptive names for your links, this makes it easier for both users and search engines to assess what they’ll find when following your link. Link names such as ‘click here’, ‘download’, ‘the department’ or ‘course schedule’ are not clear or descriptive link names. Instead use link names such as ‘Department of Civil Engineering’ or ‘course schedule for informatics 6th semester autumn 2013’.

Buttons

In addition, it is also essential to add link text to buttons, such as small buttons in articles.

Buttons and icons

If you insert buttons and icons, such as images, etc., their size should be at least 44*44 pixels, unless their text is published elsewhere on the website.

Naming, responsive images and mouseover

You should always provide your images with clear and descriptive names  

Images should be responsive, i.e. they should be able to adapt to different screen sizes.
Full text images uploaded before 15/08/2019 are not automatically responsive, for images uploaded before this date, remove 'style' in image properties. Moreover, you should also add alternative text and an advisory title to all images that can be read by screen readers. It is easiest to fix all three things at the same time (steps 10, 11 and 12 below):

Please note: You only need to add an advisory title to images that are essential for readers understanding the text or area to which it is related. Images that only serve a decorative purpose do not need advisory titles describing the contents of the images.

1. Select the tab ‘Content’
2. Find the article in which you want to insert an image
3. Place the cursor on the point in your text where you want the image to be placed
4. In the toolbar, click the icon ‘image’ as shown below:  
   
5. A new window, ‘Image Properties’, now opens. Click the ‘Browse Server’ button
6. A new window, ‘Choose file to use’, now opens. Click the ‘Upload new file’ button located in the bottom of the window
7. A new window, ‘Upload file’, now opens. Click ‘Select file / browse’
8. Find and select an image on your computer. Click ‘Save and exit’
9. Click the image and select ‘Use marked’
10. In the 'Alternative Text' field, add a descriptive title to your image. It’s important that this title clearly describes what you seen in the picture:
    
11. In the ‘Advisory Title’ field (in the ‘Advanced’ tab), insert the same descriptive title. The ‘Advisory Title’ becomes visible when you hover a mouse over the image.
    
12. Remove all the text in the ‘Style’ field. This will cause the image format to adjust to the browser window.*
13. Click ‘OK’. The image is now inserted in your text
14. Click ‘Save’ to save the inserted image and remember to publish the changes you have made to your article.

Text in pictures

In general, you should avoid adding text to images; however, if you need to do so, the above guidelines are even more important. 

Featured image

Remember to add alternative text and advisory titles to ‘featured images’ (steps 8, 10 and 11 below).

1. Select the tab ‘Content’
2. Click on the article in which you want to insert a featured image
3. Select ‘Upload file’ in the horizontal menu at the top of the page as shown in the screenshot below.
   
4. A new window, ‘Upload file’, now opens. Click ‘Select File’ to download an image from your computer
5. In the drop-down menu under ‘state a key for this attachment if needed’, select ‘featured image’:
   
6. Click ‘Save and exit’ and click ‘Save’.
7. Above the field ‘Title’, you’ll find the tab ‘FeaturedImage’ as shown in the image below. Click this tab
   
8. You will now see three fields. In the field ‘Featured Image URL’, you can insert any URL (please note that the URL must include ‘http://www.’). When you click the featured image in preview mode, you will be redirected to the specified URL
9. The field ‘FeaturedImageAlt’ is an alternative text for your featured image
   
10. The field ‘AdvisoryTitle’ is the text that appears when you hover a mouse over the image
11. Remember to click ‘Save’ and publish your changes
12. The image is now inserted into the article and is available under ‘Files’. If you want to see what the image looks like on your website, you can locate your article under the tab ‘Structure’
     

Slideshow / GIF

Users must be able to stop a slideshow. Therefore, if you have inserted an animated GIF on your website, you need to replace it since animated GIFs do not comply with web accessibility requirements. For now, we do not have an alternative to animated GIFs.

Video and audio published before 23 September 2020 do not need to comply with web accessibility requirements.

Live video and audio do not need to comply with web accessibility requirements. However, if these are still available on a website after the live streaming and after 23 September 2020, they must comply with web accessibility requirements.

Subtitles

Live videos do not need subtitling, but your video description must state that the video is a live video. If you upload a live video and make it accessible on your website after the live streaming, subtitles must be added to the video.

Pre-recorded videos must be subtitled. If the video includes visual elements essential to the interpretation of the video, these must be included in the subtitles.  

If your video is set to start automatically, users must be able to stop the video within three seconds.

Audio

Users must be able to find transcripts of the audio files available on your website.

All document elements, such as headings, photos, etc. must be tagged, thus, adding documents to your website, such as PDF and Word documents, is somewhat time-consuming in terms of web accessibility. This guideline affects both technical and administrative staff (TAP) and academic staff (VIP). Full compliance with legislation requires the use of a number of license-based tools. However, the number of licences to be issued to accommodate this is considered a disproportionate burden (cf.  Act No. 692, section 3(2) (in Danish)).  

All AAU staff members have access to the Adobe package that includes Adobe Acrobat Pro DC. In Acrobat Pro DC you’ll find an accessibility feature that enables you to check your PDF and identify and fix the most common accessibility problems. This feature does not cover all the requirements of the EU directive. For now, however, this is the best tool available at AAU; we therefore still recommend that you use this to check your most important documents. You’ll find more information on how to use Adobe’s accessibility checker via this link: https://helpx.adobe.com/uk/acrobat/using/create-verify-pdf-accessibility.html 

In addition, we recommend that you not upload PDF files to websites and instead copy and paste text from documents directly on the website. We are aware, that this is not an option for research publications or lengthy graphics-intensive reports etc. 

For now, whether or not the use of social media such as Instagram, Youtube, etc. should comply with web accessibility requirements is a grey area, since AAU does not own social media platforms but merely acts as the sender of content in groups, pages or via profiles.

We have contacted the Danish Agency for Digitisation and are waiting for them to look into whether our use of social media must comply with the Web Accessibility Act. If you are interested in being informed on this, please send an email to support@its.aau.dk and type ‘Infoglue web accessibility’ in the subject field.

Intranet and extranet content published before 23 September 2019 is only covered by the provisions of the Act where the websites have undergone a substantial revision.

A substantial revision may be defined as an existing website undergoing redevelopment or significant changes to design, interaction, functionality or purpose.

The EU directive and the Danish Web Accessibility Act require all websites to publish an accessibility statement. This must be made available on [website name].aau.dk/was, and must specify which legal requirements the website does not meet. 

An accessibility statement must be prepared using a tool developed by the Danish Agency for Digitisation; thus, the ITS UX team will prepare accessibility statements for all websites published in CMS Infoglue. .