정의

어떤 환경에서도 이용할 수 있는 웹 페이지 : 웹표쥰

어떤 사람이든 이용할 수 있는 웹 페이지를 만들 수 있는 방법 : 웹 접근성

<웹 표준>

등장배경

• 여러 브라우저간 호환을 위해 웹 개발 형식을 통일 시키기 위해 시작되었다.

  • 웹 표준이 없었을 때는 웹 플랫폼마다 그 형식에 맞게 개발했어야해서 시간과 비용이 많이 들었다.

• OS나 특정 브라우저에 종속되지 않고 여러 OS, 브라우저간 같은 화면을 볼수 있게 한 웹페이지 제작 기법을 만들려고함.

개념

• W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙을 말함.
• HTML, CSS, JavaScript등의 기술을 다룸
• 브라우저의 종류에 상관 없이 ‘동일한’ 화면과 기능이 아니라 동등한 화면과 기능을 제공할 수 있도록 만드는 작업.
  • 브라우저들의 렌더링 엔진이 각자 다르므로 동일한 화면을 만드는 것은 불가능 하다.

장점

1. 유지보수에 유리하다.
   • HTML, CSS, JavaScript를 각영역별로 파일로 분류해서 관리
2. 웹 호환성
3. 검색 효율성 증대
   • 웹 페이지에 대한 정확한 정보 작성 등 검색 효율성과 관련된 내용도 웹 표준에서 다룸
4. 웹 접근성 향상

• 다양한 기기들을 이용하는 사용자들에게 최적화시켜 만들지 않아도 사용할 수 있으므로 접근성이 좋다.

cross browsing Test

• MDN ,Can I Use사이트에서 코드의 호환성을 파악하는것을 1차적으로 한다.
• TestComplete, LambdaTest, BitBar 툴을 사용하여 테스트 한다.

---

SEO(Search Engine Optimization)

• 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업
• 검색 엔진에서 웹 페이지를 상위에 노출될 수 있게끔 만들어 준다.

SEO 종류

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

SEO에 영향을 미치는 요소

1. title
   • 검색 결과창에서 제목에 해당하는 요소
   • head 태그에 작성한다.
2. meta
   • metadata(다루고 있는 데이터가 무엇인지에 대한 데이터)를 담는 요소
   • head 태그에 작성한다.
   • SEO를 위한 name속성이 있고 open graph를 위한 property속성(게시글 공유시 사용하는 속성)이 존재한다.

  SEO를 위한 meta 요소
   <meta name="속성값" content="내용" />
   오픈 그래프 (open graph)
   <meta property="속성값" content="내용" />

3. hgroup
4. content작성시 주의
   • 개성있는 키워드 사용하기
   • copy paste 금지
     • 타 사이트 글을 그래도 복붙하면 검색엔진 기존의 문서를 상위에 노출하고 이하는 중복 문서로 판단함
   • 간결한 제목
   • 이미지보다는 글자 (상황에 맞게)

Semantic HTML

semantic : 의미의, 의미가 있는
HTML : 화면의 구조를 만드는 마크업 언어

• 웹페이지를 의미 있는 마크업으로 구성하기 위해서 div, span의 남발을 지양하고 의도에 맞게 header, nav, main ,aside, article, section, ul, li, footer 등으로 구성

장점

1. 개발 기획시 비용과 시간이 줄어든다.
   • div와 span으로만 구성할 시 id, class를 정하고 기능을 정하는데 드는 시간, 문서화 하는 시간을 줄일수 있다.
2. 검색 효율성
   • 검색엔진은 HTML요소를 보고 연관된 내용을 분석한다. div, span으로 구성된 HTML은 검색엔진이 보기에 요소의 우선순위가 없기 때문에 semantic으로 구성된 HTML을 검색 결과 상단에 표시한다.
3. 웹접근성 향상
   • 나이, 성별, 장애 여부, 사용 환경을 떠나서 항상 동일한 수준의 정보를 제공할 수 있어야 하므로 스크린리더를 사용하는 사람등 에게도 동일한 정보를 제공할 수 있다.

자주 사용하는 sementic element

element
header	페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소
nav	메뉴, 목차 등에 사용되는 요소
aside	문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소
main	문서의 메인이 되는 주요 콘텐츠를 담는 요소
article	게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소. 각각의 article을 구분하기 위한 수단이 필요하며, 보통 제목(hgroup)을 포함하는 방법을 사용
section	문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용. 제목(hgroup)을 포함하는 경우가 많습니다.
hgroup	제목을 표시할 때 사용하는 요소로, <h1 ~ h6> 요소가 hgroup이다.
footer	페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소

---

<웹 접근성>

• 정보 접근에 제한을 받는 불편함을 겪는 상황 또는 장애인, 고령자들도 동등한 수준의 정보를 제공받도록 하는 목적.

웹 콘텐츠 접근성 지침

• 시각적으로 제약이 있는 상황에서 이미지 같은 콘텐츠를 이해할수 있도록 텍스트로 제공해야한다.(소리로 이해)

• 'WCAG(Web Content Accessibility Guidelines)', '한국형 웹 콘텐츠 접근성 지침'을 참고해서 HTML 작성해야한다.

WAI-ARIA

WAI-ARIA는 WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격

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

장점

• 시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 HTML 요소에 추가적으로 의미를 부여할 수 있게 해준다.
  • 시맨틱 HTML을 사용하는게 우선이고 보조적인 기능으로 사용해야한다. 즉 WAI-ARIA를 안써도 되는 상황이면 사용하지 말아야한다. 또한 WAI-ARIA를 남용하는건 지양해야한다.
• SPA처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에대한 정보를 전달해줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상시킬 수 있다.

사용법

• HTML내부에 속성을 부여함으로 사용되고 그 속성에는 크게 역할, 상태, 속성이 있다.

1. 역할(role) : HTML 요소가 어떤 역할을 하는지 정의하는 속성

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

- 화면이 아닌 HTML만을 보고 화면을 파악하고자 할때 부가적인 설명(WAI-ARIA 기능)없이 파악하기 어렵기때문에 `역할을 명시해줌`

2. 상태(state) : 요소의 현재 상태를 나타내는 속성

   • 마찬가지로 HTML만 보고 화면을 파악할 때 현재 화면이 어떤 상태인지 알수있게 써놓은 속성

   • tab 컴포넌트의 aria-selected, 아코디언의 ara-expanded, aria-hidden 등의 속성이 있다.

3. 속성(property) : 요소의 특징을 정의하는 속성

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

• aria-label은 HTML 요소의 구조만으로 어떤 역할을 하는지 파악하기 어려울때 role은 기능을 하는 요소를 말하고 label은 요소의 기능 설명을 말한다.
• aria-live 속성은 해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시.
  • 시각 장애인들은 화면의 동적인 요소를 알아채기 어렵기 때문에, 이 속성을 사용해서 실시간으로 갱신되는 내용을 알려주면 큰 도움이 된다.

---

참고하면 좋은 사이트

SEO 기본 가이드

Naver - 웹마스터 가이드
https://searchadvisor.naver.com/guide
google - SEO 기본 가이드
https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=ko

WAI-ARIA

https://www.w3.org/TR/html-aria/
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques