-
웹 접근성과 웹 표준을 알아보자!개발 지식/WEB 2024. 5. 22. 16:55
웹 접근성 (Web Accessibility)
웹 접근성은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다.
위키 백과즉, 모든 사람이 웹 사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 사용할 수 있도록 보장하는 것을 말합니다.
이를 만족하기 위해서는 신체적 조건과 환경적 조건을 고려해야 합니다.
신체적으로는 장애인과 고령자를 포함한 모든 사람이 동등하게 이용할 수 있다는 것을 말합니다.
환경적으로는 다양한 플랫폼 및 디바이스, 웹 브라우저 등 모든 환경에서 이용할 수 있다는 것을 말합니다.
웹 콘텐츠 접근성 가이드라인 (WCAG) 준수
웹 콘텐츠 접근성 가이드라인은 인터넷의 주요 국제 표준 기구인 W3C에서 만든 가이드라인으로 웹 사이트 / 애플리케이션에서 충족해야 하는 기준을 정의하여 장애가 있는 사용자가 더욱 쉽게 이용할 수 있도록 준수해야 하는 지침입니다.
WCAG는 각 지침을 4가지 원칙의 범주로 분류하여 제공하고 있습니다.
- 인식 - 모든 사용자는 서비스 콘텐츠를 인식할 수 있어야 합니다.
- 운용 - 모든 사용자는 서비스의 기능을 운용할 수 있어야 합니다.
- 이해 - 모든 사용자가 서비스의 콘텐츠, 기능 사용법 등을 이해하기 쉬워야 합니다.
- 견고 - 사용자가 이용하는 모든 기기 및 브라우저에서 접근, 사용 가능해야 합니다.
웹 표준 (Web Standards)
웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다.
위키 백과다양한 브라우저와 디바이스가 존재하기 때문에 일관된 사용자 경험을 제공하기 위한 표준이 필요합니다.
W3C에서 제공한 웹 표준은 웹 페이지의 작성과 해석에 관한 규칙과 지침을 제공하여 웹의 모든 요소가 일관되고 호환할 수 있게 작동하도록 보장합니다.
웹 표준의 주요 요소는 아래와 같습니다.
- HTML - 콘텐츠의 구조를 설계하고 의미를 부여하는 기술
- CSS - 콘텐츠의 배치 및 스타일을 위한 기술
- JavaScript - 콘텐츠의 기능을 구현하는 기술
- WAI-ARIA - 기존 HTML에 역할, 속성, 상태 정보 등을 추가하여 접근성을 향상하는 기술
웹 표준과 웹 접근성은 사용자에게 일관된 경험을 제공한다는 공통된 목적이 있습니다.
그렇게 때문에, 이들을 모두 준수하는 것은 웹 개발에서 중요하게 적용된다는 것을 알 수 있습니다.
웹 접근성 향상
그렇다면 웹 접근성을 어떻게 향상할 수 있는지 알아보도록 하겠습니다.
시맨틱 태그 (Semantic Tag) 사용
시맨틱 태그는 웹 페이지의 구조와 의미를 명확하게 정의하는 데 사용됩니다.
각 콘텐츠의 의미와 역할을 명확하게 하므로 웹 페이지의 가독성, 접근성, 검색 엔진 최적화(SEO)에 도움이 됩니다.
1. 시맨틱 태그를 사용하지 않을 때
<body> <div id="header"> <h1>My Website</h1> </div> <div id="main"> <h2>Welcome to My Website</h2> <p>This is the main content area.</p> </div> <div id="footer"> <p>footer area</p> </div> </body>2. 시맨틱 태그를 사용할 때
<body> <header> <h1>My Website</h1> </header> <main> <h2>Welcome to My Website</h2> <p>This is the main content area.</p> </main> <footer> <p>footer area</p> </footer> </body>스크린 리더를 사용하면 화면의 텍스트를 TTS로 읽어주는데, 모든 태그를 div 등으로 구성하면 의미를 이해하기 어려워 사용자 경험이 저하될 수 있습니다.
시맨틱 태그를 사용하면 콘텐츠의 구조를 명확하게 정의할 수 있기 때문에 보다 효율적으로 콘텐츠를 해석할 수 있게 됩니다.
대체 텍스트 사용
대체 텍스트는 웹 콘텐츠에서 이미지나 그래픽 요소가 불러와 지지 않거나 시각 장애가 있는 사용자가 콘텐츠에 접근할 수 있도록 하는 텍스트 설명입니다.
시각 장애가 있는 사람이 볼 수 없는 요소를 음성으로 인식할 수 있도록 도와줍니다.
<img src="company_logo.png" alt="회사 로고">단순히 이미지뿐만 아니라, 여러 기능이 있는 아이콘 들에도 대체 텍스트를 추가하여 어떤 역할을 하는지 설명해 주는 것이 중요합니다.
WAI-ARIA 사용
WAI-ARIA는 웹 콘텐츠 및 웹 애플리케이션의 접근성을 개선하기 위한 기술입니다.
기존 HTML 요소에 역할, 속성, 상태 정보를 추가하여 접근성을 향상할 수 있습니다.
<button id="toggleButton" aria-pressed="false" aria-label="메뉴 열기">메뉴</button> <div id="menu" role="menu" aria-hidden="true"> <ul> <li role="menuitem">항목 1</li> <li role="menuitem">항목 2</li> <li role="menuitem">항목 3</li> </ul> </div>button의 aria-pressed, aria-label 속성을 사용하여 버튼의 눌림 상태와 버튼의 기능을 설명할 수 있습니다.
마찬가지로 aria-hidden을 이용하여 메뉴가 보이는 상태를 설명할 수 있고, role을 통해서 각 태그의 역할을 알 수 있습니다.
위와 같이 WAI-ARIA를 사용함으로써 웹 애플리케이션의 접근성을 높일 수 있습니다.
form 요소의 접근성 개선
form 요소에 명시적인 label을 제공하여 사용자가 어떤 정보를 입력해야 하는지 이해할 수 있도록 할 수 있습니다.
<label for="username">사용자 이름:</label> <input type="text" id="username" name="username" required>label을 input과 연결하기 위해 for 속성과 input 요소의 id 값을 같게 지정해서 접근성을 높일 수 있습니다.
또한, 에러 메시지를 적절히 활용하여 위와 같이 required 속성으로 필수로 입력해야 하는 요소에 대해 입력이 없을 때 에러 메시지를 표시하여 접근성을 높일 수 있습니다.
이 외에도 모든 장치에서 접근할 수 있도록 반응형 디자인을 구현하여 웹 접근성을 높일 수 있습니다.
후기
웹 접근성에 대해 학습하면서 이전에는 신경 쓰지 못했던 부분에 대해 많이 알게 되었습니다.
오늘 학습한 내용을 토대로 이전에는 미처 신경 쓰지 못했던 부분들을 확인하여 접근성이 높은 웹을 개발할 수 있도록 노력하겠습니다.
참고
https://boostbrothers.github.io/experience/2022/05/31/web-accessibility/
'개발 지식 > WEB' 카테고리의 다른 글
기억해줘! 기억할게! (쿠키, 세션, 토큰) (0) 2023.11.28