6. Product Card (feat. strong, aria-label, aria-hidden)

이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다.

출처:edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

 

 

 

📸 Screenshot 

---

 

 

 

 

 

📝 메모

---

1.

'이병률'이라는 작가 이름보다 '혼자가 혼자에게'라는 제목이 중요하기 때문에 

책 제목을 먼저 마크업하고 그 다음에 작가 이름을 적었다. (CSS로 수정)

 

2.

'오늘의 책'으로 선정됐다는 건 중요하니까 <strong> 태그를 쓰고

aria-label로 자세하게 설명.

 

3.

평점 부분에서 9.4라는 숫자는 중요하지만,

별들은 스타일 요소이기 때문에

스크린 리더가 굳이 하나하나 읽을 필요가 없다. (하나하나 읽으면 UX가 오히려 나빠질 것 같다..)

그래서 별 아이콘들은 <span>으로 묶어준 후에 aria-hidden="true"를 하면

굳이 별 부분은 읽어 주지 않고

9.4라는 숫자에 aria-label="평점 9.4"라고 명시해주는 게 더 좋다.

 

 

 

 

 

이번 예제에서는 strong 태그를 굉장히 많이 썼는데..

처음에는 이 정도로 strong 태그를 자주 써도 되나 싶었는데

본인이 타당한 이유가 있고, 그걸 잘 설명할 수 있다면 괜찮지 않을까

하고

생각했다.