웹 사이트에서 제공하는 정보를 차별 및 제한없이 동등하게 이용할 수 있도록 보장
장애/비장애를 넘어 비단 사람만이 존재하는 것이아니라 환경을 포함한 모든것들을 접근 가능하게 하는 모두를 위한 서비스이다
이 메인 메뉴를 구성할 수 있는 방법을 수업 시간에 들은 내용을 바탕으로 두가지 기능을 정리해보려 한다!
👍사용하는 이유
1) 검색엔진 최적화
- 검색엔진 자체에 알고리즘에 따라 주요 키워드를 추출한다 이때 의미가 없는
<div>
,<span>
태그를 사용한다면 어떤 부분이 중요한 영역인지 구분이 어렵다2) 웹 접근성
- 웹 사이트에서 제공하는 정보를 차별 및 제한없이 동등하게 이용할 수 있도록 보장하는 모두를 위한 서비스이다
- 이러한 서비스를 구현하기 위해서는 semetic mark up이 반드시 필요하다
- 가장 대표적인 예로 음성으로 콘텐츠를 알려주는 스크린 리더, 마우스를 사용할 수 없는 사용자를 위한 키보드 접근등이 있다.
3) 가독성
- 다른 개발자와의 협업에서도 매우 중요!!📌
- 적절한 태그의 사용은 주석을 달아 설명하는 것 보다 확실한 이해를 가져온다
<nav>
을 사용하여 구현 해보기<nav>
를 사용하여 구성해보기로 했다 <nav> 의대한 간략한 정의
<nav class="navbar">
<h2>메인메뉴</h2>
<ul class="navar-menu">
<li>
<button>HTML에 대해</button>
<ul>
<li><a href="#"></a> HTML5 소개 </li>
<li><a href="#"></a> 레퍼런스 소개 </li>
<li><a href="#"></a> 활용예제 </li>
</ul>
</li>
</ul>
</nav>
결과 화면
WAI(Web Accessibility Initiative): W3C에서 웹 접근성을 담당하는 조직
ARIA(Aceccible Rich Internet Application)의 약자자로 모든 사용자들이 웹 콘텐츠와 웹 어플리케이션에 더 쉽게 접근할 수 있는 방법을 정의하는 특성
마우스와 같은 포인팅 장비를 사용하기 힘든 , 스크린 리더를 사용하는 사용자들에게
동적컨텐츠 javascript, ajax, vue, react 등과 같이 페이지를 새로고침 하지 않고도 페이지의 내용과 데이터가 바뀌는 영역의 역할, 속성, 상태 정보를 추가하여 동적인 컨텐츠에 원활하게 접근 하도록 해주는것
기존의 HTML에 부족한 부분을 보완하고 웹 접근성을 준수할 수 있게 속성이나 상태 정보등을 추가할수 있다
👌 HTML로는 제어할수없는 접근성 이슈들(Ajax 와 Javascript를 사용하여 개발한 것들) 을 WAI-ARIA를 통해 관리할 수 있다.
-> ARIA로 element 의 외형, 동작 등은 바뀌지않는다
👌 웹에서 ARIA 가 접근성을 더욱 높여줄 수는 있으나 가장 기본은 semetic markup !!!
-> 태그를 쓸수 있는데 거기에 ARIA 의 role 속성을 혼용해서 쓰는 경우는 좋지 않다
🙆♀️현재 web-cafe에서 적용할 수 있을만한 애들만 정리해보았다
특정 element 의 기능을 정의하는것으로 페이지의 검색 영역인지, 내비게이션 요소인지, 특정 section 의 제목인지 등의 명확한 기능을 부여
ex) role = button nav에 구현된 메인 메뉴들을 보통 <a>
태그로 정의되기 때문에 해당 요소를 버튼 으로 입력하여 사용자가 클릭할 수 있게 정보를 제공할 수 있을 것 같다
<div class="menu" role="menu">
<h2>메인메뉴</h2>
<ul class="menu-bar">
<li>
<button type="button" aria-label="HTML 상제정보 열기">HTML에 대해</button>
<ul>
<li><a href="#" role="button"></a> HTML5 소개 </li>
<li><a href="#" role="button"></a> 레퍼런스 소개 </li>
<li><a href="#" role="button"></a> 활용예제 </li>
</ul>
</li>
</ul>
</div>
스크린 리더의 해석으로는 <a>
버튼의 용도로 이해하지만 우리가 웹 페이지에서 확인하면 그냥 a 태그의 형태로 보여지는 것을 확인했다
ex) label 사용 사용자가 어떤 버튼을 눌러야지 상세 페이지로 넘어갈 것인지에 대한 설명을 도울 수 있을거같다
<div class="menu" role="menu">
<h2>메인메뉴</h2>
<ul class="menu-bar">
<li>
<button type="button" aria-label="HTML 상제정보 열기">HTML에 대해</button>
<ul>
<li><a href="#" role="button"></a> HTML5 소개 </li>
<li><a href="#" role="button"></a> 레퍼런스 소개 </li>
<li><a href="#" role="button"></a> 활용예제 </li>
</ul>
</li>
</ul>
</div>
ex) li 메뉴 하나를 숨긴다면
📌 aria-hidden의 경우, 시각적으로 숨겨지는 것이 아니라, 의미적으로 숨겨지기 때문에 사용자에게 시각적으로만 보이지 않게 할 경우에는 이걸 사용하면 안된다
<div class="menu" role="menu">
<h2>메인메뉴</h2>
<ul class="menu-bar">
<li>
<button type="button" aria-label="HTML 상제정보 열기">HTML에 대해</button>
<ul>
<li><a href="#" role="button"></a> HTML5 소개 </li>
<li><a href="#" role="button"></a> 레퍼런스 소개 </li>
<li><a href="#" role="button"></a> 활용예제 </li>
</ul>
</li>
</ul>
</div>