✨ Update the job advertisement page

[JoshBeveridge]

✨ Summary

Visit the Figma file • Contact @substrae with design questions

The primary goals of this design update are to consolidate content, generally shorten the length of posters, and improve legibility of content. The information architecture has been reorganized, and a handful of editorial functionalities have been added.

These changes impact the job advertisement first and foremost, but also impact various admin UIs as well. These changes have all been outlined below.

🎟️ Related issues

• GCTC-NTGC/gc-digital-talent#8751
• GCTC-NTGC/gc-digital-talent#8752

✅ Requirements

### General page changes
- [ ] Rework hard coded values in process titles (remove work stream and classification from the title for advertisements and application-related UIs, as well as from the admin recruitments table)
- [ ] Prefix classification the job advertisement's page title (e.g. `XX-XX: Job title`) in the cases above except for the admin recruitments table
- [ ] Update the page subtitle to generic text that is applicable to all jobs
- [ ] Ensure the breadcrumbs reflect the page title changes
- [ ] Update the table of contents to reflect the updated information architecture
- [ ] "Apply now" changes to "Continue my application" or "View my application" as it does now

📸 Full page screenshot

📸 Title, subtitle, and breadcrumb changes

📸 Table of contents changes

### *Employment details* changes
- [ ] Update the styles and layout
- [ ] Swap the Special note from an `alert` to a `well`
- [ ] Consolidate work stream, salary, deadline, location, language, and security clearance into this section
- [ ] ~Add a new section for _Employment length_ that leverages the new field in GCTC-NTGC/gc-digital-talent#8751)~ -> GCTC-NTGC/gc-digital-talent#8824
- [ ] Add info links where appropriate (see below for details)

📸 Employment details change comparison

📸 Without special note

Info links

• Work category => -> IT: https://www.canada.ca/en/government/system/digital-government/gcdigital-community/careers-digital.html#information-technology -> EX: no link
• Salary range => -> IT and CS: https://www.tbs-sct.canada.ca/agreements-conventions/view-visualiser-eng.aspx?id=1 -> AS and PM: https://www.tbs-sct.canada.ca/agreements-conventions/view-visualiser-eng.aspx?id=15 (edited) -> EX (no icon) -> EC: https://www.tbs-sct.canada.ca/agreements-conventions/view-visualiser-eng.aspx?id=4 -> update French links too fra
• Deadline => ~the deadline info dialog (see below)~ already updated
• Work location => the location info dialog (see below) -> Note that only the first bolded line is dynamic. Most of the dialog copy is static.
• Language requirement => the same site it does now: https://www.canada.ca/en/public-service-commission/services/second-language-testing-public-service.html
• Security clearance => the same site it does now: https://www.canada.ca/en/security-intelligence-service/services/government-security-screening.html

Dialogs

📸 Deadline dialog

📸 Location dialog

### _Minimum education_ changes
- [ ] Bring this section out of Skill requirements into its own main section 
- [ ] Update instructional text
  - [ ] links: Education standard: https://www.canada.ca/en/treasury-board-secretariat/services/staffing/qualification-standards/core.html#toc5
  - [ ] links: Degree equivalency: https://www.canada.ca/en/public-service-commission/jobs/services/gc-jobs/degree-equivalency.html
- [ ] Update styles
- [ ] Ensure support for up to 3 requirements and that they stack appropriately on mobile devices

📸 Minimum education change comparison

Variants

📸 Single option

📸 Double option

📸 Triple option

### *Skill requirements* changes
- [ ] Update the instructional text
- [ ] ~Add a button that triggers the skill level explanation dialog (see below)~  GCTC-NTGC/gc-digital-talent#8828
- [ ] Merge all 4 skill categories into a single list and ensure they are loaded in the correct order (see below)
- [ ] Add an "Expand all sections" button
- [ ] Update the layout to use the card-style accordion group and ensure definitions are included in each skills accordion content
- [ ] ~Add the new skill level as part of the accordion subtitle~ -> GCTC-NTGC/gc-digital-talent#8828
- [ ] Leverage "Technical" and "Behavioural" to indicate if a skill is "Assessed at the time of application" or "Assessed at a later time" respectively
- [ ] Accordion contents update: "is defined as..."

📸 Skill requirements change comparison

Rather than breaking skills into 4 confusing categories, we're going to consolidate them into a single list. Because we know that Technical and Behavioural don't mean much to applicants, we're replacing that language with Assessed during initial application and Assessed at a later time respectively.

