Skip to main content
사용 중인 브라우저가 오래되어 이 사이트가 제대로 표시되지 않습니다. Chrome, Edge, Firefox 또는 Safari 최신 버전으로 업데이트해 주세요.

Accessibility Quick Fixes: Copy-Paste Code Snippets

Free, copy-paste HTML, CSS, JavaScript, and React snippets for common WCAG 2.2 accessibility fixes

이미지에 대체 텍스트 추가

html

이미지 내용을 설명하는 대체 텍스트 제공

<!-- Decorative image -->
<img src="decoration.png" alt="" />

<!-- Informative image -->
<img src="chart.png" alt="Sales increased by 25% in Q4" />

<!-- Functional image (button) -->
<img src="search-icon.png" alt="Search" />
html

폼 필드에 레이블 추가

html

스크린 리더 사용자를 위해 폼 입력에 레이블 연결

<!-- Explicit label -->
<label for="email">Email Address</label>
<input type="email" id="email" name="email" />

<!-- Implicit label -->
<label>
  Email Address
  <input type="email" name="email" />
</label>

<!-- Using aria-label -->
<input type="search" aria-label="Search products" />
html

버튼을 접근 가능하게 만들기

html

버튼에 접근 가능한 이름이 있고 키보드로 접근 가능한지 확인

<!-- Good: Native button with text -->
<button>Submit Form</button>

<!-- Good: Button with aria-label -->
<button aria-label="Close dialog">
  <span aria-hidden="true">×</span>
</button>

<!-- Good: Icon button -->
<button aria-label="Delete item">
  <svg aria-hidden="true">...</svg>
</button>
html

적절한 제목 계층 구조

html

레벨을 건너뛰지 않고 순서대로 제목 사용 (h1 → h2 → h3)

<h1>Page Title</h1>

<h2>Main Section</h2>
<p>Content...</p>

<h3>Subsection</h3>
<p>Content...</p>

<h2>Another Main Section</h2>
<p>Content...</p>
html

본문 바로가기 링크 추가

html

키보드 사용자가 반복적인 탐색을 건너뛸 수 있도록 허용

<a href="#main-content" class="skip-link">
  Skip to main content
</a>

<nav>...</nav>

<main id="main-content" tabindex="-1">
  <!-- Main content here (tabindex="-1" lets focus move here) -->
</main>

<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}
</style>
html

보이는 포커스 표시기

css

키보드 포커스가 항상 보이도록 보장

/* Modern approach using :focus-visible */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid #4A90E2;
  outline-offset: 2px;
}

/* Custom focus style */
.custom-focus:focus-visible {
  outline: 2px solid transparent; /* still shows in Windows High Contrast, where box-shadow is dropped */
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.5);
  border-color: #4A90E2;
}
css

충분한 색상 대비 보장

css

WCAG AA 표준을 충족하는 색상 사용 (일반 텍스트의 경우 4.5:1)

/* Bad: Low contrast */
.bad-text {
  color: #777777;
  background-color: #FFFFFF;
  /* Ratio: 4.48:1, fails AA (needs 4.5:1) */
}

/* Good: High contrast */
.good-text {
  color: #595959;
  background-color: #FFFFFF;
  /* Ratio: 7.0:1, passes AAA */
}

/* Large text (24px, or 18.66px bold) needs only 3:1 */
.large-text {
  font-size: 24px;
  color: #949494;
  background-color: #FFFFFF;
  /* Ratio: 3.03:1, passes AA for large text only */
}
css

동적 콘텐츠 알림

javascript

ARIA 라이브 영역을 사용하여 동적 업데이트 알림

<!-- Polite announcement (waits for user to finish) -->
<div aria-live="polite" aria-atomic="true">
  <p id="status-message"></p>
</div>

<!-- Assertive announcement (interrupts immediately) -->
<div aria-live="assertive" role="alert">
  <p id="error-message"></p>
</div>

<script>
// Update status
document.getElementById('status-message').textContent = 
  'Form submitted successfully';

// Show error
document.getElementById('error-message').textContent = 
  'Error: Please fill in all required fields';
</script>
html

키보드 트랩 방지

javascript

사용자가 항상 키보드로 벗어날 수 있도록 보장

// Modal dialog with keyboard trap prevention
function openModal() {
  const modal = document.getElementById('modal');
  const closeBtn = modal.querySelector('.close-button');
  
  modal.style.display = 'block';
  closeBtn.focus();
  
  // Trap focus within modal
  modal.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      closeModal();
    }
    
    // Handle Tab key
    if (e.key === 'Tab') {
      const focusableElements = modal.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      );
      const firstElement = focusableElements[0];
      const lastElement = focusableElements[focusableElements.length - 1];
      
      if (e.shiftKey && document.activeElement === firstElement) {
        lastElement.focus();
        e.preventDefault();
      } else if (!e.shiftKey && document.activeElement === lastElement) {
        firstElement.focus();
        e.preventDefault();
      }
    }
  });
}
javascript

접근 가능한 React 버튼 컴포넌트

react

React에서 재사용 가능한 접근성 버튼 만들기

import { ButtonHTMLAttributes, ReactNode } from 'react';

interface AccessibleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: ReactNode;
  variant?: 'primary' | 'secondary';
  isLoading?: boolean;
}

export function AccessibleButton({ 
  children, 
  variant = 'primary',
  isLoading = false,
  disabled,
  ...props 
}: AccessibleButtonProps) {
  return (
    <button
      {...props}
      disabled={disabled || isLoading}
      aria-disabled={disabled || isLoading}
      aria-busy={isLoading}
      className={`btn btn-${variant} ${disabled ? 'btn-disabled' : ''}`}
    >
      {isLoading ? (
        <>
          <span className="spinner" aria-hidden="true" />
          <span className="sr-only">Loading...</span>
        </>
      ) : children}
    </button>
  );
}
typescript

Pro tip

These templates are starting points. Always test your implementations with real screen readers and keyboard navigation. Use our Contrast Checker tool to validate colors, then run a free scan on AccessiSight to track improvements.

Frequently Asked Questions