[웹 표준 & 웹 접근성] region 랜드마크, 대체 텍스트 음성인식 최적화 작업(고도화)

대체텍스트/음성인식 개선 작업

데이터 연동에 따른 마크업이 분기처리되서 대체텍스트 음성인식 최적 작업 진행함.

초점이동 시 데이터 단위 Group별로 읽도록 개선했다,

 

개발환경 : vue.js3 

// List 타입 마크업(region 랜드마크)
// .sr_only : CSS 대체 텍스트 투명 처리 

<section aria-labelledby="member-info">
	<h1 id="member-info">회원정보</h1>
        <ul>
          <li>
            <h2>이름</h2>
            <div>
              <p>홍길동</p>
              <Component btn-style="line" label="로그아웃" @click="onClickLogout" />
            </div>
          </li>
          <li>
            <h2>휴대전화번호</h2>
            <div>
              <p class="num">010.7777.9999</p>
            </div>
          </li>
          <li>
            <h2 class="title">교통카드</h2>
            <div>
              <p>미등록</p>
            </div>
            <div>
              <div aria-labelledby="tmoney" tabindex="0">
                <p id="tmoney" class="sr_only" aria-hidden="true" >카드 0개</p>
                <div aria-hidden="true">
                  카드 
                  <strong>0</strong>
                  개
                </div>
              </div>
              <div aria-labelledby="creditcard" tabindex="0">
                <p id="creditcard" class="sr_only" aria-hidden="true" >신용카드 와 체크카드 2개</p>
                <div aria-hidden="true">
                  신용/체크 
                  <strong>2개</strong>
                  개
                </div>
              </div>
            </div>
            <Component btn-style="line" label="변경" @click="onClickChange" />
          </li>
        </ul>
</section>

 

aria-labelledby : 내부 대체텍스트 정보 그룹핑.

tabindex="0" 넣어줌으로써 초점받도록 작업해주고 .sr_only class의 텍스트를 화면에서 안보이도록 style 적용해준다.

내부 분리된 마크업은 aria-hidden 처리로 음성리더안에서는 한번에 읽히도록 고도화 작업해 주었다.

 

이렇게 작업 해주게 되면, 사용자가 불필요한 초점이동에 시간 쏟을 필요없고 

간결하게 정보를 읽을 수 있다.