Preparing for an SAP SuccessFactors Career Site Builder Implementation
Designing the Career Site
Completing the Initial Setup of the Recruiting System
Building the Career Site
Moving the Career Site to Production
Engaging Potential Candidates
Implementing Source Reporting
Succeeding as a Consultant

Providing Website Recommendations

Objective

After completing this lesson, you will be able to provide text and image recommendations for websites.

Recommendations for Headings

Headings include the following considerations:

  • Content on pages should be organized with headings.

  • Pages should be structured in a hierarchical manner, generally with one first degree heading (<h1>) being the most important (usually page titles or main content heading), then second degree headings (<h2>, usually major section headings), down to third degree headings (sub-sections of the <h2>), and so on.

First Level Heading

To populate the first-level heading, consider the following points:

  • First-level headings should contain the most important heading of the page, generally the document title, to convey what the page is about.

  • Career Site Builder adds a <h1> tag for each page automatically, from the Page Title, but it is typically not displayed. The site still meets accessibility guidelines.

  • The home page of a Career Site Builder site will take on the Page Title from SettingsSite ConfigurationSite Information, but it is not displayed on the page.

    Displays an example of First Level Headings Not Displaying on the Page.
  • For other page types, the tag is taken from the Page Title for that page, and is hidden by default.

  • On Category pages, however, the tag can be visible or hidden.

Empty Heading

To check for empty headings, consider the following points:

  • Screen reader and keyboard users often navigate by heading elements. An empty heading will present no information and may introduce confusion.

  • Basically, any element that has a header should have it populated, but you can hide it.

Displays an example of an Empty Heading.

Recommendations for Text

Text recommendations include the following:

  • Legible: Ensure all text is easily legible on web pages.
    • Use high contrast text, for example, black text on a white background.
    • Choose an easy-to-read font. Sans-serif fonts (for example, Arial, Verdana) are generally considered more legible on web than serif fonts (for example, Times New Roman).
    • Use fonts consistently across all pages.
    • 14- to 16-point font is recommended for body text to be easily read on both a desktop and a mobile device.
  • Ensure all text is well written and easy to understand and avoid jargon.
  • Skimmable: Use headings and get to the point as quickly as possible.
    • Break up lengthy content. Headings and subheadings should stand out from the text.
    • When chunking information into blocks, focus the bulk of the content on the most important information, and position it near the top of the page.
    • Use bulleted or numbered lists when possible.
    • Use relevant visuals to break up lengthy content.

Recommendations for Images

Ensure that you follow the following image recommendations:

  • Relevancy
    • Supports page content.
    • Highlights your company, brand, and values; well-chosen images strengthen your message.
    • Avoid stock photos.
Three job ads are displayed with three distinct photographs completing the ads.

Diverse Images with a Strong Focal Point

Consider the following when choosing images:

  • Use images with a strong focal point because they capture user attention.
  • Use a consistently placed focal point for image sliders.
  • Use a diverse selection of imagery to keep users engaged.
  • Consider diversity in background/foreground, location, and subject matter.
Three different photographs are shown with a Strong Focal Points.

Focal Point "Safe Zone"

Identify the focal point "Safe Zone" per component.

  • The "Safe Zone" per component will vary by the height/width of how it has been configured to display on desktop/tablet/mobile.

  • Identify the "Safe Zone" by viewing the finalized dimensions of your component on each device type.

A focal point “Safe Zone” per photo is highlighted.

Wide Cropped Images

Wide cropped images allow for versatility in the following ways:

  • More flexibility for additional cropping and overlaying elements in the layout

  • Images can be easily modified in a variety of components and layouts 

Four different wide Cropped Images of the same photograph are shown.

Optional Image Recommendations

When using the Large Image component, consider optimizing the image for mobile and adding the component twice, once for desktop/tablet and one for mobile. This is especially useful if there is text on the image. However, if there are many components on the page, restrict duplicating image components to prevent long page load times. 

Optimize Images for Display on Mobile Devices by selecting relevant checkboxes: desktop, tablet, and/or mobile.

Additional Image Recommendations

