[FE] 접근성 개선을 위해 이미지 라벨을 달아준다. #763
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ooherin
reviewed
Oct 7, 2024
| @@ -70,55 +70,55 @@ const RoomInfoSection = ({ nearSubways, room, options, checklistId, isLiked }: P | |||
| </S.GreenWrapper> | |||
| <S.GapBox> | |||
| <S.Row> | |||
| <Room /> | |||
| <Room aria-hidden="true" /> | |||
There was a problem hiding this comment.
해당 아이콘은 사실상 label 의 대체라서 aria-label 로 추가 정보를 스크린 리더에게 주는게 좋을 것 같습니다.
예를 들어 위 Room 은 다음과 같아요!
<Room aria-label="방 구조"/> | @@ -29,12 +29,12 @@ const FourthSection = () => { | |||
| <S.EmptyBox height={10} /> | |||
| <S.Observer ref={ref} /> | |||
| <S.AnimationBox isIntersecting={isIntersecting}> | |||
| <img src={customPageScreen} width="200px" /> | |||
| <img src={customPageScreen} width="200px" alt="" /> | |||
There was a problem hiding this comment.
해당 스크린 샷도 alt 안을 비워드는 것보다는 안에다가 '질문 선택 페이지의 화면' 식으로 정보를 주는 게 좋을 것 같습니다!
| bgColor={color500} | ||
| hoverColor={color600} | ||
| onClick={handleClickArticle} | ||
| aria-label="클릭하면 해당 아티클 페이지로 이동합니다" |
|
작성중 |
…ng-ggood into feat/760-inhance-image-accessibility
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
❗ Issue
✨ 구현한 기능
의미있는 이미지와 아닌 이미지를 확인해서 라벨을 다 달아주었습니다.
svg 컴포넌트는
alt=''를 사용하지 못해서aria-hidden="true"로 달아주었고 이미지에는alt를 달아주었습니다📢 논의하고 싶은 내용
🎸 기타