GOV.UK 스타일가이드 (HTML)

본 문서는 깃허브에 공유된 영국 정부 애플리케이션 개발 지침 문서 중 일부를 번역한 것입니다.

항상 속성 값은 따옴표로 감싸기

써야 하는 곳과 안써야 하는 곳을 구분하는 작업은 기준이 모호하므로, 그냥 따옴표로 다 감싸도록 한다.

항상 잘 정돈된 HTML을 쓴다

<p>태그를 닫는 것을 까먹는 등 제대로 태그를 닫지 않으면 불필요한 파싱으로 인해 성능이 저하되며 접근성 문제도 발생한다.

ARIA역할(ARIA role)을 적절하게 사용하기

HTML5 영역 구분(sectioning) 요소를 사용시 ARIA 랜드마크 역할도 함께 포함시키면 좋다. 랜드마크를 영역 구분 요소에 넣어 사용하면 HTML5와 ARIA를 모두 지원하는 스크린 리더가 정보를 중복으로 받아들이는 것을 방지할 수 있다.

예: <header role="banner"></header>

다음의 역할들은 HTML5 영역 구분 요소에 직접 적용할 수 있다.

role="main"은 <main>요소에 적용 가능
role="complementary"는 <aside>요소에 적용 가능
role="contentinfo"는 <footer>요소에 적용 가능
role="navigation"은 <nav>요소에 적용 가능

Leonie Watson의 글을 읽어 보면 왜 이런식으로 ARIA 랜드마크 역할을 사용하는 것이 스크린 리더 사용자 경험 향상에 최적인 방법인지 알 수 있다.

좀 더 심도깊은 적용 가이드를 원하면 Paciello 그룹의 가이드를 참고하라.

다음 랜드마크는 HTML5 요소에 직접 적용하는 것은 불가능하지만, 다른 요소와 사용하기에 괜찮은 것들이다.

role="search"
role="application"

메인 콘텐츠

<main> 태그는 페이지 내의 메인 콘텐츠를 나타내기 위해 사용해야 한다. 이 태그에 대한 지원이 아직 미흡한 부분이 있을 수 있으므로 role="main"속성을 함께 사용한다.

콘텐츠 영역 나누기

<section>태그 사용시, aria-labelledby속성값을 제목 요소의 id 속성값과 연결하여 해당 영역을 규정한다.

<section aria-labelledby="advice">
  <h1 id="advice">Help and Advice</h1>
    ....
</section>

네비게이션 요소

<nav> 태그 사용시, role="navigation" 랜드마크를 넣어준다. 링크를 보면 <nav> 태그에 대해 더 자세히 알아볼 수 있다.

네비게이션 요소 강조하기

네비게이션 리스트에서 현재 위치를 표시하고 싶으면 <strong>태그를 사용한다.

<nav role="navigation">
  <ol>
   <li><a href="/">Home</a></li>
   <li><a href="/business">Business</a></li>
   <li><strong>Business Rates</strong></li>
  </ol>
</nav>

의미론적으로 따져보면 <strong> 태그를 사용하는 것이 <em>보다 적절하며, 꽤나 널리 알려진 코딩 규약이다.

마치며

위의 규칙들을 잘 따른다면 HTML 문서 길이를 적절하게 조절할 수 있다. 마크업을 너무 과하게 하면 가독성이 떨어진다.

Young Blog