웹접근성을 고려한 HTML 구조 만들기

Web App 개발을 위한 HTML 구조 만드는 방법

---

1. Web App을 <header>/<nav>/<main>/<footer> 4가지로 나눈다.
2. 위 4가지 각 구간별로 하나씩 HTML 구조를 만들어 나간다.
3. <main>의 경우, 각 가로별로 <div>로 나누고, 각 <div> 내에 각 영역을 <section>으로 나눠서 코드를 작성한다.
4. 필요할 경우, <aside>와 <section> 내에 <article>을 사용한다.
5. 시각장애인을 위한 웹접근성을 고려하여 코드를 작성한다.
6. 위 4가지 구간 내에서 여러 요소들이 많이 속해 있는 것은 <div>로 묶는다.
7. 링크가 필요한 경우, <a>를 사용한다.
8. “|”, “<”, “>” 등의 경우, <i>로 아이콘을 사용하거나, <span>, <div> 등을 만들고, CSS로 해당 모양을 만든다.

시각장애인을 위한 웹접근성 관련 필수 코드

---

1. <nav>, <section> 등을 사용할 때마다, 해당 영역이 무엇을 뜻하는지 heading으로 전달해야한다.

[1] 화면에 글자를 보여줘야 할 때

<section id="main-login">
  <h3>로그인</h3> // 해당 section은 "로그인"에 관한 것
  <span>네이버를 더 안전하고 편리하게 이용하세요.</span>
</section>

[2] 화면에 글자를 숨겨야 할 때

<section id="main-login">
  // "blind" class로 css를 사용하여 해당 `<h3>`의 "로그인" 글자는 화면에 보이지 않지만, 해당 section은 "로그인"에 관한 것
  <h3 class="blind">로그인</h3>
  <span>네이버를 더 안전하고 편리하게 이용하세요.</span>
</section>

2. image를 사용할 때마다, 해당 이미지가 무엇을 뜻하는지 알려줘야 한다.

[1] <img /> 태그 사용시

각 이미지가 개별적으로 있어서 하나의 이미지씩 사용할 때, <img /> 태그를 사용하고, “alt”로 대체문자를 작성해야 한다.

<img src="images/web_standards.gif" alt="W3C 로고"> // 해당 이미지는 "W3C 로고"를 의미한다.

[2] Image Sprite 기법 사용시

서버로부터 개별적인 이미지를 하나씩 받아오면 성능에 문제가 있을 수 있기 때문에, 하나의 이미지를 한번에 받아와 그 이미지 내부에 있는 여러 이미지를 사용하는 기법을 Image Sprite 기법이라고 한다.

이럴 경우, “background-image” 등 CSS를 사용하여 이미지를 보여줘야 한다.

<button type="submit">
  <span class="blind">검색</span> // 해당(아래) 이미지가 "검색"을 의미한다.
  <span></span> // `<span>`을 작성하고, "background-image, "background-position" 등을 사용하여 이미지를 작업한다.
</button>

3. form 사용시, <legend>에서 해당 form이 무엇을 뜻하는지 알려줘야 한다.

<form>
  <fieldset>
    <legend class="blind">검색</legend> // 해당 form은 "검색"을 의미한다.
    <input />
    <span></span>
    <span></span>
    <button type="submit">
      <span class="blind">검색</span>
      <span></span>
    </button>
  </fieldset>
</form>