[멋쟁이 사자처럼 부트캠프] - HTML 올바른 속성 사용 및 스크린리더를 고려한 개발방식

role 속성의 활용

 

본래 시멘틱 태그를 사용할 때 header, nav, main, aside, footer와 같은 태그를 사용하여 기본 골격을 잡는다.

이를 div로 표현을 해보았을때, 다음 코드와 같다.

   <div class="container">
      <div role="banner" class="header">헤더</div>
      <div role="navigation" class="navigation">내비게이션</div>
      <div role="main" class="main-content">
        <div role="region" class="like">Like 섹션</div>
        <div role="region" class="lion">Lion 섹션</div>
      </div>
      <div role="complementary" class="sidebar">사이드바</div>
      <div role="contentinfo" class="footer">푸터</div>
    </div>

 

스크린 리더는 다음 순서와 같이 읽는다.

배너
헤더
내비게이션
내비게이션
메인
지역
Like 섹션
지역
Lion 섹션
보완 콘텐츠
사이드바
콘텐츠 정보
푸터

 

스크린 리더 사용자는 헤더라는 텍스트가 배너에 위치해 있고, 내비게이션 자리에 내비게이션이라는 텍스트라는 내용을 포함한 것으로 인지할 것이다.

 

role 속성의 사용에 유의할 점은 시멘틱 태그와 사용하지 말아야 하며, 시멘틱 태그를 사용할 수 있다면 사용하는것이다.

때문에 위의 div에 적힌 내용들은 모두 시멘틱 태그로 변환이 가능하고 변환을 한다면 다음 코드와 같다.

<div class="container">
      <header class="header">헤더</header>
      <nav class="navigation">네비게이션</nav>
      <main class="main-content">
        <section class="like">Like 섹션</section>
        <article class="lion">Lion 섹션</article>
      </main>
      <aside class="sidebar">사이드바</aside>
      <footer class="footer">푸터</footer>
 </div>

 

그렇다면 어떨 때 써야 할까?

기본적으로 role 속성은 웹 페이지의 접근성을 위해서 사용된다.

 

즉, div와 span처럼 사용의 용도가 불분명하여 여러 가지 상황으로 쓰일 때 사용자에게 알려주기 위함에 많이 쓰인다.

 

---

프레이징 요소

 

See the Pen Untitled by 김도혁 (@mnzipjlg-the-bold) on CodePen.

 

프레이징 요소란?

텍스트와 그 텍스트를 꾸미거나 의미를 부여하는 인라인 수준 콘텐츠이다.

 

텍스트 의미/강조하는 요소

 

<span>, <strong>, <em>, <mark>, <small>, <abbr>, <cite>, <dfn>, <q>

요소 이름	화면	스크린리더 읽음의 형태
span	변화 없음	텍스트
strong	굵음(Bold)	강조해서 읽음("강조된 톤")
em	기울임꼴(italic)	억양 변화로 강조
mark	노란 배경으로 형광펜 강조	"강조됨" 또는 "하이라이트"
small	글자가 작아짐	변화없음
abbr	변화 없음 / 마우스 오버 시 설명 표시	약어 풀어서 읽음
cite	기울임꼴	무시함
dfn	기울임꼴	정의됨의 의미로 인식
q	따옴표 추가	인용시작 ... 인용끝

 

이렇게 다양하게 스크린 리더 사용자들에게 내용을 전할 할 수 있다.

---

 

인용문과 줄 바꿈

<h1>인용문과 줄바꿈</h1>
    <p>
      멋쟁이<br />
      사자처럼<br />
      프론트엔드<br />
      부트캠프<br />
      화이팅!
    </p>
    <blockquote>
      우리가 할 수 있는 노력은 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;과정이 전부야. <br />
      결과는 우리 손 안에 있는 게 아니야. <br />
      결과까지 서너개 넣으려다 보니까 <br />
      무리수를 두는 거야
    </blockquote>
    <cite>드라마 &lt;HTML&gt; 중에서</cite>

    <p>
      인상깊은 드라마를 시청했는데 대사가 마음을 움직였어. 대사는
      <q cite="https://www.tving.com/contents/P000151356">우리가 할 수 있는 노력은 과정이 전부야</q>
      라는 말이었어.
    </p>

 

 

이름	요소 또는 코드
줄바꿈	<bt />
인용문	<q>
띄어쓰기	&nbsp;
< 과 >	&lt; 과 &gt;
출처	cite
긴 내용의 인용문	<blockquote>

---

테이블 요소

See the Pen 테이블 요소 by 김도혁 (@mnzipjlg-the-bold) on CodePen.

 

테이블 요소는 tr 부모요소 아래에 th와 td 요소가 들어가는 형태로 이루어진다.

 

th는 테이블의 헤더를 의미하고 td는 테이블의 내용을 의미하는데, 이를 직관적으로 연결하여 조금 더 명확한 의미전달을 해주기 위해선 td 요소 안에 header 요소를 통해 th의 id 값과 연결하면 명확한 의미가 전달된다.

---

 

텍스트 레벨 요소

See the Pen 텍스트 레벨 요소 by 김도혁 (@mnzipjlg-the-bold) on CodePen.

 

사실 모두 CSS로 구현이 가능한 내용이지만 이는 홈페이지를 시각적으로 확인했을 때만 똑같이 구현이 된다.

 

웹 프로그래밍을 진행할 때 기존에 존재하는 태그들을 활용하여 올바르게 사용하는 방법을 숙지할 필요가 있음을 느꼈다.

---

adress 요소

    <address>
      <span>(주)멋쟁이 사자처럼 </span>
      <span aria-hidden="true">|</span>
      <span>대표이사 나성영</span>
      <span>서울시 종로구 종로3길 17 D타워 16~17층</span>
      <span>사업자 번호 :264-88-01106 </span>
      <span aria-hidden="true">|</span>
      <span>통신판매업 신고번호 : 2019 - 서울강남 - 00774</span>
      <span>문의처 <a href="mailto:contact@likelion.net">contact@likelion.net</a></span>
    </address>

코드 결과

 

스크린 리더는 다음과 같이 읽어낸다.

(주)멋쟁이 사자처럼
대표이사 나성영
서울시 종로구 종로3길 17D타워 16~17층
사업자 번호 이육사-팔팔-영일일공육
통신판매업 신고번호 이공일구-서울강남-공공칠칠사
문의처
contact@likelion.net

 

이때 본다면 aria-hidden 처리를 통해 "ㅣ" 해당 문자를 읽지 않는 것을 알 수 있다.

만약 해당 문자가 있었다면 사용자에게 혼란 또는 불편함을 야기했을 것이다.

 

---

결론

제작하고 있던 홈페이지의 코드를 다시 한번 확인해 봐야겠다.

몰랐던 내용들도, 알고 있었지만 신경 쓰지 않았던 부분들도 매우 많았던 시간이다.

 

평상시에 접근성에 관심이 많았던 나는 강의가 매우 흥미롭게 느껴졌다.

 

그 어느 사이트를 가보더라도 접근성이 제대로 되어있지 않은 사이트들이 즐비해있고, 해당 사이트들은 모두 비슷해서 차이점을 발견하기 힘들었다.

 

내가 제작하는 사이트는 사용자가 누구라도 이해할 수 있고, 이해하기 편리한 사이트를 제작하는 것을 목표로 하고 있기 때문에 앞으로도 접근성에 관련된 내용들을 찾아보며 공부를 꾸준히 해나가야 할 것이며 다른 관점으로 봤을 때 어쩌면 개발자들의 당연하게도 제공되는 숙제가 아닐까 생각한다.