사용에 주의가 필요한
HTML 표준 문법

React 앱 접근성 개선 #04

A11Y

A11Y

사용에 주의가 필요한 HTML 문법

<!-- 1 -->
<ul>
  <li>리스트 아이템 요소는 리스트(ul 또는 ol) 요소 내부에만 배치되어야 합니다.</li>
</ul>

<ol>
  <li>리스트 아이템 요소는 리스트(ul 또는 ol) 요소 내부에만 배치되어야 합니다.</li>
</ol>



<!-- 2 -->
<dl>
  <dt>설명 리스트의 Key 내용은 dt 요소에</dt>
  <dd>설명 리스트의 value 내용은 dd 요소 안에 위치 해야 합니다.</dd>
  <div>
    <dt>필요한 경우, 선택적으로 dt, dd를 감싸는 div 요소를</dt>
    <dd>dl 안에서 사용할 수 있도록 HTML 5.2에서 개정되었습니다.</dd>
  </div>
</dl>



<!-- 3 -->
<figure>
  <figcaption>피규어를 설명하는 내용은 반드시 figure 요소 안에 배치되어야 합니다.</figcaption>
</figure>



<!-- 4 -->
<table>
  <caption>table의 첫번째 자식 요소로 배치되어야 합니다.</caption>
  <tr>
    <th>tr 요소 내부에 배치되어야 합니다.</th>
  </tr>
  <tr>
    <td>tr 요소 내부에 배치되어야 합니다.</td>
  </tr>
</table>

A11Y

사용에 주의가 필요한
HTML 표준 문법

React 앱 접근성 개선 #04

React 컴포넌트 시스템을 사용하여 애플리케이션을 개발할 때
놓치기 쉬운 HTML 표준 문법을 올바르게 검수합시다.

프로젝트 시작 전에도, 진행 중에도, 완료 후에도
올바른 문법을 준수해 표준과 접근성 모두 지켜봅시다!

Made with Slides.com