본문 바로가기
카테고리 없음

[사용자 친화 앱] 웹 표준과 접근성

Withlaw 2022. 9. 6. 17:17

웹 표준

-어떤 환경에서도 문제 없이 이용할 수 있는 웹페이지를 만드는 방법을 제시

-유지 보수성, 브라우저 호환성, 검색 효율성, 접근성

 

방법

1. Semantic HTML 작성

2. HTML 작성 팁

2.1) 인라인 요소 안에 블럭 요소 넣으면 안됨

2.2) <b> & <i> 보다는 <strong> & <em>을 쓸 것

2.3) <hgroup>는 목차 역할을 하면서 컨텐츠의 상하관계를 표현할 때 사용함. 글자 크기만 고려해서 사용하면 안됨

2.4) 줄바꿈 태그<br /> 보다는 블럭 요소의 margin, padding 등의 스타일 속성을 쓸 것

2.5) 스타일 속성을 <html> 요소 내부에  인라인으로 작성하지 말 것! html, css, js는 항상 분리해서 작성할 것

 

3. 크로스 브라우징

-각 브라우저에서 호환되는 코드가 다르다.

-여러 디바이스에서 테스트가 필요하다. (브라우저-크롬,엣지 등/ 스마트폰-사파리 등)

  *크로스 브라우징 테스트 툴: TestComplete, LambdaTest, BitBar

-버그가 발생한 특정 브라우저에서 조건문을 이용하여 코드를 수정하는 것이 좋다.

 

 

4. 검색엔진최적화SEO

  • On-Page SEO : 말 그대로 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법
  • Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법으로, 웹 페이지 내용이나 구조와는 관계가 없음

-> On page SEO

주로 <head>에 들어가는 요소들과 관련됨

-<title> : 검색에 가장 중요한 요소로 반드시 핵심 키워드를 포함해야함

-<meta> : 메타데이터. 해당 웹 사이트에서 다루는 데이터가 무엇인지에 대한 데이터

  * 링크 공유할 때 나타나는 미리보기도 여기에 포함

 

-name 속성

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

-property 속성

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

*og (open graph) : 페이스북에서 게시물을 공유하기 위한 목적으로 만듦

 

<body> 요소에는 다음이 있음

-<hgroup>

-<img> alt 속성 : 이미지 설명

 

웹표준 참고)

-SEO 기본 가이드: https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko 

-NAVER 웹 마스터 가이드: https://searchadvisor.naver.com/guide

 

 

웹 접근성

-화면을 볼 수 없거나, 소리를 들을 수 없거나, 화면 터치&마우스&키보드 등 조작이 어렵거나 하는 등 정보 접근에 제한을 받는 상황을 해결하기 위한 방법을 제시

 

1. 적절한 대체 텍스트

<img src="이미지 주소" alt="대체 텍스트" />

*배경 이미지와 같이 인식할 필요가 없는 정보에는 빈 문자열을 주어 스크린 리더가 인식하지 않도록 한다

*인접 요소에는 정보를 중복해서 적용하지 않도록 한다.

 

2. 자막 제공

-멀티미디어 컨텐츠에는 자막, 원고, 수화 등을 함께 제공한다.

<video ... >
	<track src="자막.vtt" kind="captions" />
</video>

*WebVTT(Web Video Text Tracks, .vtt 파일) 또는 Timed Text Markup Language(TTML)형식을 사용해야 함.

 

3. 색에 무관한 컨텐츠 인식

-컨텐츠는 색상에 관계 없이 인식될 수 있어야 한다.

-색약이나 색맹 등을 가진 사용자들을 위해 테두리나 수치 레이블 등을 포함한다.

 

4. 명확한 지시사항 제공

-지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.

 

5. 텍스트 컨텐츠 명도 대비

-텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.

-다음 상황에서는 콘텐츠와 배경 간의 명도 대비가 3 대 1 까지 허용된다.

  • 텍스트가 18pt 또는 굵은(Bold) 14pt 이상일 경우, 확대 가능한 페이지인 경우, 비활성화 된 콘텐츠인 경우, 장식 목적의 콘텐츠인 경우

 

6. 자동 재생 금지

-자동으로 소리가 재생되지 않아야 한다.

-불가피하게 제공해야 하는 경우에는 다음과 같이 해결할 것.

  • 가장 먼저 위치시켜 정지할 수 있게 구현하기
  • ESC를 눌러 정지
  • 3초 내에 정지

7. 컨텐츠 간 구분

-이웃한 콘텐츠는 구별될 수 있어야한다.

-테두리, 구분선, 무늬, 명도대비, 간격 등 시각적으로 구분할 수 있는 방법 사용함.

 

