Discovering Career Site Design Leading Practices

Many parts of the world adhere to accessibility laws. For example, in Canada, private, public, and non-profit organizations with 50+ employees must ensure that their websites are accessible. Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally. The WCAG documents explain how to make web content more accessible to people with disabilities: https://www.w3.org/WAI/standards-guidelines/wcag/ Each guideline has three levels of accessibility: A, AA and AAA.

WCAG version 2.2 is the latest published version of the WCAG guidelines: https://www.w3.org/TR/WCAG22/. The publication of WCAG 2.2 does not deprecate or supersede WCAG 2.0 or WCAG 2.1. The use of WCAG 2.2 is recommended to maximize future applicability of accessibility efforts.

Accessibility guidelines in the United States require federal agencies to develop, procure, maintain, and use information and communications technology (ICT) that is accessible to people with disabilities - regardless of whether or not they work for the federal government. See Section 508 of the Rehabilitation Act: https://www.section508.gov/manage/laws-and-policies/https://www.section508.gov/manage/laws-and-policies/.

Screen readers are software programs that convert digital text into synthesized speech. They allow blind or visually impaired users to read the text that is displayed on the computer screen. Screen readers announce the page title (the ＜title＞ element in the HTML markup), headings, links, and the alt text (description) for images. To get an overall impression of a page's content, users can jump from heading to heading, from link to link, and from paragraph to paragraph.

