웹접근성

웹접근성?

웹사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장하는 것

여기서 정보를 차별 및 제한없이 동등하게 제공한다는 것은 신체적 조건이나 환경적 조건에 관계 없이

제공해 달라는 것을 의미한다.

신체적 조건 - 장애인 및 고령자를 포함한 모든 사람

환경적 조건 - 다양한 platform 및 Device와 웹 브라우저 등 모든 환경

웹접근성 향상을 위한 방법

1. W3C 산하 기구인 WAI에서 권고하고 있는 웹 콘텐츠 접근성 지침인 WCAG를 준수 하는 것

2. 웹 서비스를 제작할 때 웹표준 기술을 활용하는 것

웹접근성 지침

웹사이트 / 애플리케이션에서 충족해야 되는 기준을 정의, 즉 웹 서비스를 제작하는 사람들이 개발과정에서 고려해야 될

요구사항이 바로 접근성 지침이다. 해당 기준을 통해 장애가 있는 사용자가 보다 쉽게 이용할 수 있게 된다.

http://www.websoul.co.kr/accessibility/WA_guide21.asp

웹 접근성 지침 2.1 | Web Soul Lab

웹표준 기술

웹에서 표준적으로 사용되는 기술이나 규칙을 의미

 

1. 견고한 구조 설계를 위한 HTML

• 어떤 영역이 본문 섹션의 머리말이 주요 콘텐츠인지 각각의 명령어를 통해 해당 콘텐츠의 의미를 부여하고 구조를 설계할 수 있다

 

2. 레이아웃 및 스타일을 위한 CSS

• 다양한 속성을 통해 레이아웃 작업을 하거나 조금 더 화려한 디자인을 적용할 수 있다.

 

3. 동작 및 제어를 위한 DOM과 Jacascript

• Jacascript에서는 함수를 통해 원하는 기능을 구현할 수 있다.

4. WAI-ARIA

• RIA를 위한 웹접근성 관련 기술이다. RIA(Rich Internet Applications)는 웹 브라우저 상에서 동작하는 웹 애플리케이션을 의미한다
• 기존의 HTML에서 부족했던 부분을 보완하고 웹 접근성을 준수할 수 있도록 역할 모델이나 속성, 상태 정보 등을 추가할 수 있다.

WAI-ARIA 사례집

https://www.wah.or.kr:444/board/boardView.asp?page=1&brd_sn=5&brd_idx=1019 

 

웹 접근성을 고려한 HTML 작업 시 권장사항

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

크로스 브라우징?

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

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

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

 

<meta charset=“utf-8” >

 

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

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

 

인코딩이란?

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

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

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

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

 

예)

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

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

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

 

안 좋은 예

<div>

<p>

<strong> 

안녕

</strong>

</p>

</div>

 

좋은 예(?)

<div>

    <p>

        <strong> 

            안녕

        </strong>

    </p>

</div>

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

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