The skills layout requires a specific layering of sort orders:

• Sort skills by required first, optional second
• Within each group, sort skills by technical first, soft second
• With those groups, sort skills alphabetically

Dialogs

📸 Skill level dialog

### *About this role* changes
- [ ] Create a new section called About this role
- [ ] Consolidate Impact, Tasks, ~and the optional About us~ section into this section -> GCTC-NTGC/gc-digital-talent#8829

📸 About this role change comparison

### *More information* changes
- [ ] Create a new section called More information
- [ ] Add instructional text
- [ ] Add an "Expand all sections" button
- [ ] Consolidate Contact and accommodation, What to expect after you apply, Who can apply, What are pool recruitments, and ~What does a(n) `XX-XX Title` mean into this new section, but note the changes outlined below~ -> Use existing classifications copy
- [ ] Ensure all sections are formatted as questions using the card-style accordion group

📸 More information change comparison

There are a few important implementation details about the questions found in this section:

• Note the order and match it to the design
• "Who can apply to this recruitment process" remains the same
• "What does a(n) XX-XX Title mean?" is being changed quite drastically - it should output the content described by the changes in the Custom question content section below
• ~"How are equity and inclusion considered in this recruitment process?" is new and should use the content provided in the design~ -> GCTC-NTGC/design-gc-digital-talent#45
• "Who can I contact with questions or accommodation needs?" is remaining the same
• "What should I expect after I apply?" is remaining the same
• ~"What can I expect if I'm successful in this process?" is new and mimics the behaviour of "What can I expect after I apply" in terms of content curation~ -> GCTC-NTGC/gc-digital-talent#8829

### _Start an application_ changes
- [ ] Update the instructional text

📸 Start an application change comparison

Additional Acceptance Criteria

• [ ] Users can complete read the Job advertisement using ATs. (Work with @RM-1978 to do a manual accessibility review.)
• [ ] List of GitHub issues is created to address any bugs or issues.

[vd1992]

My main concern would be ensuring all the requisite components exist first, such as we do have accordion components but can they render to match the mockup

[JoshBeveridge]

@vd1992 Thanks - this is a great point. When designing this I tried to avoid any weird customization of the existing UI elements, but there might be a slight tweak to the accordion in the skills section depending on where the developed version of the component is at.

[RM-1978]

From an accessibility perspective, @esizer and I are wondering about the placement of the information Icon in this design for screen reader users. For SR users, it is better to have information icons closer to their referent. Please note that we are worried that having relevant icons so far from the info they are related to because best practices on Goc sites are to have it close and it was changed because AAACT and Fable told us it is an A11y issue related to perceivability and operation.

[mnigh]

Related https://github.com/GCTC-NTGC/design-gc-digital-talent/issues/45

[RM-1978]

Hi @substrae, @esizer and I discussed this issue. We review all issues with the accessibility tag and usually do full manual reviews of them against WCAG with Assistive technologies. We would be grateful if you could tell us if it is a general manual review you might need or if you would like us to target certain WCAG criteria in our review. To this end, we would be grateful if you could indicate which WCAG or AT usability issues need to be followed throughout the accessibility review process? Would you like us to do a manual accessibility review once it is up (e.g. verifying with our manual accessibility checklist, plain language review)? Or, is it just that the Job advertisement should be implemented in a specific way to be conscious of the cognitive accessibility changes that were made (e.g. alignment, quick summary component) and specific WCAG criteria?

[JoshBeveridge]

@RM-1978 @esizer

• We've talked about the info icon distance problem multiple times at this point. To reiterate, I'm not significantly concerned this is a problem because of the following:
  • Zooming using native browser tools restructures the site into mobile formatting, meaning the icons are never out of sight
  • The icons are buttons and are therefore keyboard focusable, which will bring them into view
  • The icons exist within a grid format that include visual horizontal lines indicating that the grid row continues past a certain point, signifying the row continues if it stretches past non-natively zoomed viewports
  • The text length associated with each icon is variable, and if the icons are moved directly next to the text, it makes the text much more difficult to read (see screenshot)
  • Similarly, if we put the icons directly next to the text, we create a zigzag click pattern that could introduce click target inconsistencies for folks with motor concerns
  • The width of this card element is fixed and doesn't expand past a certain point, meaning the icons are only ever so far from relevant text, even on very wide screens
• In terms of the accessibility label, I used it for the reasons described in the latter half of your comment: to indicate that this issue alleviates existing accessibility issues (specifically legibility and cognitive processing problems) with the current job advertisement page

