keyword 웹표준, 웹접근성, SEO

💡 웹표준이란?

: W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’

💡 대표적인 웹표준 기술

1. Semantic HTML

• (요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실하게 의미를 가지고 있는) 시맨틱 요소를 적절하게 사용하여 구성한 HTML
• 자주 사용되는 시맨틱 요소의 종류
  

2. WAI-ARIA

• WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격
• 시맨틱 요소의 보조적인 역할로 사용
• HTML 태그 내부에 속성(attribute)을 추가함으로써 의미를 부여
  • WAI-ARIA 속성 3가지
    • 역할(role) : (HTML의 요소 종류와 역할이 맞지 않을 때) 어떤 역할을 하는 요소인지 명시하는 속성

      // 예를 들어, 버튼으로 사용되는 요소를 만들었는데 `<div>` 요소를 사용했다면, 이 요소가 버튼 역할을 하고 있음을 다음과 같이 표시해줄 수 있습니다.
      <div role="button">div이지만 button으로 사용되는 요소</div>

    • 상태(state) : 요소의 현재 상태를 나타내는 속성
      • aria-selected : 선택 상태인 요소를 표시
      • aria-expanded : 아코디언 UI가 펼쳐진 상태인지 표시
      • aria-hidden : 숨김 상태인지를 표시
    • 속성(property) : 요소의 특징을 정의하는 속성

      • aria-label : 요소에 대한 정보를 전혀 얻을 수 없는 경우 표시 (예: 이미지로만 만들어진 버튼)

      • aria-live : 화면의 동적 요소 표시 (예: 알림창, 모달, 실시간 내용 갱신 영역 등)

        
        

💡 웹표준 장점

1. 웹 접근성 향상

• 나이, 성별, 장애 여부, 사용 환경을 떠나서 항상 동등한 수준의 정보를 제공
• ‘한국형 웹 콘텐츠 접근성 지침 2.1’ 웹 접근성 지침 2.1 | Web Soul Lab
  

2. 웹 호환성 확보 (=크로스 브라우징)

• 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 “동등한” 결과 제공

3. 검색 효율성 증대 (= SEO 개선)

• 웹 표준에 맞춰 웹 사이트를 작성하는 것 만으로도 검색 엔진에서 더 높은 우선 순위로 노출 가능
  • SEO (Search Engine Optimization, 검색 엔진 최적화)는 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업이며, 웹 페이지를 보다 검색 상위에 노출되도록 만듬.
    • On-Page SEO : 페이지 내부에서 진행할 수 있는 SEO
      • 예시) HTML , <meta>, <hgroup> 태그 활용
    • Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO
      • 예시) 광고비를 지불하고 검색 결과 상위에 뜨게 만듬

4. 유지 보수 용이

• HTML, CSS, JavaScript 각 영역이 분리되면서, 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과 획득