[frontend] aria-label 속성

react-redux 템플릿을 보다가 aria-label 속성이 모두 쓰여져 있는 것을 보았다 

 

       <button
          className={styles.button}
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          -
        </button>

 

가끔 보긴 했는데... 뭐에 쓰지? 하고 찾아보니 요소에 대한 레이블을 정의하기 위해 쓴다고 보면 된다 

 

developer.mozilla.org/ko/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

aria-label 속성 사용 - 접근성 | MDN

" aria-label 속성은 현재 요소에 레이블을 정의하기 위해서 사용합니다. 텍스트 레이블이 화면에 표시되지 않을 때에 사용하세요. 만약에 요소에 레이블을 정의하는 화면에 보이는 텍스트가 있다면  aria-labelledby을 대신 사용하세요 "

 

밑의 button 요소는 닫기 버튼이다. 버튼의 목적이 대화상자를 닫는 것을 암시하는 것이 없어 이에 대한 레이블을 제공하기 위해 사용한다

<button aria-label="Close" onclick="myDialog.close()">X</button>

 

나는 styled-components를 자주쓰기 때문에 이름을 CloseBtn, OpenBtn 이런식으로 따로 정의하여 사용했는데 이렇게 aria-label을 써주면 그럴 필요가 없을 듯 하다