접근성 높은 재능넷 프로필 카드 HTML

<article class="profile-card">
  <header>
    <h2>홍길동</h2>
    <p>웹 개발 전문가</p>
  </header>
  
  <div class="profile-image">
    <img src="profile.jpg" alt="홍길동의 프로필 사진" width="200" height="200">
  </div>
  
  <section class="skills">
    <h3>보유 기술</h3>
    <ul>
      <li>HTML/CSS</li>
      <li>JavaScript</li>
      <li>웹 접근성</li>
    </ul>
  </section>
  
  <footer>
    <a href="/contact" class="contact-button">연락하기</a>
  </footer>
</article>

HTML:

<nav>
  <ul class="menu">
    <li class="menu-item">
      <button aria-expanded="false" aria-controls="submenu-1" class="menu-button">
        서비스
      </button>
      <ul id="submenu-1" class="submenu" hidden>
        <li><a href="/service1">웹 개발</a></li>
        <li><a href="/service2">앱 개발</a></li>
        <li><a href="/service3">디자인</a></li>
      </ul>
    </li>
    <!-- 다른 메뉴 항목들 -->
  </ul>
</nav>

JavaScript (핵심 로직):

// 메뉴 버튼 클릭 이벤트
menuButton.addEventListener('click', function() {
  const expanded = this.getAttribute('aria-expanded') === 'true';
  this.setAttribute('aria-expanded', !expanded);
  const submenu = document.getElementById(this.getAttribute('aria-controls'));
  
  if (expanded) {
    submenu.hidden = true;
  } else {
    submenu.hidden = false;
    // 첫 번째 메뉴 항목에 포커스
    submenu.querySelector('a').focus();
  }
});

// Esc 키로 서브메뉴 닫기
submenu.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    menuButton.setAttribute('aria-expanded', 'false');
    submenu.hidden = true;
    menuButton.focus(); // 포커스를 메뉴 버튼으로 반환
  }
});

// 화살표 키로 서브메뉴 탐색
submenu.addEventListener('keydown', function(e) {
  const items = Array.from(submenu.querySelectorAll('a'));
  const currentIndex = items.indexOf(document.activeElement);
  
  if (e.key === 'ArrowDown') {
    e.preventDefault();
    const nextIndex = (currentIndex + 1) % items.length;
    items[nextIndex].focus();
  } else if (e.key === 'ArrowUp') {
    e.preventDefault();
    const prevIndex = (currentIndex - 1 + items.length) % items.length;
    items[prevIndex].focus();
  }
});

HTML:

<button class="accessible-button primary">
  <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16">
    <path d="M8 0L16 8l-8 8-8-8z" fill="currentColor"/>
  </svg>
  계속하기
</button>

<button class="accessible-button secondary" disabled>
  취소
</button>

CSS:

.accessible-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.accessible-button:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

.accessible-button.primary {
  background-color: #3498db;
  color: white;
  border: none;
}

.accessible-button.primary:hover {
  background-color: #2980b9;
}

.accessible-button.secondary {
  background-color: transparent;
  color: #3498db;
  border: 1px solid #3498db;
}

.accessible-button.secondary:hover {
  background-color: rgba(52, 152, 219, 0.1);
}

.accessible-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 모션 감소 선호 지원 */
@media (prefers-reduced-motion: reduce) {
  .accessible-button {
    transition: none;
  }
}

