웹접근성을 고려한 HTML 코딩 작업시 규칙 또는 권장사항

안녕하세요 탐구소년입니다. 

 

오늘은 웹접근성을 고려하여 HTML 코드를 작성할 때 지켜주면 좋은 사항 몇 가지를 정리해보도록 하겠습니다. 각종 문서와 블로그의 글들을 활용하여 정리한 내용을 나름대로 정리하여 올린 것이니 참고하시면 좋을 것 같습니다.

 

그럼 바로 시작하겠습니다^^

 

 

1. 크로스 브라우징이 가능하도록 한다.

크로스 브라우징이란?
크로스 브라우징이란, 웹표준 기술을 적용하여 웹페이지가 서로 다른 운영체제나 플랫폼에서 이상없이 구현되도록 하는 기술을 말합니다. 

설명
크로스 브라우징이란 브라우저의 종류에 상관없이 웹사이트의 레이아웃이나 이미지, 데이터 등이 동일하게 보여지게 하는 상호 호환성에 대한 기술을 의미합니다. 그리고 이는 웹사이트를 개발하는 데 있어 상당히 중요한 개념이자 기술입니다.

참고자료
최근 6개월 간의 브라우저 점유율  

 

 

2. 모든 값은 따옴표(“)로 묶어준다.

 

속성값을 구분할 경우 따옴표가 누락되면 정보가 무시될 수 있습니다.

속성 값에 따옴표를 사용하게 되면 속성 값의 종결 문자로 인식하기 때문에 여는 따옴표와 닫는 따옴표를 잘 구분하여 주는 것이 중요합니다. 

 

 

3. 단일 태그의 마무리는 항상 ‘/>’ 로 해준다.

태그에는 여는 태그와 닫는 태그가 존재합니다.

단일 태그는 여는 태그와 닫는 태그를 구분짓지 않고 하나의 태그만을 사용하는 경우입니다. 단일 태그의 경우 아래와 같은 방식으로 사용해도 문제가 되지 않습니다. 

 

<br>

 

그러나 웹접근성을 고려한다면 아래와 같이 작성해주는 것이 좋습니다. 

 

<br />

 

웹접근성은 장애를 가진 사람들도 웹페이지를 조회하는 데 문제가 없도록 하기 위해 존재하는 개념입니다. 따라서 웹접근성을 고려한다면 />으로 닫힌다는 의도를 명확하게 드러내 주는 것이 좋습니다. 

 

 

4. 캐릭터셋을 반드시 지정해준다.

 

캐릭터셋 지정은 아래와 같은 코드를 작성해주는 것을 의미합니다. 

 

<meta charset=“utf-8” >

 

위 태그는 html 파일의 인코딩을 알려주는 태그입니다. 인코딩을 명확하게 알려주지 않으면 웹브라우저 설정 상황에 따라 자동으로 인코딩을 추정해서 처리해주는데, 처리가 정확할 경우도 있지만, 그렇지 못하는 경우도 많습니다. 

 

시각 장애를 가진 사람이 웹페이지를 열람하는 경우, 보통은 음성을 통해 웹페이지 내용이 전달되어집니다. 이때 인코딩 방식이 잘못되면 내용 전달에 문제가 생길 수 있으므로 이 점을 유의해야 합니다. 

 

인코딩이란?

정보의 형태나 형식을 변화하는 처리 또는 처리 방식을 의미합니다. 

컴퓨팅 프로그램에서 모든 데이터는 날것의 형태를 지니고 있기 마련입니다. 따라서 운영체제나 프로그램의 인코딩 방식에 따라 전달하고자 하는 데이터가 제대로 전달될수도, 그렇지 못할수도 있습니다. 따라서 프로그램을 작성할 때에는 인코딩 방식을 반드시 고려해서 작성해 주어야 합니다.

 

 

5. 이미지 태그에는 alt를 반드시 지정한다.

 

