웹 표준
-어떤 환경에서도 문제 없이 이용할 수 있는 웹페이지를 만드는 방법을 제시
-유지 보수성, 브라우저 호환성, 검색 효율성, 접근성
방법
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 요소에 추가적으로 의미를 부여할 수 있게 해준다.
-다음과 같은 상황에서 보조적으로 사용하면 웹 접근성을 향상시킬 수 있다.
- 시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색 할 수 있게 도와줍니다.
- ‘시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황’이라는 것은 시맨틱 요소만으로 충분한 상황에서는 WAI-ARIA를 사용하지 않아야 한다는 의미입니다. WAI-ARIA는 보조적인 역할로만 사용해야 합니다. WAI-ARIA를 남용해선 안 되며, 시맨틱한 HTML을 작성하는 것이 최우선입니다.
- 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 기술을 사용하여 실시간으로 내용을 변경하는 영역에 사용하는 속성임
- polite : 스크린 리더가 현재 읽고있는 내용을 모두 읽고나서 변경된 내용을 사용자에게 전달.
- assertive : 스크린 리더가 현재 읽고있는 내용을 중단하고 변경된 내용을 바로 사용자에게 전달.
4. 이외에도 다양한 WAI-ARIA 속성이 존재한다. role, aria-label 정도만 사용해도 충분하고 필요시에 검색해서 사용할 것
-시맨틱 태그가 주이고 WAI-ARIA는 보조용임!
참고) https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques