Web - 웹 표준 & 접근성

웹 표준이란?

웹 표준을 알기에 앞서 인터넷과 웹을 구분하는 것을 알아야 한다.

인터넷 : 전 세계적으로 연결되어있는 컴퓨터 네트워크 통신망

웹 : 문서, 이미지, 영상 등 다양한 정보를 사람들과 공유할 수 있는 공간

따라서 인터넷을 웹을 포함하는 개념이다.

그렇다면 웹 표준이란 무엇일까?

2000년대 초반까지만 하더라도 인터넷 익스플로러, 파이퍼폭스, 사파리 등 다양한 브라우저가 있었지만, 익스플로러에서는 작동이 되어도 사파리에서는 작동이 되지 않는 등 브라우저 간 호환이 어려웠던 상황이 비일비재하게 발생하였다. 이러한 상황들을 막기 위해 개발자들은 각 브라우저별로 따로 개발해야만 했기에 이러한 수고를 없애고자 웹 개발 형식을 통일시킨 것이 바로 ""웹 표준""이다.

웹표준 : W3C에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙

현재 크롬, 엣지, 사파리, 오페라, 파이어폭스 등 다양한 웹 브라우저들이 모두 웹 표준을 지원한다. 따라서 이러한 웹 표준에 맞추어 개발을 한다면 어느 브라우저에서든 동일하게 작동하게 된다.

웹 표준의 장점?

1. 유지보수의 용이성

일부를 고쳐야 할 상황이 오면, 웹 표준을 준수한 코드의 경우 각 영역이 분리되어 있기에 유지보수가 편해지고, 코드가 경량화된다.

2. 웹 호환성 확보

위에서 말했듯이 다양한 브라우저에서도 동일하게 작동할 수 있다.

3. 검색 효율성 증대

검색 엔진에서 더 높은 우선순위로 노출될 수 있다. 웹 표준에서는 적절한 HTML 요소 사용이나 웹 페이지에 대한 정확한 정보 작성과 같은 검색 효율성과 관련한 내용도 다루고 있기 때문.

4. 웹 접근성 향상

브라우저, 운영체제, 기기에 상관 없이 사용자에 맞추어서 개발을 하기 편리해진다.

웹 표준 내용

Semantic HTML

웹 표준에서는 HTML을 보다 Semantic하게 작성하는 것을 중요하게 생각한다. 예를 들면

이미지만 보면 각각의 div나 span이 어떤 역할을 하는 것인지 언뜻 보면 알 순 있지만 명시가 되어있지 않기 때문에 정확하게 알기는 힘들다.

이렇게 보면 각각의 요소가 화면에서 어떤 역할을 하는지, 어떤 내용을 담고 있는지 보다 명확하게 알 수 있다. 이처럼 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될 지 확실하게 의미를 가지고 있는 요소를 Semantic 요소라고 한다.

인라인 요소 안에 블록요소 넣기X

HTML요소는 콘텐트가 차지하는 만큼 화면을 차지하는 인라인요소, 가로로 넓게 화면을 차지하는 블록 요소가 있는데, 인라인 요소는 항상 블록 요소 안에 들어가야 하며, 반대의 경우가 있어서는 안된다.

<b>, <i> 요소보다는 <strong>, <em> 사용

각각 Bold Italic 효과를 주는 요소인데, b와 i는 이름이 Semantic하지 않다 보니 사용을 지양하는 편이고, 대체적으로 strong과 em을 사용하는 것을 추천한다.

hgroup 마구잡이로 사용X

<h1> <h2>는 목차의 역할 또는 콘텐츠의 상하 관계를 표시하기 위해 사용하는 것인데, 숫자가 작을수록 크기가 작아진다. 하지만 이를 스타일링의 목적으로 사용하기 위해 순서 없이 마구잡이로 사용하는 것은 당장 화면 상으로는 보기 좋을지 몰라도 사용자에게는 잘못된 화면 구조 정보를 전달하게 된다.

// 나쁜 예시
<h1>엄청 큰 글씨</h1>
    <h3>적당히 큰 글씨</h3>
  <h2>큰 글씨</h2>
          <h6>엄청 작은 글씨</h6>
      <h4>그냥 글씨</h4>

<br> 연속 사용X

줄바꿈의 목적으로 사용되는 요소인데, 이를 연속으로 사용하여 요소 사이에 큰 간격을 만들기 위한 목적으로 사용하는 것은 바람직하지 않다. 간격이 필요한 경우에는 별도의 단락을 이용하여 구분하거나 CSS 속성을 이용하여 간격을 주는 것이 바람직하다.

인라인 스타일링 사용X

웹 표준으로 HTML, CSS, JS 등의 사용 방법이 정리되면서 각 영역이 분리되었기에 장점들이 많이 생겨났다. 하지만 인라인 스타일링을 사용하면 기껏 분리한 영역을 다시 합치는 것과 같은 효과를 불러온다. 웹 표준에서는 이러한 인라인 스타일링 사용을 매우 지양한다.

웹 접근성

일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근할 수 있고 이해할 수 있도록 보장하는 것을 의미한다.
하지만 이렇게 말하면 비장애인은 모든 정보에 접근할 수 있다는 의미가 되어버린다.

다시 말하면 웹 접근성은 모든 사람들에 대해서 정보 접근에 제한을 받는 불편함을 없애고 어떤 상황에서도 항상 동등한 수준의 정보를 제공받도록 보장하는 것을 의미한다.

웹 접근성을 갖추었을 때 효과

1. 사용자층 확대

정보 소외 계층도 웹 사이트를 자유롭게 이용 -> 사이트 이용자 상승 -> 새로운 고객층 확보

2. 다양한 환경 지원

소외 계층이 아니더라도 정보를 획득하기 어려운 환경에 놓였을 경우에도 지원(ex. 키보드를 분실한 컴퓨터를 사용해야 할 상황, 운전중에 급히 연락해야 될 상황 등)

3. 사회적 이미지 향상

웹 콘텐츠 접근성 지침(W3C)

⚡인식의 용이성

1. 적절한 대체 텍스트 삽입 <img.... alt="대체 텍스트"/>
2. 자막 제공
3. 색에 무관한 콘텐츠 인식
4. 명확한 지시사항 제공
5. 텍스트 콘텐츠 명도 대비
6. 자동재생 금지
7. 콘텐츠 간 구분

⚡운용의 용이성

1. 키보드 사용 보장
2. 초점 이동
3. 조작 가능
4. 응답 시간 조절
5. 정지 기능 제공
6. 깜빡임과 번쩍임 사용 제한
7. 반복 영역 건너뛰기
8. 제목 제공
9. 적절한 링크 텍스트

⚡이해의 용이성

1. 기본 언어 표시
2. 사용자 요구에 따른 실행
3. 콘텐츠 선형 구조
4. 표의 구성
5. 레이블 제공

	<label for="user_id">아이디</label>
    <input id="user_id" type="text" placeholder="아이디" />

6. 오류 정정 방법 제공

⚡견고성

1. 마크업 오류 방지
2. 웹 애플리케이션 접근성 준수