데굴데굴

웹 표준과 웹 접근성 본문

Programming

웹 표준과 웹 접근성

aemaaeng 2022. 11. 8. 13:34

웹 표준

예전엔 브라우저마다 따로 개발을 해주어야 했음. (개발자 살려...)
웹 개발의 형식을 통일시키기 위해 등장한 것이 웹 표준
사용자가 어떤 브라우저를 쓰더라도 동등한 웹 페이지를 보여줄 수 있도록 제작 기법을 담고 있다.

 

장점
1. 유지 보수의 용이성 + 구조, 표현, 동작 영역이 분리되면서 코드의 경량화로 트래픽 비용 감소
2. 웹 호환성 확보
3. 검색 효율성 증대
4. 웹 접근성 향상: 웹 표준을 맞추는 것만으로도 접근성을 향상시킬 수 있다.

 

Semantic HTML

그냥 <div>와 <span>만 사용해도 화면을 구성할 수는 있다.
하지만 요소를 딱 봤을 때 어떤 역할을 하는지 짐작할 수 없다.
그렇기 때문에 Semantic HTML의 사용이 권장된다.

 

장점
1. 개발자간 소통
2. 검색 효율성: 시맨틱 요소를 쓰면 우선순위를 정할 수 있다.
3. 웹 접근성 향상

 

<article>: 독립적으로 구분해 재사용할 수 있는 부분을 의미
<section>: 문서의 독립적인 구획, 주제별로 구분한 그룹. 논리적으로 관계있는 요소 또는 문서를 분리할 때 사용

 

참고

 

[HTML/CSS] Section태그와 Article태그 차이, 이미지최적화, UIUX에 대해

section 태그는 섹션(부분, 구역, 영역) 들을 그룹화 해서 분리하는 역할을 한다.article 태그는 문서내에서 그룹화해서 분리하는 역할을 한다.article과 section 이 두 시맨틱 태그는 div와 같은 블록 속

velog.io

 

인라인 요소 안에 블록 요소를 넣는 것을 피하고,
<b>, <i> 대신 <strong>, <em>을 쓰자.
<hgroup>은 화면 구조에 맞게 쓰기
<br />은 목적에 맞게 사용하자
인라인 스타일링 대신 스타일 컴포넌트나 CSS 파일 이용하기

 

크로스 브라우징

목표: 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것

최신 문법을 지원하지 않는 익스플로러 때문에 강제로 웹 표준을 저해하는 코드를 작성하게 됨.

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

  1. 초기 기획: 어떤 웹사이트를 만들지 정확하게 결정하기
  2. 개발: 호환성 확인하기, MDN, Can I Use
  3. 테스트: 데스크톱 브라우저, 휴대폰 및 태블릿 브라우저, 운영 체제 (테스트 도구)
  4. 수정/위 과정 반복

 

SEO

Search Engine Optimization

On-Page SEO: 페이지 내부 SEO, 제목/콘텐츠/핵심키워드 배치/HTML 요소 사용법 이용
Off-Page SEO: 웹사이트 외부 SEO, 소셜 미디어 홍보/백링크/웹페이지 내용과는 무관

On-Page에서 통제할 수 있는 요소


👉 <title>
검색 결과창의 제목에 해당
<head> 요소의 자식 요소로 작성
핵심 키워드는 한 번만 포함하기

 

👉 <meta>

메타 데이터를 담는 요소
<head> 요소의 자식 요소로 작성
검색 결과창에서 제목 밑에 따라오는 녀석들. -> name 속성
채팅방에 공유했을 때 밑에 뜨는 정보 -> <property> 속성 (Open graph), 페이스북에서 게시물을 공유하기 위한 목적으로 만듦

 

웹 접근성

Web Accessibility


장애인, 고령자 등이 웹사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것

그 어떤 상황에서도 동등한 수준의 정보를 제공받도록 보장.

 

우리나라의 웹 접근성 실태는 그리 좋지 않다.
해외 쇼핑몰 사이트에 들어가보면 상품의 기본 정보가 모두 텍스트로 작성되어있음.
모든 공공기관과 법인 웹사이트는 웹 접근성을 갖추어야 한다. 

법이 제정되어 있지만 엄격하게 단속하지는 않는 상태임.

 

웹 접근성 향상을 통해 얻을 수 있는 효과

  1. 사용자층 확대
  2. 다양한 환경 지원
  3. 사회적 이미지 향상

인식의 용이성 - 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
* 색에 관계없이 콘텐츠를 인식할 수 있어야 한다. 그래프 같은 곳에는 테두리를 넣어 각 영역이 구별되도록 하는 것이 좋음. 레이블까지 달면 더 좋다!
* 배경과 콘텐츠 간의 명도 대비도 신경써야 한다. (4.5대 1 이상)

 

운용의 용이성 - 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.

 

이해의 용이성 - 콘텐츠는 이해할 수 있어야 한다.
* 콘텐츠 선형 구조: 글은 제목, 내용 순서로 제공되는 것이 논리적으로 맞다.

// NO
<div>탭1</div>
<div>탭2</div>
<div>탭1 관련 내용</div>
<div>탭2 관련 내용</div>

// YES
<div>탭1</div>
<div>탭1 관련 내용</div>
<div>탭2</div>
<div>탭2 관련 내용</div>

 

견고성 - 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
* 요소의 속성 중복해서 쓰지 않기

 

WAI-ARIA

WAI (Web Accessibility Initiative) : 웹 접근성을 담당하는 기관
ARIA (Accessible Rich Internet Applications): 웹 접근성을 갖추기 위한 기술

 

남용 금지
보조적으로 사용하면 웹 접근성 향상 가능

Role

HTML 요소 종류와 실제 역할이 일치하지 않을 때 역할을 부여

State

aria-selected: 불리언으로 선택된 상태임을 표시

 

Property

aria-label: 요소에 대한 정보를 전혀 얻을 수 없을 때 레이블을 표시 ex) 이미지로만 만들어진 버튼

aria-live: 화면의 동적인 요소를 알려줄 때 도움된다. ex) alert, modal, dialog 혹은 ajax
속성값: polite, assertive, off(default)

 

이 외에도 다양한 속성이 존재함. 
하지만 가장 중요한 것은 시맨틱한 HTML을 작성하는 것.

WAI-ARIA는 보조적인 역할을 수행함을 잊지 말자.

'Programming' 카테고리의 다른 글

<WEB> Lighthouse로 웹사이트 성능 분석하기  (0) 2022.12.05
번들링과 웹팩  (0) 2022.11.23
Flux architecture와 Redux 데이터 흐름  (0) 2022.11.02
무신사 모바일 페이지 UI/UX 분석 (피터 모빌의 UX 7요소, 제이콥 닐슨의 10가지 사용성 평가)  (0) 2022.10.26
UI/UX  (0) 2022.10.24
'Programming' Related Articles more
Comments