웹 표준 & 접근성

Jinwoo Choi·2022년 11월 3일

부트캠프

목록 보기

27/29

🔷 1. 웹 표준

웹 표준의 개념과 등장 배경을 기억한다.

웹 표준을 지켰을 때의 장점을 이해한다.

Semantic HTML을 작성해야 하는 이유를 이해한다.

Semantic HTML을 작성하는 방법을 이해한다.

자주 틀리는 마크업 규칙과 올바르게 작성하는 방법을 기억한다.

크로스 브라우징의 개념과 방법을 기억한다.

1.1. 웹 표준의 개념

서로 다른 브라우저 간의 호환을 위해 웹 개발의 형식을 통일 시킬 필요가 있었다.
그래서 웹 표준이 탄생했다.
웹 표준 (W3C: World Wide Web Consortium)
- 정의: 웹에서 표준적으로 사용되는 기술이나 규칙
- 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고, 작동하도록 하는 웹 페이지 제작 기법을 정한다.
- HTML, CSS, JavaScript 등의 언어 대상
웹 표준의 장점
- 유지 보수의 용이성
- 웹 호환성 확보
- 검색 효율성 증대
- 웹 접근성 향상

1.2. Semantic HTML

의미를 가진 구조를 만들겠다!
단락, 문단. 이 두 개로도 충분히 화면을 구성할 수는 있으나 의미를 구별하기에는 부족하다.
그래서 각 색션별로 의미를 부여해주기로 한다. 그걸 시맨틱 HTML이라 부른다. 참 쉽죠?

필요한 이유
- 개발자간 소통
- 검색 효율성
- 웹 접근성

참고 사이트: MDN. Semantics

1.3. 자주 틀리는 마크업

인라인 요소 안에 블록 요소
- 인라인 요소: 콘텐츠가 차지하는 만큼만 차지
- 블록 요소: 가로로 넓게 화면 영역을 차지
- 블록 요소가 상위 요소여야 한다.
,  요소 사용
- 시맨틱 하지 않아.
- 두껍게는 
- 기울이기는  사용하면 된다.
<hgroup> 마구잡이 사용
- 구조적으로 쓰면 된다.
- 스타일을 위해 쓰지 마. 스타일은 어디에서? CSS에서.
  연속 사용
- 텍스트 흐름에 줄 바꿈을 위한 요소.
- 역시나 스타일을 위해 간격 주려고 쓰지마. 간격 주고 싶으면 문단에 마진, 패딩 쓰세요.
인라인 스타일링 사용
- HTML 안에 CSS 스타일 바로 적용할 수 있지만, 파일 분리해서 쓰자.
- 웹 표준을 위해서도, 궁극적으로 리팩토링을 위해서도.

1.4. 크로스 브라우징

크로스 브라우징(Cross Browsing)의 목적은 웹 사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공하는 것이다.
지긋지긋한 액티브X
R.I.P 익스플로러

크로스 브라우징 워크 플로우는 다음과 같다.
1. 초기 기획
  타겟 고객층의 주 사용 브라우저와 기기를 파악 후 공략
2. 개발
  호환성에 주의하며 코드 작성
3. 테스트 / 발견
  운영체제, 기기, 브라우저 별 테스트 진행
4. 수정 / 반복
  버그 발견 시 수정

🔷 2. SEO

SEO의 개념과 필요성을 기억한다.

SEO의 종류를 기억하고 구분할 수 있다.

SEO에 영향을 주는 요소의 종류와 작성 방법을 기억한다.

SEO에 영향을 주는 요소를 직접 작성할 수 있다.

2.1. SEO 개념

SEO(Search Engine Optimization): 검색 엔진에 맞게 웹 페이지를 최적화 해주는 작업이다.
On-Page SEO: 페이지 내부
Off-Page SEO: 페이지 외부(광고, 링크)

2.2. SEO에 영향을 미치는 요소

<title> 요소

