[230427 ~ 28] 좋은 구조란 무엇일까? : 웹 표준 + WAI-ARIA

---

🍀 오늘의 날짜 : 23년 04월 27~ 28일 
🍀 오늘의 주제 : 웹 표준 : 시멘틱 태그 / 마크업 / ..etc

---

 

   스크린 리더를 통해 본 TAB 의 좋은 구조

 

예시 1

<section>
                <h2>예시 1</h2>
                <div class="tabContainer">
                    <div className="tabList">
                        <div className={currentTab1 === 0 ? "tab selected" : "tab"} onClick={()=>setCurrentTab1(0)}>{tab.tab1.title}</div>
                        <div className={currentTab1 === 1 ? "tab selected" : "tab"} onClick={()=>setCurrentTab1(1)}>{tab.tab2.title}</div>
                        <div className={currentTab1 === 2 ? "tab selected" : "tab"} onClick={()=>setCurrentTab1(2)}>{tab.tab3.title}</div>
                    </div>
                    <div className={currentTab1 === 0 ? "block" : "none"}>{tab.tab1.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
                    <div className={currentTab1 === 1 ? "block" : "none"}>{tab.tab2.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
                    <div className={currentTab1 === 2 ? "block" : "none"}>{tab.tab3.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
                </div>
            </section>

 

예시 2 

<section>
                <h2>예시 2</h2>
                <div class="tabContainer">
                    <div className="tabList">
                        <div>
                            <div className={currentTab2 === 0 ? "tab selected" : "tab"} onClick={()=>setCurrentTab2(0)}>{tab.tab1.title}</div>
                            <div className={`tabPanel${currentTab2 === 0 ? " block" : " none"}`}>{tab.tab1.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
                        </div>
                        <div>
                            <div className={currentTab2 === 1 ? "tab selected" : "tab"}  onClick={()=>setCurrentTab2(1)}>{tab.tab2.title}</div>
                            <div className={`tabPanel${currentTab2 === 1 ? " block one" : " none"}`}>{tab.tab2.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
                        </div>
                        <div>
                            <div className={currentTab2 === 2 ? "tab selected" : "tab"}  onClick={()=>setCurrentTab2(2)}>{tab.tab3.title}</div>
                            <div className={`tabPanel${currentTab2 === 2 ? " block two" : " none"}`}>{tab.tab3.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
                        </div>
                    </div>
                </div>
            </section>

 

| 결론 |

예시 1과 예시 2를 스크린 리더로 읽었을 때, 예시 1은 Title을 쭉 읽고 다음 행들을 읽는 순서라면, 예시 2는 각 Title에 맞는 내용들을 읽는 순서 입니다.

 

웹 표준을 기준으로 생각해보았을 때, 예시 2 의 구조가 더 효율적이고 좋은 구조임을 알 수 있습니다. 

 

 

 

 

 

   WAI - ARIA

 

WAI :  (Web ACcessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관

ARIA : (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추지 위한 기술

      * RIA : 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것 처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는' 웹 애플리케이션 ' ( SPA를 의미하는 경우가 많습니다.)

 

이론은 위와 같고 결국은 스크린 리더로 읽었을 때 HTML 요소들이 무엇을 의미하는지 알 수 있게 표시하는 추가적 보조 친구들이라고 생각하면 편할 것 같습니다. SPA 처럼 AJAX를 사용하는 상황에서 변경된 영역에 대한 정보를 전달해 줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상할 수 있습니다. 

 

 

1.역할(role)

 

HTML 요소종류와 역할이 서로 맞지 않을 때, 어떤 역할인지 명시해줄 때 사용 합니다. 

 

EX.
<div role = " button "> BUTTON </div>

role 에는 정말 많은 역할이 있어서 MDN 공식 자료를 보고 알맞은 role을 작성해주면 좋을 것 같습니다.

 

 

2. 상태(state)

 

선택 / 비 선택 상태인 요소를 표시할 때 사용 합니다. 

 

EX.
<ul role = " tablist ">
   <li role = " tab " aia-selected = " true " >  TAB1 </li>
   <li role = " tab " aia-selected = " false " >  TAB2 </li>
   <li role = " tab " aia-selected = " false " >  TAB3 </li>
</ul>

이 외에도 아코디언 UI가 펼쳐진 상태인지 표시해 주는 " aria-expanded " , 요소가 숨긴 상태인지 표시하는 " aria-hidden " 그리고, 체크 박스가 선택인지 아닌지를 표시해주는 " aria-selected " 등이 있습니다. 

ARIA attribute types MDN

 

 

3. 속성(property)

 

요소에 대한 정보를 얻을 수 없는 경우 ( 텍스트 콘텐츠 없이 이미지로만 만들어진 버튼 ) 무슨 요소 인지 표시할 때 사용 합니다.

 

<button aria-label = " 닫기 버튼 " ><img src = " X.png " /></button>

aria-label 과 aria -live 속성이 있습니다. 

 

 

 

 

 

   WAI-ARIA를 사용하면 검색 엔진에 더욱 노출이 될 수 있을까요???

 

ARIA는 SEO에 대해 직접적으로 영향을 끼치는 요소는 아니지만 SERP에서 웹 사이트의 위치를 개선할 수 있는 간접적인 요소로 작동합니다. 

 

검색 엔진이 HTML의 ARIA 속성에 주의를 기울인다는 직접적 증거는 없으며, ARIA 속성은 SEO의 주된 목적이 아니라 HTML 문서의 접근성을 높이기 위해 설계되었습니다. 의미론적인 의미를 할당하기 위해 설계되어 스크린 리더와 같은 특정 장치에서 사용 됩니다. 

 

* SERP

사용자가 검색엔진에 어떤 검색어를 입력했을 때 그에 맞는 검색 결과 리스트를 보여주는 페이지

Search Engine Result Page 

 

 

 

 

웹 표준을 준수하며 특히나, 웹 접근성을 향상시키고자 사고하며 코드를 짜는 것은 처음에는 쉽지 않지만 나중에 짜고 나면 비장애인도 코드 분석할 때 쉽게 파악 할 수 있는 것들을 보며 스스로 만든 프로젝트들을 웹 표준을 준수하여 리펙토링을 해봐야 겠다는 생각을 했습니다.