본문으로 건너뛰기
cccskills

스킬 찾기

1.3만건 · 인기순

Check form fields for duplicate labels that may confuse screen readers or voice control. Identify affected inputs and suggest consolidating labels or using aria-labelledby, an attribute that connects a field to multiple pieces of naming text.

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

  • Finding duplicate labels on form inputs
  • Combining multiple text sources into a field name
  • Reviewing form labels with screen readers
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review HTML forms and JavaScript requests to find data sent over unencrypted HTTP. Check submission URLs, pages with implicit form destinations, and server redirects, then update endpoints to use HTTPS.

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

  • Checking login form submission URLs
  • Reviewing fetch() and XMLHttpRequest endpoints
  • Checking forms without an action attribute
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

hsts

무료

Review HSTS, a browser policy that keeps site connections on HTTPS. Check response headers, policy duration, and subdomain coverage, guide server or CDN configuration, and explain the precautions needed before enabling browser preloading.

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

  • Checking HSTS headers on HTTPS responses
  • Configuring HSTS on a web server or CDN
  • Reviewing policy duration and subdomain coverage
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Check that HTTP requests redirect to HTTPS with a permanent 301 response while preserving the page path and query parameters. Review server or CDN settings, verify response headers, and explain how HSTS helps returning visitors avoid HTTP requests.

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

  • Checking HTTP redirects before a site launch
  • Verifying paths and query parameters survive redirects
  • Reviewing server redirects and HSTS settings
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review form fields to ensure each has a properly connected label. Identify placeholder-only names and missing group headings, then guide markup fixes that help screen readers identify inputs and make labels clickable.

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

  • Reviewing labels in an application form
  • Replacing placeholder-only field names
  • Checking checkbox and radio button groups
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Identify and test critical workflows where APIs, services, databases, and interface components work together. Review normal behavior, important failures, and CI checks to find gaps that isolated unit tests can miss and keep those interactions continuously verified.

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

  • Testing interactions between APIs, services, and databases
  • Checking components connected to state management
  • Reviewing CI coverage for critical workflows
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review image alt text, the descriptions read by screen readers, for unnecessary phrases and duplication of nearby text. Identify specific images to fix and make their descriptions concise while preserving information about what the images mean.

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

  • Reviewing image descriptions for accessibility
  • Removing alt text that repeats nearby captions
  • Checking screen reader output after fixes
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Check HTML definition lists, which pair terms with descriptions, for structural problems. Identify invalid child elements and unclear relationships, suggest markup fixes, and explain how to verify that screen readers group the information correctly.

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

  • Reviewing HTML structure in glossaries
  • Checking term and description relationships
  • Fixing definition lists that confuse screen readers
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review GIFs, videos, and CSS animations for rapid flashing that may trigger seizures in photosensitive users. Check flash frequency and screen area, then suggest removing or slowing effects or replacing them with fades or static content.

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

  • Checking flashing effects in animated GIFs
  • Reviewing rapid flashing in videos and CSS animations
  • Replacing flashing effects with fades or static content
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Find empty links, unlabeled icon links, and broken destinations. Add descriptive text or labels that screen readers can announce, and fix or remove broken links so users can understand where each link leads.

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

  • Finding empty links across a page
  • Adding destination labels to icon links
  • Reviewing and fixing broken link destinations
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Check whether sticky headers, banners, or chat widgets hide controls reached with the keyboard. Review tab order, zoomed views, and mobile layouts, then suggest spacing or scrolling changes that keep the focused control and its indicator visible.

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

  • Checking keyboard navigation around sticky headers
  • Testing pages with cookie banners and chat widgets open
  • Reviewing overlap in zoomed and mobile layouts
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review rendered HTML for duplicate IDs used by ARIA attributes, which connect elements to labels and descriptions for assistive technology. Identify ambiguous references, correct IDs and their links, and explain how to verify the changes.

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

  • Investigating incorrect labels read by screen readers
  • Checking repeated components for duplicate IDs
  • Reviewing ARIA references in a design system
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review and add E2E tests, which check complete user journeys such as signing in or checking out. Identify missing coverage, organize reusable tests, and check that automated delivery workflows run them and handle failures.

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

  • Checking test coverage for sign-in and checkout flows
  • Adding tests for form submissions
  • Reviewing automated test runs and failure handling in CI/CD
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Find empty headings or headings containing only whitespace in rendered web pages. Guide fixes by adding descriptive text or removing unnecessary heading tags, helping screen reader users navigate a meaningful document structure.

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

  • Find empty headings in web pages
  • Review components that use headings only for styling
  • Check heading navigation with a screen reader
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Check third-party packages for known security vulnerabilities, review dependency versions and lock files, and plan updates or replacements. The skill also guides automated scanning in CI, the pipeline that runs project checks.

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

  • Checking dependencies before a production deployment
  • Investigating a reported package vulnerability
  • Adding automated dependency scanning to CI
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review decorative images and icons to prevent unnecessary screen reader announcements. Check empty alt text, aria-hidden, and relevant keyboard behavior, then suggest fixes for concrete accessibility issues without flagging decorative assets solely because they exist.

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

  • Checking decorative images for unnecessary announcements
  • Reviewing accessibility of SVGs and icons
  • Checking shared decorative component patterns
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review links, buttons, and form fields for duplicate HTML IDs. Identify affected controls, suggest unique IDs, and explain how to verify keyboard navigation, focus movement, and screen reader behavior after the fix.

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

  • Checking HTML IDs in forms
  • Investigating unexpected keyboard focus
  • Reviewing shared interactive components
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review websites for content accidentally hidden by ad blockers. Identify problematic HTML class names and IDs, test affected pages with uBlock Origin, and suggest specific names that preserve the visibility and function of notices, banners, and consent controls.

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

  • Investigating notices hidden by ad blockers
  • Checking cookie consent controls for accidental hiding
  • Reviewing HTML class names and IDs for blocking patterns
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review forms, API requests, and browser storage to find personal data that no active feature needs. Identify unnecessary collection, suggest removal or anonymisation, and check analytics and logs for exposed personal identifiers and missing retention periods.

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

  • Reviewing personal data collected by forms
  • Finding personal identifiers in analytics and logs
  • Reviewing browser storage and retention periods
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review whether analytics and advertising trackers stay blocked until users consent to non-essential cookies. Check rejection, withdrawal, and access to cookie settings, and get implementation guidance tied to actual browser behavior.

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

  • Checking whether trackers run before consent
  • Reviewing cookie rejection and withdrawal behavior
  • Keeping cookie preferences accessible after banner dismissal
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review whether pages remain understandable and usable without CSS. Check reading order, headings, form labels, instructions, and errors, then suggest HTML changes that preserve meaning when styles fail or users apply their own.

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

  • Check page usability with CSS disabled
  • Review reading order and heading structure
  • Inspect form labels, instructions, and errors
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Check website behavior across Chrome, Firefox, Safari, and Edge, and fix browser-specific problems. Review desktop and mobile test coverage alongside CI, the automated checks run during development, to identify gaps that let regressions pass.

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

  • Checking layouts and features across major browsers
  • Reviewing desktop and mobile browser test coverage
  • Finding gaps in automated browser checks
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review communication between different websites for security issues. Inspect code and browser behavior to identify overly broad CORS permissions, unchecked message senders, missing request protections, and unsafe redirects, then propose fixes and browser checks.

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

  • Review CORS settings for authenticated endpoints
  • Check sender validation in postMessage listeners
  • Inspect redirects after login or SSO
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review buttons for missing or unclear names, including controls that contain only icons. Add text or labels that explain each action to screen reader users, and replace buttons used for page navigation with links.

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

  • Finding buttons without descriptive names
  • Labeling icon-only buttons for screen readers
  • Checking whether navigation controls should be links
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트