Skill Guide

Accessible data visualization and chart design

The practice of designing data graphics that are perceivable, understandable, and usable by people with diverse abilities, including those with visual, cognitive, or motor impairments.

It ensures regulatory compliance (like WCAG, ADA), expands audience reach, and minimizes the risk of misinterpretation in critical decision-making contexts. This directly impacts stakeholder trust and reduces legal and reputational exposure.

1 Careers

1 Categories

9.1 Avg Demand

15% Avg AI Risk

How to Learn Accessible data visualization and chart design

Focus on foundational principles: 1) Perceivability (contrast ratios, alt text, non-color encoding). 2) Understandability (clear labels, legends, simple chart types). 3) Interoperability (keyboard navigation, screen reader compatibility in digital formats).

Apply principles to real data: Move from static to interactive charts. Test designs with simulation tools (e.g., color blindness simulators). Common mistake: Assuming accessibility only applies to the blind; also consider dyslexia, low vision, and motor impairments.

Architect accessible visualization systems: Integrate accessibility checks into data pipeline CI/CD. Design scalable component libraries with built-in ARIA roles and annotations. Mentor teams on semantic markup for charts (e.g., using `` and `` in SVG).</div> </div> </div> </section>  <section class="content-section" aria-labelledby="projects-heading" data-astro-cid-3mokt3zu> <h2 id="projects-heading" class="section-heading" data-astro-cid-3mokt3zu> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" data-astro-cid-3mokt3zu> <rect x="2" y="4" width="16" height="13" rx="2" stroke="currentColor" stroke-width="1.6" data-astro-cid-3mokt3zu></rect> <path d="M6 8h8M6 11h5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" data-astro-cid-3mokt3zu></path> <path d="M7 2v2M13 2v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" data-astro-cid-3mokt3zu></path> </svg> Practice Projects </h2> <div class="project-level-group" data-astro-cid-3mokt3zu> <div class="project-level-badge project-level-badge--beginner" data-astro-cid-3mokt3zu>Beginner</div> <div class="project-cards" data-astro-cid-3mokt3zu> <div class="project-card" data-astro-cid-3mokt3zu> <div class="project-card-header" data-astro-cid-3mokt3zu> <span class="project-type" data-astro-cid-3mokt3zu>Project</span> <h3 class="project-title" data-astro-cid-3mokt3zu>Redesign a Public Dashboard for WCAG 2.1 AA Compliance</h3> </div> <div class="project-scenario" data-astro-cid-3mokt3zu> <p class="project-scenario-label" data-astro-cid-3mokt3zu>Scenario</p> <p data-astro-cid-3mokt3zu>A local government public health dashboard uses only color to distinguish COVID-19 case trends (red) from vaccination rates (green).</p> </div> <details class="project-steps" data-astro-cid-3mokt3zu> <summary class="project-steps-toggle" data-astro-cid-3mokt3zu>How to Execute</summary> <div class="project-steps-content" data-astro-cid-3mokt3zu>1. Audit the existing dashboard using an automated tool (e.g., axe DevTools). 2. Add pattern fills (stripes, dots) to the color-coded lines. 3. Write descriptive alt text for the entire chart summarizing key trends. 4. Test with a screen reader (NVDA/VoiceOver).</div> </details> </div> </div> </div><div class="project-level-group" data-astro-cid-3mokt3zu> <div class="project-level-badge project-level-badge--intermediate" data-astro-cid-3mokt3zu>Intermediate</div> <div class="project-cards" data-astro-cid-3mokt3zu> <div class="project-card" data-astro-cid-3mokt3zu> <div class="project-card-header" data-astro-cid-3mokt3zu> <span class="project-type" data-astro-cid-3mokt3zu>Case Study/Exercise</span> <h3 class="project-title" data-astro-cid-3mokt3zu>Build an Accessible Interactive Scatter Plot</h3> </div> <div class="project-scenario" data-astro-cid-3mokt3zu> <p class="project-scenario-label" data-astro-cid-3mokt3zu>Scenario</p> <p data-astro-cid-3mokt3zu>A financial services firm needs to present client portfolio data interactively, but some advisors have color vision deficiencies.</p> </div> <details class="project-steps" data-astro-cid-3mokt3zu> <summary class="project-steps-toggle" data-astro-cid-3mokt3zu>How to Execute</summary> <div class="project-steps-content" data-astro-cid-3mokt3zu>1. Use a library like D3.js or Plotly that supports ARIA. 2. Implement keyboard controls to navigate data points (arrow keys). 3. On focus, display a tooltip with all relevant data (not just a color legend). 4. Provide a data table as a toggleable alternative view.</div> </details> </div> </div> </div><div class="project-level-group" data-astro-cid-3mokt3zu> <div class="project-level-badge project-level-badge--advanced" data-astro-cid-3mokt3zu>Advanced</div> <div class="project-cards" data-astro-cid-3mokt3zu> <div class="project-card" data-astro-cid-3mokt3zu> <div class="project-card-header" data-astro-cid-3mokt3zu> <span class="project-type" data-astro-cid-3mokt3zu>Project</span> <h3 class="project-title" data-astro-cid-3mokt3zu>Design an Enterprise Data Visualization Design System</h3> </div> <div class="project-scenario" data-astro-cid-3mokt3zu> <p class="project-scenario-label" data-astro-cid-3mokt3zu>Scenario</p> <p data-astro-cid-3mokt3zu>A multinational corporation requires consistent, accessible reporting across all divisions and regions.</p> </div> <details class="project-steps" data-astro-cid-3mokt3zu> <summary class="project-steps-toggle" data-astro-cid-3mokt3zu>How to Execute</summary> <div class="project-steps-content" data-astro-cid-3mokt3zu>1. Establish a core library of 10-15 chart types, each with mandated color palettes (min 4.5:1 contrast), shape encodings, and ARIA annotations. 2. Create automated test suites that check for accessibility violations in rendered charts. 3. Develop a decision tree to guide designers on when to use a chart versus a data table. 4. Integrate the system into the company's UI toolkit (e.g., Figma, Storybook).</div> </details> </div> </div> </div> </section>  <section class="content-section" aria-labelledby="tools-heading" data-astro-cid-3mokt3zu> <h2 id="tools-heading" class="section-heading" data-astro-cid-3mokt3zu> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" data-astro-cid-3mokt3zu> <path d="M14.5 3.5a3 3 0 010 4.243l-7.071 7.07a3 3 0 01-4.243-4.242L10.257 3.5a3 3 0 014.243 0z" stroke="currentColor" stroke-width="1.6" data-astro-cid-3mokt3zu></path> <path d="M5 15l.5.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" data-astro-cid-3mokt3zu></path> </svg> Tools & Frameworks </h2> <div class="tools-grid" data-astro-cid-3mokt3zu> <div class="tool-group" data-astro-cid-3mokt3zu> <h3 class="tool-group-title" data-astro-cid-3mokt3zu>Design & Prototyping</h3> <div class="tool-tags" data-astro-cid-3mokt3zu> <span class="tool-tag" data-astro-cid-3mokt3zu>Figma (with Stark plugin)</span><span class="tool-tag" data-astro-cid-3mokt3zu>Adobe XD (Accessibility Checker)</span><span class="tool-tag" data-astro-cid-3mokt3zu>Color Oracle (color blindness simulator)</span> </div> <p class="tool-group-desc" data-astro-cid-3mokt3zu>Used in the design phase to simulate impairments and test contrast ratios before development begins.</p> </div><div class="tool-group" data-astro-cid-3mokt3zu> <h3 class="tool-group-title" data-astro-cid-3mokt3zu>Development Libraries & Standards</h3> <div class="tool-tags" data-astro-cid-3mokt3zu> <span class="tool-tag" data-astro-cid-3mokt3zu>D3.js + d3-accessibility</span><span class="tool-tag" data-astro-cid-3mokt3zu>Plotly.js (built-in ARIA support)</span><span class="tool-tag" data-astro-cid-3mokt3zu>WCAG 2.1 Guidelines</span><span class="tool-tag" data-astro-cid-3mokt3zu>SVG `<title>` and `<desc>` elements</span> </div> <p class="tool-group-desc" data-astro-cid-3mokt3zu>The technical toolkit for building accessible charts. D3 with plugins allows for custom, keyboard-navigable interactions. WCAG provides the compliance benchmark.</p> </div><div class="tool-group" data-astro-cid-3mokt3zu> <h3 class="tool-group-title" data-astro-cid-3mokt3zu>Testing & Validation</h3> <div class="tool-tags" data-astro-cid-3mokt3zu> <span class="tool-tag" data-astro-cid-3mokt3zu>axe DevTools (browser extension)</span><span class="tool-tag" data-astro-cid-3mokt3zu>NVDA Screen Reader</span><span class="tool-tag" data-astro-cid-3mokt3zu>VoiceOver (macOS)</span><span class="tool-tag" data-astro-cid-3mokt3zu>Paciello Group Colour Contrast Analyser</span> </div> <p class="tool-group-desc" data-astro-cid-3mokt3zu>Essential for the final validation phase. Automated tools catch ~30% of issues; manual testing with assistive technology is non-negotiable for true compliance.</p> </div> </div> </section>  <section class="content-section" aria-labelledby="interview-heading" data-astro-cid-3mokt3zu> <h2 id="interview-heading" class="section-heading" data-astro-cid-3mokt3zu> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" data-astro-cid-3mokt3zu> <circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="1.6" data-astro-cid-3mokt3zu></circle> <path d="M10 9v5M10 7v.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" data-astro-cid-3mokt3zu></path> </svg> Interview Questions </h2> <div class="interview-list" x-data data-astro-cid-3mokt3zu> <div class="iq-item" x-data="{ open: false }" data-astro-cid-3mokt3zu> <button class="iq-trigger" x-on:click="open = !open" x-bind:aria-expanded="open" type="button" data-astro-cid-3mokt3zu> <span class="iq-num" data-astro-cid-3mokt3zu>Q1</span> <span class="iq-question" data-astro-cid-3mokt3zu>Walk me through how you would make a complex, multi-series line chart accessible to someone with protanopia (red-blind).</span> <svg class="iq-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true" x-bind:style="open ? 'transform:rotate(180deg)' : ''" data-astro-cid-3mokt3zu> <path d="M4 6l4 4 4-4" stroke-linecap="round" stroke-linejoin="round" data-astro-cid-3mokt3zu></path> </svg> </button> <div class="iq-answer" x-show="open" x-transition:enter="tab-enter" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" data-astro-cid-3mokt3zu> <p class="iq-answer-label" data-astro-cid-3mokt3zu>Answer Strategy</p> <p data-astro-cid-3mokt3zu>Demonstrate knowledge of redundant visual encoding. 'I would first ensure the color palette uses high-luminance contrast colors that are distinct even without red perception. I'd add a second visual channel-like different line styles (solid, dashed, dotted) or direct labeling at the line endpoints. For digital output, I'd implement keyboard navigation to cycle through series, with a screen reader announcement of the series name and value on focus.'</p> </div> </div><div class="iq-item" x-data="{ open: false }" data-astro-cid-3mokt3zu> <button class="iq-trigger" x-on:click="open = !open" x-bind:aria-expanded="open" type="button" data-astro-cid-3mokt3zu> <span class="iq-num" data-astro-cid-3mokt3zu>Q2</span> <span class="iq-question" data-astro-cid-3mokt3zu>A stakeholder insists a pie chart is essential for their executive summary, but you know it's inaccessible. How do you handle this?</span> <svg class="iq-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true" x-bind:style="open ? 'transform:rotate(180deg)' : ''" data-astro-cid-3mokt3zu> <path d="M4 6l4 4 4-4" stroke-linecap="round" stroke-linejoin="round" data-astro-cid-3mokt3zu></path> </svg> </button> <div class="iq-answer" x-show="open" x-transition:enter="tab-enter" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" data-astro-cid-3mokt3zu> <p class="iq-answer-label" data-astro-cid-3mokt3zu>Answer Strategy</p> <p data-astro-cid-3mokt3zu>Test negotiation and data communication skills. 'I'd first validate their goal: a pie chart shows part-to-whole relationship. I'd propose a more accessible alternative-a stacked bar chart or a simple table with percentages-that communicates the same information more precisely. I'd present a side-by-side comparison showing how the alternative performs better under WCAG guidelines and is easier to compare values. If they remain insistent, I'd build the pie chart but mandate a direct-labeling fallback data table immediately below it.'</p> </div> </div> </div> </section>  <section class="content-section" aria-labelledby="careers-heading" data-astro-cid-3mokt3zu> <h2 id="careers-heading" class="section-heading" data-astro-cid-3mokt3zu> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" data-astro-cid-3mokt3zu> <rect x="2" y="3" width="16" height="14" rx="2" stroke="currentColor" stroke-width="1.6" data-astro-cid-3mokt3zu></rect> <path d="M6 7h8M6 10h5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" data-astro-cid-3mokt3zu></path> </svg> Careers That Require Accessible data visualization and chart design </h2> <div class="skill-controls" data-astro-cid-3mokt3zu> <div class="search-box" data-astro-cid-3mokt3zu> <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true" data-astro-cid-3mokt3zu> <circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" stroke-width="1.5" data-astro-cid-3mokt3zu></circle> <path d="M10 10l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" data-astro-cid-3mokt3zu></path> </svg> <input type="search" id="skill-search-input" placeholder="Search careers..." class="search-input" autocomplete="off" data-astro-cid-3mokt3zu> <button type="button" id="skill-search-clear" class="search-clear-btn" hidden aria-label="Clear search" data-astro-cid-3mokt3zu> <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true" data-astro-cid-3mokt3zu> <path d="M2 2l10 10M12 2L2 12" stroke-linecap="round" data-astro-cid-3mokt3zu></path> </svg> </button> </div> <p class="results-count" id="skill-results-count" data-astro-cid-3mokt3zu>1 career found</p> </div> <div id="skill-careers-container" data-astro-cid-3mokt3zu> <div class="cat-group" data-category="AI Design & Creative" data-astro-cid-3mokt3zu> <h3 class="cat-group-title" data-astro-cid-3mokt3zu> <a href="/categories/ai-design-&-creative" data-astro-cid-3mokt3zu>AI Design & Creative</a> <span class="cat-group-count" data-astro-cid-3mokt3zu>1</span> </h3> <div class="cat-careers-grid" data-astro-cid-3mokt3zu> <div class="skill-career-item" data-name="ai accessibility design specialist" data-summary="ai accessibility design specialists ensure that ai-powered products, interfaces, and content are usable by people of all abilities, including those with visual, auditory, motor, and cognitive disabilities. this role sits at the intersection of inclusive design, assistive technology, and ai engineering - making it one of the most socially impactful and legally critical specializations in the modern product landscape. it is ideal for designers and engineers who care deeply about equitable access and want to shape how ai serves every human being." data-category="AI Design & Creative" data-astro-cid-3mokt3zu> <article class="career-card card " itemscope itemtype="https://schema.org/Occupation" data-astro-cid-dwqkuxfj> <a href="/careers/ai-accessibility-design-specialist" class="career-card-link" aria-label="AI Accessibility Design Specialist career guide" data-astro-cid-dwqkuxfj>  <div class="career-card-header" data-astro-cid-dwqkuxfj> <span class="career-category" data-astro-cid-dwqkuxfj>AI Design & Creative</span> <span class="career-diff-pill diff-intermediate" data-astro-cid-dwqkuxfj>Intermediate</span> </div>  <h3 class="career-title" itemprop="name" data-astro-cid-dwqkuxfj>AI Accessibility Design Specialist</h3>  <p class="career-summary" data-astro-cid-dwqkuxfj>AI Accessibility Design Specialists ensure that AI-powered products, interfaces, and content are usable by people of all abilities…</p>  <div class="career-stats" data-astro-cid-dwqkuxfj>  <div class="stat-item" data-astro-cid-dwqkuxfj> <span class="stat-label" data-astro-cid-dwqkuxfj>Demand</span> <span class="stat-val demand-high" aria-label="Demand score 9.1 out of 10" data-astro-cid-dwqkuxfj> 9.1<span class="stat-unit" data-astro-cid-dwqkuxfj>/10</span> </span> </div>  <div class="stat-item" data-astro-cid-dwqkuxfj> <span class="stat-label" data-astro-cid-dwqkuxfj>AI Risk</span> <span class="stat-risk risk-badge risk-low" aria-label="AI replacement risk 15%" data-astro-cid-dwqkuxfj> 15% </span> </div>  <div class="stat-item stat-item--salary" data-astro-cid-dwqkuxfj> <span class="stat-label" data-astro-cid-dwqkuxfj>Salary</span> <span class="stat-salary" itemprop="estimatedSalary" data-astro-cid-dwqkuxfj>$95,000-$170,000/yr</span> </div> </div>  <div class="career-skills" aria-label="Core skills" data-astro-cid-dwqkuxfj> <span class="skill-tag" data-astro-cid-dwqkuxfj>WCAG 2.2 and WAI-ARIA authoring best practices</span><span class="skill-tag" data-astro-cid-dwqkuxfj>Multimodal interaction design (voice, gesture, haptic, visual)</span><span class="skill-tag" data-astro-cid-dwqkuxfj>Screen reader and assistive technology proficiency (JAWS, NVDA, VoiceOver, TalkBack)</span><span class="skill-tag" data-astro-cid-dwqkuxfj>LLM output evaluation for cognitive accessibility and plain language</span> <span class="skill-tag skill-tag--more" data-astro-cid-dwqkuxfj>+8</span> </div>  <div class="career-card-footer" data-astro-cid-dwqkuxfj> <div class="career-meta-flags" data-astro-cid-dwqkuxfj> <span class="meta-flag" data-astro-cid-dwqkuxfj> <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true" data-astro-cid-dwqkuxfj> <path d="M6 1C3.24 1 1 3.24 1 6s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0 1a4 4 0 110 8A4 4 0 016 2z" data-astro-cid-dwqkuxfj></path> </svg> Remote </span> <span class="meta-flag meta-flag--code" data-astro-cid-dwqkuxfj> <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true" data-astro-cid-dwqkuxfj> <path d="M4 3L1 6l3 3M8 3l3 3-3 3" stroke-linecap="round" stroke-linejoin="round" data-astro-cid-dwqkuxfj></path> </svg> Requires Coding </span> <span class="meta-flag" data-astro-cid-dwqkuxfj> <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true" data-astro-cid-dwqkuxfj> <circle cx="6" cy="6" r="4" data-astro-cid-dwqkuxfj></circle><path d="M6 4v2.5L8 8" stroke-linecap="round" data-astro-cid-dwqkuxfj></path> </svg> 8mo </span> </div> <span class="career-cta" aria-hidden="true" data-astro-cid-dwqkuxfj> View Guide <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true" data-astro-cid-dwqkuxfj> <path d="M2.5 7h9M7.5 3l4 4-4 4" stroke-linecap="round" stroke-linejoin="round" data-astro-cid-dwqkuxfj></path> </svg> </span> </div> </a> </article> </div> </div> </div> </div> <div class="no-results" id="skill-no-results" hidden data-astro-cid-3mokt3zu> <div class="no-results-icon" aria-hidden="true" data-astro-cid-3mokt3zu>🔍</div> <h2 data-astro-cid-3mokt3zu>No careers found</h2> <p data-astro-cid-3mokt3zu>Try a different search term.</p> </div> <nav class="pagination" id="skill-pagination" aria-label="Skills pagination" data-astro-cid-3mokt3zu> <ul class="pagination-list" id="skill-pagination-list" data-astro-cid-3mokt3zu></ul> <p class="pagination-info" id="skill-pagination-info" data-astro-cid-3mokt3zu></p> </nav> </section> </div>  <aside class="skill-sidebar" aria-label="Skill details" data-astro-cid-3mokt3zu> <div class="sidebar-card sidebar-card--salary" data-astro-cid-3mokt3zu> <h2 class="sidebar-title" data-astro-cid-3mokt3zu> <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true" data-astro-cid-3mokt3zu> <circle cx="7" cy="7" r="6" stroke="currentColor" stroke-width="1.4" data-astro-cid-3mokt3zu></circle> <path d="M7 4v6M5 5.5h2.5a1 1 0 010 2H6a1 1 0 000 2H9" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" data-astro-cid-3mokt3zu></path> </svg> Salary Impact </h2> <p class="salary-text" data-astro-cid-3mokt3zu>This is a high-leverage specialization. Proficiency can command a 10-20% premium over standard data visualization roles, especially in government, healthcare, finance, and SaaS product companies with global user bases. It signals a product-minded, risk-aware engineer/designer. For leadership roles (Head of Data Viz, Principal Designer), it's increasingly a hard requirement, not a nice-to-have.</p> </div> <div class="sidebar-card" data-astro-cid-3mokt3zu> <h2 class="sidebar-title" data-astro-cid-3mokt3zu>Skills Often Paired With Accessible data visualization and chart design</h2> <div class="co-skills" data-astro-cid-3mokt3zu> <a href="/skills/wcag-22-and-wai-aria-authoring-best-practices" class="co-skill-link" data-astro-cid-3mokt3zu> <span class="co-skill-name" data-astro-cid-3mokt3zu>WCAG 2.2 and WAI-ARIA authoring best practices</span> <span class="co-skill-count" data-astro-cid-3mokt3zu>1</span> </a><a href="/skills/multimodal-interaction-design-voice-gesture-haptic-visual" class="co-skill-link" data-astro-cid-3mokt3zu> <span class="co-skill-name" data-astro-cid-3mokt3zu>Multimodal interaction design (voice, gesture, haptic, visual)</span> <span class="co-skill-count" data-astro-cid-3mokt3zu>1</span> </a><a href="/skills/screen-reader-and-assistive-technology-proficiency-jaws-nvda-voiceover-talkback" class="co-skill-link" data-astro-cid-3mokt3zu> <span class="co-skill-name" data-astro-cid-3mokt3zu>Screen reader and assistive technology proficiency (JAWS, NVDA, VoiceOver, TalkBack)</span> <span class="co-skill-count" data-astro-cid-3mokt3zu>1</span> </a><a href="/skills/llm-output-evaluation-for-cognitive-accessibility-and-plain-language" class="co-skill-link" data-astro-cid-3mokt3zu> <span class="co-skill-name" data-astro-cid-3mokt3zu>LLM output evaluation for cognitive accessibility and plain language</span> <span class="co-skill-count" data-astro-cid-3mokt3zu>1</span> </a><a href="/skills/ai-generated-content-auditing-alt-text-quality-caption-accuracy-readability-scores" class="co-skill-link" data-astro-cid-3mokt3zu> <span class="co-skill-name" data-astro-cid-3mokt3zu>AI-generated content auditing (alt-text quality, caption accuracy, readability scores)</span> <span class="co-skill-count" data-astro-cid-3mokt3zu>1</span> </a><a href="/skills/inclusive-prototyping-with-ai-powered-design-tools-figma-ai-framer-ai-uizard" class="co-skill-link" data-astro-cid-3mokt3zu> <span class="co-skill-name" data-astro-cid-3mokt3zu>Inclusive prototyping with AI-powered design tools (Figma AI, Framer AI, Uizard)</span> <span class="co-skill-count" data-astro-cid-3mokt3zu>1</span> </a><a href="/skills/bias-and-fairness-assessment-for-disability-related-model-outputs" class="co-skill-link" data-astro-cid-3mokt3zu> <span class="co-skill-name" data-astro-cid-3mokt3zu>Bias and fairness assessment for disability-related model outputs</span> <span class="co-skill-count" data-astro-cid-3mokt3zu>1</span> </a><a href="/skills/vpat--acr-authoring-and-procurement-accessibility-compliance" class="co-skill-link" data-astro-cid-3mokt3zu> <span class="co-skill-name" data-astro-cid-3mokt3zu>VPAT / ACR authoring and procurement accessibility compliance</span> <span class="co-skill-count" data-astro-cid-3mokt3zu>1</span> </a><a href="/skills/python-scripting-for-automated-accessibility-testing-and-ai-pipeline-integration" class="co-skill-link" data-astro-cid-3mokt3zu> <span class="co-skill-name" data-astro-cid-3mokt3zu>Python scripting for automated accessibility testing and AI pipeline integration</span> <span class="co-skill-count" data-astro-cid-3mokt3zu>1</span> </a><a href="/skills/stakeholder-education-on-ai-accessibility-risks-and-mitigation-strategies" class="co-skill-link" data-astro-cid-3mokt3zu> <span class="co-skill-name" data-astro-cid-3mokt3zu>Stakeholder education on AI accessibility risks and mitigation strategies</span> <span class="co-skill-count" data-astro-cid-3mokt3zu>1</span> </a><a href="/skills/user-research-methodologies-inclusive-of-participants-with-disabilities" class="co-skill-link" data-astro-cid-3mokt3zu> <span class="co-skill-name" data-astro-cid-3mokt3zu>User research methodologies inclusive of participants with disabilities</span> <span class="co-skill-count" data-astro-cid-3mokt3zu>1</span> </a> </div> </div> <div class="sidebar-card" data-astro-cid-3mokt3zu> <h2 class="sidebar-title" data-astro-cid-3mokt3zu>Featured In Collections</h2> <div class="collections-links" data-astro-cid-3mokt3zu> <a href="/collections/ai-careers-for-developers" class="collection-skill-link" data-astro-cid-3mokt3zu> <span class="csl-icon" aria-hidden="true" data-astro-cid-3mokt3zu>💻</span> <span class="csl-name" data-astro-cid-3mokt3zu>AI Careers for Developers</span> </a><a href="/collections/fastest-growing-ai-careers" class="collection-skill-link" data-astro-cid-3mokt3zu> <span class="csl-icon" aria-hidden="true" data-astro-cid-3mokt3zu>📈</span> <span class="csl-name" data-astro-cid-3mokt3zu>Fastest Growing AI Careers</span> </a><a href="/collections/remote-friendly-ai-careers" class="collection-skill-link" data-astro-cid-3mokt3zu> <span class="csl-icon" aria-hidden="true" data-astro-cid-3mokt3zu>🌍</span> <span class="csl-name" data-astro-cid-3mokt3zu>Remote-Friendly AI Careers</span> </a><a href="/collections/lowest-ai-replacement-risk" class="collection-skill-link" data-astro-cid-3mokt3zu> <span class="csl-icon" aria-hidden="true" data-astro-cid-3mokt3zu>🛡️</span> <span class="csl-name" data-astro-cid-3mokt3zu>Lowest AI Replacement Risk</span> </a><a href="/collections/ai-careers-for-creatives" class="collection-skill-link" data-astro-cid-3mokt3zu> <span class="csl-icon" aria-hidden="true" data-astro-cid-3mokt3zu>🎨</span> <span class="csl-name" data-astro-cid-3mokt3zu>AI Careers for Creatives</span> </a> </div> </div> <div class="sidebar-card" data-astro-cid-3mokt3zu> <h2 class="sidebar-title" data-astro-cid-3mokt3zu>Quick Actions</h2> <div class="quick-links" data-astro-cid-3mokt3zu> <a href="/careers" class="quick-link" data-astro-cid-3mokt3zu>Browse All Careers</a> <a href="/skills" class="quick-link" data-astro-cid-3mokt3zu>Skills Library</a> <a href="/compare" class="quick-link" data-astro-cid-3mokt3zu>Compare Careers</a> </div> </div> </aside> </div> </div> </main> <footer class="site-footer" role="contentinfo" data-astro-cid-sz7xmlte> <div class="container" data-astro-cid-sz7xmlte> <div class="footer-grid footer-grid--5col" data-astro-cid-sz7xmlte>  <div class="footer-brand" data-astro-cid-sz7xmlte> <a href="/" class="footer-logo" aria-label="FutureVocation home" data-astro-cid-sz7xmlte> <svg width="24" height="24" viewBox="0 0 28 28" fill="none" aria-hidden="true" data-astro-cid-sz7xmlte> <rect width="28" height="28" rx="8" fill="url(#footer-logo-grad)" data-astro-cid-sz7xmlte></rect> <path d="M8 20V10l6-4 6 4v10" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none" data-astro-cid-sz7xmlte></path> <circle cx="14" cy="14" r="2.5" fill="white" data-astro-cid-sz7xmlte></circle> <defs data-astro-cid-sz7xmlte> <linearGradient id="footer-logo-grad" x1="0" y1="0" x2="28" y2="28" data-astro-cid-sz7xmlte> <stop stop-color="oklch(58% 0.22 265)" data-astro-cid-sz7xmlte></stop> <stop offset="1" stop-color="oklch(50% 0.22 265)" data-astro-cid-sz7xmlte></stop> </linearGradient> </defs> </svg> <span class="footer-logo-text" data-astro-cid-sz7xmlte>FutureVocation</span> </a> <p class="footer-tagline" data-astro-cid-sz7xmlte> Navigate Careers in the AI Era. Explore future-proof careers, skill graphs, interview systems, and learning roadmaps. </p> <p class="footer-copy" data-astro-cid-sz7xmlte>© 2026 FutureVocation. Navigate Careers in the AI Era.</p> </div>  <nav class="footer-nav" aria-label="Explore" data-astro-cid-sz7xmlte> <h3 class="footer-nav-title" data-astro-cid-sz7xmlte>Explore</h3> <ul role="list" data-astro-cid-sz7xmlte> <li data-astro-cid-sz7xmlte><a href="/careers" data-astro-cid-sz7xmlte>All Careers</a></li> <li data-astro-cid-sz7xmlte><a href="/careers/directory" data-astro-cid-sz7xmlte>A-Z Directory</a></li> <li data-astro-cid-sz7xmlte><a href="/category/ai-engineering" data-astro-cid-sz7xmlte>AI Engineering</a></li> <li data-astro-cid-sz7xmlte><a href="/category/ai-content" data-astro-cid-sz7xmlte>AI Content</a></li> <li data-astro-cid-sz7xmlte><a href="/category/ai-marketing" data-astro-cid-sz7xmlte>AI Marketing</a></li> <li data-astro-cid-sz7xmlte><a href="/skills" data-astro-cid-sz7xmlte>Skills Library</a></li> <li data-astro-cid-sz7xmlte><a href="/industry" data-astro-cid-sz7xmlte>Industries</a></li> </ul> </nav>  <nav class="footer-nav" aria-label="Collections" data-astro-cid-sz7xmlte> <h3 class="footer-nav-title" data-astro-cid-sz7xmlte>Collections</h3> <ul role="list" data-astro-cid-sz7xmlte> <li data-astro-cid-sz7xmlte><a href="/collections" data-astro-cid-sz7xmlte>All Collections</a></li> <li data-astro-cid-sz7xmlte><a href="/collections/highest-paying" data-astro-cid-sz7xmlte>💰 Highest Paying</a></li> <li data-astro-cid-sz7xmlte><a href="/collections/beginner-friendly" data-astro-cid-sz7xmlte>🟢 Beginner Friendly</a></li> <li data-astro-cid-sz7xmlte><a href="/collections/no-code" data-astro-cid-sz7xmlte>🚫 No Coding</a></li> <li data-astro-cid-sz7xmlte><a href="/collections/remote" data-astro-cid-sz7xmlte>🌍 Remote Careers</a></li> <li data-astro-cid-sz7xmlte><a href="/collections/ai-proof" data-astro-cid-sz7xmlte>🛡️ AI-Proof</a></li> </ul> </nav>  <nav class="footer-nav" aria-label="Tools" data-astro-cid-sz7xmlte> <h3 class="footer-nav-title" data-astro-cid-sz7xmlte>Tools</h3> <ul role="list" data-astro-cid-sz7xmlte> <li data-astro-cid-sz7xmlte><a href="/compare" data-astro-cid-sz7xmlte>Compare Careers</a></li> <li data-astro-cid-sz7xmlte><a href="/pivot" data-astro-cid-sz7xmlte>Career Pivot</a></li> <li data-astro-cid-sz7xmlte><a href="/interview" data-astro-cid-sz7xmlte>Interview Prep</a></li> <li data-astro-cid-sz7xmlte><a href="/roadmap" data-astro-cid-sz7xmlte>Learning Roadmaps</a></li> <li data-astro-cid-sz7xmlte><a href="/industry" data-astro-cid-sz7xmlte>Industries</a></li> <li data-astro-cid-sz7xmlte><a href="/rss.xml" data-astro-cid-sz7xmlte>RSS Feed</a></li> </ul> </nav>  <nav class="footer-nav" aria-label="Top careers" data-astro-cid-sz7xmlte> <h3 class="footer-nav-title" data-astro-cid-sz7xmlte>Top Careers</h3> <ul role="list" data-astro-cid-sz7xmlte> <li data-astro-cid-sz7xmlte><a href="/careers/ai-blog-automation-specialist" data-astro-cid-sz7xmlte>AI Blog Automation</a></li> <li data-astro-cid-sz7xmlte><a href="/careers/prompt-engineer" data-astro-cid-sz7xmlte>Prompt Engineer</a></li> <li data-astro-cid-sz7xmlte><a href="/careers/rag-engineer" data-astro-cid-sz7xmlte>RAG Engineer</a></li> <li data-astro-cid-sz7xmlte><a href="/careers/ai-seo-specialist" data-astro-cid-sz7xmlte>AI SEO Specialist</a></li> <li data-astro-cid-sz7xmlte><a href="/careers/ai-workflow-engineer" data-astro-cid-sz7xmlte>AI Workflow Engineer</a></li> <li data-astro-cid-sz7xmlte><a href="/careers/ai-agent-developer" data-astro-cid-sz7xmlte>AI Agent Developer</a></li> </ul> </nav> </div>  </div> </footer>  <button id="back-to-top" class="back-to-top" aria-label="Back to top" hidden data-astro-cid-5hce7sga> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" data-astro-cid-5hce7sga> <path d="M8 12V4M4 8l4-4 4 4" stroke-linecap="round" stroke-linejoin="round" data-astro-cid-5hce7sga></path> </svg> </button>  <script type="module" src="/_astro/Base.astro_astro_type_script_index_1_lang.CzI1vhkK.js"></script> <script type="module">const o=document.getElementById("back-to-top");if(o){const t=()=>{o.hidden=window.scrollY<400};window.addEventListener("scroll",t,{passive:!0}),t(),o.addEventListener("click",()=>window.scrollTo({top:0,behavior:"smooth"}))}</script>  <script src="/scripts/analytics-init.js" defer></script> </body> </html> <script type="module">let t={q:"",page:1};const c=20,p=document.getElementById("skill-search-input"),m=document.getElementById("skill-search-clear"),E=document.getElementById("skill-results-count"),w=document.getElementById("skill-no-results"),b=Array.from(document.querySelectorAll(".skill-career-item")),B=Array.from(document.querySelectorAll(".cat-group")),q=document.getElementById("skill-careers-container"),y=document.getElementById("skill-pagination"),k=document.getElementById("skill-pagination-list"),$=document.getElementById("skill-pagination-info");function M(){const n=new URLSearchParams(window.location.search);t.q=n.get("q")??"",t.page=parseInt(n.get("page")??"1",10)}function S(n){if(!y||!k||!$)return;const a=Math.ceil(n/c);if(a<=1){y.style.display="none";return}y.style.display="flex";let e="";const d=t.page<=1;e+=`<li><button class="pagination-link pagination-link--prev ${d?"pagination-link--disabled":""}" data-page="${t.page-1}" ${d?"disabled":""}> <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M7 9l-4-4 4-4" stroke-linecap="round" stroke-linejoin="round"/></svg> <span class="pagination-text">Prev</span></button></li>`;const r=7;let l=Math.max(1,t.page-Math.floor(r/2)),o=Math.min(a,l+r-1);o-l<r-1&&(l=Math.max(1,o-r+1)),l>1&&(e+='<li><button class="pagination-link" data-page="1">1</button></li>',l>2&&(e+='<li><span class="pagination-dots">...</span></li>'));for(let s=l;s<=o;s++)e+=`<li><button class="pagination-link ${s===t.page?"pagination-link--active":""}" data-page="${s}">${s}</button></li>`;o<a&&(o<a-1&&(e+='<li><span class="pagination-dots">...</span></li>'),e+=`<li><button class="pagination-link" data-page="${a}">${a}</button></li>`);const g=t.page>=a;e+=`<li><button class="pagination-link pagination-link--next ${g?"pagination-link--disabled":""}" data-page="${t.page+1}" ${g?"disabled":""}> <span class="pagination-text">Next</span> <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M5 3l4 4-4 4" stroke-linecap="round" stroke-linejoin="round"/></svg> </button></li>`,k.innerHTML=e,k.querySelectorAll("[data-page]").forEach(s=>{s.addEventListener("click",I=>{const v=I.currentTarget;if(v.disabled)return;const f=parseInt(v.dataset.page||"1",10);Math.ceil(b.filter(x=>x.style.display!=="none"||!0).length/c),!(f<1||f===t.page)&&(t.page=f,h(),window.scrollTo({top:0,behavior:"smooth"}))})});const i=(t.page-1)*c+1,u=Math.min(t.page*c,n);$.textContent=`Showing ${i}–${u} of ${n} results`}function h(){if(!q||!E||!w)return;const n=t.q.toLowerCase().trim(),a=[];b.forEach(i=>{const u=i.dataset.name??"",s=i.dataset.summary??"";(!n||u.includes(n)||s.includes(n))&&a.push(i)});const e=a.length,d=Math.ceil(e/c);t.page>d&&d>0&&(t.page=d),t.page<1&&(t.page=1);const r=(t.page-1)*c,l=a.slice(r,r+c);b.forEach(i=>{i.style.display="none"}),l.forEach(i=>{i.style.display=""}),B.forEach(i=>{const u=Array.from(i.querySelectorAll(".skill-career-item")).some(s=>s.style.display!=="none");i.style.display=u?"":"none"}),E.textContent=`${e} career${e!==1?"s":""} found`,w.hidden=e>0,q.style.display=e>0?"":"none",p&&m&&(p.value=t.q,m.hidden=!t.q),S(e);const o=new URLSearchParams;t.q&&o.set("q",t.q),t.page>1&&o.set("page",String(t.page));const g=o.toString();history.replaceState(null,"",g?`?${g}`:window.location.pathname)}if(p){let n;p.addEventListener("input",a=>{clearTimeout(n),n=window.setTimeout(()=>{t.q=a.target.value,t.page=1,h()},300)})}m&&m.addEventListener("click",()=>{t.q="",t.page=1,p&&(p.value="",p.focus()),h()});M();h();</script>