New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Fix Accessibility

by Endava in Endava/BEEQ

Audit and fix WCAG 2.1 Level AA accessibility issues in BEEQ StencilJS components.

Apache-2.0Auto-check passedFrontend & Design

Install Fix Accessibility

skills CLI
$ npx skills add Endava/BEEQ --skill fix-accessibility -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Endava/BEEQ fix-accessibility --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Endava/BEEQ.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/fix-accessibility .claude/skills/fix-accessibility && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
fix-accessibility
GitHub stars
163
Token cost
~1.9k tokens
SKILL.md length
656 words
Files
1
Skills in repo
9
Repo updated
First seen
Licence
Apache-2.0

At a glance

Audit and fix WCAG 2.1 Level AA accessibility issues in BEEQ StencilJS components.

  • Works in 9 steps: Semantic HTML → Labels & Descriptions → Roles → …
  • : adding missing ARIA attributes
  • SKILL.md covers When to Use, Before You Start, Audit Checklist and Implementation Patterns, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Fix Accessibility is an agent skill from Endava/BEEQ. Audit and fix WCAG 2.1 Level AA accessibility issues in BEEQ StencilJS components. Use for: adding missing ARIA attributes, fixing keyboard navigation, managing focus, fixing color contrast issues, adding screen reader support, fixing role usage, and writing accessibility-related E2E tests for bq- components.

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Accessibility. The repository describes itself as: BEEQ Design System, a web component library ruled by Endavan developers :). The licence is Apache-2.0.

When your agent uses it

  • : adding missing ARIA attributes
  • Fixing keyboard navigation
  • Fixing color contrast issues
  • Adding screen reader support

Example prompts

  • “/fix-accessibility”

Workflow steps

9 steps, taken from the step headings in SKILL.md.

  1. Semantic HTML
  2. Labels & Descriptions
  3. Roles
  4. State Attributes
  5. Keyboard Navigation
  6. Focus Management
  7. Live Regions
  8. Color & Contrast
  9. Screen reader support

What it can do on your machine

Read from SKILL.md and the folder at commit 5f4728d. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Fix Accessibility loads about 1.9k tokens when it runs. Until then it costs about 82 tokens; SKILL.md has 656 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~82
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Endava/BEEQ at commit 5f4728d, republished under its Apache-2.0 licence (© Endava). 656 words, ~1,861 tokens.

Download SKILL.mdSave it as .claude/skills/fix-accessibility/SKILL.md (or your agent's skills folder).
name
fix-accessibility
description
Audit and fix WCAG 2.1 Level AA accessibility issues in BEEQ StencilJS components. Use for: adding missing ARIA attributes, fixing keyboard navigation, managing focus, fixing color contrast issues, adding screen reader support, fixing role usage, and writing accessibility-related E2E tests for bq-* components.
argument-hint
Component name or path (e.g. "bq-button" or packages/beeq/src/components/button/bq-button.tsx)
metadata.internal
true

Fix Accessibility in a BEEQ Component

When to Use

  • A component fails an accessibility audit or axe scan
  • A PR review flagged missing ARIA attributes
  • Keyboard navigation is broken or incomplete
  • Screen reader announces incorrect role, state, or label
  • Focus is lost after a user interaction

Before You Start

  1. Read the accessibility instructions
  2. Read the component's .tsx to understand its current HTML structure and shadow DOM
  3. Note which semantic HTML elements are used and whether shadow DOM parts are exposed

Audit Checklist

Work through each category in order:

1. Semantic HTML
  • Interactive elements use native elements: <button>, <a href>, <input>, <select>, <textarea>
  • Use <button> for actions, <a> for navigation
  • Heading levels are not skipped inside complex components
  • <label> elements are associated to inputs via htmlFor / slotting, or aria-label/aria-labelledby
  • Use <ul>/<li> for lists, <nav> for navigation regions, <main>, <header>, <footer> for landmarks
  • Do not add role="button" to a <div> when a <button> can be used instead
2. Labels & Descriptions
  • Every interactive element has an accessible name:
    • Visible text content, or
    • aria-label (short, direct), or
    • aria-labelledby pointing to a visible label element, or
    • title (last resort)
  • Icon-only buttons must expose a label prop and apply aria-label to the inner button
  • Form inputs are associated with a <label> or have aria-labelledby
  • Helper/error text is linked via aria-describedby
3. Roles
  • Apply role only when native semantics are insufficient
  • Common patterns:
    • role="dialog" + aria-modal="true" for modal dialogs
    • role="alert" or role="status" for live notifications
    • role="tooltip" for tooltip elements (paired with aria-describedby)
    • role="tab" / role="tablist" / role="tabpanel" for tab components
    • role="menu" / role="menuitem" for dropdown menus
    • role="listbox" / role="option" for custom selects
4. State Attributes

Reflect interactive state with ARIA:

StateAttribute
Open/closed (accordion, drawer, dropdown)aria-expanded="true/false"
Selected (tab, option)aria-selected="true/false"
Checked (checkbox, radio, toggle)aria-checked="true/false"
Disabledaria-disabled="true" (in addition to disabled where needed)
Requiredaria-required="true"
Invalidaria-invalid="true" + aria-describedby pointing to error message
Busy/loadingaria-busy="true"
Hidden decorative elementsaria-hidden="true"
5. Keyboard Navigation
Component typeExpected keyboard behavior
ButtonEnter and Space activate
LinkEnter activates
Checkbox / ToggleSpace toggles
AccordionEnter/Space expand; Tab moves between items
Select / ListboxEnter/Space open; Arrow keys navigate options; Escape closes
Dialog / DrawerEscape closes; focus trapped inside while open
TabsArrow keys move between tabs; Tab moves to tab panel
Date pickerArrow keys navigate calendar; Escape closes

Implement keyboard handling with @Listen('keydown') or inline onKeyDown. Use event.key values, not event.keyCode.

Show full SKILL.md (268 more words)Show less
6. Focus Management
  • Focus is not lost after a state change (e.g. after submitting, after closing a dialog)
  • On dialog/drawer open: move focus to the first focusable element inside
  • On dialog/drawer close: return focus to the trigger element
  • Use shadow: { delegatesFocus: true } in @Component({}) for components that wrap native inputs
  • Avoid tabindex values > 0; use tabindex="0" or -1 only
7. Live Regions
  • Notifications and status messages use role="alert" (assertive) or role="status" (polite)
  • Do not change role or aria-live dynamically — set it on the static element
8. Color & Contrast
  • Color is not the only means of conveying state (error, success, disabled, selected)
  • Text and interactive elements meet WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text and UI)
  • Focus indicators meet the minimum contrast ratio against adjacent colors
  • prefers-reduced-motion is respected for animations and transitions (via CSS @media (prefers-reduced-motion: reduce))
