웹 1.0 ~ 웹 3.0에 이어 웹 표준, 웹 접근성에 대해 포스팅하여 웹에 대한 이해를 심층적으로 할 수 있는 것이 오늘 목적입니다.
📖 웹 표준이란?
- 웹 표준이란 웹 상에서 지켜야 하는 표준 규칙입니다.
- W3C에서 지정안 표준안을 지켜 제작된 사이트를 웹 표준을 잘 준수한 사이트라고 부릅니다.
- 웹 표준은 웹에서 사용되는 기술과 규약들이 동일하게 구현되어 웹 어플리케이션이 다양한 웹 브라우저와 플랫폼에서 동일하게 작동할 수 있도록 하는 것을 목표로 합니다.
- 웹 표준으로 웹의 안정성, 접근성을 높이고 개발자들이 보다 쉽게 웹 기술을 이용 가능하게 해주는 장점이 있습니다.
📖 웹 접근성이란?
- 웹 접근성은 장애인, 비장애인 모두가 웹 사이트를 이용할 수 있도록 하는 방식을 말합니다.
- 웹 사이트를 만드는 개발자 대다수가 비장애인이기에, 장애인들이 이용할 수 있는 웹 사이트 개발에 대한 인식이 부족하고, 이러한 관점에서 웹 접근성은 개발자가 지켜야하는 규칙이라 할 수 있습니다.
- 웹 접근성은 WCAG(웹 콘텐츠 접근성 지침)을 포함하여 지켜줘야 합니다. WCAG는 다음과 같은 원칙을 기반으로 합니다.
🎀 Perceivable : 모든 사용자가 정보를 인지할 수 있어야 합니다.
🎀 Operable : 모든 사용자가 상호작용이 가능하도록 지원되어야 합니다.
🎀 Understandable : 정보와 조작이 이해하기 쉬워야 합니다.
🎀 Robust : 다양한 플랫폼과 기기에서 안정적으로 작동해야 합니다.
📖 웹 표준 / 웹 접근성 접하기
- 인터넷 익스플로어, 크롬, 사파리 등등 웹 브라우저 종류에 상관없이 웹을 똑같이 이용할 수 있다면, 웹 표준을 지켜서 개발한 사이트입니다.
- 웹 표준을 준수하는 이유는 무엇보다 사용자가 어떤 웹 브라우저를 사용하더라도 사이트를 정상적으로 이용하게 하기 위함입니다.
- 다만 웹 표준에 비해 웹 접근성이 지켜졌는가를 생각해보면 아니라고 생각합니다. 장애인 분들이 편하게 이용할 수 있는 사이트가 눈에 보이지 않기 때문이죠. 웹 접근성은 개발 과정에서 웹 표준과 더불어 고민할 사항입니다.
📖 더 알아보기
🎁 웹 표준
밑의 html을 통해서 웹 표준을 볼 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 표준 예제</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
header {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>웹 표준 예제 페이지</h1>
</header>
<main>
<section>
<h2>섹션 1</h2>
<p>이곳에 섹션 1의 내용이 들어갑니다.</p>
</section>
<section>
<h2>섹션 2</h2>
<p>이곳에 섹션 2의 내용이 들어갑니다.</p>
</section>
</main>
<footer>
<p>© 2024 웹 표준 예제 페이지</p>
</footer>
</body>
</html>- 간단한 html 코드에서 눈여겨 봐야 할 점들이 있습니다.
🎀 문서 구조 : 해당 페이지의 기본 정보를 포함하는 head와 본문을 포함하는 body를 가진다
🎀 표준 엘리먼트 사용 : 모든 요소는 시작 태그와 종료 태그가 있어야 하면, 모든 요소와 속성은 소문자여야 한다.
🎀 인코딩 선언 : 문서들은 utf-8을 기본 인코딩으로 사용한다.
- 우리가 개발을 시작할 때 사용하는 html에서 이러한 웹 표준 규칙을 찾아볼 수 있습니다.
🎁 웹 접근성
- 웹 접근성 역시 html 코드에서 볼 수 있는데요. 설명은 이러합니다.
🎀 인식의 용이성 : 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해가능하게 적절한 대체 텍스트를 제공해야한다.
(img src ~~ 관련 코드)
🎀 운용의 용이성 : 모든 기능은 키보드 만으로도 사용 가능해야한다.
(a, button, input 등등)
🎀 이해의 용이성 : 입력 서식은 시각 장애인들이 해당 서식을 이해할 수 있도록 레이블을 제공해야한다. label을 제공할 수 없는 서식의 경우 title을 제공한다.
(input type = ~~ title = ~~ 관련 코드)
📖 WAI-ARIA
- 과거에는 사이트 조작에 사용하는 것들은 키보드와 마우스였으며, 단순한 동작을 위해서 html과 자바스크립트를 사용하는 정도였습니다.
- 현재는 스마트폰을 사용하는 모바일 시대이며, 스크린 터치라는 새로운 입력 방식을 이용하는 사용자가 증가했습니다. 이러한 변화로 시각 장애인들의 사이트 접근성에 대한 요구가 증가하게 됩니다.
- 결론적으로 사용자들의 요구에 따라 사이트에서 UI들은 html의 한계를 넘는 WAI-ARIA가 해결방안으로 등장하게 됩니다.
🎀 마무리하며
- 웹 표준과 웹 접근성은 개발자가 지켜야 하는 중요한 요소라고 생각합니다.웹 표준은 개발 시간 단축, 유지 보수가 나아지고, 검색 엔진의 최적화와 같은 장점이 있으며, 웹 접근성은 장애인들을 차별하지 않고 동등하게 웹을 이용할 수 있도록 하는 요소이기 때문이죠. 개발하는 과정에서 항상 두 요소들을 생각하면서 개발해야겠습니다.
나 혼자 보려고 만든 개발 일기