<img> 태그를 통해 표시되어지는 이미지를 그대로 잘 볼 수 있는 사람에게는 alt가 그리 필요하지 않지만, 시각 기능이 원활하지 못한 사람에게는 이미지가 무용지물일 수 있습니다. 이런 경우 <img> 태그의 속성인 alt에 값을 지정해주어 이미지에 대한 설명 또는 묘사를 덧붙여주는 것이 좋습니다. 

 

예)

<img src="thumb.jpg" alt="즐거운 여름 휴가" />

 

 

6. 색상은 RGB코드로 지정한다.

 

색각이상자를 위한 웹접근성 권장사항입니다. 

 

색각이상의 이해

색각이상은 망막 내 세포의 이상으로 색상을 제대로 구분하지 못 하는 증상입니다. 웹접근성을 고려하여 HTML 코드를 작성할 때에는 색각이상자가 구분할 수 없는 색 사용을 지양하고(적녹이나 황색), 색에 관계없이 콘텐츠 인식이 가능하도록 콘텐츠를 작성하는 것이 좋습니다. 

 

RGB코드 사용 이유

문자열로 구성된 색상은 색각이상자가 인식하는 것 자체가 불가능하지만, 색상 코드는 색각이상자들이 16진수 수치를 통해 인식하는 것이 가능합니다. 

 

 

7. HTML 코드 들여쓰기를 한다.

 

기존 작성한 태그 이후 한단계 아래 코드를 작성할 때에는 Tap을 이용한 들여쓰기 후에 작성하는 것이 좋습니다. 리더기 입장에서 가독성을 높이기 위한 조치입니다. 

 

안 좋은 예

<div>

<p>

<strong> 

안녕

</strong>

</p>

</div>

 

좋은 예(?)

<div>

    <p>

        <strong> 

            안녕

        </strong>

    </p>

</div>

 

 

8. 이미지 파일명은 의도가 드러나도록 작성한다.

 

리더기 음성을 통해 전달받는 입장에서는 의도가 드러나지 않는 단어나 문장으로 인해 혼란을 느낄 가능성이 매우 높습니다. 이미지 파일명 뿐만 아니라, 네이밍을 직접 해야 하는 모든 부분에서는 의도를 잘 드러내가며 코드를 작성할 필요가 있습니다. 

 

 

9. class의 이름을 지을 때, 상위 태그는 box를 포함하여 지정한다. 

 

이 또한 권장사항입니다. HTML 코드에는 엘리먼트(요소)를 감싸고 있는 가장 큰 단위의 태그가 존재하기 마련입니다. 이 경우 가장 큰 단위의 요소인 div 태그의 클래스명은 wrap으로 통일하는 편이 좋습니다. 

 

예)

<div class=“wrap”>

    전체 내용

</div>

 

가장 큰 단위 아래에 모듈별 단위는 box를 포함하여 지정해주는 것이 좋습니다. 

 

예)

<div class=“wrap”>

    <div class=“box-1”>

        불라불라

    </div>

    <div class=“box-2”>

        불라불라

    </div>

</div>

 

 

10. 제목(h) 태그를 적절하게 사용한다.

 

제목을 나타내는 h 태그에는 숫자가 붙는데, 숫자에 따라 그 의도가 조금씩 다르게 해석될 수 있으므로 참고하시면 좋습니다. 

 

예)

h1: 전체 내용을 대표하는 제목

h2: 챕터별 내용을 대표하는 제목

h3: 로그인이나 공지사항등 자잘한 모듈 단위의 제목 

 

 

11. 사이즈는 px(픽셀) 단위를 주로 사용한다.

 

단위를 통일하는 편이 음성 인식에는 유리(편리)합니다. 

0px의 경우에는 단위를 굳이 써 주지 않아도 괜찮습니다. 

 

예)

div{

    margin: 10px 0 10px 0;

}

 

 

12. 표 형식을 나타낼 때에는 가급적 table 태그를 사용한다.

이 또한 리더기를 통해 전달하는 경우를 고려한 권장사항입니다.