Images are provided by the customer by granting access to an image library, logon to a photo site, or a zip file of images.

  • The customer is responsible for delivering images that conform to the guidelines. Direct them to Image Recommendations in the Setting Up and Maintaining SAP SuccessFactors Recruiting guide in the SAP Help Portal.

  • A minimum of 15 to 20 high resolution employment brand images is required.

  • The following media types can be used in Career Site Builder: GIF, ICO, JPG, JPEG, PNG, SVG.
    • Scalable Vector Graphics (SVG) images render correctly regardless of display or layout size. For this reason, a single SVG image of the customer’s logo can be used for both desktop and mobile layouts of the career site.
    • If the image needs to be resized, the customer can use an application to resize large SVG files to the desired size.
  • All Career Site Builder images should be oriented as landscape, not portrait.

  • Include Alt Text for each image to improve the accessibility of the site. See the Accessibility section for details.

  • For background images, choose subtle patterns and colors.

  • Text on images is a dated web practice and is not recommended.

  • Image sliders are not a recommended practice.

Resolution and File Size Optimization

Image recommendations also include the following:

  • The maximum file size for images is 500 KB.

  • Optimizing images is highly recommended as it decreases load speed, improving the performance of the site.

    • Recommend that the customer’s media resource export the selected images specifically for the web.

    • An image program, such as Adobe Photoshop, can be used. Alternatively, free image compressors, such as FastStone PhotoResizer can be used.

  • You can use a simple application such as Microsoft Paint or SnagIt, or GIMP or PicMonkey online, to make simple changes to images, such as resizing.

    • To resize in Paint, select Resize, By Pixels, and Maintain aspect ratio. For example, use this method to reduce an image that is 1400 px wide to 1200 px wide.

      Microsoft Paint, use the Resize and Skew options.
    • Avoid making images larger, as this will reduce the image quality.

    • To crop an image in Paint, select the image and resize, and then choose Crop.

  • If the customer needs assistance delivering web-ready images, recommend having SAP’s web design team prepare their images files. The time will need to be billed.

Accessibility Guidelines for Alt Text in Images

Alt text (also referred to as alternative text or alt tags) are used to describe the images on your web page. It is important to add alt text to the photos on your website for the following main reasons:

  • If images fail to load: If for any reason an image does not render on a web page, the alt tag will display in its place. This means visitors to that web page understand what image should be there even though they are unable to see it.

  • For search engines: Search engines, such as Google and Bing regularly crawl web pages. It is easy for them to understand text copy on a page, however, images are difficult to read. This is where alt text comes to play. Alt text is used to describe to search engines what the image is showing, allowing them to give users better results when performing an image search. Alt text also improves the SEO value of the site.

  • For screen readers: Some users use screen readers in order to browse web pages. These screen readers will identify and interpret what is being displayed on their screen. For this reason, it is important to convey contextual information in alt text that will explain the image in more detail.

Hint

To view Alt Text in Chrome, right-click and select Inspect.

Alt text should be populated for all images, in all languages. Enter unique alt text for each image. Include any unique or relevant content about the image. Add alt text from the Image Selector window. You can add it when you upload an image, or add it later.

On the Image Selector window, choose Edit Alt Text to populate image Alt Text.

Be sure to provide alt text for logos, too.

On the Logo tab, populate image Alt Text for logos.

Nearby Images With the Same Alt Text Check

To check for nearby images that have the same alt text, consider the following:

  • When two images have the same alt text, this often causes redundancy or indicates incorrect alt text.

  • Remove unnecessary redundancy and ensure that the alt text for each image is appropriate.

  • The only time that you don’t need to include alt text is when the image is used as a decorative background image.

An example of a Background Image.

Embedded Text on Images

Some considerations regarding embedded text on images include the following:

  • Embedded text cannot be read by screen readers or search engines.

  • The leading practice is not to use embedded text on images.

  • If the customer wants to retain images that contain embedded text, add alt text to the image.

  • Note that web accessibility tools such as WAVE cannot detect embedded text on images.

An example of Embedded Text on Images. The text says Build Your Career and there are office workers moving puzzle pieces together.

Leading Practices for Links

The leading practices for links includes the following:

  • Hyperlink meaningful text: Linking to a "Click here" label is bad for SEO and bad for users, who are implicitly forced to hunt for more information on what exactly they are clicking on. Add a title tag to every link. Users should feel confident as they click from page to page.

  • Use consistent styling: Pick a design and stick to it. There should be no variation in the way links are visualized across the site.

  • Cut the blue non-link text. Blue is strongly associated with click ability. If blue text on a site is not clickable, this results in frustration. The same is true for underlined text: it’s strongly associated with links.

  • Mouse-over links should change style on mouse-over, emphasizing to users that they are clickable.

  • Padding ensures that links have enough space to be clickable on mobile devices.

Empty Links

To check for empty links, consider the following points:

  • If a link contains no text, the function or purpose of the link will not be presented to the user, which can create confusion for screen reader users.

  • The most common issue is leveraging embedded text on images as a link.

  • Remove the empty link or provide title text within the link that describes the functionality and/or target of the link. Or add alt text to the image.

