웹아틀리에 - Web atelier

잘못된 웹 표준과 접근성 상식 본문

IT-웹 Front end/웹표준 & 웹접근성

잘못된 웹 표준과 접근성 상식

네루펜 2016. 4. 27. 10:34

많은 개발자 분들이 고민을 하시는 부분 입니다. 


웹 표준을 지켜야 하는것과 접근성. 그리고 호환성. 어디까지 해야 하는가? 라는 의문인데요. 


이렇게 고민하다 보면 간과하거나 의미를 잘못 이해하는 경우도 생기지요. 

그래서 자주 가는 블로그의 좋은 글을 하나 퍼왔습니다.



웹표준을 준수하기 위해서는 XHTML을 써야 한다?

HTML 4.01을 잘 준수해도 웹표준을 준수한 것이다. 웹표준에서 중요한 것은 어떤 종류의 마크업 언어를 사용했는냐 보다 요소와 속성의 의미를 얼마나 잘 이해하고 적절히 문법에 맞게 사용했는지이다.

Strict DTD에서는 CSS 핵을 사용할 수 없고 Transitional DTD에서는 사용할 수 있다?

DTD와 CSS 핵 사용 가능 여부는 전혀 관련이 없다. CSS 핵을 쓰는 것은 표준에 위배되는 것을 감수하고 사용하는 것이고 특정 DTD라고 해서 핵의 사용이 허용되는 것은 아니다. Transitional DTD를 썼다고 해서 CSS 핵을 마구 사용해도 되는 것은 아니다.

CSS 핵은 특정 브라우저를 겨냥한 방법이기 때문에 되도록 사용을 피해야 하고 사용할 때에도 제한적으로, 다른 대안이 없을 경우에만 사용해야 한다.

Transitional DTD나 Frameset DTD를 사용하면 쿽스모드(quirks mode)로 랜더링 된다?

쿽스 모드로 랜더링 될 것인가 표준 모드로 랜더링 될 것인가는 DTD의 종류보다는 DTD의 선언 방법에 의해서 결정된다. Transitional DTD를 선언하더라도 표준모드로 랜더링되는 경우가 있다.

DIV 요소의 사용을 되도록 피해야 한다?

DIV 요소가 너무 남용되는 것은 문제이지만 그렇다고 DIV 요소의 사용을 너무 배척할 필요는 없다. DIV 요소는 내용을 그루핑하는 목적도 있기 때문에 표현하는 콘텐츠에 따라서 디자인적인 용도와 무관하게 사용할 수 있다. DIV를 사용하지 않은 코드보다는 DIV 요소와 적절한 id, class를 사용한 코드가 가독성도 훨씬 높다.

물론 <div class="round-button"><div><div><a href="list.html">목록</a></div></div></div> 이런 경우는 DIV 과용으로 피해야 하는 경우이다.

FRAME, IFRAME은 접근성을 해치므로 사용해서는 안된다?

과도하게 많은 프레임을 사용하는 것은 페이지 구성상도 좋지 않고 접근성을 해치게 된다. 하지만 프레임을 사용해야 하는 이유가 충분하고 접근성있게 프레임을 사용했다면 어떤 경우에는 프레임을 사용하는 것이 더 접근성이 좋을 수도 있다.

접근성을 높인다고 표준에 정의되어 있는 특정 요소나 기능을 배제할 필요는 없다. 접근성을 높이는 방법은 다양한 선택권을 사용자에게 주는 것이지 특정 형태만 강요하는 것이 아니다.

title 속성은 툴팁이나 스크린리더에서 읽혀질 내용을 제공할 때 사용된다?

title 속성은 추가적인 정보를 제공하기 위해서 사용된다. 대부분의 브라우저는 이를 툴팁으로 보여주고 있지만 브라우저에 따라서는 이를 이렇게 처리하지 않을 수도 있다. 스크린리더 역시 이 정보를 활용하지만 스크린리더를 위해서 이 정보를 제공하는 것은 아니다.

HTML 태그와 속성의 의미를 잘 이해하고 사용하는 것이 중요하다. 브라우저나 특정 사용자 기기에서 구현된 모습을 보고 원래의 의미를 혼동해서는 안된다.

summary, CAPTION을 사용하여 스크린리더에 정보를 제공한다?

