Create advertisement layout
Job postings can be structured using HTML layouts, and the job information to be displayed is extracted using variables. A job posting layout is defined in an HTML file which is then uploaded to the solution. Any files (e.g. images, documents etc.) that are used in the HTML layout must also be uploaded with the corresponding layout. The layout then needs to be assigned to a branch office.
Please note that when using a newly created job posting layout, there may be a delay of up to 10 minutes before the new job posting layout can be displayed correctly.
Important
We use a content security policy, which can lead to issue with certain JavaScript used in the publication layout, e.g. onclick, onmouseover, onmouseout, etc. To avoid these issues, a script in the header of the HTML-page needs to be added.
To avoid such problems, you should ensure that such functions are set up in a CSP-compliant manner. You can see a suitable example script here:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Print this job</title>
</head>
<body>
<!-- First define the HTML element, e.g. the Apply-Button -->
<button class="button" type="button" id="print-button">Print</button>
<!-- After that specify what JavaScript needs to happen on that button (best practice: place the script tag at the end of the document, right before the closing body-tag) -->
<script type="text/javascript">
$(document).ready(function() {
document.getElementById('print-button').addEventListener('click', function() {window.print();});
});
</script>
</body>
</html>
Example job posting
An example of a possible job posting layout in HTML format is provided here. The template also includes examples of variables that you can use in the HTML file. Further down, you will find an example job posting created in accordance with accessibility guidelines.
Integrating attachments
Attachments are also integrated into the job posting layout using variables. Within the HTML template, the following notation (variables) can be used as a placeholder for an attachment:
- [document.attachement1] for attachment 1
- [document.attachement2] for attachment 2
...
- [document.attachement5] for attachment 5
As mentioned earlier, the corresponding files must be uploaded to the solution.
Example:
The following example shows how an image file can be integrated into a layout using variables. The URL for attachment 1 is inserted into the HTML “img” tag.
<img src='[document.attachement1]'>
The same applies for any links you might want to add.
Listing items in HTML lists
The following HTML code may be useful if you want to create an ordered HTML list using bullet points (●). For this to work, “-” characters must already be used to mark list items, since the code replaces them with bullet points (●).
In order for the code below to work, the “tick-points” class should be defined in the HTML code’s header. [Inserat.Text1] is part of the job posting text.
[TempTextLines = Inserat.Text1 | replace('<br />', '<replaceASAP><br />')]
[TextLines = TempTextLines.split('<br />')]
[FOREACH TextLine IN TextLines]
[IF TextLine.match('^-')]
<ul class="trick_points"><li class="trick_points">
[TextLine | remove('^-') | replace('<replaceASAP>', '')]
</li></ul>
[ELSE]
[TextLine | replace('<replaceASAP>', '<br />')]
[END]
[END]
Example:
- The job posting text for the list:
- - Item 1
- - Item 2
- - Item 1
- will appear as
- ● Item 1
- ● Item 2
- ● Item 1
- when the HTML code is used.
Integrating Google Maps
You can use Google Maps to easily integrate a map into a job posting. Using the map, applicants can quickly get a sense of where they would potentially be working and how to get there. The map shows routes, distances and estimated travel times for different modes of transportation (car, public transport, etc.).
If necessary, this feature can be configured so that the full set of route-planning features are displayed.
Technical information about integrating Google Maps
Tips & tricks
- If you want search engines (Google, Bing etc.) to index your jobs, they must be able to find them. Therefore, add appropriate “meta” tags in the Head section of the job posting. These meta tags are included in the example above, and can be adapted to your needs.
Tips and examples for accessible job postings
The following notes and tips will help you to create accessible job postings (Applicant Management) or publication and print designs (Employee Management).
Use the new example template saved in the ZIP file for an accessible job posting layout: Layout (example), which is referred to in the discussion below (In the job posting). You can compare this template with the “non-accessible” old version (also included in the ZIP file).
- Alt text for UI elements
GUI elements should have alternative text, or “alt text”, associated with them. Linked graphics, menus and logos must use the link target as the alt text. The alt text for buttons must name the action associated with the button. Alt text is mainly important for visually impaired users, and for users who turn off the loading of graphics for faster access. In these cases, the alt text is displayed instead of the graphical element.
- In the example job posting (example template), the UI elements in the carousel, and the social media symbols are the ones that most require alt text:
- Carousel: The “prev” and “next” texts had no alt text: “alt” -> Attribute was added with a helpful description
- Social media symbols: No alternative texts are provided
- Alt text for graphics and objects
Informative graphics and images should have associated alt texts. The alt text replaces the image and should take over its “job”.
- In the job posting:
- The pictures under _YourTeam_ have no alt text (“alt” attribute)
- Adequate text contrast
All texts on the page should have adequate light/dark contrast. They should also be visible for users with impaired color vision. For pages that use a style switcher to offer a version with adequate contrast, it must also be verified whether the default style meets the minimum requirements for text contrast.
- In the job posting:
- Pay attention to the contrast ratio between the background color and the font color, so that the text is also legible for people with reduced vision or on black and white monitors.
- The tool for measuring contrast ratios can be downloaded here: https://github.com/ThePacielloGroup/CCA-Win/releases/
- Usable without a mouse
The web page should be usable without a mouse and exclusively with the keyboard, or without a keyboard and exclusively with the mouse. Other special devices behave similarly to a mouse or keyboard. Visually impaired users and users with motor impairments rely on these usability options.
- In the job posting:
- “Video” and “Carousel” should be usable without a mouse. To do this, the control for the YouTube video must be activated and the tab indexes must be set. The tab indexes must be set correctly for the carousel.
- Meaningful link texts
The target or purpose of the link should be apparent from the link text. For visually impaired users who tab from link to link, the link texts are read aloud to the user. Using meaningful link texts makes it easier for these users to decide if they want to follow a certain link. If the link text itself is not clearly meaningful in this sense, it should at least be easy for users of screen readers to determine the immediate context.
- In the job posting:
- The “prev” and “next” links in the carousel must be language-dependent. In a job posting in German, for example, “prev” and “next” must be translated correctly.
- Current focus position is clear
The keyboard focus must be highlighted at least as clearly as the mouse focus.
- In the job posting:
- Example for links:
a:hover, a:focus {
color: #a62662;
}