본문으로 건너뛰기
cccskills
무료GitHub에 공개

accessibility-auditing

Use Cursor's browser aria snapshots to audit a page for accessibility issues — missing labels, broken tab order, contrast, and ARIA misuse.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(1)

  • SKILL.md2.6 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Accessibility Auditing

Audit a web page for accessibility issues using Cursor's built-in browser without external tools.

Workflow

1. Open the Page

Use browser_navigate to open the target URL.

2. Capture the Accessibility Tree

Use browser_snapshot — this returns the aria/accessibility tree of the page. This is the same tree that screen readers use.

3. Audit the Tree

Check for these issues:

Missing Labels

  • button elements with no accessible name (no text, no aria-label)
  • img elements with no alt text
  • input elements with no associated label or aria-label
  • a (link) elements with no text content
  • Icon-only buttons missing aria-label

Semantic HTML

  • Clickable div or span elements → should be button or a
  • Missing nav, main, header, footer landmarks
  • Headings that skip levels (h1 → h3)
  • Lists that aren't using ul/ol/li

Keyboard Navigation

  • Interactive elements missing from tab order
  • Custom widgets without role and keyboard handlers
  • Focus traps in modals (should trap focus, but also allow Escape to close)
  • Skip-to-content link missing

ARIA Issues

  • aria-hidden="true" on focusable elements
  • Invalid role values
  • aria-expanded without corresponding collapsible content
  • aria-controls pointing to non-existent IDs

Contrast (use screenshot for visual check)

  • Light gray text on white backgrounds
  • Placeholder text that's too faint
  • Disabled states that are indistinguishable

4. Test Keyboard Navigation

Use browser_press to simulate Tab key presses and verify:

  • Every interactive element receives focus
  • Focus order is logical (top-to-bottom, left-to-right)
  • Focus is visible (focus ring or outline)
  • Escape closes modals/dropdowns

5. Report

Accessibility Audit:
  Critical:
    - 3 buttons with no accessible name (header icons)
    - Login form inputs missing labels
  Warnings:
    - Heading levels skip from h1 to h3
    - No skip-to-content link
    - 2 clickable divs should be buttons
  Passed:
    - All images have alt text
    - Landmarks present (nav, main, footer)
    - Focus order is logical

6. Fix

For each issue, apply the fix in the source code. Common fixes:

  • Add aria-label="Close" to icon buttons
  • Wrap inputs in <label> or add htmlFor
  • Change <div onClick> to <button>
  • Add alt text to images
  • Fix heading hierarchy

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Add PostHog analytics to a web application, including event tracking, page views, feature flags, and session replay.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

0xAidan/polymarket-bot-test42026년 9월 4일 업데이트

Generate OpenAPI/Swagger documentation for an API, including endpoint schemas, request/response types, and interactive docs UI.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

0xAidan/polymarket-bot-test42026년 9월 4일 업데이트

Add authentication to a web application using NextAuth.js (Auth.js), including OAuth providers, session management, and protected routes.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

0xAidan/polymarket-bot-test42026년 9월 4일 업데이트

Dockerize an application with a production-ready Dockerfile, docker-compose setup, and .dockerignore.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

0xAidan/polymarket-bot-test42026년 9월 4일 업데이트

Set up Playwright end-to-end testing in a project, including test configuration, example tests, and CI integration.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

0xAidan/polymarket-bot-test42026년 9월 4일 업데이트

Add Sentry error tracking, performance monitoring, and source maps to a web application.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

0xAidan/polymarket-bot-test42026년 9월 4일 업데이트

0xAidan의 스킬 모두 보기

이 스킬의 문제 신고