9. Screen reader support
  • Dynamic content changes are announced via aria-live regions or via role="status" / role="alert"
  • Icon-only elements have a visually hidden text alternative or aria-label
  • Images used for content have meaningful alt attributes; decorative images use alt=""
  • Loading states are communicated (e.g., aria-busy="true" while content loads)

Implementation Patterns

Icon-only button
tsx
// In template:
<button
  aria-label={this.label}
  aria-disabled={this.disabled ? 'true' : undefined}
>
  <slot />
</button>

// In @Prop():
/** Accessible label for screen readers. Required when the button contains only an icon. */
@Prop({ reflect: true }) label?: string;
Expandable element
tsx
<div
  role="button"
  aria-expanded={this.open ? 'true' : 'false'}
  aria-controls="panel-id"
  tabindex="0"
  onKeyDown={this.handleKeyDown}
>
Error-linked input
tsx
<input
  aria-describedby={this.hasError ? `${this.name}-error` : undefined}
  aria-invalid={this.hasError ? 'true' : undefined}
/>
{this.hasError && (
  <span id={`${this.name}-error`} role="alert">{this.errorMessage}</span>
)}

Writing Accessibility Tests

After fixing, add E2E assertions (see write-e2e-tests skill):

tsx
it('should have aria-label on icon-only button', async () => {
  const { root } = await render(<bq-button only-icon label="Close" />);
  const btn = (root as HTMLBqButtonElement).shadowRoot?.querySelector<HTMLButtonElement>('[part="button"]');
  expect(btn).toEqualAttribute('aria-label', 'Close');
});

it('should have aria-expanded when open', async () => {
  const { root, setProps } = await render(<bq-accordion />);
  await setProps({ open: true });
  const base = (root as HTMLBqAccordionElement).shadowRoot?.querySelector('[part="header"]');
  expect(base).toEqualAttribute('aria-expanded', 'true');
});

Report format

Issues

List each problem with:

  • Element / prop / line — location of the issue (markdown link, workspace-relative path).
  • WCAG criterion — which criterion is violated (e.g. 1.3.1, 4.1.2).
  • Severity — critical (blocks assistive technology) | serious (significant barrier) | moderate (inconvenience) | minor.
  • Fix — the concrete change needed.
Recommendations

Additional improvements that are not violations but would improve the experience for users of assistive technology.

© Endava, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/fix-accessibility of Endava/BEEQ.

Open the folder on GitHubat commit 5f4728d

Compare with similar skills

Fix Accessibility next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Fix Accessibility compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Fix Accessibility this skillEndava/BEEQ163—~1.9kAutomated safety check: PassApache-2.0
Web Interface Guidelines Reviewervercel-labs/openreview1.7k98 repos~308Automated safety check: PassNone
Accessibility Reviewmarkmead/hyperui12k1 repos~1.1kAutomated safety check: PassMIT
Web Animation DesignbaptisteArno/typebot.io11k2 repos~2.7kAutomated safety check: PassCustom licence
Accessibility Fixeribelick/ui-skills9.5k4 repos~1.2kAutomated safety check: PassMIT
Wcag Audit PatternsvmDeshpande/ai-agent-automation17811 repos~610Automated safety check: PassApache-2.0