Accessibility tools, such as WAVE (https://wave.webaim.org), will flag accessibility issues on websites, but cannot tell you if web content is accessible. Only a human can determine true accessibility. Tools will flag certain accessibility errors and warnings, but, for example, cannot detect embedded text on images.

The WAVE Summary View presents your page with embedded accessibility icons and indicators.

• Red icons indicate accessibility errors that need to be fixed.
• Yellow icons indicate alerts to possible issues.
• The other icons and indicators highlight other elements about the site.

From the Details tab, you can click on an icon to view the item on the page.

Reference View displays an explanation of the element you're viewing.

The related code displays at the bottom of the page.

No Styles view is very useful to access errors and alerts for complex career sites or sites with fixed headers. Turning off Styles displays your page with tables linearized. This view presents the underlying reading and navigation order, the order in which keyboard-only and screen reader users will access the page.

Contrast View shows only contrast issues on your page, based on WCAG 2.0 guidelines. You can use the tools in the panel to change the color contrast until it receives a 'pass' report, and take note of the updated colors that meet these guidelines, to change the site.

The Structure tab displays the headings on the page.

Meta tags, also called metadata, help tell search engines and users what your site is about. Metadata is used to describe individual pages on a website, allowing search engines to understand what each page contains. This data helps search engines evaluate the relevance of the page content, thus determining whether a page will be displayed within search results.

Search engine results:

The Page Title also displays on the browser tab:

Metadata contains three main elements:

1. Page Title (or Title tag) – Your site’s page title is the heading that is displayed as a blue link in the search results. The page title is considered the single most important element on the page for telling the search engines what the page is about and which keywords to focus on. Titles should be 70 characters or less, including spaces, and should lead with the most important keyword. In addition to site-wide metadata, every page should have a unique title and description.

Description (or Meta Description) – The description appears directly below the title and URL in the search engine listing. Your page’s description should contain similar information to your page title (namely a targeted keyword), but not be exactly the same – it should be used to describe concisely what the web page is about. The page description should be limited to approximately 160 characters, including spaces.

If you go over the word count, the copy will not be shown on the search engine results page. Also be aware not to "keyword stuff" (use the same keyword more than once in your description). A well-written description not only tells users what is on your page, but also entices them to visit your site. A description is what shows up here in the search engine results. It is like good window dressing. Sites with poor descriptions will get less click-throughs, and the search engines will demote your site in favor of other sites. Do not use quotes or any non-alpha characters. (Google cuts them out of the meta description.)

2. Keywords – The importance of including keywords has decreased in recent years because search engines no longer view the keyword tag as a major factor when ranking results. The only search engine that looks at the keywords anymore is Microsoft’s Bing, and they use it to help detect spam. However, it is still extremely important to conduct keyword research, keeping you aware of what terms visitors are searching for in order for you to optimize for those phrases. Using keywords in the content is much more important than populating the keywords in the metadata.

1 Metadata: Populate Site-Wide Metadata

The site-wide metadata is set from Settings→Site Configuration→Site Information. This information is used if it is not replaced at the page level. For the description, include the company name, jobs or careers, and the strategic positions the company is hiring for (for hospitals, for example, list doctors, nurses, and so on). If the company has just one location, also include that.

2 Metadata: Populate Page Metadata

Unique metadata should be specified for every page of the site. This is a leading practice and increases SEO value.

Do this by navigating to the page, clicking the gear icon, and selecting Tags or Meta Tags.

Enter unique metadata for pages of:

• Each page type (with the exception of landing pages): Home, Content, and Category
• Each locale, in the appropriate language
• Each brand

On a Category page for sales jobs, for example, include a description such as the following: Apply online for Best Run Sales Jobs.

Content on pages should be organized with headings. Pages should be structured in a hierarchical manner, generally with one 1st degree heading (＜h1＞) being the most important (usually page titles or main content heading), then 2nd degree headings (＜h2＞ - usually major section headings), down to 3rd degree headings (sub-sections of the ＜h2＞), and so on. In WAVE, use the Outline tab in the side bar to view the headings.

Do not use text formatting, such as font size or bold, to give the visual appearance of headings - use actual heading (＜h1＞ - ＜h6＞) for all content headings. Assistive technologies and other browsers rely upon the literal markup of the page to determine structure. Likewise, do not use headers to achieve visual results only. For instance, if you want to highlight or emphasize an element within your content that is not a heading, do not use heading elements to achieve the visual appearance you want. Instead, use font size, bold, or italics.

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 is still considered to be within accessibility guidelines. The Home page of a CSB site will take on the page title from Settings→Site Configuration→Site Information, but it is not displayed on the page.

For other page types, the ＜h1＞ tag is taken from the page title for that page, and is hidden by default.

On Category pages, however, the ＜h1＞ tag can be visible or hidden.

The ＜h1＞tag is required on Category pages, but customers can choose to hide it and still be within guidelines.

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.

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

1. 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.
2. 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, but 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.
3. For the visually impaired: The visually impaired 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.

Alt text should be populated for all images and 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 you can add it later.

Be sure to provide alt text for logos too.

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, as shown below.

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.

• 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 clickability. 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: Ensure links have enough space to be clickable on mobile devices.

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.

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.

Category page link example:

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.

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 and image, as shown below. This cannot be changed. You could remove the link from the image or remove the header and/or separate link.

Adequate contrast is necessary for all users, especially for users with low vision. This is often an issue for hover colors. 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. We recommend that you use colors on your site that fall within contrast guidelines.

This hover link doesn’t provide enough contrast:

…unless you also change the background color for the component, as shown below.

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. When feasible, we recommend enabling the Unified Data Model so candidates can use the enhanced, accessible search functionality.

The Google job map is maintained externally and does not adhere to all accessibility guidelines. Customers can now configure the Google Job Map to display a previously hidden message that was only readable from a screen reader. From the Google Map Component, enable Show Heading. The provided text can be changed from Tools→Translations. Clicking on the link opens a page populated with a search bar and search results.

In order for there to be a valuable user experience, information must be:

• Useful – your content should be original and fulfill a need
• Usable – site must be easy to use
• Desirable – image, identity, brand, and other design elements
• Findable – Content needs to be navigable and locatable
• Accessible – Content needs to be accessible to people with disabilities
• Credible – Users must trust and believe what you tell them

Optimize site conversion in two critical areas:

• Job Applies
• Talent Community Membership and Growth (Create an Account)

Enhance Usability:

• Minimize site drop-off and mitigate user attrition in specific areas
• Enable visitors to find relevant jobs quickly, easily, and intuitively

Showcase Brand:

• Showcase brand in a way that is creative and visually consistent with guidelines
• Communicate company values

Simplifying design, before and after

The "after" design in this example (not a career site) is much more open with whitespace. Images feature a single product with high-resolution pictures and contrasting colors.

7 Rules of planning a simple site

1. Research your audience and the sites they visit the most. Look for case studies on design changes from those sites and how those resulted in improvement in key areas.
2. Create a mashup of all those "working" components for your own site.
3. Obey the rules of cognitive fluency when you lay out your design. Put things where your visitors have grown accustomed to finding them.
4. Rely on your own colors, logo, and typeface to communicate clearly and subtly. Don’t add copy and/or images unless it communicates something your visitor actually cares about.
5. Keep it as simple as possible , that is, one large image instead of a bunch of little ones, and one column instead of three ; utilize as much white space as possible.
6. Double check to make sure your site fits the public expectation in pricing, aesthetics, speed, and so on.
7. Remember that "prototypical" doesn’t mean that every aspect of your site should fit that mold.

Source:

https://medium.com/@tommyismyname/why-simple-websites-are-scientifically-superior-168074e9575#.dwy8r9pdx

Use leading practices as a base to deliver a fantastic user experience that effectively directs qualified applicants to apply, supports your strategic recruiting goals, and reflects your unique brand.

The goal is to optimize site conversion, and minimize site drop-off, in two critical areas:

• Job Applies: individuals who click the Apply Now button
• Talent Community Membership: individuals who sign up for job alerts

• 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).
• See a list of recommended fonts for the web here: http://accessibility.psu.edu/fontfacehtml/
• Use fonts consistently across all pages.
• 14-16 points is our recommendation for body text to be best read on desktop and mobile.