Check for Empty Links.

Redundant Title Text in Links

To replace or remove redundant title text, consider the following points:

  • Anything that has a link should also have a title tag. The title text typically appears when the user hovers the mouse over a link.

  • The title text is used to provide advisory information; specifically, it should indicate what the link actually does. What specifically is on that page? What will you learn there?

  • As a leading practice, the title text should be different from the link name, but it is better to use redundant title text than to not populate it.

On the Link Setup page, Add Title and Text for All Links.
On the Link Setup page, Add Title and Text for All Category Links.

In some areas, the product duplicates the link text as title text in the background, so it’s not marked as an accessibility error. There is no way to modify this.

A message shows a redundant title text.

Redundant Links

Consider the following points when removing redundant links:

  • When adjacent links go to the same location (such as to a product page), this results in additional navigation and repetition for screen reader and keyboard users.
  • Adjacent links that go to the same location should be combined, or one should be removed.
  • Three column components use the same link for the header, link, and image, as shown in the figure. This cannot be changed. You could remove the link from the image as shown in the second image in the figure, or you could remove the header and/or separate link.
Remove Redundant Links for Three Column Components.

Contrast: Adequate Differentiation Between Foreground Text and Background Colors

Adequate contrast is necessary for all users, especially for users with low vision. This is often an issue for hover colors.

An example of a link with Not Enough Contrast in the Hover Color.

Increase the contrast between the foreground text and background color to a contrast ratio greater than 4:5:1.

Larger text (larger than 18 points or 14 point bold) does not require as much contrast as smaller text. Ensure a contrast ratio greater than 3:1. Some customers’ brand colors do not provide enough contrast. Encourage them to use colors on their site that fall within contrast guidelines.

You can change the color within WAVE to see which color could follow guidelines.

Use of WAVE to Determine Colors with Sufficient Contras.

To ensure adequate differentiation between foreground text and background colors, consider the following:

  • Note that WAVE compares the text color with the background color for the component, not the background image. So even if you use white text with a dark background image, WAVE will flag it as a contrast error.

    A very low contrast error message is displayed even though the Text is Legible.
  • The error is flagged unless you also change the background color for the component.

On the Styles tab, make the Background Color Similar to the Image Color to Clear the Error.

Other Considerations Related to Accessibility in Career Site Builder

Other considerations include the following:

  • Search Experience

  • Google Job Map

  • Video

Search Experience

The original search grid format does not meet accessibility guidelines and makes it difficult for people with visual impairments to find jobs on the career site.

Work with your customer to enable the Unified Data Model so candidates can use the enhanced accessible search functionality.

A Best Run website is displayed with four search results.

Google Job Map

The Google Job Map is maintained externally and does not adhere to all accessibility guidelines.

Customers can now configure the map to display a previously hidden message that was only readable from a screen reader. From the Google Map Component, enable Show Heading. From ToolsTranslations, change the provided text. Click the link to open a page populated with a search bar and search results.

Enable Show Heading from the Google Map Component.

Video

SAP does not host videos. Direct your customer to first post the videos for their career site to YouTube, Wistia, or Vimeo. Customers need to provide the direct path to the location where the video is hosted online.

  • An option is provided to turn on auto-play, but it is important to note that it is not best practice.
  • Keep the videos short. The recommended length is 30–60 seconds.
  • Include an informative title and brief description for the video.

Quick Tips for Meeting Accessibility Guidelines in Career Site Builder

Some quick tips for accessibility in Career Site Builder include:

  • Always include at least one heading per page. While the main purpose of the page comes from the metadata (Page Title), it is not normally displayed.
  • Consider a maximum of 5-6 components per page to ensure usability on mobile devices. The more content the page has, the longer it will take to load on a mobile device.
  • If there is not a specific component that meets your customer’s needs, do not hack things for formatting purposes. Use a custom component instead.
  • Do not insert invisible text on a page. Screen readers won’t see it, and browsers may flag it as malicious content, so the site could be blocked by certain browsers.

Summary

  • Select images that align with brand values, have strong focal points, and are diverse in subject matter and background.
  • Optimize image resolution and file size (max 500 KB) to ensure faster site load time and better performance.
  • Always use alt text to enhance accessibility, improve SEO, and provide context for screen readers and failed image loads.
  • Avoid embedded text, stock photos, image sliders, and invisible text to adhere to accessibility and usability best practices.
  • Ensure adequate contrast ratios (greater than 4.5:1) for text visibility, especially hover colors and small-sized text.