Components - Login

❗️ 해당 작업 영역의 시행착오

  • ❓ 문제점

    접근성을 신경써야한다는 관점에 너무 치중한 나머지 aria속성을 남발하며 구현을 하였었는데 <img> 태그의 alt속성이나 <button>요소에 텍스트가 존재할땐 오히려 aria속성이 혼동을 주며 불필요할 수 있다는 피드백

  • 💡 해결방식

    문제 해결을 위해 굳이 안알려줘도 되는 중요하지않은 이미지의 경우는 그냥 alt값만 주는 방식으로 변경하였고 만약 백그라운드 이미지이나 사용자에게 알려야하는 정보라면 aira-label속성으로 사용자에게 정보전달을 더 명확한 설명을 할 수 있도록 수정하였다.

  • ❓ 문제점

    피그마 시안상에 레이블이 없다고 1차원적으로 그냥 인풋요소에 <label>을 넣지않고 그냥 <div> 로만 구현을 하여 접근성 측면에서 취약하다는 피드백

  • 💡 해결방식

    스크린리더를 쓰는 사용자들의 접근성을 고려하여 <label> 태그를 인풋요소를 넣고 sr-only 클래스를 넣어 시각적으로는 보이지 않게하면서도 스크린리더가 읽어주는 방향으로 접근성을 고려하여 마크업을 수정하였다.

  • ❓ 문제점

    패스워드 토글버튼의 마크업을 <img> 태그로하여 마찬가지로 접근성 부분에서 취약하다는 피드백

  • 💡 해결방식

    <img> 태그를 <button> 태그로 감싼 뒤 버튼 요소에 aria-label 속성을 주어 토글버튼을 스크린리더가 명확하게 전달 할 수 있도록 변경. 하지만 마크업상 어떤 구조가 더 나은지는 추후 검토후 리팩토링이 필요.