웹 표준, 웹 호환성, 웹 접근성

웹 접근성 공부를 위해서 공부한 내용 시리즈

▶ 2024.02.17 - [Web] - 웹 표준, 웹 호환성, 웹 접근성  <= 현재 글

▶ 2024.02.21 - [Web] - 웹 접근성 시나리오

▶ 2024.02.25 - [Web] - 웹 접근성이 왜 필요할까?

▶ 2024.03.16 - [Web] - 웹 접근성 기술 학습

▶ 2024.03.20 - [Web] - 웹 접근성 시나리오 - 2

▶ 2024.03.24 - [Web] - 랜드마크 롤

▶ 2024.03.27 - [Web] - WAI-aria

▶ 2024.03.31 - [Web] - 웹 접근성 시나리오 - 3

▶ 2024.04.04 - [Web] - 사용자가 입력하는 이미지

▶ 2024.04.06 - [Web] - 구글 SEO

---

웹 표준, 웹 호환성, 웹 접근성 비슷하지만 다른 친구들이다. 

개발을 하다가 관련된 이야기를 하면 어쩔 때는 웹 표준, 어쩔 때는 웹 호환성, 어쩔 때는 웹 접근성을 이야기한다. 

 

또는 구분 없이 비슷한 의미로 이야기를 하는 경우도 있다. 

과연 이것의 각각이 무엇이고 어떤 역할을 할까? 

 

포함관계를 먼저 이야기하자면 상향식으로 올라간다고 보면 된다. 

 

간략하게 목적과 지켜야 하는 내용을 정리하자면 

• 웹 표준 : 웹 사용성 및 접근성 보장 
                 HTML, CSS 등에 대한 W3C 문법 준수를 해야 한다. 
• 웹 호환성 : 웹 브라우저 버전, 종류와 관계없는 웹 사이트 접근 
                     HTML, CSS, JS 문법 준수 및 동작, 레이아웃, 플러그인 호환성
• 웹 접근성 : 인적, 환경적 요인에 제약 없는 웹 정보 접근
                     W3C 웹 접근성 이니셔티브 (Wia-aria) 준수 

결과적으로 전부 접근성이 핵심이다. 

또한 웹 호환성은 웹 표준을 포함하고 있으며, 웹 접근성은 웹 표준, 웹 호환성을 포함하고 있다. 

 

이제 하나하나 디테일하게 알아보자.

웹 표준 

웹을 구성할 때 W3C에서 마크업의 표준을 정한 것이다. 

HTML [ 구조 ] , CSS [ 표현 ], JS [ 동작 ]을 W3C 권고에 맞게 개발하는 것을 말한다. 

 

제대로 지키고 있는지 확인하기 위해서는 w3c validator를 확인하면 알 수 있다. 

마크업 코드를 확인해 보면 어디서 문제가 생겼는지 어떤 문제인지 바로 알 수 있다. 

 

웹 표준의 핵심 요소들을 하나씩 알아보자 

HTML5 

웹 개발과 땔 수 없는 마크업 언어인 HTML5이다. HTML5가 웹 표준에 엄청난 영향을 주었다. 

 

1. 다양한 태그의 등장 
   더 나은 문서 구조를 위해서 header, main, footer 등과 같은 태그가 등장하였다. 
   header, main, footer 태그들은 블록 레벨의 태그 ( width : 100%, height : auto )이다.
   
   동일한 블록 레벨 태그인 div를 사용하지 않고 각 태그를 사용하는 이유는 무엇일까? 
   스크린리더를 통해서 홈페이지를 볼 때 div를 사용한다면 [ 영역 ~ 내용 ]으로 설명하지만 
   header 등은 [ header의 ~ 내용 ]으로 설명을 해서 각 콘텐츠를 가시화할 수 있다. 
   
   즉, 사용자 입장에서 웹 접근성이 더 좋아진다. 
   
   