If we find that users are in fact missing this information in practice and we need to bring the icons closer, I'm going to recommend we remove the visual identifier icons from the whole block to reduce the visual complexity:

[esizer]

• Zooming using native tools restructures the site into mobile formatting, meaning the icons are never out of sight

This is not true, built-in to both MacOS and Windows accessibility tools is a magnifier that only highlights an area around the cursor. It is a common tool and tested by Fable who originally flagged this as an issue previously. As well as the AAACT.

[JoshBeveridge]

Native browser tools, but that's fair.

[JoshBeveridge]

That said, there are dozens of other instances on our site alone that follow this pattern:

• Links inline with headings
• Edit/Cancel buttons for inline forms
• Labels/chips/etc. on experience/qualification/application cards
• Auth links in the nav being separate from the main menu
• Table of contents elements being off screen if zoomed in on content
• etc.

[gobyrne]

Thanks for the discussion folks. I've reviewed with Lauren to make a call. For this one location we'd like to go with the last image showed (icons on left removed, info icons brought next to text). The decision will not necessarily lend itself to other locations on the site though, just for this page right now.

@substrae can you update the design please?

[JoshBeveridge]

@gobyrne Done, screenshots are updated. I've also updated the title of the first section to "Employment details" per Matt and Lee's feedback.

[tristan-orourke]

Pulling this out of Ready to Develop for the moment so we can discuss Admin-side changes that need to come first

[RM-1978]

As discussed at this week's platform review meeting, I will also pull the Job advertisement (Manager Candidate copy) into the copy review for the ROD feature.

[RM-1978]

@gobyrne, here is what we test in an accessibility review:

• Test for proper landmarks roles and labels (e.g., Main, Nav).
• Confirm that all components/widgets have appropriate ARIA roles.
• Review page titles and headings for descriptive titles and proper structure.
• Review reading order and focus management (focus order, component triggers, modals, etc.).
• Review non-text elements for information or functional value and proper placement.
• Confirm that non-text elements with informative or functional value have meaningful alternative text or ARIA labels.
• Review colour contrast for a contrast ratio of 4:5:1 between foreground and background.
• Confirm link texts are descriptive and that their "underline" signifier is present. Alternatively, they should have a contrast ratio of 3:1.
• Review colour contrast for perceived contrast in addition to computed values.
• Confirm that meaningful graphical elements (those with informational value) have a contrast value of 3:1
• Confirm that key pages do not rely solely on colour to convey meaning or instruction.
• Confirm that touch targets are usable.
• Check French-language pages for proper default language.
• Plain language check

  • Check that the copy is presented concisely.
  • Check that documents are broke into separate topics using semantic headers.
  • Use short lists and bullets to organize information.
  • Use even more headings with less under each heading.
  • Flag if information on each page is presented skips two semantic heading levels.
  • Check that page titles and copy are crafted with key words that our readers would use when doing a web search for our product.
  • Check that link language should describe what your reader will get if they click the link (e.g., Never use “click here” or “ Learn more” as links).
  • Verify that unnecessary or redundant words have been eliminated.

@petertgiles, to make thing simple, I suggest adding our review acceptance criteria to this ticket:

• [ ] Users can complete read the Job advertisement using ATs.
• [ ] List of GitHub issues is created to address any bugs or issues.

[gobyrne]

@esizer just a small change to the education section. Where is says "... Government of Canada's education standard." it should instead say "... Government of Canada's qualification standard." And that text should link here: EN: https://www.canada.ca/en/treasury-board-secretariat/services/staffing/qualification-standards/core.html FR: https://www.canada.ca/fr/secretariat-conseil-tresor/services/dotation/normes-qualification/centrale.html

In French the term is "Normes de qualification". I can help you integrate it into the French that comes back from translation if needed.

This is the section I'm talking about:

[RM-1978]

Accessibility Review Notes:

Overall, this work was seamless in automated and AT testing. I can also confirm that the French version of the job advertisement behaves in the same way as the English with NVDA and Narrator.

As discussed with @esizer, just a couple of observations that could make it a little easier for AT users:

• [ ] Long accordion titles are cut off in French and when using magnification technologies in English and French (light and dark modes): _English Magnification to 400%: French @ regular magnification level French Magnification to 200%:

• [ ] Focus order does not seem to include the "OR" or the "OU" separators between the "Applied experience" and "2 year post-secondary" education cards in both dark and light modes in both official languages. English French