<form method="post" action="/register" novalidate>
  <h1>재능넷 회원가입</h1>
  
  <div class="form-group">
    <label for="fullname">
      이름 <span aria-hidden="true">*</span>
      <span class="sr-only">(필수)</span>
    </label>
    <input type="text" id="fullname" name="fullname" required 
           aria-required="true" autocomplete="name">
  </div>
  
  <div class="form-group">
    <label for="email">
      이메일 <span aria-hidden="true">*</span>
      <span class="sr-only">(필수)</span>
    </label>
    <input type="email" id="email" name="email" required 
           aria-required="true" autocomplete="email"
           aria-describedby="email-hint">
    <p id="email-hint" class="hint">
      이메일은 로그인 아이디로 사용됩니다
    </p>
  </div>
  
  <div class="form-group">
    <label for="password">
      비밀번호 <span aria-hidden="true">*</span>
      <span class="sr-only">(필수)</span>
    </label>
    <input type="password" id="password" name="password" required 
           aria-required="true" minlength="8" autocomplete="new-password"
           aria-describedby="password-requirements">
    <p id="password-requirements" class="hint">
      비밀번호는 8자 이상이어야 하며, 숫자와 특수문자를 포함해야 합니다
    </p>
  </div>
  
  <fieldset>
    <legend>관심 분야 (다중 선택 가능)</legend>
    
    <div class="checkbox-group">
      <input type="checkbox" id="interest-web" name="interests[]" value="web">
      <label for="interest-web">웹 개발</label>
    </div>
    
    <div class="checkbox-group">
      <input type="checkbox" id="interest-design" name="interests[]" value="design">
      <label for="interest-design">디자인</label>
    </div>
    
    <div class="checkbox-group">
      <input type="checkbox" id="interest-marketing" name="interests[]" value="marketing">
      <label for="interest-marketing">마케팅</label>
    </div>
  </fieldset>
  
  <div class="form-group">
    <div class="checkbox-group">
      <input type="checkbox" id="terms" name="terms" required 
             aria-required="true">
      <label for="terms">
        <a href="/terms" target="_blank">이용약관</a>에 동의합니다
      </label>
    </div>
  </div>
  
  <div class="form-actions">
    <button type="submit">가입하기</button>
    <button type="button" class="secondary">취소</button>
  </div>
</form>

HTML:

<header class="site-header">
  <div class="logo">
    <a href="/">재능넷</a>
  </div>
  
  <button class="menu-toggle" aria-expanded="false" aria-controls="mobile-nav">
    <span class="sr-only">메뉴 열기</span>
    <span class="hamburger" aria-hidden="true"></span>
  </button>
  
  <nav id="mobile-nav" class="main-nav" hidden>
    <ul>
      <li><a href="/services">서비스 찾기</a></li>
      <li><a href="/talents">재능 등록하기</a></li>
      <li><a href="/how-it-works">이용 방법</a></li>
      <li><a href="/login">로그인</a></li>
    </ul>
  </nav>
</header>

JavaScript (핵심 로직):

const menuToggle = document.querySelector('.menu-toggle');
const mobileNav = document.querySelector('#mobile-nav');

menuToggle.addEventListener('click', function() {
  const expanded = this.getAttribute('aria-expanded') === 'true';
  
  this.setAttribute('aria-expanded', !expanded);
  
  if (expanded) {
    mobileNav.hidden = true;
    // 메뉴가 닫힐 때 포커스를 토글 버튼으로 반환
    menuToggle.focus();
  } else {
    mobileNav.hidden = false;
    // 메뉴가 열릴 때 첫 번째 링크에 포커스
    mobileNav.querySelector('a').focus();
    
    // Esc 키로 메뉴 닫기 지원
    mobileNav.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') {
        menuToggle.click();
      }
    });
  }
});

CSS (핵심 스타일):

/* 햄버거 아이콘 */
.hamburger {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #333;
  position: relative;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #333;
}

.hamburger::before {
  top: -8px;
}

.hamburger::after {
  bottom: -8px;
}

/* 메뉴 토글 버튼 */
.menu-toggle {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* 모바일 메뉴 */
@media (max-width: 768px) {
  .main-nav {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }
  
  .main-nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  .main-nav li {
    border-bottom: 1px solid #eee;
  }
  
  .main-nav a {
    display: block;
    padding: 15px 20px;
    font-size: 16px;
    color: #333;
    text-decoration: none;
  }
}