🌱 [사용자 친화 웹] 웹 표준 & 접근성

🌱 웹 표준 & 접근성

 

 

웹 표준

 

 웹 표준은 W3C에서 제시한 권고 사항으로, 웹에서 표준적으로 사용되는 기술이나 규칙을 의미합니다. 어떤 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 포함하고 있으며 이러한 웹 표준을 준수하는 것은 사용자에게 좋은 사용자 경험을 제공하고, 검색 엔진 최적화 등의 이점을 가져다줍니다.

 

 최신 웹 브라우저, 크롬, 엣지, 사파리, 오페라, 파이어폭스 등은 모두 웹 표준을 지원하므로, 웹 페이지를 웹 표준에 맞춰 작성하면 어떤 브라우저를 사용하더라도 동일한 결과물을 얻을 수 있습니다. 웹 표준은 W3C에서 제공하는 '권고' 사항이지만, 사용자에게 좋은 사용자 경험을 제공하기 위해 웹 표준을 준수하는 것이 좋습니다.

 

웹 표준 장점

1.  유지 보수의 용이성
   이전에는 HTML, CSS, JS 등을 사용할 때 구조(HTML), 표현(CSS), 동작(JS)이 섞여서 작성되기도 했으며, 이는 특정 부분을 수정하기 위해 전체를 고쳐야 할 때가 있었습니다. 그러나 이제는 각각의 영역이 분리되어 유지 보수가 용이해졌으며, 마크업 코드도 불필요한 부분을 제거하여 경량호되어 트래픽 비용이 줄어들었습니다.
2. 웹 호환성 확보
   웹 사이트가 특정 운영체제나 브라우저에 종속되지 않아 다양한 환경에서 동일하게 작동할 수 있습니다. 이를 준수함으로써 사용자에게 좋은 사용자 경험을 제공할 수 있습니다. 만약 웹 사이트가 웹 표준을 준수하지 않고 특정 브라우저나 운영 체제에 종속적이라면, 그 외의 환경에서는 제대로 작동하지 않을 수 있습니다.
3. 검색 효율성 증대
   웹 표준에 맞게 웹 사이트를 작성하면 검색 엔진에서 더 높은 우선순위로 노출될 수 있어, 검색 효율성을 높이는 데 도움이 됩니다. 이를 위해 웹 표준은 적절한 HTML 요소의 사용과 웹 페이지에 대한 정확한 정보 작성 등 검색 효율성과 관련된 내용을 다루어 홍보 비용을 들이지 않아도 검색 효율성을 높일 수 있습니다. 
4. 웹 접근성 향상
   브라우저의 종류, 운영 체제의 종류, 기기의 종류 등 웹 환경의 다양성과 사용자의 다양성으로 인해 모두를 충족하는 개발은 쉽지 않지만, 웹 표준을 준수하면 이러한 문제를 해결할 수 있습니다. 

 

Semantic HTML

웹 표준에서는 HTML을 시멘틱하게 작성하는 것이 중요합니다. semantic은 '의미의, 의미가 있는'이라는 뜻을 가지고 있습니다. 의미를 가진 Semantic HTML를 작성하여 각 구조의 역할을 쉽게 파악할 수 있습니다.

 

semantic HTML

<div>와 <span>요소로만 화면을 구성했을 때에 비하면 각 요소의 이름만으로도 어떤 역할을 할 지, 어떤 내용을 담게 될 지 명확하게 알 수 있습니다. 이처럼 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실하게 의미를 가지고 있는 요소를 시멘틱 요소라고 합니다. 

 

 

시멘틱 HTML의 필요성

1. 개발자 간 소통
   주석이나 id, class를 사용하지 않고도 해당 요소가 어떤 역할을 할 지 명확하게 알 수 있어 각 요소의 기능을 정의하느라 낭비하는 시간을 절약할 수 있습니다. 
2. 검색 효율성
   검색 엔진은 시멘틱 요소를 보고 문서의 구조를 파악하여 어떤 요소에 더 중요한 내용이 들어있을 지 우선순위를 정하여 우선순위가 더 높은 페이지를 검색 결과 상단에 표시하게 됩니다.
3. 웹 접근성
   스크린리더로 웹페이지를 이용하는 사용자에게 화면의 구조에 대한 정보까지 추가로 전달할 수 있어 콘텐츠를 좀 더 정확하게 전달할 수 있습니다. 