2. 다양한 메타 태그 등장
   많은 메타 태그들이 존재하지만 그중에서 
   meta viewport라는 태그를 사용하면 크로스브라우징, 반응형 웹을 구현할 수 있다. 
   
   즉, 메타 태그를 사용하는 많은 이유가 있겠지만 웹 호환성을 위해서 사용한다.  
   
   
3. 플러그인이 필요 없는 네이티브 API 제공 ( 비디오, 오디오, 캔버스... )
    과거 비디오나 오디오 등을 재생시키기 위해서는 activeX라는 프로그램을 브라우저에 내장시켰다. 
   
   이런 activeX의 가장 큰 단점은 IE에서만 가능하다는 것이다. 
   그 외 크롬과 같은 브라우저에서는 사용할 수 없다는 뜻이다. 
   
   이게  HTML5로 오면서 각각의 태그를 지원해 주면서 모든 브라우저에서 지원할 수 있게 되었다. 
   
   즉, 웹 호환성이 더 좋아졌다. 

HTML 태그의 종류 

Sectioning 태그

header, nav, section, aside, gooter, article 태그 등 범위를 정하는 태그  

 

앞서 말한 것처럼 div 태그를 사용하지 않고 Sectioning 태그를 사용하는 이유는 스크린리더를 사용했을 때 

해당 영역이 구역, 영역 등으로 읽게 되는 것이 아닌 header, nav, section 영역에서의 콘텐츠를 읽게 하기 위해서이다.  

 

section 태그의 경우 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 태그가 없을 때 사용한다. 

해당 태그는 독특한 조건이 하나 있는데 바로 h 계열 태그를 내부에 하나 이상을 가지고 있어야 한다.

 

왜 이런 조건을 가지고 있을까? 

마우스가 아닌 키보드로 웹 브라우저를 접근하는 경우 내가 원하는 섹션에 접근하기 위해서는 엄청 많은 

Tab 키를 눌러서 이동해야 한다. 

 

이때 스크린리더를 사용하면 다른 h 계열 태그로 이동하는 기능을 제공한다.

그러므로 각 영역을 나누고 h 태그를 넣어주면 영역 단위로 이동할 수 있는 기능을 제공하는 것이다.  

 

Heading 태그

h1~h6 태그로 영역의 제목을 나타낸다. 

이때, h1이 가장 높고 h6가 가장 낮은 태그이다. 

 

heading 태그를 사용할 때는 몇가지 주의사항이 있다. 

• 글씨 크기를 위해 제목 태그를 사용하지 않는다. 
  h 계열의 태그 목적이 글씨 크기를 구분하기 위해서가 아니다. 만약 필요하다면 font-size를 사용한다 !
  이런 이유는 브라우저의 종류에 따라 h 계열의 크기가 조금씩 다르기 때문이다. 
  
  
• h1으로 시작해서 h2,,,, 순차적으로 기입해야한다. 
  
  
• 페이지 당 h1 태그는 하나만 사용한다. 

 

Phrasing 태그

img 태그 등으로 구성된 태그이다. 

 

img 태그는 문서에 이미지를 넣을 때 사용하는 일반적인 태그이다. 

• src 속성 : 포함하고자 하는 이미지의 경로를 지정한다. 
• alt 속성 : 이미지의 텍스트 설명이다. 필수 속성은 아니지만 스크린리더가 alt 값을 읽어 이미지를 사용자에게
                 설명한다. 이는 접근성 차원에서 매우 유용하다.   
  
                 alt 속성을 넣어줄 때는 [이미지], [Image] 같은 문구는 제외하고 넣어준다. 
                 그 이유는 스크린리더가 읽어줄 때 [ 슬픈 사자 ] 라고 입력하면 [ 슬픈 사자 이미지 ] 라고 읽어준다. 
             
                 이미 이미지라는 문구를 마지막에 포함시켜주기 때문이다. 

 

만약에 이미지에 텍스트가 들어가는 경우는 안티패턴이지만 넣어야 한다면 alt 속성에 모든 텍스트를 기입해줘야 한다. 

 