8. 운용의 용이성 (Operable)

-키보드 사용 보장

-초점은 항상 좌->우 , 상->하 로 이동하면서 페이지를 탐색한다.

-시간 제한이 있는 컨텐츠는 시간을 연장하거나 정지할 수 있는 수단을 제공

-자동으로 변경되는 컨텐츠 또한 움직임을 제어할 수 있는 수단을 제공

-눈에 피로를 유발하는 깜빡임 및 번쩍임 등의 컨텐츠는 사용을 자제

  *만약 이런 콘텐츠를 제공하게 되는 경우 다음 조건 중 하나를 충족할 것

  • 번쩍이는 콘텐츠가 차지하는 면적이 전체 화면의 10% 미만이어야 함
  • 사전에 경고하고 중단할 수 있는 수단을 제공해야 함
  • 시간을 3초 미만으로 제한해야 함

-반복 영역 건너뛰기 기능 제공 (메인 컨텐츠로 바로가기 링크 등)

 

9. 이해의 용이성 (Understandable)

-기본 언어 표시

<html lang="ko">

*페이지 내에 다른 언어가 존재하면 해당 요소에 lang 속성을 표기할 것

 

-사용자가 의도하지 않은 기능은 실행을 되도록 자제할 것

*필요시에는 예측 가능하도록 실행하고 사용자가 제어할 수 있게 해야함

*새 창을 띄울 경우 이를 알려줄 수 있어야 함

 

-컨텐츠는 논리적인 순서로 제공되어야 한다.

-표는 이해하기 쉽도록 구성할 것.

  *테이블 요소 안에는 caption 요소를 사용하여 표에 제목을 제공할 것

-사용자 입력에 대응하는 레이블을 제공할 것.

 

-입력 오류를 정정할 수 있는 방법을 제공할 것

  *오류 발생 원인을 알려주고, 해당 위치로 초점이 이동시킬 것

  *오류가 발생했을 때 입력했던 내용이 사라지지 않고 유지되도록 할 것

 

10. WAI-ARIA

  • WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
  • ARIA (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
    • RIA (Rich Internet Applications) : 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다.

-웹 접근성을 향상시킬 수 있는 방법 중 하나로 HTML 요소에 추가적으로 의미를 부여할 수 있게 해준다.

-다음과 같은 상황에서 보조적으로 사용하면 웹 접근성을 향상시킬 수 있다.

  1. 시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색 할 수 있게 도와줍니다.
    • ‘시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황’이라는 것은 시맨틱 요소만으로 충분한 상황에서는 WAI-ARIA를 사용하지 않아야 한다는 의미입니다. WAI-ARIA는 보조적인 역할로만 사용해야 합니다. WAI-ARIA를 남용해선 안 되며, 시맨틱한 HTML을 작성하는 것이 최우선입니다.
  2. SPA처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에대한 정보를 전달해줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상시킬 수 있습니다.

 

-WAI-ARIA 사용법

1. role

-HTML 요소의 역할을 정의하는 속성

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

-Tab 컴포넌트 활용 예)

<div role="tabList">
  <li role="tab">Tab1</li>
  <li role="tab">Tab2</li>
</div>

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

 

2. aria-<state>

-요소의 현재 상태를 나타내는 속성

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

// 3개의 탭 중에서 첫 번째 탭이 선택된 상태임을 알 수 있다.

-이 외에도 아코디언 UI가 펼쳐진 상태인지 표시해주는 aria-expanded, 요소가 숨김 상태인지를 표시하는 aria-hidden 등의 속성이 있다.

 

3. aria-<property>

-요소의 특징을 정의하는 속성(attribute)

*aria-label: 요소에 라벨을 붙여 요소가 어떤 역할을 하는지 파악할 수 있는 수단을 제공함 

<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>

*aria-live: 해당 요소가 실시간으로 내용을 변경하는 영역인지 표시함. 즉, 브라우징 도중에 내용을 띄우는 alert, modal, dialog 와 같은 역할을 하는 요소이거나, AJAX 기술을 사용하여 실시간으로 내용을 변경하는 영역에 사용하는 속성임

  1. polite : 스크린 리더가 현재 읽고있는 내용을 모두 읽고나서 변경된 내용을 사용자에게 전달.
  2. assertive : 스크린 리더가 현재 읽고있는 내용을 중단하고 변경된 내용을 바로 사용자에게 전달.

4. 이외에도 다양한 WAI-ARIA 속성이 존재한다. role, aria-label 정도만 사용해도 충분하고 필요시에 검색해서 사용할 것

-시맨틱 태그가 주이고 WAI-ARIA는 보조용임!

참고) https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

티스토리툴바