요소 종류	설명
<header>	페이지나 요소의 최상단에 위치하는 머리말 역할
<nav>	메뉴, 목차 등에 사용되는 요소
<aside>	문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소
<main>	이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소
<article>	게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소. 각각의 <article>을 구분하기 위한 수단이 필요하며, 보통 제목을 퐇마하는 방법을 사용한다.
<section>	문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용한다. 제목을 포함하는 경우가 많다.
<hgroup>	제목을 표시할 때 사용하는 요소. <h1>~<h6>을 의미한다.
<footer>	페이지나 요소의 최하단에 위치하는 꼬리말 역할의 요소

 

 

주의해야하는 마크업

1. 블럭 요소 안에 인라인 요소
   블럭 안에 인라인은 포함할 수 있지만 인라인 요소 안에 블럭 요소를 포함할 순 없다.
2. <b>, <i>태그 대신 시멘틱한 <strong>, <em> 사용하기
3. <hgroup> 요소의 역할을 디자인적 요소로만 사용하기
4. <br> 연속으로 사용하기. → 대신 <p>를 사용하고 <p> 사이에 margin 스타일을 주는 것이 좋다.
5. 인라인 스타일링 사용하지 않기. 

 

크로스 브라우징

웹 사이트에 접근하는 브라우저의 종류와 상관없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업.

 

크로스 브라우징 워크플로우

1. 초기 기획
   필요 콘텐츠와 기능, 디자인을 결정하며 이 사이트의 고객층이 사용하는 브라우저와 기기를 파악하여 여기에 맞는 기술을 사용해 개발할 수 있도록 기획한다. 
2. 개발
   브라우저의 호환성을 파악하여 개발한다. 
   
   • Can I Use
   • MDN
3. 테스트 / 발견
   
   • 데스크탑 브라우저 (크롬, 엣지, 파이어폭스, 오페라, 사파리 등) 테스트
   • 휴대폰 및 태블릿 브라우저 (삼성 인터넷, 사파리, 안드로이드의 크롬) 테스트
   • Window, Linux, Mac 등 다양한 운영 체제 테스트
4. 수정 / 반복
   섣불리 수정했다가는 다른 브라우저에서 버그가 발생할 수 있으므로, 조건문을 작성해 다른 코드를 실행하게 하는 방식으로 고쳐나가는 것이 좋다. 수정이 완료되면 3번부터 반복한다.

 

웹 접근성

접근성은 사람들의 접근이 제한되어 있거나 몸이 불편하더라도, 가능한 많은 사람들이 웹 사이트를 사용할 수 있도록 하는 것입니다. 접근성은 개인의 신체적, 인지적 능력 및 웹에 접근하는 방법과 관계없이 가능한 접근할 수 있도록 콘텐츠를 개발하는 것을 말합니다. 일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻합니다. 

 

" 웹은 사람들의 하드웨어, 소프트웨어, 언어, 문화, 장소, 혹은 신체적 물리적 능력과 관계없이 
모든 사람을 위해 작동하도록 설계되었습니다
. 웹이 이 목표를 달성할 때, 다양한 범위의 청각, 움직임, 시각, 그리고 인지 능력을 가진 사람들이 웹에 접근할 수 있습니다."

- W3C [접근성]

 

 

웹 접근성의 효과

1. 사용자층 확대
   장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있어 새로운 고객층을 확보할 수 있습니다.
2. 다양한 환경 지원
   정보 소외 계층이 아니더라도 정보에 접근하기 어려운 상황에도 접근할 수 있도록 서비스의 사용 범위가 확대되어 서비스의 이용자 수 증가를 기대할 수 있습니다.
3. 사회적 이미지 향상
   기업이 정보 소외 계층을 위한 사회 공헌 및 복지 향상에 힘쓰고 있음을 보여줄 수 있습니다.
   
   

 

 

웹 접근성 지침

• 인식의 용이성 : 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
  1. 적절한 대체 텍스트
  2. 자막 제공
  3. 색에 무관한 콘텐츠 인식
  4. 명확한 지시사항 제공
  5. 텍스트 콘텐츠 명도 대비 (4.5 : 1)
  6. 자동 재생 금지
  7. 콘텐츠간 구분
• 운용의 용이성 : 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
  1. 키보드 사용 권장
  2. 초점 이동
  3. 조작 가능 
  4. 응답 시간 조절
  5. 정지 기능 제공
  6. 깜빡임과 번쩍임 사용 제한
  7. 반복 영역 건너뛰기
  8. 제목 제공
  9. 적절한 링크 텍스트
• 이해의 용이성 : 콘텐츠는 이해할 수 있어야 한다.
  1. 기본 언어 표시
  2. 사용자 요구에 따른 실행
  3. 콘텐츠 선형 구조
  4. 표의 구성
  5. 레이블 제공
  6. 오류 정정
• 견고성 : 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
  1. 마크업 오류 방지
  2. 웹 어플리케이션 접근성 준수