이미지에 단순 장식 목적으로 넣는 경우에는 alt에 빈 값으로 넣어서 스크린리더가 읽지 않도록 해야한다. 

alt를 아에 넣지 않고 <img src="img.png" /> 만 입력한다면 스크린리더는 이미지의 src 경로를 읽어주게 된다. 

그러므로 alt ="" 를 넣어서 스크린리더가 읽지 않도록 하는 작업이 필수이다.

 

동일한 기능을 하는 버튼에 대한 대체 텍스트는 동일하게 작성해서 사용자가 쉽게 학습할 수 있도록 한다. 

 

Meta 태그 

화면에 표시되지 않고, 브라우저가 인식하고 분석 가능한 정보를 제공한다. 

 

위에서 말한 viewport 같은 속성이 있다. 

viewport 속성을 적용하지 않는다면 웹 브라우저들은 화면 상에서 보이는 영역에 페이지를 렌더링한다. 

이때, 데스크탑 기준으로 만들어진 웹 페이지는 모바일에서 페이지의 전체를 보기 위해서는 스크롤을 해야한다. 

 

하지만 viewport가 명시되어 있다면 모바일에서도 화면 전체 페이지를 확인할 수 있다. 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

Interactive 태그

대화형 컨텐츠를 위한 태그이다. 키보드 포커스 ( Focusable )를 받을 수 있는 태그를 말한다. 

 

a ( href 속성이 있는 경우 ), button, details, embed, iframe, input ( type 속성이 hidden이 아닌 경우 ),

audio ( controls 속성이 있는 경우 ), keygen, label, select, textarea, video ( contriles 속성이 있는 경우 ), 

img ( usemap 속성이 있는 경우 )의 태그가 있다. 

 

a태그 

href 속성을 통해서 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소 같은 다른 URL로 연결할 수 있는
하이퍼 링크를 만든다. 

 

새로운 리소스를 가져오거나 새로운 페이지를 불러오기 위해서 사용한다. 

 

button 태그

클릭 가능한 버튼을 나타내며, 데이터의 업데이트나 변경, 팝업 열기, 페이지의 특정 요소를 열거나 닫는 등의 

기능을 위해서 사용한다.  

 

※ Focusable Tabable 

Tabable의 경우 탭을 통해서 해당 태그에 이동할 수 있는 것을 말한다. 

Focusable 태그의 경우 탭 뿐만 아니라 키보드 방향키, space bar, enter 키를 통해서 접근할 수 있는 것을 말한다. 

웹 호환성

Cross Browsing 

크롬, 익스플로러, 파이어폭스 등 브라우저 상관없이 호환이 되고

데스크톱, 태블릿, 스마트폰 등 기기 관계없이 호환이 되며,

가로모드 / 세로모드 또는 인터넷 속도가 빠르거나 느리거나 모두 호환이 되는 것을 말한다.  

 

웹 접근성

검색엔진 최적화 SEO 

검색엔진에 노출될 수 있도록 코드를 최적화하는 것

SEO가 제대로 되지 않으면 홈페이지를 검색했을 때 내가 구현한 홈페이지보다 다른 홈페이지가 먼저 상단에 노출된다. 

 

SEO를 만족시키기 위해서는 홈페이지를 [ 잘 ] 만들면 된다. 

속도, 보안이 빠르고 웹 접근성, 웹 표준, 웹 호환성, 홈페이지의 키워드 일치도 등이 좋다면 당연히 상단에 노출될 것이다. 

 

이러한 SEO 만족도 조건이 300~400개 정도가 있다고 한다. 

 

※ SEO 최적화라는 이야기를 하는데,

Search Engine Optimizer의 약자인 SEO는 이미 Optimizer, 최적화라는 뜻을 가지고 있다. 

 

즉 SEO 최적화라는 말은 검색 엔진 최적화 최적화가 된다.