Nex AGI Nex N2.5 Mini – Careers
via Nex AGI · Generated
- AIMAC Debt 5.71
- Cost $0.0023
- Total Violations 7
- HTML Size 60 KB
- Em Dashes 1
Screenshot
View Live Page
Accessibility Issues Found
7 Serious
-
autocomplete-valid serious 1 instance
autocomplete attribute must be used correctly
Example HTML
<input id="location" name="location" type="text" placeholder="e.g. Remote, Austin" autocomplete="location"> -
color-contrast serious 6 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span>Northstar</span>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="TalentTrail helps job seekers find meaningful work, build in-demand skills, and move confidently through every stage of their career.">
<meta name="theme-color" content="#0f766e">
<title>TalentTrail — Find work that moves you forward</title>
<style>
:root {
--ink: #102a2b;
--ink-soft: #334b4a;
--muted: #617774;
--accent: #0f766e;
--accent-dark: #0a5953;
--accent-soft: #e6f5f1;
--gold: #e8a33d;
--gold-soft: #fff6df;
--navy: #17323a;
--bg: #f7faf9;
--surface: #ffffff;
--line: #dce7e4;
--shadow: 0 18px 45px rgba(16, 42, 43, 0.08);
--shadow-sm: 0 8px 24px rgba(16, 42, 43, 0.08);
--radius-lg: 26px;
--radius-md: 18px;
--radius-sm: 12px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--ink);
background: var(--bg);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(232, 163, 61, 0.8); outline-offset: 3px; }
.container { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.skip-link {
position: absolute;
left: 16px;
top: -60px;
z-index: 100;
padding: 10px 16px;
border-radius: 8px;
color: #fff;
background: var(--ink);
transition: top .2s ease;
}
.skip-link:focus { top: 14px; }
.site-header {
position: sticky;
top: 0;
z-index: 20;
border-bottom: 1px solid rgba(220, 231, 228, .85);
background: rgba(255, 255, 255, .9);
backdrop-filter: blur(16px);
}
.nav-wrap { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand img { width: 148px; height: 46px; object-fit: contain; }
.brand-name { font-size: 1.28rem; font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
.brand-name span { color: var(--accent); }
.nav-toggle {
display: none;
width: 44px;
height: 44px;
padding: 10px;
border: 1px solid var(--line);
border-radius: 11px;
color: var(--ink);
background: #fff;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
display: block;
width: 22px;
height: 2px;
margin: 4px auto;
border-radius: 2px;
background: currentColor;
content: "";
transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span { opacity: 0; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.primary-nav ul { display: flex; align-items: center; gap: 25px; list-style: none; margin: 0; padding: 0; }
.primary-nav a {
position: relative;
color: var(--ink-soft);
font-size: .94rem;
font-weight: 650;
}
.primary-nav a::after {
position: absolute;
right: 0;
bottom: -9px;
left: 0;
height: 2px;
border-radius: 2px;
background: var(--accent);
content: "";
transform: scaleX(0);
transition: transform .2s ease;
}
.primary-nav a:hover::after, .primary-nav a:focus-visible::after { transform: scaleX(1); }
.nav-cta {
padding: 10px 17px;
border-radius: 999px;
color: #fff !important;
background: var(--accent);
box-shadow: 0 7px 17px rgba(15, 118, 110, .18);
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--accent-dark); }
.hero {
position: relative;
overflow: hidden;
padding: 78px 0 82px;
background:
radial-gradient(circle at 8% 18%, rgba(232, 163, 61, .16), transparent 26%),
radial-gradient(circle at 91% 22%, rgba(15, 118, 110, .13), transparent 27%),
linear-gradient(135deg, #fff 0%, #f2faf7 100%);
}
.hero::before {
position: absolute;
top: 70px;
right: -100px;
width: 390px;
height: 390px;
border: 1px solid rgba(15, 118, 110, .15);
border-radius: 50%;
content: "";
}
.hero::after {
position: absolute;
right: 10%;
bottom: -180px;
width: 310px;
height: 310px;
border: 46px solid rgba(232, 163, 61, .09);
border-radius: 50%;
content: "";
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.eyebrow, .section-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 17px;
color: var(--accent-dark);
font-size: .77rem;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
.eyebrow::before, .section-kicker::before { width: 24px; height: 2px; border-radius: 999px; background: var(--gold); content: ""; }
.hero h1, .section-title, .contact-title {
margin: 0;
color: var(--ink);
font-size: clamp(2.55rem, 5vw, 4.8rem);
font-weight: 820;
letter-spacing: -.065em;
line-height: 1.02;
}
.hero h1 { max-width: 710px; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero-lead { max-width: 620px; margin: 24px 0 0; color: var(--muted); font-size: 1.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 48px;
padding: 12px 20px;
border: 1px solid transparent;
border-radius: 11px;
font-weight: 750;
line-height: 1.2;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #fff; background: var(--accent); box-shadow: 0 10px 24px rgba(15, 118, 110, .2); }
.btn-primary:hover { background: var(--accent-dark); box-shadow: 0 13px 28px rgba(15, 118, 110, .26); }
.btn-secondary { color: var(--ink); border-color: var(--line); background: #fff; }
.btn-secondary:hover { border-color: #a8c9c3; background: #fbfffe; }
.btn-gold { color: var(--ink); background: var(--gold); }
.btn-gold:hover { background: #f0b355; }
.hero-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 24px; color: var(--muted); font-size: .9rem; }
.hero-note strong { color: var(--ink); }
.note-item { display: inline-flex; align-items: center; gap: 7px; }
.note-item::before { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); content: ""; }
.search-panel {
position: relative;
z-index: 2;
padding: 27px;
border: 1px solid rgba(220, 231, 228, .9);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, .92);
box-shadow: var(--shadow);
}
.search-panel h2 { margin: 0 0 7px; font-size: 1.28rem; letter-spacing: -.035em; }
.search-panel p { margin: 0 0 21px; color: var(--muted); font-size: .93rem; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { color: var(--ink-soft); font-size: .8rem; font-weight: 750; }
.field input, .field select {
width: 100%;
min-height: 47px;
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 10px;
color: var(--ink);
background: #fbfdfc;
outline: none;
}
.field input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15, 118, 110, .12); }
.search-submit { width: 100%; margin-top: 16px; }
.quick-links { display: flex; flex-wrap: wrap; gap: 8px 15px; margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--line); }
.quick-links a { color: var(--accent-dark); font-size: .86rem; font-weight: 700; }
.quick-links a:hover { text-decoration: underline; }
.hero-visual { position: relative; z-index: 1; min-height: 460px; }
.hero-visual figure { position: relative; z-index: 1; height: 460px; margin: 0; overflow: hidden; border-radius: 30px; box-shadow: var(--shadow); }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-visual figure::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(8, 39, 37, .65)); content: ""; }
.visual-caption { position: absolute; right: 25px; bottom: 24px; left: 25px; z-index: 2; color: #fff; }
.visual-caption small { display: block; margin-bottom: 4px; color: #d5efea; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.visual-caption strong { display: block; font-size: 1.35rem; line-height: 1.2; }
.floating-stat {
position: absolute;
right: -20px;
bottom: 28px;
z-index: 3;
width: 190px;
padding: 18px;
border: 1px solid rgba(255, 255, 255, .6);
border-radius: 17px;
background: rgba(255, 255, 255, .92);
box-shadow: var(--shadow-sm);
}
.floating-stat span { display: block; color: var(--accent); font-size: 1.6rem; font-weight: 850; letter-spacing: -.05em; }
.floating-stat p { margin: 3px 0 0; color: var(--muted); font-size: .83rem; line-height: 1.35; }
.trust { border-bottom: 1px solid var(--line); background: #fff; }
.trust-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 104px; }
.trust-label { color: var(--muted); font-size: .8rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.trust-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 13px 30px; color: #607371; font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; }
.trust-logos span { opacity: .72; }
.trust-logos span:nth-child(2) { color: var(--accent); }
.trust-logos span:nth-child(3) { color: #a46617; }
.trust-logos span:nth-child(4) { color: #4e6580; }
.trust-logos span:nth-child(5) { color: #826a50; }
.section { padding: 100px 0; }
.section-head { max-width: 730px; margin-bottom: 40px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-kicker { margin-bottom: 13px; }
.section-title { font-size: clamp(2rem, 3.5vw, 3.25rem); }
.section-copy { max-width: 680px; margin: 18px 0 0; color: var(--muted); font-size: 1.02rem; }
.section-head.center .section-copy { margin-inline: auto; }
.jobs-shell { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); }
.jobs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 25px; border-bottom: 1px solid var(--line); background: #fbfdfc; }
.jobs-toolbar h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.035em; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-btn { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fff; font-size: .83rem; font-weight: 700; }
.filter-btn:hover, .filter-btn[aria-pressed="true"] { border-color: var(--accent); color: #fff; background: var(--accent); }
.filter-status { margin: 0; color: var(--muted); font-size: .85rem; }
.job-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 25px; }
.job-card { display: flex; flex-direction: column; min-height: 325px; padding: 23px; border: 1px solid var(--line); border-radius: 17px; background: #fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.job-card:hover { border-color: #afd1ca; box-shadow: var(--shadow-sm); transform: translateY(-4px); }
.job-top { display: flex; align-items: center; gap: 13px; }
.job-logo { width: 51px; height: 51px; flex: 0 0 auto; border-radius: 13px; object-fit: cover; }
.job-company { margin: 0; color: var(--ink); font-size: .92rem; font-weight: 800; }
.job-type { margin: 2px 0 0; color: var(--muted); font-size: .8rem; }
.job-card h3 { margin: 23px 0 8px; font-size: 1.18rem; line-height: 1.25; letter-spacing: -.03em; }
.job-card p { margin: 0; color: var(--muted); font-size: .9rem; }
.job-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 19px 0; }
.job-meta span { padding: 5px 9px; border-radius: 999px; color: var(--accent-dark); background: var(--accent-soft); font-size: .76rem; font-weight: 750; }
.job-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.salary { color: var(--ink); font-size: .9rem; font-weight: 800; }
.job-link { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-dark); font-size: .86rem; font-weight: 800; }
.job-link:hover { text-decoration: underline; }
.jobs-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 25px; border-top: 1px solid var(--line); background: #fbfdfc; }
.jobs-footer p { margin: 0; color: var(--muted); font-size: .88rem; }
.compass-section { position: relative; overflow: hidden; background: linear-gradient(135deg, #17323a 0%, #0f5550 100%); }
.compass-section::before { position: absolute; top: -190px; right: -100px; width: 430px; height: 430px; border: 70px solid rgba(255, 255, 255, .04); border-radius: 50%; content: ""; }
.compass-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.compass-section .section-kicker { color: #b9e5dc; }
.compass-section .section-copy { color: #c7d9d5; }
.compass-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin-top: 30px; }
.compass-point { display: flex; gap: 12px; padding: 15px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: rgba(255, 255, 255, .06); }
.point-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; color: var(--ink); background: var(--gold); font-size: 1rem; font-weight: 900; }
.compass-point strong { display: block; margin-bottom: 2px; color: #fff; font-size: .93rem; }
.compass-point span { display: block; color: #bdd1cd; font-size: .8rem; line-height: 1.4; }
.quiz-card { padding: 31px; border: 1px solid rgba(255, 255, 255, .17); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .97); box-shadow: 0 25px 60px rgba(2, 24, 24, .24); }
.quiz-card h2 { margin: 0 0 7px; font-size: 1.55rem; letter-spacing: -.045em; }
.quiz-card > p { margin: 0 0 23px; color: var(--muted); font-size: .93rem; }
.quiz-fieldset { display: grid; gap: 17px; margin: 0; padding: 0; border: 0; }
.quiz-fieldset legend { margin-bottom: 9px; color: var(--ink); font-size: .86rem; font-weight: 800; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fbfdfc; font-size: .82rem; font-weight: 700; transition: all .2s ease; }
.choice input:checked + span { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); }
.choice input:focus-visible + span { outline: 3px solid rgba(232, 163, 61, .7); outline-offset: 2px; }
.quiz-submit { width: 100%; margin-top: 23px; }
.quiz-output { margin-top: 19px; padding: 18px; border-left: 4px solid var(--gold); border-radius: 0 13px 13px 0; background: var(--gold-soft); }
.quiz-output h3 { margin: 0 0 7px; color: var(--ink); font-size: 1rem; }
.quiz-output p { margin: 0; color: var(--ink-soft); font-size: .87rem; }
.quiz-output ul { margin: 10px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: .85rem; }
.stories-section { background: #fff; }
.stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.story-card { display: flex; flex-direction: column; min-height: 335px; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 8px 25px rgba(16, 42, 43, .04); }
.story-card:nth-child(2) { border-top: 4px solid var(--gold); }
.story-card:nth-child(3) { border-top: 4px solid var(--accent); }
.story-person { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.story-person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.story-person strong { display: block; color: var(--ink); font-size: .95rem; }
.story-person span { display: block; color: var(--muted); font-size: .78rem; }
.story-card blockquote { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.7; }
.story-card blockquote::before { display: block; margin-bottom: 12px; color: var(--accent); content: "\201C"; font-size: 2.2rem; line-height: .6; }
.story-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 21px; border-top: 1px solid var(--line); }
.story-result strong { color: var(--accent-dark); font-size: .92rem; }
.story-result span { color: var(--muted); font-size: .78rem; }
.skills-section { background: linear-gradient(180deg, #f7faf9 0%, #eef7f4 100%); }
.skills-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 58px; align-items: center; }
.skills-visual { position: relative; margin: 0; height: 460px; overflow: hidden; border-radius: 28px; box-shadow: var(--shadow); }
.skills-visual img { width: 100%; height: 100%; object-fit: cover; }
.skills-visual::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 50, 58, .02), rgba(23, 50, 58, .58)); content: ""; }
.skills-visual figcaption { position: absolute; right: 25px; bottom: 23px; left: 25px; z-index: 1; color: #fff; }
.skills-visual figcaption strong { display: block; font-size: 1.2rem; }
.skills-visual figcaption span { color: #d6e9e5; font-size: .84rem; }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 27px; }
.feature-card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .82); }
.feature-card h3 { margin: 0 0 7px; font-size: 1rem; letter-spacing: -.025em; }
.feature-card p { margin: 0; color: var(--muted); font-size: .86rem; }
.course-list { display: grid; gap: 10px; margin-top: 25px; }
.course-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .82); }
.course-row strong { display: block; color: var(--ink); font-size: .88rem; }
.course-row span { display: block; margin-top: 2px; color: var(--muted); font-size: .77rem; }
.course-duration { flex: 0 0 auto; color: var(--accent-dark); font-size: .78rem; font-weight: 800; }
.interview-section { background: #fff; }
.interview-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 55px; align-items: start; }
.interview-aside { position: sticky; top: 112px; }
.interview-aside .section-copy { margin-bottom: 24px; }
.tip-card { padding: 22px; border-radius: 18px; background: var(--accent-soft); }
.tip-card h3 { margin: 0 0 8px; color: var(--accent-dark); font-size: 1.05rem; }
.tip-card p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.faq-list { display: grid; gap: 11px; }
.faq-item { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fbfdfc; }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 17px 19px; border: 0; color: var(--ink); background: transparent; text-align: left; font-weight: 780; }
.faq-question::after { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; color: var(--accent-dark); background: var(--accent-soft); content: "+"; font-size: 1.15rem; font-weight: 500; line-height: 1; }
.faq-question[aria-expanded="true"]::after { content: "−"; }
.faq-answer { padding: 0 19px 18px; color: var(--muted); font-size: .9rem; }
.faq-answer p { margin: 0; }
.contact-section { padding: 96px 0 0; background: #fff; }
.contact-card { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; padding: 42px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(135deg, #f3fbf8, #fff); box-shadow: var(--shadow); }
.contact-title { font-size: clamp(2rem, 3.3vw, 3rem); }
.contact-copy { margin: 18px 0 25px; color: var(--muted); }
.contact-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.contact-list li { display: flex; gap: 11px; color: var(--ink-soft); font-size: .9rem; }
.contact-list .contact-icon { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 auto; border-radius: 9px; color: var(--accent-dark); background: var(--accent-soft); font-weight: 900; }
.contact-form { padding: 27px; border-radius: 19px; background: #fff; box-shadow: var(--shadow-sm); }
.contact-form h2 { margin: 0 0 7px; font-size: 1.3rem; letter-spacing: -.035em; }
.contact-form > p { margin: 0 0 20px; color: var(--muted); font-size: .88rem; }
.form-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form .field.full { grid-column: auto; }
.form-submit { width: 100%; margin-top: 17px; }
.form-success { margin-top: 14px; padding: 12px; border-radius: 10px; color: var(--accent-dark); background: var(--accent-soft); font-size: .85rem; }
footer { padding: 64px 0 25px; color: #c6d5d2; background: #102a2b; }
.footer-grid { display: grid; grid-template-columns: 1.3fr .7fr .7fr 1fr; gap: 42px; }
.footer-brand .brand-name { color: #fff; }
.footer-brand p { max-width: 290px; margin: 16px 0 20px; color: #a9beb9; font-size: .87rem; }
.socials { display: flex; gap: 9px; }
.socials a { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; color: #e6f2ef; font-size: .82rem; font-weight: 800; }
.socials a:hover { border-color: var(--gold); color: var(--gold); }
.footer-heading { margin: 5px 0 14px; color: #fff; font-size: .84rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.footer-links { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.footer-links a { color: #a9beb9; font-size: .87rem; }
.footer-links a:hover { color: #fff; }
.footer-contact p { margin: 0 0 8px; color: #a9beb9; font-size: .87rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); color: #89a19c; font-size: .78rem; }
.footer-bottom nav { display: flex; gap: 18px; }
.footer-bottom a:hover { color: #fff; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (max-width: 980px) {
.nav-toggle { display: block; }
.primary-nav {
position: absolute;
top: 82px;
right: 20px;
left: 20px;
max-height: 0;
overflow: hidden;
border: 1px solid transparent;
border-radius: 16px;
background: #fff;
box-shadow: var(--shadow);
opacity: 0;
transition: max-height .25s ease, opacity .2s ease, border-color .2s ease;
}
.primary-nav.is-open { max-height: 470px; padding: 15px; border-color: var(--line); opacity: 1; }
.primary-nav ul { display: grid; gap: 3px; }
.primary-nav a { display: block; padding: 11px 12px; border-radius: 9px; }
.primary-nav a:hover { background: var(--accent-soft); }
.primary-nav a::after { display: none; }
.nav-cta { margin-top: 5px; text-align: center; }
.hero-grid, .compass-grid, .skills-grid, .interview-grid, .contact-card { grid-template-columns: 1fr; }
.hero-grid { gap: 44px; }
.hero-visual { min-height: 390px; }
.hero-visual figure { height: 390px; }
.jobs-grid, .stories-grid { grid-template-columns: repeat(2, 1fr); }
.job-card:last-child { grid-column: 1 / -1; }
.compass-points { max-width: 620px; }
.skills-visual { height: 390px; }
.interview-aside { position: static; }
.contact-card { padding: 30px; }
.footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
.footer-contact { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
.container { width: min(100% - 28px, 1160px); }
.nav-wrap { height: 72px; }
.brand img { width: 132px; height: 42px; }
.brand-name { font-size: 1.15rem; }
.primary-nav { top: 72px; right: 14px; left: 14px; }
.hero { padding: 52px 0 62px; }
.hero h1 { font-size: 2.75rem; }
.hero-lead { font-size: 1rem; }
.hero-actions .btn { width: 100%; }
.search-panel { padding: 21px; }
.field-grid, .form-grid-two { grid-template-columns: 1fr; }
.field.full { grid-column: auto; }
.hero-visual { min-height: 330px; }
.hero-visual figure { height: 330px; border-radius: 22px; }
.floating-stat { right: 12px; bottom: 15px; width: 160px; padding: 14px; }
.floating-stat span { font-size: 1.3rem; }
.trust-inner { display: grid; gap: 14px; padding: 22px 0; }
.trust-logos { justify-content: flex-start; }
.section { padding: 72px 0; }
.jobs-toolbar { align-items: flex-start; flex-direction: column; }
.jobs-grid, .stories-grid, .feature-grid { grid-template-columns: 1fr; }
.job-card:last-child { grid-column: auto; }
.job-grid { padding: 17px; }
.jobs-footer { align-items: flex-start; flex-direction: column; }
.compass-section { padding: 72px 0; }
.compass-points { grid-template-columns: 1fr; }
.quiz-card { padding: 22px; }
.contact-card { padding: 22px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 22px; }
.footer-brand, .footer-contact { grid-column: 1 / -1; }
.footer-bottom { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
</style>
</head>
<body>
<a class="skip-link" href="#main-content">Skip to main content</a>
<header class="site-header">
<div class="container nav-wrap">
<a class="brand" href="#top" aria-label="TalentTrail home">
<img src="https://placehold.co/160x48/0f766e/ffffff?text=TalentTrail" alt="TalentTrail logo" width="160" height="48">
<span class="brand-name">Talent<span>Trail</span></span>
</a>
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="primary-nav" aria-label="Open navigation menu">
<span></span>
</button>
<nav class="primary-nav" id="primary-nav" aria-label="Primary navigation">
<ul>
<li><a href="#jobs">Find Jobs</a></li>
<li><a href="#career-paths">Career Paths</a></li>
<li><a href="#interview-prep">Interview Prep</a></li>
<li><a href="#skills">Skills Academy</a></li>
<li><a href="#stories">Success Stories</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact" class="nav-cta">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main id="main-content">
<section class="hero" id="top">
<div class="container hero-grid">
<div class="hero-copy reveal">
<div class="eyebrow">Career confidence, made practical</div>
<h1>Turn ambition into your <em>next great role.</em></h1>
<p class="hero-lead">TalentTrail connects ambitious professionals with thoughtful opportunities, career guidance, and the skills to move forward with confidence. Find work that fits your experience, values, and next chapter.</p>
<div class="hero-actions">
<a class="btn btn-primary" href="#jobs">Explore current openings <span aria-hidden="true">→</span></a>
<a class="btn btn-secondary" href="#career-paths">Find your direction</a>
</div>
<div class="hero-note" aria-label="TalentTrail highlights">
<span class="note-item"><strong>2,400+</strong> vetted roles</span>
<span class="note-item"><strong>92%</strong> candidates report clearer next steps</span>
<span class="note-item"><strong>Free</strong> career tools</span>
</div>
</div>
<div class="search-panel reveal">
<h2>Start with what you're looking for</h2>
<p>Search curated openings and use your results to build a smarter, more focused job search.</p>
<form id="jobSearch">
<div class="field-grid">
<div class="field">
<label for="role">Role or title</label>
<select id="role" name="role" required>
<option value="all">Any role</option>
<option value="design">Product Designer</option>
<option value="data">Data Analyst</option>
<option value="operations">Project Manager</option>
<option value="marketing">Marketing Manager</option>
<option value="customer-success">Customer Success</option>
</select>
</div>
<div class="field">
<label for="location">Location or remote</label>
<input id="location" name="location" type="text" placeholder="e.g. Remote, Austin" autocomplete="location">
</div>
<div class="field full">
<label for="mode">Work mode</label>
<select id="mode" name="mode">
<option value="all">Any work mode</option>
<option value="remote">Remote</option>
<option value="hybrid">Hybrid</option>
<option value="onsite">On-site</option>
</select>
</div>
</div>
<button class="btn btn-primary search-submit" type="submit">Find roles that fit <span aria-hidden="true">→</span></button>
</form>
<div class="quick-links" aria-label="Popular career searches">
<a href="#jobs">Remote design jobs</a>
<a href="#jobs">Entry-level data roles</a>
<a href="#career-paths">Career pivot guide</a>
</div>
</div>
<div class="hero-visual reveal">
<figure>
<img src="https://placehold.co/820x650/123b36/ffffff?text=Your%20next%20chapter%20starts%20here" alt="A career journey visual with a clear path forward" width="820" height="650" loading="lazy">
<figcaption class="visual-caption">
<small>Your career, visualized</small>
<strong>Progress becomes possible when the next step is clear.</strong>
</figcaption>
</figure>
<div class="floating-stat" aria-label="Career outcomes">
<span>4.8 / 5</span>
<p>Average rating from job seekers using the TalentTrail planner.</p>
</div>
</div>
</div>
</section>
<div class="trust" aria-label="Companies hiring through TalentTrail">
<div class="container trust-inner">
<span class="trust-label">Trusted by teams at</span>
<div class="trust-logos" aria-label="Northstar Studio, Meridian Health, Lumen Logistics, Brightpath, and Fieldstone">
<span>Northstar</span>
<span>MERIDIAN</span>
<span>Lumen</span>
<span>Brightpath</span>
<span>FIELDSTONE</span>
</div>
</div>
</div>
<section class="section" id="jobs">
<div class="container">
<div class="section-head reveal">
<div class="section-kicker">Current openings</div>
<h2 class="section-title">Find a role with room to grow</h2>
<p class="section-copy">Every listing is reviewed for a clear description, a realistic compensation range, and a hiring process that respects your time. Browse the latest opportunities, save the roles that matter, and build a search around the work you want to do next.</p>
</div>
<div class="jobs-shell reveal">
<div class="jobs-toolbar">
<h2 id="jobsHeading">Open roles</h2>
<div class="filter-row" role="group" aria-label="Filter jobs by department">
<button class="filter-btn" type="button" data-filter="all" aria-pressed="true">All roles</button>
<button class="filter-btn" type="button" data-filter="design" aria-pressed="false">Design</button>
<button class="filter-btn" type="button" data-filter="data" aria-pressed="false">Data & Analytics</button>
<button class="filter-btn" type="button" data-filter="operations" aria-pressed="false">Operations</button>
</div>
</div>
<p class="filter-status" id="filterStatus" aria-live="polite">Showing 3 roles across our featured openings.</p>
<div class="job-grid">
<article class="job-card" data-category="design">
<div class="job-top">
<img class="job-logo" src="https://placehold.co/64x64/17323a/ffffff?text=NS" alt="Northstar Studio logo" width="64" height="64" loading="lazy">
<div>
<p class="job-company">Northstar Studio</p>
<p class="job-type">Design · Full-time</p>
</div>
</div>
<h3>Senior Product Designer</h3>
<p>Shape intuitive digital experiences for a growing product team. You'll lead discovery, refine key competencies, and partner with research, engineering, and product leadership.</p>
<div class="job-meta"><span>Remote</span><span>Design</span><span>Mid-Senior</span></div>
<div class="job-bottom">
<span class="salary">$118k–$146k</span>
<a class="job-link" href="#contact">View role <span aria-hidden="true">→</span></a>
</div>
</article>
<article class="job-card" data-category="data">
<div class="job-top">
<img class="job-logo" src="https://placehold.co/64x64/4e6580/ffffff?text=MH" alt="Meridian Health logo" width="64" height="64" loading="lazy">
<div>
<p class="job-company">Meridian Health</p>
<p class="job-type">Data & Analytics · Full-time</p>
</div>
</div>
<h3>Data Analyst</h3>
<p>Turn complex operational data into decisions that improve patient outcomes. This role offers mentorship, a collaborative analytics team, and a direct line to business impact.</p>
<div class="job-meta"><span>Hybrid</span><span>Data & Analytics</span><span>Associate</span></div>
<div class="job-bottom">
<span class="salary">$78k–$96k</span>
<a class="job-link" href="#contact">View role <span aria-hidden="true">→</span></a>
</div>
</article>
<article class="job-card" data-category="operations">
<div class="job-top">
<img class="job-logo" src="https://placehold.co/64x64/826a50/ffffff?text=LL" alt="Lumen Logistics logo" width="64" height="64" loading="lazy">
<div>
<p class="job-company">Lumen Logistics</p>
<p class="job-type">Operations · Full-time</p>
</div>
</div>
<h3>Project Manager</h3>
<p>Lead cross-functional initiatives from first brief to successful launch. You'll create clarity across teams, remove execution barriers, and build a repeatable project rhythm.</p>
<div class="job-meta"><span>On-site</span><span>Operations</span><span>Mid-Level</span></div>
<div class="job-bottom">
<span class="salary">$86k–$108k</span>
<a class="job-link" href="#contact">View role <span aria-hidden="true">→</span></a>
</div>
</article>
</div>
<div class="jobs-footer">
<p>See a role you like? Create a profile to save jobs, set preferences, and get targeted updates.</p>
<a class="btn btn-secondary" href="#contact">Create profile</a>
</div>
</div>
</div>
</section>
<section class="section compass-section" id="career-paths">
<div class="container compass-grid">
<div class="reveal">
<div class="section-kicker">Career compass</div>
<h2 class="section-title">Get a clearer view of your next move</h2>
<p class="section-copy">A career pivot rarely starts with one big decision. It starts with understanding your strengths, the markets that value them, and the smallest useful step you can take this week. Answer a few questions to receive a practical starting point.</p>
<div class="compass-points">
<div class="compass-point"><div class="point-icon">1</div><div><strong>Discover</strong><span>Identify strengths, interests, and constraints.</span></div></div>
<div class="compass-point"><div class="point-icon">2</div><div><strong>Direction</strong><span>Compare paths with realistic entry points.</span></div></div>
<div class="compass-point"><div class="point-icon">3</div><div><strong>Action</strong><span>Build a focused 30-day learning plan.</span></div></div>
<div class="compass-point"><div class="point-icon">4</div><div><strong>Confidence</strong><span>Prepare stories and skills for the market.</span></div></div>
</div>
</div>
<form class="quiz-card reveal" id="careerQuiz">
<h2>Build your personalized direction</h2>
<p>Tell us where you are and where you'd like to go. We'll suggest a direction, skills to prioritize, and useful search language.</p>
<fieldset class="quiz-fieldset">
<legend>What interests you most?</legend>
<div class="choice-row">
<label class="choice"><input type="radio" name="area" value="design" checked><span>Design</span></label>
<label class="choice"><input type="radio" name="area" value="data"><span>Data & analytics</span></label>
<label class="choice"><input type="radio" name="area" value="operations"><span>Operations</span></label>
<label class="choice"><input type="radio" name="area" value="marketing"><span>Marketing</span></label>
</div>
<legend>What best describes your current experience?</legend>
<div class="choice-row">
<label class="choice"><input type="radio" name="experience" value="early"><span>Early career</span></label>
<label class="choice"><input type="radio" name="experience" value="mid"><span>Mid-career</span></label>
<label class="choice"><input type="radio" name="experience" value="pivot"><span>Career pivot</span></label>
</div>
<legend>What is your primary goal right now?</legend>
<div class="choice-row">
<label class="choice"><input type="radio" name="goal" value="find"><span>Find a new role</span></label>
<label class="choice"><input type="radio" name="goal" value="grow"><span>Grow in my field</span></label>
<label class="choice"><input type="radio" name="goal" value="build"><span>Build new skills</span></label>
</div>
</fieldset>
<button class="btn btn-gold quiz-submit" type="submit">Get my direction <span aria-hidden="true">→</span></button>
<div class="quiz-output" id="quizOutput" aria-live="polite">
<h3>Your tailored starting point will appear here.</h3>
<p>Select your answers above to generate a practical career direction and 30-day action plan.</p>
</div>
</form>
</div>
</section>
<section class="section stories-section" id="stories">
<div class="container">
<div class="section-head center reveal">
<div class="section-kicker">Success stories</div>
<h2 class="section-title">Real progress, one step at a time</h2>
<p class="section-copy">Career change is personal. These stories show how a clearer narrative, stronger interview practice, and consistent networking can turn uncertainty into momentum.</p>
</div>
<div class="stories-grid">
<article class="story-card reveal">
<div class="story-person">
<img src="https://i.pravatar.cc/120?img=32" alt="Portrait of Maya Chen" width="120" height="120" loading="lazy">
<div><strong>Maya Chen</strong><span>Operations coordinator → Product operations</span></div>
</div>
<blockquote>I knew I wanted more strategy in my work, but I didn't know how to translate my operations experience. TalentTrail helped me reframe my story around cross-functional leadership and stakeholder trust.</blockquote>
<div class="story-result"><strong>Landed a product operations role</strong><span>8 weeks of focused search</span></div>
</article>
<article class="story-card reveal">
<div class="story-person">
<img src="https://i.pravatar.cc/120?img=47" alt="Portrait of Daniel Okafor" width="120" height="120" loading="lazy">
<div><strong>Daniel Okafor</strong><span>Teacher → Data analyst</span></div>
</div>
<blockquote>The skills roadmap made a big career pivot feel manageable. I learned what to prioritize, practiced explaining my projects, and stopped applying to roles without a clear fit.</blockquote>
<div class="story-result"><strong>Accepted an associate analyst offer</strong><span>4-month transition plan</span></div>
</article>
<article class="story-card reveal">
<div class="story-person">
<img src="https://i.pravatar.cc/120?img=25" alt="Portrait of Priya Raman" width="120" height="120" loading="lazy">
<div><strong>Priya Raman</strong><span>Customer success → People operations</span></div>
</div>
<blockquote>The interview practice changed how I spoke about my impact. I could connect my daily work to measurable outcomes and answer behavioral questions with confidence.</blockquote>
<div class="story-result"><strong>Moved into a people operations role</strong><span>Stronger interview readiness</span></div>
</article>
</div>
</div>
</section>
<section class="section skills-section" id="skills">
<div class="container skills-grid">
<figure class="skills-visual reveal">
<img src="https://picsum.photos/900/650?grayscale" alt="Professionals collaborating in a bright learning environment" width="900" height="650" loading="lazy">
<figcaption><strong>Learn the skills that move your story forward.</strong><span>Practical courses, honest feedback, and career-relevant projects.</span></figcaption>
</figure>
<div class="reveal">
<div class="section-kicker">Skills Academy</div>
<h2 class="section-title">Build capability, not just a résumé</h2>
<p class="section-copy">The best career investments make your existing experience more valuable. Our short, applied courses help you develop key competencies, create portfolio-ready work, and speak with greater authority in interviews and performance conversations.</p>
<div class="feature-grid">
<article class="feature-card"><h3>Story-driven resumes</h3><p>Turn responsibilities into outcomes with a clear structure, strong verbs, and evidence recruiters can scan quickly.</p></article>
<article class="feature-card"><h3>Networking that feels natural</h3><p>Build genuine professional relationships through thoughtful outreach, useful questions, and low-pressure follow-ups.</p></article>
<article class="feature-card"><h3>Interview storytelling</h3><p>Prepare concise examples using situation, action, result, and reflection so every answer has a clear point.</p></article>
<article class="feature-card"><h3>Career pivot foundations</h3><p>Map transferable skills, close capability gaps, and test a new direction before making a major commitment.</p></article>
</div>
<div class="course-list">
<div class="course-row"><div><strong>Write a résumé that opens doors</strong><span>6 modules · Beginner friendly</span></div><span class="course-duration">3 hrs</span></div>
<div class="course-row"><div><strong>Ask better questions, build stronger networks</strong><span>4 modules · Practical exercises</span></div><span class="course-duration">2 hrs</span></div>
<div class="course-row"><div><strong>Prepare for behavioral interviews</strong><span>5 modules · Video examples</span></div><span class="course-duration">4 hrs</span></div>
</div>
</div>
</div>
</section>
<section class="section interview-section" id="interview-prep">
<div class="container interview-grid">
<div class="interview-aside reveal">
<div class="section-kicker">Interview prep</div>
<h2 class="section-title">Walk in prepared, not rehearsed</h2>
<p class="section-copy">Great interviews are conversations about value, not recitations from a script. Use our guides to understand what hiring managers are listening for, organize your most relevant evidence, and practice answers that sound like you.</p>
<div class="tip-card"><h3>Before the interview</h3><p>Research the company's current priorities, identify two thoughtful questions, and prepare three stories that demonstrate collaboration, ownership, and measurable impact.</p></div>
</div>
<div class="faq-list reveal">
<div class="faq-item">
<button class="faq-question" type="button" aria-expanded="false" aria-controls="faq-one"><span>How should I answer “Tell me about yourself”?</span></button>
<div class="faq-answer" id="faq-one" hidden><p>Give a concise professional narrative: your current focus, two or three relevant strengths, and why this opportunity is a logical next step. Keep the answer specific to the role and avoid retelling your entire work history.</p></div>
</div>
<div class="faq-item">
<button class="faq-question" type="button" aria-expanded="false" aria-controls="faq-two"><span>What if I don't meet every requirement in a job description?</span></button>
<div class="faq-answer" id="faq-two" hidden><p>Apply when you meet the core outcomes and most of the essential requirements. In your résumé and cover note, connect your transferable experience to the missing area and show how quickly you can close the gap.</p></div>
</div>
<div class="faq-item">
<button class="faq-question" type="button" aria-expanded="false" aria-controls="faq-three"><span>How do I explain a career change?</span></button>
<div class="faq-answer" id="faq-three" hidden><p>Frame the pivot around motivation and evidence. Explain what you have learned, what problems you enjoy solving, and how your previous experience gives you a useful perspective that a straight-line career path may not.</p></div>
</div>
<div class="faq-item">
<button class="faq-question" type="button" aria-expanded="false" aria-controls="faq-four"><span>What should I ask the hiring manager?</span></button>
<div class="faq-answer" id="faq-four" hidden><p>Ask about the team's current priorities, what success looks like in the first six months, how decisions are made, and what support or mentorship is available. Good questions help both you and the employer assess fit.</p></div>
</div>
</div>
</div>
</section>
<section class="section contact-section" id="contact">
<div class="container">
<div class="contact-card reveal">
<div>
<div class="section-kicker">Let's find your next step</div>
<h2 class="contact-title">Ready to move forward?</h2>
<p class="contact-copy">Create a free TalentTrail profile to save roles, set job preferences, receive career resources, and connect with guidance for your next transition.</p>
<ul class="contact-list">
<li><span class="contact-icon">✉</span><span>Careers support: <a href="mailto:hello@talenttrail.example" style="color:var(--accent-dark)">hello@talenttrail.example</a></span></li>
<li><span class="contact-icon">☎</span><span>Phone: +1 (555) 014-8820</span></li>
<li><span class="contact-icon">⌂</span><span>1200 Market Street, Suite 410<br>Portland, OR 97205</span></li>
</ul>
</div>
<form class="contact-form" id="contactForm">
<h2>Create your profile</h2>
<p>Tell us where to send your personalized career starter kit.</p>
<div class="form-grid-two">
<div class="field"><label for="firstName">First name</label><input id="firstName" name="firstName" type="text" autocomplete="given-name" required placeholder="Alex"></div>
<div class="field"><label for="lastName">Last name</label><input id="lastName" name="lastName" type="text" autocomplete="family-name" required placeholder="Morgan"></div>
</div>
<div class="field" style="margin-top:14px"><label for="email">Email address</label><input id="email" name="email" type="email" autocomplete="email" required placeholder="alex@example.com"></div>
<div class="field" style="margin-top:14px"><label for="interest">I'm interested in</label><select id="interest" name="interest"><option>Current job search</option><option>A career pivot</option><option>Interview preparation</option><option>Skills and learning</option></select></div>
<button class="btn btn-primary form-submit" type="submit">Set my preferences <span aria-hidden="true">→</span></button>
<p class="form-success" id="formSuccess" hidden aria-live="polite"></p>
</form>
</div>
</div>
</section>
</main>
<footer id="about">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a class="brand" href="#top" aria-label="TalentTrail home">
<img src="https://placehold.co/160x48/0f766e/ffffff?text=TalentTrail" alt="TalentTrail logo" width="160" height="48">
<span class="brand-name">Talent<span>Trail</span></span>
</a>
<p>Career resources for people building meaningful work: curated jobs, practical skill building, interview guidance, and honest support for every transition.</p>
<div class="socials" aria-label="Social media links">
<a href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">in</a>
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" aria-label="Instagram">ig</a>
<a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer" aria-label="YouTube">yt</a>
<a href="https://www.pinterest.com" target="_blank" rel="noopener noreferrer" aria-label="Pinterest">pin</a>
</div>
</div>
<div>
<h2 class="footer-heading">Explore</h2>
<ul class="footer-links"><li><a href="#jobs">Find jobs</a></li><li><a href="#career-paths">Career paths</a></li><li><a href="#skills">Skills Academy</a></li><li><a href="#stories">Success stories</a></li></ul>
</div>
<div>
<h2 class="footer-heading">Support</h2>
<ul class="footer-links"><li><a href="#interview-prep">Interview prep</a></li><li><a href="#about">About TalentTrail</a></li><li><a href="#contact">Contact us</a></li><li><a href="#contact">Help center</a></li></ul>
</div>
<div class="footer-contact">
<h2 class="footer-heading">Get career clarity</h2>
<p>1200 Market Street, Suite 410<br>Portland, OR 97205</p>
<p><a href="mailto:hello@talenttrail.example" style="color:#d9ebe7">hello@talenttrail.example</a></p>
<p><a href="tel:+15550148820" style="color:#d9ebe7">+1 (555) 014-8820</a></p>
</div>
</div>
<div class="footer-bottom">
<span>© <span id="year">2025</span> TalentTrail. All rights reserved.</span>
<nav aria-label="Legal links"><a href="#about">Privacy</a><a href="#about">Terms</a><a href="#about">Accessibility</a></nav>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('year').textContent = new Date().getFullYear();
const navToggle = document.querySelector('.nav-toggle');
const primaryNav = document.getElementById('primary-nav');
navToggle.addEventListener('click', function () {
const isOpen = navToggle.getAttribute('aria-expanded') === 'true';
navToggle.setAttribute('aria-expanded', String(!isOpen));
navToggle.setAttribute('aria-label', isOpen ? 'Open navigation menu' : 'Close navigation menu');
primaryNav.classList.toggle('is-open', !isOpen);
});
primaryNav.querySelectorAll('a').forEach(function (link) {
link.addEventListener('click', function () {
navToggle.setAttribute('aria-expanded', 'false');
navToggle.setAttribute('aria-label', 'Open navigation menu');
primaryNav.classList.remove('is-open');
});
});
const revealElements = document.querySelectorAll('.reveal');
if ('IntersectionObserver' in window) {
const revealObserver = new IntersectionObserver(function (entries, observer) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.12 });
revealElements.forEach(function (element) { revealObserver.observe(element); });
} else {
revealElements.forEach(function (element) { element.classList.add('is-visible'); });
}
const filterButtons = document.querySelectorAll('.filter-btn');
const jobCards = document.querySelectorAll('.job-card');
const filterStatus = document.getElementById('filterStatus');
function applyFilter(filter) {
let visibleCount = 0;
jobCards.forEach(function (card) {
const matches = filter === 'all' || card.dataset.category === filter;
card.hidden = !matches;
if (matches) visibleCount += 1;
});
filterStatus.textContent = visibleCount + (visibleCount === 1 ? ' role' : ' roles') + ' match' + (visibleCount === 1 ? 'es' : '') + ' for this view.';
}
filterButtons.forEach(function (button) {
button.addEventListener('click', function () {
filterButtons.forEach(function (item) { item.setAttribute('aria-pressed', 'false'); });
button.setAttribute('aria-pressed', 'true');
applyFilter(button.dataset.filter);
});
});
const searchForm = document.getElementById('jobSearch');
searchForm.addEventListener('submit', function (event) {
event.preventDefault();
const formData = new FormData(searchForm);
const role = formData.get('role');
const location = formData.get('location').trim();
const mode = formData.get('mode');
if (role !== 'all') applyFilter(role);
document.getElementById('jobs').scrollIntoView({ behavior: 'smooth', block: 'start' });
const locationText = location ? ' near ' + location : '';
const modeText = mode && mode !== 'all' ? ' in ' + mode + ' work' : '';
filterStatus.textContent = 'Showing roles' + locationText + modeText + ' that match your search.';
});
const quizForm = document.getElementById('careerQuiz');
const quizOutput = document.getElementById('quizOutput');
const careerData = {
design: {
direction: 'Product design and experience strategy',
skills: 'User research, interaction design, design systems, and product storytelling',
actions: 'Audit three products you use, document one improvement for each, and create one portfolio case study.'
},
data: {
direction: 'Applied data analytics and insights',
skills: 'SQL, data visualization, business questions, and communicating uncertainty',
actions: 'Complete one public dataset project, write a one-page executive summary, and practice explaining your methodology.'
},
operations: {
direction: 'Project, program, or operations leadership',
skills: 'Stakeholder management, process design, prioritization, and change communication',
actions: 'Map one workflow you improved, quantify the result, and prepare a concise project case study.'
},
marketing: {
direction: 'Growth marketing and audience strategy',
skills: 'Audience research, content strategy, campaign measurement, and experimentation',
actions: 'Build a small campaign brief, define three success metrics, and create a portfolio example around a real audience.'
}
};
quizForm.addEventListener('submit', function (event) {
event.preventDefault();
const formData = new FormData(quizForm);
const area = careerData[formData.get('area')] || careerData.design;
const experience = formData.get('experience');
const goal = formData.get('goal');
const experienceText = experience === 'early' ? 'an entry-ready foundation' : experience === 'pivot' ? 'a bridge from your existing experience' : 'a sharper growth strategy';
const goalText = goal === 'find' ? 'a focused role search' : goal === 'grow' ? 'a stronger internal growth plan' : 'a practical learning sprint';
quizOutput.innerHTML = '<h3>Your direction: ' + area.direction + '</h3><p>Based on your answers, start with ' + experienceText + ' and a ' + goalText + '.</p><ul><li><strong>Skills to prioritize:</strong> ' + area.skills + '.</li><li><strong>This week:</strong> ' + area.actions + '</li><li><strong>Next search terms:</strong> ' + area.direction + ', entry-level, portfolio, and remote-friendly.</li></ul>';
});
document.querySelectorAll('.faq-question').forEach(function (button) {
button.addEventListener('click', function () {
const answer = document.getElementById(button.getAttribute('aria-controls'));
const isOpen = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', String(!isOpen));
answer.hidden = isOpen;
});
});
const contactForm = document.getElementById('contactForm');
const formSuccess = document.getElementById('formSuccess');
contactForm.addEventListener('submit', function (event) {
event.preventDefault();
const firstName = document.getElementById('firstName').value.trim();
formSuccess.hidden = false;
formSuccess.textContent = 'Thanks, ' + firstName + '! Your preferences are ready to set. Check your inbox for the next step.';
contactForm.reset();
});
});
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:55:29.870Z",
"url": "https://benchmark.aimac.invalid/7466851c82f2f8d2aa77d8460883cd6fd6bb7907e7e060db0b33f099c5be0ccb.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"TalentTrail home\">\n <img src=\"https://placehold.co/160x48/0f766e/ffffff?text=TalentTrail\" alt=\"TalentTrail logo\" width=\"160\" height=\"48\">\n <span class=\"brand-name\">Talent<span>Trail</span></span>\n </a>",
"target": [
".nav-wrap > .brand[href$=\"#top\"][aria-label=\"TalentTrail home\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"TalentTrail home\">\n <img src=\"https://placehold.co/160x48/0f766e/ffffff?text=TalentTrail\" alt=\"TalentTrail logo\" width=\"160\" height=\"48\">\n <span class=\"brand-name\">Talent<span>Trail</span></span>\n </a>",
"target": [
".nav-wrap > .brand[href$=\"#top\"][aria-label=\"TalentTrail home\"]"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<div class=\"filter-row\" role=\"group\" aria-label=\"Filter jobs by department\">",
"target": [
".filter-row"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<span aria-hidden=\"true\">\u2192</span>",
"target": [
".btn-primary.btn[href$=\"#jobs\"] > span[aria-hidden=\"true\"]"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"TalentTrail home\">\n <img src=\"https://placehold.co/160x48/0f766e/ffffff?text=TalentTrail\" alt=\"TalentTrail logo\" width=\"160\" height=\"48\">\n <span class=\"brand-name\">Talent<span>Trail</span></span>\n </a>",
"target": [
".nav-wrap > .brand[href$=\"#top\"][aria-label=\"TalentTrail home\"]"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"filter-row\" role=\"group\" aria-label=\"Filter jobs by department\">",
"target": [
".filter-row"
]
}
]
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<div class=\"filter-row\" role=\"group\" aria-label=\"Filter jobs by department\">",
"target": [
".filter-row"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"TalentTrail home\">\n <img src=\"https://placehold.co/160x48/0f766e/ffffff?text=TalentTrail\" alt=\"TalentTrail logo\" width=\"160\" height=\"48\">\n <span class=\"brand-name\">Talent<span>Trail</span></span>\n </a>",
"target": [
".nav-wrap > .brand[href$=\"#top\"][aria-label=\"TalentTrail home\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"TalentTrail home\">\n <img src=\"https://placehold.co/160x48/0f766e/ffffff?text=TalentTrail\" alt=\"TalentTrail logo\" width=\"160\" height=\"48\">\n <span class=\"brand-name\">Talent<span>Trail</span></span>\n </a>",
"target": [
".nav-wrap > .brand[href$=\"#top\"][aria-label=\"TalentTrail home\"]"
]
}
]
},
{
"id": "autocomplete-valid",
"impact": "serious",
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "autocomplete-valid",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "the autocomplete attribute is correctly formatted"
}
],
"none": [],
"impact": null,
"html": "<input id=\"firstName\" name=\"firstName\" type=\"text\" autocomplete=\"given-name\" required=\"\" placeholder=\"Alex\">",
"target": [
"#firstName"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<a href=\"mailto:hello@talenttrail.example\" style=\"color:#d9ebe7\">hello@talenttrail.example</a>",
"target": [
"p:nth-child(3) > a"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"btn btn-primary search-submit\" type=\"submit\">Find roles that fit <span aria-hidden=\"true\">\u2192</span></button>",
"target": [
".search-submit"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1>Turn ambition into your <em>next great role.</em></h1>",
"target": [
"h1"
]
},
{
"html": "<h2>Start with what you're looking for</h2>",
"target": [
".search-panel > h2"
]
},
{
"html": "<h2 class=\"section-title\">Find a role with room to grow</h2>",
"target": [
"#jobs > .container > .section-head.reveal > .section-title"
]
},
{
"html": "<h2 id=\"jobsHeading\">Open roles</h2>",
"target": [
"#jobsHeading"
]
},
{
"html": "<h3>Senior Product Designer</h3>",
"target": [
"article[data-category=\"design\"] > h3"
]
},
{
"html": "<h3>Data Analyst</h3>",
"target": [
"article[data-category=\"data\"] > h3"
]
},
{
"html": "<h3>Project Manager</h3>",
"target": [
"article[data-category=\"operations\"] > h3"
]
},
{
"html": "<h2 class=\"section-title\">Get a clearer view of your next move</h2>",
"target": [
".compass-grid > .reveal:nth-child(1) > .section-title"
]
},
{
"html": "<h2>Build your personalized direction</h2>",
"target": [
"#careerQuiz > h2"
]
},
{
"html": "<h3>Your tailored starting point will appear here.</h3>",
"target": [
"#quizOutput > h3"
]
},
{
"html": "<h2 class=\"section-title\">Real progress, one step at a time</h2>",
"target": [
".center > .section-title"
]
},
{
"html": "<h2 class=\"section-title\">Build capability, not just a r\u00e9sum\u00e9</h2>",
"target": [
".reveal:nth-child(2) > .section-title"
]
},
{
"html": "<h3>Story-driven resumes</h3>",
"target": [
".feature-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Networking that feels natural</h3>",
"target": [
".feature-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Interview storytelling</h3>",
"target": [
".feature-card:nth-child(3) > h3"
]
},
{
"html": "<h3>Career pivot foundations</h3>",
"target": [
".feature-card:nth-child(4) > h3"
]
},
{
"html": "<h2 class=\"section-title\">Walk in prepared, not rehearsed</h2>",
"target": [
".interview-aside > .section-title"
]
},
{
"html": "<h3>Before the interview</h3>",
"target": [
".tip-card > h3"
]
},
{
"html": "<h2 class=\"contact-title\">Ready to move forward?</h2>",
"target": [
".contact-title"
]
},
{
"html": "<h2>Create your profile</h2>",
"target": [
"#contactForm > h2"
]
},
{
"html": "<h2 class=\"footer-heading\">Explore</h2>",
"target": [
"div:nth-child(2) > .footer-heading"
]
},
{
"html": "<h2 class=\"footer-heading\">Support</h2>",
"target": [
"div:nth-child(3) > .footer-heading"
]
},
{
"html": "<h2 class=\"footer-heading\">Get career clarity</h2>",
"target": [
".footer-contact > .footer-heading"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"main-content\">",
"target": [
"#main-content"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#102a2b",
"bgColor": "#fefffe",
"contrastRatio": 15.09,
"fontSize": "15.4pt (20.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 15.09"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span class=\"brand-name\">Talent<span>Trail</span></span>",
"target": [
".nav-wrap > .brand[href$=\"#top\"][aria-label=\"TalentTrail home\"] > .brand-name"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "primary-nav",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<nav class=\"primary-nav\" id=\"primary-nav\" aria-label=\"Primary navigation\">",
"target": [
"#primary-nav"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [
{
"html": "<label for=\"role\">Role or title</label>",
"target": [
"label[for=\"role\"]"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<select id=\"role\" name=\"role\" required=\"\">",
"target": [
"#role"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/160x48/0f766e/ffffff?text=TalentTrail\" alt=\"TalentTrail logo\" width=\"160\" height=\"48\">",
"target": [
".nav-wrap > .brand[href$=\"#top\"][aria-label=\"TalentTrail home\"] > img[alt=\"TalentTrail logo\"][width=\"160\"][height=\"48\"]"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "Location or remote"
},
"relatedNodes": [
{
"html": "<label for=\"location\">Location or remote</label>",
"target": [
"label[for=\"location\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input id=\"location\" name=\"location\" type=\"text\" placeholder=\"e.g. Remote, Austin\" autocomplete=\"location\">",
"target": [
"#location"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"footer-brand\">",
"target": [
".footer-brand"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"TalentTrail home\">\n <img src=\"https://placehold.co/160x48/0f766e/ffffff?text=TalentTrail\" alt=\"TalentTrail logo\" width=\"160\" height=\"48\">\n <span class=\"brand-name\">Talent<span>Trail</span></span>\n </a>",
"target": [
".footer-brand > .brand[href$=\"#top\"][aria-label=\"TalentTrail home\"]"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a class=\"skip-link\" href=\"#main-content\">Skip to main content</a>",
"target": [
".skip-link"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul>",
"target": [
"#primary-nav > ul"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><a href=\"#jobs\">Find Jobs</a></li>",
"target": [
"#primary-nav > ul > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/160x48/0f766e/ffffff?text=TalentTrail\" alt=\"TalentTrail logo\" width=\"160\" height=\"48\">",
"target": [
".nav-wrap > .brand[href$=\"#top\"][aria-label=\"TalentTrail home\"] > img[alt=\"TalentTrail logo\"][width=\"160\"][height=\"48\"]"
]
}
]
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "Role or title"
},
"relatedNodes": [
{
"html": "<label for=\"role\">Role or title</label>",
"target": [
"label[for=\"role\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<select id=\"role\" name=\"role\" required=\"\">",
"target": [
"#role"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 180.8,
"height": 46.4
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (180.8px by 46.4px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"skip-link\" href=\"#main-content\">Skip to main content</a>",
"target": [
".skip-link"
]
}
]
}
],
"incomplete": [
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute is not well supported on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"hero-note\" aria-label=\"TalentTrail highlights\">",
"target": [
".hero-note"
],
"failureSummary": "Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute."
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "9.2pt (12.32px)",
"fontWeight": "bold",
"messageKey": "bgGradient",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"hero\" id=\"top\">",
"target": [
"#top"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"eyebrow\">Career confidence, made practical</div>",
"target": [
".eyebrow"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background gradient"
}
]
}
],
"violations": [
{
"id": "autocomplete-valid",
"impact": "serious",
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "autocomplete-valid",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "the autocomplete attribute is incorrectly formatted"
}
],
"none": [],
"impact": "serious",
"html": "<input id=\"location\" name=\"location\" type=\"text\" placeholder=\"e.g. Remote, Austin\" autocomplete=\"location\">",
"target": [
"#location"
],
"failureSummary": "Fix all of the following:\n the autocomplete attribute is incorrectly formatted"
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8d9a99",
"bgColor": "#ffffff",
"contrastRatio": 2.91,
"fontSize": "12.2pt (16.32px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"trust\" aria-label=\"Companies hiring through TalentTrail\">",
"target": [
".trust"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.91 (foreground color: #8d9a99, background color: #ffffff, font size: 12.2pt (16.32px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Northstar</span>",
"target": [
".trust-logos > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.91 (foreground color: #8d9a99, background color: #ffffff, font size: 12.2pt (16.32px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#529c97",
"bgColor": "#ffffff",
"contrastRatio": 3.2,
"fontSize": "12.2pt (16.32px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"trust\" aria-label=\"Companies hiring through TalentTrail\">",
"target": [
".trust"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.2 (foreground color: #529c97, background color: #ffffff, font size: 12.2pt (16.32px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>MERIDIAN</span>",
"target": [
".trust-logos > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.2 (foreground color: #529c97, background color: #ffffff, font size: 12.2pt (16.32px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bd9158",
"bgColor": "#ffffff",
"contrastRatio": 2.85,
"fontSize": "12.2pt (16.32px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"trust\" aria-label=\"Companies hiring through TalentTrail\">",
"target": [
".trust"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.85 (foreground color: #bd9158, background color: #ffffff, font size: 12.2pt (16.32px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Lumen</span>",
"target": [
".trust-logos > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.85 (foreground color: #bd9158, background color: #ffffff, font size: 12.2pt (16.32px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8090a4",
"bgColor": "#ffffff",
"contrastRatio": 3.25,
"fontSize": "12.2pt (16.32px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"trust\" aria-label=\"Companies hiring through TalentTrail\">",
"target": [
".trust"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.25 (foreground color: #8090a4, background color: #ffffff, font size: 12.2pt (16.32px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Brightpath</span>",
"target": [
"span:nth-child(4)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.25 (foreground color: #8090a4, background color: #ffffff, font size: 12.2pt (16.32px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a59481",
"bgColor": "#ffffff",
"contrastRatio": 2.93,
"fontSize": "12.2pt (16.32px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"trust\" aria-label=\"Companies hiring through TalentTrail\">",
"target": [
".trust"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #a59481, background color: #ffffff, font size: 12.2pt (16.32px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>FIELDSTONE</span>",
"target": [
"span:nth-child(5)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #a59481, background color: #ffffff, font size: 12.2pt (16.32px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#0f766e",
"bgColor": "#102a2b",
"contrastRatio": 2.76,
"fontSize": "15.4pt (20.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer id=\"about\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.76 (foreground color: #0f766e, background color: #102a2b, font size: 15.4pt (20.48px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Trail</span>",
"target": [
".footer-brand > .brand[href$=\"#top\"][aria-label=\"TalentTrail home\"] > .brand-name > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.76 (foreground color: #0f766e, background color: #102a2b, font size: 15.4pt (20.48px), font weight: bold). Expected contrast ratio of 3:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 6669
},
{
"y": 576,
"height": 6669
},
{
"y": 1152,
"height": 6669
},
{
"y": 1728,
"height": 6669
},
{
"y": 2304,
"height": 6669
},
{
"y": 2880,
"height": 6669
},
{
"y": 3456,
"height": 6669
},
{
"y": 4032,
"height": 6669
},
{
"y": 4608,
"height": 6669
},
{
"y": 5184,
"height": 6669
},
{
"y": 5760,
"height": 6669
},
{
"y": 5949,
"height": 6669
}
],
"scans": 13,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Careers" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.
**Client & Category:**
- Industry: "Careers"
- Description: Job boards, career advice, resume tips, and professional resources.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Careers" category.
2. **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3. **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.
**Content & Structure Requirements (Deliver a COMPLETE page):**
- **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
- **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Interview Prep", "Contact", "About".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Careers" category. Consider themes similar to: "Current Openings", "Success Stories", "Skill Building".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "networking", "key competencies", "career pivot".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Create Profile", "Set Preferences", "Find Companies".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Careers" sector. Ideas similar but not limited to: "skills assessment".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "skill courses", "career advice", "popular searches".
- **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
- **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.