• Use short, easy-to-understand words and phrases.
• Avoid jargon.

• Get to the point as quickly as possible. Use half the word count or less than conventional writing.
• Content should be skimmable because web users don't read a lot. Studies show that in a best-case scenario, we only read 28% of the text on a web page.
• 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.

• Supports page content
• Highlights your company brand and values; well-chosen images strengthen your message
• Avoids stock photos

• Images with a strong focal point 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.

• The "Safe Zone" per component will vary by the height/width of how it has been configured to display on desktops, tablets, and mobiles.
• Identify the "Safe Zone" by viewing the finalized dimensions of your component on each device type.

• Allows for flexibility for additional cropping and overlaying elements in the layout
• Allows images to be easily modified in a variety of components and layouts

• When using the Large Image component, consider optimizing the image for mobile and adding the component twice, once for desktop/tablet and once for mobile.
• This is especially useful if there is text on the image.

• The customer is responsible for delivering images that conform to the guidelines. Please see Image Recommendations in Setting Up and Maintaining SAP SuccessFactors Recruiting.
• Images are typically provided by granting access to an image library, login to a photo site (similar to photobucket.com), or a zip file of images.
• A minimum of 15-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. Note that Scalable Vector Graphics (SVG) images render correctly regardless of display or layout size. For this reason, a single SVG image of your corporate logo can be used for both desktop and mobile layouts of the career site. If an SVG image needs to be resized, you can use an application, such as https://www.iloveimg.com/resize-image/resize-svg.
• 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 above.
• 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.

• The maximum file size for images is 500KB.
• Optimizing images is highly recommended as it decreases load speed, improving the performance of the site. We recommend aiming for a file size closer to 100KB.
• Your media resource should export the selected images specifically for the web.
• An image program such as Photoshop can be used, or free image compressors are available on the Web, such as FastStone Photo Resizer.
• If you need assistance delivering Web-ready images, SAP’s web design team can prepare your images files. The time will need to be billed.

Images uploaded in Career Site Builder are hosted on the Akamai Content Delivery Network (CDN), which uses servers around the world to reduce page loading times.

Depending on the component, to add an image to the page, click Select Image or +Add, typically from the Styles tab.

You can choose to add an image from a list of images you’ve previously added.

1. Click Upload Image.

2. Click Select Image.

3. Browse and select the image to use. Click Add.

4. Click the back arrow.

5. Click Edit Alt Text, enter text, and click Save.

6. Click the back arrow and click Select.

When adding an image, select the desired Image Position (as shown at the right). This feature allows a "focal point" for an image to always be visible no matter what browser and device type is used by the candidate. For example, a person in the image will always be centered on every device.

