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

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

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)

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.

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:

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:

Bad examples, please don't do this:

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 that have sufficient colour contrasts.

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, graphs and similar 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".

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

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

How to check the accessibility of your PDF in Adobe Acrobat Pro: 

  1. In Adobe Acrobat Pro: Select "Tools" and you will find an icon called Accessibility.
  2. Select ”Add” and then ”Open”.
  3. Select your PDF.
  4. 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.

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

Tables

Avoid tables, but if you must use a table, make sure it is set up correctly with table headings and column headings.

Videos

Pre-recorded time-dependent media published before 23 September 2020 are exempt from accessibility requirements.

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.


Should videos published after live broadcasts be subtitled?

Yes, all material published after a live broadcast is counted as a recording and is thus not exempt from the subtitling requirements. The two-week rule is for material that will be subtitled. It is thus no exception to be able to publish live broadcasts without text for a two-week period.


Subtitles and captions for videos published on YouTube

For videos that are published on YouTube, you can use tools for automatic subtitling of the film, such as textamig.se (YouTube does not yet have automatic captions for Swedish).


The quality of the captions from textamig.se can vary due to sound quality, dialects and difficult words so you need to do a manual quality assurance / review of the automatic subtitles afterwards. If it is considered burdensome to ensure the quality of the subtitling of the video (if the video is several hours long), exceptions can be invoked for unreasonably burdensome adaptation according to section 12 of the DOS Act, but you still need to ensure that the video has captions using automatic captions.


Caption for videos on YouTube

  1. Upload the file to YouTube and copy the address to the movie
  2. Copy the link from YouTube and paste it at www.textamig.se and receive the text file in an email (will be an .srt-file) after a few minutes.
  3. Quality assurance: Open the textfile in Anteckningar/Notepad to make adjustments to words that have been wrongfully transcribed. (Word is not recommended because formatting errors when saving the file from .docx).
  4. Open the textfile in Anteckningar/Notepad to make adjustments to words that have been wrongfully transcribed. (Word is not recommended because formatting errors when saving the file from .docx). Then save the file as .txt -> .srt again.
  5. Then upload the captions file to your video on YouTube and make sure that the captions show as intended. Guide for uploading captions on YouTube:


Captions for videos on JU Play/Kaltura

  1. Copy the ID of your video from the link in JU Play (copy the text after the last /. For example: play.ju.se/media/YourVideo/0_p10720oa8). Make sure that your video is not set to private.
  2. Paste your ID after entry_id/ in the following link (textamig.se can only interpret this link) https://api.kaltura.nordu.net/index.php/extwidget/preview/partner_id/324/uiconf_id/23450107/entry_id/ (your link should look like this with the correct ID: https://api.kaltura.nordu.net/index.php/extwidget/preview/partner_id/324/uiconf_id/23450107/entry_id/0_ry6fn0fr)
  3. Copy the new link and paste it at www.textamig.se and receive the text file in an email (will be an .srt-file) after a few minutes.
  4. Open the textfile in Anteckningar/Notepad to make adjustments to words that have been wrongfully transcribed. (Word is not recommended because formatting errors when saving the file from .docx). Then save the file as .txt -> .srt again.
  5. Upload the file via MyMedia at JU Play.

Instructions

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.

Examples:

  • 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 in the 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 reffering 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

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