Web Accessibility

Briefly, the EU directive on web accessibility deals with making public websites and apps accessible to people with various disabilities. For example, the content of websites must be compatible with screen readers. Since Aalborg University is a public educational institution, the EU Directive and the Danish Web Accessibility Act applies to all apps and websites published by the university. 

Commencement  

The Danish Act on web accessibility entered into force 23 September 2018  

  • Websites created after 23 September 2018 must comply with the Web Accessibility Act of 23 September 2019 
  • Websites created before September 2018, and to which no significant changes have been made, must comply with the Web Accessibility Act of 23 September 2020
  • Apps must comply with the Web Accessibility Act of 23 September 2021 

Intranet and extranet

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 role of web editors

If you are the web editor of one or more AAU websites, you are responsible for the website content and for its compliance with web accessibility requirements. If you are building a website, or if you are responsible for an existing site, it is essential that you review the site according to our guidelines and rectify any accessibility issues identified. In addition, the changes you make have the additional benefit of improving user friendliness and search engine optimisation.

To make compliance with the web accessibility requirements easy and straightforward for AAU’s web editors, we have grouped the web accessibility requirements into six areas. If you have any questions, please contact support@its.aau.dk Enter ‘InfoGlue web accessibility’ in the Subject field, and we will respond to your email as soon as possible.

  • +

    Layout

    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.

  • +

    Navigation

    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.

  • +

    Text

    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.

  • +

    Photos

    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.

  • +

    Videos and audio

    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.

  • +

    Documents

    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. 

  • +

    Social media

    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

    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.

  • +

    Accessibility statement

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