If the image is not displaying as desired on all devices, you can add multiple components with images of different sizes to display on each device type.

If the site requires videos or Flash, SAP needs a link to the location where the videos or Flash are hosted online. A direct path must be provided; for example, a link to YouTube is often used for video assets. SAP does not host video or Flash on their servers.

Other video tips:

• Turn off auto play.
• Keep the videos short. Between 30 to 60 seconds is recommended.
• Include a title and brief description for the video.

Search engine optimization is the practice of increasing both the quality and quantity of website traffic, as well as exposure to your brand, through non-paid ("organic") search engine results.

Despite the acronym, SEO is as much about people as it is about search engines. It’s about understanding what people are searching for online and the type of content they wish to consume. Knowing the answers to these questions will allow you to connect to the people who are searching online for the solutions you offer.

If knowing your audience’s intent is one side of the SEO coin, delivering it in a way search engine crawlers can find and understand is the other. Search engines scour billions of pieces of content and evaluate thousands of factors to determine which content is most likely to answer your query. They do this by discovering and cataloguing all available content on the Internet via a process known as "crawling and indexing," and then ordering it by how well it matches the query ("ranking").

Search engine optimization is a core piece of SAP SuccessFactors Recruiting. We follow SEO leading practices as we implement career sites and work with our customers to get their jobs in front of interested and qualified candidates.

Capabilities include:

• Crawler friendly – For most applicant tracking systems (ATS), search engine crawlers can’t follow links to get to the jobs, so their jobs don’t show up in search engine results. SuccessFactors solves this problem by importing jobs from the ATS and putting them on a search engine-friendly site.
• Daily sitemap updates– One of the tools search engines use to know what content is available on a site is the sitemap, with links to every page. When SAP SuccessFactors Recruiting runs its nightly maintenance, sitemaps are updated with any changes to the job collection or landing pages.
• Refine SEO settings in Career Site Builder – By default, CSB generates a Top Jobs page that lists links to search results pages based on the most frequently searched terms. This setting can be disabled to have better control over how jobs are presented in your career site. You can also demote specific terms to display at the end of the result set, prevent search engines from indexing jobs with certain terms entirely, and control whether search engines index user-generated search page links.
• Category pages– Building SEO value for a page takes time – more time than most job postings allow for. When we build customer career sites, we consider their hiring priorities and job collection to build category pages with based on popular search terms. We include these search terms, or keywords, in strategic places both on page and in the HTML meta data. While the jobs on each page come and go, by building category pages to host the jobs, SAP SuccessFactors Recruiting builds lasting SEO value.
• Relevant meta data– Search engines, job boards, and job aggregators all use different pieces of the Meta Data in the HTML code of a job or page. We recommend unique metadata information for each page of the site. We automatically insert relevant information in the title tags from the metadata, to make sure our traffic sources have what they need to make our jobs and pages search-friendly.
• Including "job" at the end of job titles– When candidates search for jobs they usually include the word "jobs" in their search term. Including "job" in the page title and in the URL helps identify the page as a job to the search engines, and as these jobs post to pages, they create relevant, dynamic content to improve the SEO value of pages.

• URL structure– One of the places search engines look to determine what type of keywords to associate with a page is the web address, or URL. Most pages in an ATS are filled with numbers, symbols, and unrelated text.

  For example: jobDetails.do?functionName=getJobDetail&jobPostId=140552&localeCode=en-us

• When we create pages, we include the name of the page in the URL to improve SEO.

  For example: careers.SuccessFactors.com/go/Boston-Sales-Jobs/242462/

• "Similar jobs" links on job pages– As search engine crawlers read the bottom of each job page, they come across links to related job categories. Like the segments on the bottom of the page, these links also increase relevant keywords and provide more links for the search engines.
• Responsive career site– Search engines rank sites not only based on content but also on how appropriate the site is for the device they are performing the search on. Utilizing a responsive career site improves rankings for all search results across websites.

• Job Distribution– By distributing jobs to major job boards with links to the customer’s career site, these inbound links improve the relevance and importance of the jobs. The more popular and trafficked job boards and aggregators will help improve your customers' rankings, especially when they get a lot of traffic from those sources.