검색 결과창에 제목으로 보여지는 부분.
키워드 포함해서 고객을 유도하는 매력적인 문구를 작성해야해.

<meta> 요소

메타 데이터를 담는 요소.
메타 데이터: 해당 사이트가 다루고 있는 데이터를 설명한다.
역시나 검색 결과창에 설명 문구로 등장.

SEO를 위한 meta 요소

<meta name="속성값" content="내용" />

name 속성값	설명
description	콘텐츠에 대한 간략한 설명. 검색 결과에서 제목 밑에 뜨는 내용.
keywords	웹 페이지의 관련 키워드들을 나열할 때 사용
author	콘텐츠의 제작자를 표시

오픈 그래프 meta 요소

<meta property="속성값" content="내용" />

property 속성값	설명
og:url	페이지의 표준 URL
og:site_name	사이트의 이름
og:title	콘텐츠의 제목
og:description	콘텐츠에 대한 간략할 설명. 검색 결과에서 제목 밑에 뜨는 내용
og:image	미리보기로 표시될 이미지
og:type	콘텐츠 미디어의 유형. 기본 값은 website로, video, music 등의 유형을 표시
og:locale	리소스의 언어로, 기본값은 en_US. 한국은 ko_KR

<hgroup> 요소

키워드 위주로 작성해. 반복하면 역효과니 주의해.

콘텐츠

개성있는 브랜딩
복붙 금지
간결한 제목과 설명
텍스트 위주
이미지를 넣으면 설명 문구 alt속성 사용

🔷 3. 웹 접근성

웹 접근성의 개념과 필요성을 이해한다.

국내에서의 웹 접근성 실태를 기억한다.

웹 콘텐츠 접근성 지침을 기억한다.

웹 콘텐츠 접근성 지침을 충족시키는 방법을 기억한다.

WAI-ARIA의 사용법을 기억한다.

3.1. 웹 접근성의 개념

궁극적 목적: 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것
대표적인 예로 시각 장애인, 청각 장애인 들이 어떻게 똑같은 영상, 글을 전달 받을 수 있을까 고민하는 것
우리 나라 사이트는 정말 최악. 특히 여행사와 쇼핑 사이트 ㅂㄷㅂㄷ 죄다 이미지만 올려놓고 속성 값으로 설명 문구 건너 띈다.
기대 효과
- 사용자층 확대
- 다양한 환경 지원
- 사회적 이미지 향상

3.2. 웹 콘텐츠 접근성 지침

인식의 용이성(Perceivable)
운용의 용이성(Operable)
이해의 용이성(Understandable)
견고성(Robust)

3.3 WAI-ARIA

WAI(Web Accessibility Initiative): 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
ARIA(Accessible Rich Internet Applications): 웹 접근성을 갖추기 위한 기술
WAI-ARIA: WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격
필요성
- HTML 요소에 추가적으로 의미 부여 가능
- SPA처럼 AJAX를 사용하는 동적인 콘텐츠에서도 웹 접근성 향상 가능

HTML 태그 내부에 속성(attribue) 추가

역할(role)
HTML의 요소 종류와 역할이 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해주는 속성(attribute)

// GOOD
<div role="button">div이지만 button으로 사용되는 요소</div>
// BAD
<button role="button">button인 요소</button>

상태(state)
현재 어떤 부분이 선택되어 있는지 알 수 있어야 한다.

<div role="tabList">
  <li role="tab" aria-selected="true">Tab1</li>
  <li role="tab" aria-selected="false">Tab2</li>
  <li role="tab" aria-selected="false">Tab3</li>
</div>

<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>

속성(property)
요소에 대한 정보를 제공

<button> <img src="X.png" /> </button>
<button> <img src="돋보기.png" /> </button>

aria-live: 실시간으로 내용을 갱신하는 영역인지 표시
polite , assertive , off(default)

참고 사이트: MDN. Using ARIA
참고 사이트: ARIA in HTML

Jinwoo Choi

Let your code speak for you.

이전 포스트

Redux data flow

다음 포스트