Similar skills

  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 98 repos~308 tokens
    Frontend & DesignAuto-check passed

  • Accessibility Review

    markmead/hyperui

    Run a WCAG 2.1 AA accessibility audit on a design or page. An agent skill from markmead/hyperui.

    12k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed

  • Web Animation Design

    baptisteArno/typebot.io

    Guides easing, timing and animation choices for UI motion, based on a web animation course, and reviews existing animations in a before-and-after table.

    11k GitHub starsUsed in 2 repos~2.7k tokens
    Frontend & DesignAuto-check passed

  • Accessibility Fixer

    ibelick/ui-skills

    Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.

    9.5k GitHub starsUsed in 4 repos~1.2k tokens
    Frontend & DesignAuto-check passed

  • Wcag Audit Patterns

    vmDeshpande/ai-agent-automation

    Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.

    178 GitHub starsUsed in 11 repos~610 tokens
    Frontend & DesignAuto-check passed

  • Baseline UI

    ibelick/ui-skills

    Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.

    9.5k GitHub starsUsed in 8 repos~855 tokens
    Frontend & DesignAuto-check passed

More from Endava/BEEQ

All 9 skills in this repo

  • Beeq

    Endava/BEEQ

    Builds, styles, and reviews UI with BEEQ, Endava's web-component design system.

    163 GitHub stars~5.6k tokensUpdated today
    Auto-check passed

  • Create Component

    Endava/BEEQ

    Create a new BEEQ StencilJS web component. An agent skill from Endava/BEEQ.

    163 GitHub stars~1.5k tokensUpdated today
    Auto-check passed

  • Review Component

    Endava/BEEQ

    Review a BEEQ StencilJS component against design system guidelines and project standards.

    163 GitHub stars~1.7k tokensUpdated today
    Auto-check passed

  • Write E2E Tests

    Endava/BEEQ

    Write E2E tests for BEEQ StencilJS components using @stencil/vitest in browser mode (Playwright/Chromium).

    163 GitHub stars~1.3k tokensUpdated today
    Auto-check passed

  • Write Stories

    Endava/BEEQ

    Write Storybook stories and MDX docs for BEEQ web components.

    163 GitHub stars~968 tokensUpdated today
    Auto-check passed

  • Write Unit Tests

    Endava/BEEQ

    Write Vitest unit tests for BEEQ shared utilities. An agent skill from Endava/BEEQ.

    163 GitHub stars~795 tokensUpdated today
    Auto-check passed

Categories

Questions about Fix Accessibility

What does Fix Accessibility do?

Audit and fix WCAG 2.1 Level AA accessibility issues in BEEQ StencilJS components. Fix Accessibility is an agent skill from Endava/BEEQ.1 Level AA accessibility issues in BEEQ StencilJS components.

When should I use Fix Accessibility?

Fix Accessibility fits situations like: : adding missing ARIA attributes; fixing keyboard navigation; fixing color contrast issues; adding screen reader support.

How do I install Fix Accessibility in Claude Code?

Run `npx skills add Endava/BEEQ --skill fix-accessibility -a claude-code`. Or copy the skill folder (.agents/skills/fix-accessibility in Endava/BEEQ) into .claude/skills/fix-accessibility in your project. Claude Code loads it when a task matches its description.

How do I install Fix Accessibility in Codex?

Run `npx skills add Endava/BEEQ --skill fix-accessibility -a codex`. Or copy the skill folder (.agents/skills/fix-accessibility in Endava/BEEQ) into .agents/skills/fix-accessibility in your project. Codex loads it when a task matches its description.

Can I use Fix Accessibility in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Endava/BEEQ --skill fix-accessibility -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/fix-accessibility, .gemini/skills/fix-accessibility, .github/skills/fix-accessibility and .opencode/skills/fix-accessibility in your project.

What does Fix Accessibility need to run?

SKILL.md names no scripts, command-line tools or credentials: Fix Accessibility is instructions for the agent only.

Does Fix Accessibility access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Fix Accessibility safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Fix Accessibility use?

Fix Accessibility is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Fix Accessibility use?

About 1.9k tokens (SKILL.md is roughly 7.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Fix Accessibility?

Skills that share tags, products or a category with Fix Accessibility: Web Interface Guidelines Reviewer (vercel-labs/openreview, 1.7k stars), Accessibility Review (markmead/hyperui, 12k stars), Web Animation Design (baptisteArno/typebot.io, 11k stars) and Accessibility Fixer (ibelick/ui-skills, 9.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Fix Accessibility?

Endava (a GitHub organization) maintains it in Endava/BEEQ, which has 163 GitHub stars. The repository holds 9 skills in this directory. The repository was last updated on October 8, 2026.

Source: Endava/BEEQ on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.