Information and services should be accessible to everyone regardless of disabilities, this also applies to websites.
In addition to legal requirements such as the EU Web directive, there are many benefits of having a website that is tailored to everyone.
Checklist - Accessibility for editors
Structure and content
Present the content in a meaningful order to everyone
Design the content in a way that preserves the intended meaning for all users.
Users will receive the information in the different layouts depending on their system of choice. For example, a visual presentation can use columns and grids to distribute the content into two dimensions while a screen reader presents the content sequentially.
Preview the layout in responsive mode (mobile phones)
Responsive design, which adjusts presentation based on screen size, can affect the layout. Therefore, always check the page in responsive mode to make sure that the layout is fine. Use SiteVision's preview mode "Responsive Mode" to see what the page looks like on mobile.
Titles and headlines
Use the correct heading by formatting
If we format the headings correctly, the information will be presented correctly regardless of the users accessibility tools. Also, search engines can properly read the content of the page. Always format the heading when you want to create new paragraphs.
- Use heading 1 for the main heading on the page.
- Use heading 2 for subheadings to heading level 1.
- Use heading 3 for subheadings to heading level 2, etc.
Examples of headings:
Animals (Heading 2)
Dog (heading 3)
Collie (heading 4)
Cat (heading 3)
Write understandable headings
Clear descriptions are good for all users, but especially for people who have difficulties reading and impaired short-term memory because it gives them an opportunity to predict what each part of the website and page contain. For people who navigate with the keyboard and / or use screen readers, it provides an opportunity to jump to different parts of the content.
- Use keywords from the text.
- Write the most important words first.
- Use active language, preferably verbs.
- Do not make headings longer than 5-10 words.
If you often produce similar content on several different pages, such as our programme pages, it is then preferable to be consistent and reuse the same structure across all pages.
Avoid bold and italic formatting
Bold and italic should not be used for headings and texts. Bold and italic stylings are difficult to read for most visitors. In a few cases bold is still appropriate, but we have then made special formatting option that should be used.
Write clear link texts that tell you were the link leads. This makes the user understand what the link leads to and guides them to click on the right link.
- Avoid expressions such as ”click here…”, "read more here", "follow the link...", "go to..." eller "Read more about...". The user knows that links are clickable, you do not need to tell them that.
- Please link the whole sentence to make the link area / hit area as large as possible.
- Design the link clearly so that it can be distinguished from texts. l
- Avoid adding links in the body text.
- Formulate the link text so that it's easy to understand where it leads. Consider the link text as a heading to the linked page. Feel free to use the title on the landing page.
- Formulera the link text so that the visitor sees what is going to happen when clicking, such as that you get a new website or that an application opens to view a file.
- Delete words that do not add anything.
- Write your own link heading, or add a special link arrow when we add links between paragraphs.
Internal links going to other pages in our web environment:
Internal links are used when you link to another page on a website in JU's web environment. This is if you link to another page on ju.se, the student website, the library's website, the center websites or the intranet. Use internal link in SiteVision and select the page you want to link to. Internal links should not be opened in a new window.
Examples of text/headings for internal links:
External links to other websites:
External link is used when you link to another website. Use external link in SiteVision and paste the address of the website you want to link to. External links will open in a new window.
Examples of text/headings for external links:
- Important dates for application on universityadmissions.se
- National office for Erasmus+ on Swedish Council for Higher Educations's website
- Livestream for event X on youtube.com
Links to documents
It is usually best for the users if you can publish information directly as text on a web page instead of enclosing it in a document/pdf. Sometimes, however, it may be necessary to publish documents (such as long reports) or documents designed to be printed (checklists). See the Files / PDFs section of the checklist for more guidelines about publishing documents on the web.
- Add the documents format: pdf, docx or similar. This makes it clear that the link opens a document.
- The size of the file should be stated in the link text. Visitors can easily estimate how long it will take to download the file.
- Links to files and documents should be opened in a new browser tab.
Examples of links to document:
Links to email addresses
Please choose the module called Contact information to publish information to a contact person, rather than writing the email as text on the page. If you still need to add an email address in another way, write the whole address and link it by using "Email address" as a link option in SiteVision.
Examples of links to email addresses:
- To register, please send an email to firstname.lastname@example.org.
Bad examples, please don't do this:
In general about images
As a rule, an image should add something. If you have images on a page that do not add to the content, they should be deleted from the page.
Choose images and visual components with sufficient colour contrast
Choose images and visual components that have sufficient colour contrasts.
Enter descriptive text for images (alt texts)
When pointing out the image from SiteVision, enter a descriptive text for the image via the "Specify custom" field. Write the text in Swedish on Swedish pages and in English on English pages.
- End the description with a full stop.
- For illustrations, write the word illustration last.
- Each image in a slide show must have its own image description text.
- Name colours if relevant to the reader.
The image description tells us what the image shows us. Make the text as meaningful as possible and describe the event.
Bescribe what we see in the image:
- A woman talking to students.
- A group of student receive an award and there's a big crowd.
- A group of people singing on campus.
Or even better, describe the event in the image:
- President Agneta Marell talking to students on campus.
- The winner of the Entrepreneurship challenge are receiving the prize.
- JU's Academic Choir are singing songs to celebrate spring on campus.
Words that should not be in the description (alt text):
- The name of the photographer.
- The title of the web page.
- Keywords or concepts for the subject which are not visible in the image.
- The word photo or image/picture.
Organisational charts and graphs
Organisational charts, graphs and similiar images might be difficult to describe in text on the web page. When publishing these, also add an accessible pdf with the same information as a complement. In the image description, write that a pdf is available on the page.
Nej, ett foto är aldrig en dekorationsbild, men om det finns en bra bildtext kan man markera den som dekoration ändå. Bildtext skrivs i fältet "Image caption".
Text on images
Images should not contain text. If there's text on an image the text needs to be added to the image description or you have to add the image as an accessible pdf (add information about it to the image description). Text on an image can sometimes classify as an icon and is then made an exception.
Text on image is problematic for several reasons
- The text cannot be read by reading tools for e.g. blind or dyslexic.
- The text does not become searchable, neither in our own search function nor through search engines.
- If the colours are incorrect, colour blind people cannot read the text.
- If a sighted but visually impaired person enlarges the page, the text may become unreadable as it becomes blurred / pixelated.
- Insufficient contrast between text and background can make the text difficult to read, especially for people with visually impairment.
Files and PDF's
In general about files/PDFs
The text in a PDF must be readable through reading tools (there are several models) or Braille display. Image-scanned texts are prohibited!
- Bilder ska ha ett textalternativ.
- En längre text ska ha bokmärken, det vill säga att rubriker ska vara taggade som rubriker.
- Kontraster ska vara goda
- Säkerställ tydliga och klickbara länkar
- Säkerställ en logisk innehållsstruktur och formaterade rubriker
- Images should have a text option.
- A longer text should have bookmarks, ie headings should be tagged as headings.
- Colour contrast should be sufficient
- Ensure clear and clickable links
- Ensure a logical content structure and formatted headings
Use Acrobat Pro to make accessible PDFs
- Adobes guide to make PDFs accessible. Scroll down to the section ”Check accessibility of PDFs (Acrobat Pro)”.
How to check the accessibility of your PDF in Adobe Acrobat Pro:
- In Adobe Acrobat Pro: Select "Tools" and you will find an icon called Accessability.
- Select ”Add” and then ”Open”.
- Select your PDF.
- Click "Full control” and ”Start control” in the pop-up window.
Make older document accessible
Documents published before 23 September 2018 are exempt from the accessibility requirements. Exceptions to this are older files that are needed to "carry out active administrative procedures", ie forms or necessary instructions. These need to be adapted for accessibility.
Primarily publish documents in html and create accessible PDFs
Publish documents, such as reports, in the standard format of the website (html). Other formats make it more difficult to access the information, as they often require additional software. If you still need to post a pdf, make sure to make it accessible.
- Primarily publish documents in the standard format html. Users can then access your information without using a specific computer platform, or a programme that costs money, such as Word.
- If you have documents in formats other than html, summarise them as text on the web page, so that users can rate the content without downloading it.
- Design documents so that they can be easily read on screen. Then you contribute to fewer users printing on paper.
- If you use pdfs, make sure they are created so that they are adapted for accessibility.
Do not use colour alone to convey information
- Feel free to use colours, but do not let colour differences be the only way to distinguish information, but supplement it with, for example, text, patterns or some other visual indication.
- Be especially careful with the colours green, red and brown. Many people with colour blindness have difficulty distinguishing them. Red usually indicates error messages and green usually indicates that everything went well (success).
In general about tables
Avoid tables, but if you must use a table, make sure it is set up correctly with table headings and column headings.
In general about videos
Pre-recorded time-dependent media published before 23 September 2020 are exempt from accessibility requirements.
Add subtitles to recorded media (video, audio, animations)
Recorded digital video should have subtitles (also called text descriptions) and for audio recordings (for example podcasts) it is recommended that you also publish a text version.
- Offer closed subtitles for digital video
- Informer the user that there is text
- Describe all sounds of significance (syntax video recordings)
- Offer a separate text version or description (also good for search engine optimisation)
The requirement is under investigation by the communications department.
Do not make instructions dependent on sensory characteristics
Instead of an instruction, it may sometimes be better to link directly to the page where the information is found. Instructions also need to work for both desktop and mobile. Feel free to use sensory features (colour, shape, etc.) for instructions as it can be an effective method of facilitating for users, including people with cognitive limitations, but remember to supplement the information so that everyone can understand it.
- On computer: Search using the the gray rectangular bar called "Enter keywords" in the top right corner.
- In mobil: Search by clicking the gray box with the white magnifying glass inthe top right corner.
Instructions in a web survey
Navigating a multi-page web survey often uses arrows to indicate that the user can navigate forward and backward in the survey:
If the instruction to the users is "Go to the next page by clicking on the green arrow with the text "Next page" in the lower right corner", both positioning, coloor and clear marking on the icon are used to guide the users forward in the survey.
References to right and left of the website
If refering to information on the right or left, it also needs to be supplemented with additional information. One way to do this could be to refer to the heading: "If you want to know more about the topic x, you will find links to specialisations in the list on the right under the heading Related."
However, be careful with references to the right or left as they often do not apply when the user is browsing a mobile phone. What is located to the right or left on desktop often ends up below or above in mobile.
References to above or below
In many languages, including Swedish, it is implied that "above" is a reference to content that has appeared earlier in a text, and "below" refers to content that comes after.
If it is unambiguous to which part of the page such a reference points, a reference such as "select one of the links below" or "as mentioned above" may well work according to the guideline.
Buttons and functions
Name functions consistently
- Consistent naming of things throughout the site makes it easier for all users to recognise navigation and reduces unnecessary cognitive strain.
- This applies to icons and elements with the same function (such as buttons).
- Icons probably have limited opportunities to influence as editors, but you can put the text on buttons. This also applies to forms.
- Common terms should determine how to print and reuse globally across the site.
The requirement is under investigation by the communications department.
Content updated 2020-08-11