summary, CAPTION, scope, header 등을 사용할 경우 이를 스크린리더가 참조할 수는 있다. 하지만 이러한 속성과 요소가 스크린리더만을 위한 것은 아니다. HTML의 의미를 이해하고 이에 맞게 사용해야지 특정 브라우저나 사용자 기기만을 염두에 두고 HTML을 구성해서는 안된다.

내부(internal) 스타일 시트가 외부(external) 스타일 시트보다 우선순위가 높다?

내부 스타일 시트 선언은 문서 안에서 STYLE 요소를 이용해서 선언하는 것을 말하고 외부 스타일 시트 선언은 LINK 요소를 이용해 외부의 .css 파일을 링크하는 것을 말한다. 이 두가지 방법의 우선순위는 같고 전적으로 선언한 순서에 따라서 적용 순위가 달라진다. 내부 스타일 시트를 먼저 선언하고 그 아래에 외부 스타일 시트를 불러온다면 내부가 아닌 외부 선언이 적용되게 된다.

반면에 style 속성을 이용한 인라인(inline) 스타일 선언은 위의 두가지 보다 우선순위가 높다.

시각 장애인을 위해서는 TTS를 사용한 음성 서비스와 글자 확대, 축소를 제공해야 한다?

특정 장애 유형을 위한 서비스를 제공할 때에는 사용자 환경을 잘 고려해서 제공해야 한다. 전맹인 시각 장애인은 스크린리더기 운영체제에 설치하거나 운영체제에서 제공하는 스크린리더를 사용하고 있기 때문에 웹사이트에서 제공하는 음성 서비스는 쓸 수 없다. 오히려 웹사이트에서 나오는 소리로 인해 스크린리더 사용을 방해 받을 수 있다.

글자 확대, 축소기능은 운영체제나 브라우저와 같은 소프트웨어에서 이미 제공이 되고 있는 기능이다. 웹사이트에서 별도의 서비스로 이러한 기능들을 제공하기 보다는 사용자가 이러한 기능들을 사용했을 때 글자 크기가 자유롭게 변경이 되도록 제작하는 것이 중요하다. 또한 텍스트를 이미지로 제공하지 않는 것도 이러한 기능들이 잘 작동할 수 있게 해주는 방법이다.

운영체제 수준에서 제공되는 접근성 기능을 잘 파악하여 이러한 기능을 사용자가 사용할 때 불편함이 없도록하는 것이 더욱 중요하다.

청각 장애인을 위해서 음성이나 소리로 내용을 전달하지 않아야 한다?

음성이나 소리'만'으로 내용을 전달하게 되면 문제가 되지만 음성, 음악 등을 텍스트와 같은 다른 수단과 함께 내용 전달 수단으로 활용하는 것은 사용자에게 다양한 선택권을 보장해 주는 것이기 때문에 오히려 정보 전달력을 높이게 된다.

색각 장애인을 위해서 이미지에 대체 텍스트를 제공하고 되도록 이미지로 내용을 전달하지 않아야 한다?

색각 장애인은 색상을 잘 구별하지 못하지만 이미지를 충분히 판독하고 이해할 수 있다. 이미지에 대한 대체 텍스트는 이미지를 활용하지 못하는 경우에 제공되는 정보이기 때문에 색각 장애인은 이 대체 텍스트에 접근을 하지 않는다. 색상'만'으로 정보를 제공하는 것은 문제가 되지만 대체 텍스트와 같은 텍스트 정보와 이미지를 같이 활용하는 것은 오히려 도움이 된다. 색각 장애인을 위해서는 색상외에 대체 텍스트가 아닌 이미지와 함께 판독이 가능한 텍스트 정보, 색상 외에도 구분할 수 있는 패턴이나 아이콘을 같이 제공하면 된다. 이렇게 색상에 비의존적으로 정보를 제공하게되면 색각 장애인 뿐만 아니라 흑백 인쇄와 같이 색상을 사용할 수 없는 환경에서도 도움이 된다.


출처 - [신현석] 잘못된 웹표준,웹접근성 상식





웹 표준과 접근성은 '모든 웹 이용자들은 동등한 컨텐츠와 조작을 할 수 있어야 한다'라는 생각이 전제로 해야한다고 생각합니다


조금 더 자세히 알아보고 싶으신 분들은


웹 접근성 연구소


이곳에서 가이드라인을 받아 살펴보시면 됩니다.




웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.

(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)

팀 버너스 리 경 - 웹의 창시자 (Tim Berners - Lee , W3C Director and inventor of the World Wide Web)



공유하기 링크
Comments