[FE] 접근성 개선을 위해 이미지 라벨을 달아준다. (#763)

woowacourse-teams · Oct 8, 2024 · 90afe27 · 90afe27
2 parents 3d2da54 + 6a74c96
commit 90afe27
Show file tree

Hide file tree

Showing 30 changed files with 93 additions and 76 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="ko">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="favicon.ico" />

diff --git a/frontend/src/components/ChecklistDetail/RoomInfoSection.tsx b/frontend/src/components/ChecklistDetail/RoomInfoSection.tsx
@@ -70,55 +70,55 @@ const RoomInfoSection = ({ nearSubways, room, options, checklistId, isLiked }: P
       </S.GreenWrapper>
       <S.GapBox>
         <S.Row>
-          <Room />
+          <Room aria-label="방 구조" />
           {formattedUndefined(structure, 'string', '방 구조')} / {formattedUndefined(size)} 평
         </S.Row>
         <S.Row>
-          <Stairs />
+          <Stairs aria-label="방 종류" />
           {floorLevel === '지상'
             ? `${formattedUndefined(floor)}층`
             : formattedUndefined(floorLevel, 'string', '방 종류')}
         </S.Row>
       </S.GapBox>
       <S.Row>
-        <Utils /> 관리비 포함 항목 :
+        <Utils aria-label="관리비 포함 항목" /> 관리비 포함 항목 :
         {includedMaintenances
           ?.map(id => IncludedMaintenancesData.find(item => item.id === id)?.displayName)
           .filter(Boolean)
           .join(', ')}
         {!includedMaintenances?.length && formattedUndefined(includedMaintenances?.length, 'string', '')}
       </S.Row>
       <S.Row>
-        <Calendar />
+        <Calendar aria-label="계약 월수 / 입주 가능일" />
         {formattedUndefined(contractTerm)}개월 계약 <br />
         입주 가능일 : {formattedUndefined(occupancyMonth)}월 {occupancyPeriod}
       </S.Row>
       <S.Row>
-        <Subway />
+        <Subway aria-label="가까운 지하철" />
         <SubwayStations stations={nearSubways} />
       </S.Row>
       <S.GapBox>
         <S.Row>
-          <Building />
+          <Building aria-label="부동산" />
           {formattedUndefined(realEstate, 'string', '부동산')}
         </S.Row>
         <S.Row>
-          <Pencil />
+          <Pencil aria-label="작성 일자" />
           {formattedDate(createdAt ?? '', '.')}
         </S.Row>
       </S.GapBox>
       <S.Row>
-        <Options />
+        <Options aria-label="옵션" />
         {options.length
           ? options.map(option => option.optionName).join(', ')
           : formattedUndefined(options.length, 'string', '옵션')}
       </S.Row>
       <S.Row>
-        <Summary />
+        <Summary aria-label="한줄평" />
         {formattedUndefined(summary, 'string', '한줄평')}
       </S.Row>
       <S.Row>
-        <LocationLineIcon height={20} width={20} />
+        <LocationLineIcon height={20} width={20} aria-label="주소" />
         {formattedUndefined(address, 'string', '주소')} <br /> {buildingName}
       </S.Row>
       <AddressMap location={address ?? ''} />

diff --git a/frontend/src/components/ChecklistList/ChecklistCard.tsx b/frontend/src/components/ChecklistList/ChecklistCard.tsx
@@ -24,7 +24,7 @@ const ChecklistCard = ({ checklist }: Props) => {
     <S.Container onClick={handleMoveToDetail}>
       <S.Row>
         <S.LocationWrapper>
-          <LocationLineIcon />
+          <LocationLineIcon aria-hidden="true" />
           {formattedUndefined(address, 'string', '주소')}
         </S.LocationWrapper>
         <LikeButton isLiked={isLiked} checklistId={checklistId} />

diff --git a/frontend/src/components/ChecklistList/CustomBanner.tsx b/frontend/src/components/ChecklistList/CustomBanner.tsx
@@ -11,7 +11,7 @@ const CustomBanner = ({ onClick }: Props) => {
   return (
     <S.Banner onClick={onClick}>
       <S.Wrapper>
-        <PencilIcon width={30} height={30} />
+        <PencilIcon width={30} height={30} aria-hidden="true" />
         <S.Title>체크리스트 질문</S.Title>
       </S.Wrapper>
       <S.Button>편집하기</S.Button>
@@ -46,7 +46,7 @@ const S = {
   Title: styled.span`
     ${flexCenter}
   `,
-  Button: styled.div`
+  Button: styled.button`
     padding: 0.4rem 0.8rem;
 
     background-color: ${({ theme }) => theme.palette.green500};

diff --git a/frontend/src/components/Landing/FifthSection.tsx b/frontend/src/components/Landing/FifthSection.tsx
@@ -13,7 +13,7 @@ const FifthSection = () => {
             시작해 볼까요?
           </S.Text>
           <S.IconBox>
-            <LampIcon width={80} />
+            <LampIcon width={80} aria-hidden="true" />
           </S.IconBox>
           <S.EmptyBox height={20} />
           <S.CenterBox>

diff --git a/frontend/src/components/Landing/FirstSection.tsx b/frontend/src/components/Landing/FirstSection.tsx
@@ -12,15 +12,15 @@ const FirstSection = () => {
   return (
     <>
       <S.LogoBox>
-        <BangBangIcon width="350" height="130" />
+        <BangBangIcon width="350" height="130" aria-hidden="true" />
         <S.TextWrapper>
           <S.SubtitleText>방 구하기</S.SubtitleText>
           <S.SubtitleText>이거 하나로 끝!</S.SubtitleText>
           <S.CheckIconBox>
-            <SmallCheck />
+            <SmallCheck aria-hidden="true" />
           </S.CheckIconBox>
         </S.TextWrapper>
-        <BangGgoodTextIcon width={220} height={50} />
+        <BangGgoodTextIcon width={220} height={50} aria-hidden="true" />
       </S.LogoBox>
       <S.ButtonWrapper>
         <KakaoLoginButton />
@@ -29,7 +29,7 @@ const FirstSection = () => {
       <S.MoreBox>
         <S.SubText>방끗을 소개할게요!</S.SubText>
         <S.MoveUpDownAnimationBox>
-          <ArrowDownSmall />
+          <ArrowDownSmall aria-label="스크롤로 하단의 정보를 확인할 수 있어요" />
         </S.MoveUpDownAnimationBox>
       </S.MoreBox>
     </>

diff --git a/frontend/src/components/Landing/FourthSection.tsx b/frontend/src/components/Landing/FourthSection.tsx
@@ -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="질문 선택 화면 스크린샷" />
         </S.AnimationBox>
         <S.Text margin={30}>
           방 구하기 초보라 아무것도 모르겠다면,
           <br />
-          <S.Highlight>집 구하기 꿀팁이 담긴 아티클</S.Highlight>을
+          <S.Highlight>방 구하기 꿀팁이 담긴 아티클</S.Highlight>을
           <br /> 읽으면서 방 구하기 고수가 되어보아요!
           <S.Observer ref={ref2} />
           <S.EmptyBox height={20} />

diff --git a/frontend/src/components/Landing/SecondSection.tsx b/frontend/src/components/Landing/SecondSection.tsx
@@ -32,7 +32,7 @@ const SecondSection = () => {
       </S.TextBox>
       <S.Observer ref={ref} />
       <S.AnimationBox isIntersecting={isIntersecting}>
-        <img src={mainPageScreen} width="200px" />
+        <img src={mainPageScreen} width="200px" alt="" />
       </S.AnimationBox>
     </>
   );

diff --git a/frontend/src/components/Landing/ThirdSection.tsx b/frontend/src/components/Landing/ThirdSection.tsx
@@ -62,9 +62,9 @@ const ThirdSection = () => {
         <S.Observer ref={ref2} />
         <S.AnimationBox isIntersecting={isIntersecting2}>
           <S.ChecklistImgBox>
-            <img src={checkingPageScreen} />
+            <img src={checkingPageScreen} alt="체크리스트 작성 화면 스크린샷" />
             <S.PencilIconBox>
-              <PencilIcon width={70} height={90} />
+              <PencilIcon width={70} height={90} aria-hidden="true" />
             </S.PencilIconBox>
           </S.ChecklistImgBox>
         </S.AnimationBox>

diff --git a/frontend/src/components/Main/ArticlePreviewCard.tsx b/frontend/src/components/Main/ArticlePreviewCard.tsx
@@ -24,11 +24,16 @@ const ArticlePreviewCard = ({ index, article }: Props) => {
   };
 
   return (
-    <S.Container bgColor={color500} hoverColor={color600} onClick={handleClickArticle}>
+    <S.Container
+      bgColor={color500}
+      hoverColor={color600}
+      onClick={handleClickArticle}
+      aria-label="클릭하면 해당 아티클 페이지로 이동합니다"
+    >
       <S.Keyword bgColor={color600}>{keyword}</S.Keyword>
       <S.Title>{title}</S.Title>
       <S.ArrowButton>
-        <ArrowRight stroke={color600} />
+        <ArrowRight stroke={color600} aria-hidden="true" />
       </S.ArrowButton>
     </S.Container>
   );

diff --git a/frontend/src/components/Main/ArticleSection.tsx b/frontend/src/components/Main/ArticleSection.tsx
@@ -50,12 +50,12 @@ const S = {
   Title: styled.div`
     ${title4}
   `,
-  ShowMore: styled.div`
+  ShowMore: styled.button`
     color: ${({ theme }) => theme.palette.grey400};
     font-size: ${({ theme }) => theme.text.size.small};
     cursor: pointer;
   `,
-  CardList: styled.div`
+  CardList: styled.article`
     box-sizing: border-box;
 
     min-width: 100%;

diff --git a/frontend/src/components/Main/ChecklistPreviewCard.tsx b/frontend/src/components/Main/ChecklistPreviewCard.tsx
@@ -26,7 +26,7 @@ const ChecklistPreviewCard = ({ index, checklist }: Props) => {
 
   return (
     <S.Container onClick={handleClick}>
-      <HomeCircle color={color500} bgColor={color200} />
+      <HomeCircle color={color500} bgColor={color200} aria-hidden="true" />
       <S.Column>
         <S.Label>
           {formattedUndefined(station)}역 · {formattedUndefined(walkingTime)}분

diff --git a/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionAnswers.tsx b/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionAnswers.tsx
@@ -24,10 +24,12 @@ const ChecklistQuestionAnswers = ({ answer, questionId }: { answer: AnswerType;
 
         return (
           <AnswerIcon
+            role="button"
             answer={option.name}
             isSelected={isSelected}
             onClick={() => handleClick(option.name)}
             key={`${questionId}-${option.id}`}
+            aria-label={option.name === 'GOOD' ? '좋아요 버튼' : '싫어요 버튼'}
           />
         );
       })}

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/Address.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/Address.tsx
@@ -18,7 +18,7 @@ const Address = () => {
       ) : (
         <FormField.TextBox text={'주소를 추가해 주세요.'} id="address" />
       )}
-      <FlexBox.Horizontal style={{ marginTop: '20px' }}>
+      <FlexBox.Horizontal style={{ marginTop: '2rem' }}>
         {/*실시간 위치 모달*/}
         <RealTimeAddressModal />
         {/*주소 찾기 모달*/}

diff --git a/frontend/src/components/NewChecklist/Option/OptionAllSelectBox.tsx b/frontend/src/components/NewChecklist/Option/OptionAllSelectBox.tsx
@@ -26,7 +26,6 @@ const OptionAllSelectBox = () => {
           color={theme.palette.yellow500}
           hoverColor={theme.palette.yellow600}
         />
-
         <span>전체선택</span>
       </S.TotalSelectBox>
       <CounterBox currentCount={selectedOptions.length} totalCount={OPTION_COUNT} />

diff --git a/frontend/src/components/NewChecklist/Option/OptionButton/OptionButton.tsx b/frontend/src/components/NewChecklist/Option/OptionButton/OptionButton.tsx
@@ -33,8 +33,12 @@ const OptionButton = ({ option, isSelected }: { option: OptionWithIcon; isSelect
   const currentColor = isSelected ? BUTTON_COLOR.selected : BUTTON_COLOR.unSelected;
 
   return (
-    <S.Box color={currentColor.fill} borderColor={currentColor.border} onClick={handleClick}>
-      <S.IconBox>{isSelected ? <FilledIcon /> : <UnFilledIcon />}</S.IconBox>
+    <S.Box
+      color={currentColor.fill}
+      borderColor={currentColor.border}
+      onClick={handleClick}
+    >
+      <S.IconBox>{isSelected ? <FilledIcon aria-hidden="true" /> : <UnFilledIcon aria-hidden="true" />}</S.IconBox>
       <S.TextBox color={currentColor.text}>{displayName}</S.TextBox>
     </S.Box>
   );

diff --git a/frontend/src/components/NewChecklist/Option/OptionList.tsx b/frontend/src/components/NewChecklist/Option/OptionList.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import MemoziedOptionButton from '@/components/NewChecklist/Option/OptionButton/OptionButton';
+import OptionButton from '@/components/NewChecklist/Option/OptionButton/OptionButton';
 import { OPTIONS } from '@/constants/options';
 import useSelectedOptionStore from '@/store/useSelectedOptionStore';
 
@@ -9,7 +9,7 @@ export const OptionList = () => {
 
   const icons = OPTIONS.map(option => {
     const isCurrentOptionSelected = optionStoreActions.isSelectedOption(option.id);
-    return <MemoziedOptionButton option={option} key={option.id} isSelected={isCurrentOptionSelected} />;
+    return <OptionButton option={option} key={option.id} isSelected={isCurrentOptionSelected} />;
   });
 
   return <S.GridContainer>{icons}</S.GridContainer>;

diff --git a/frontend/src/components/_common/Button/Button.tsx b/frontend/src/components/_common/Button/Button.tsx
@@ -37,9 +37,10 @@ const Button = ({
       onClick={color !== 'disabled' ? onClick : () => {}}
       {...rest}
       disabled={disabled}
+      aria-label={label}
     >
       <FlexBox.Horizontal>
-        {Icon && <Icon />}
+        {Icon && <Icon aria-hidden="true" />}
         <S.Text size={size}>{label}</S.Text>
       </FlexBox.Horizontal>
     </S.Button>

diff --git a/frontend/src/components/_common/Checkbox/Checkbox.tsx b/frontend/src/components/_common/Checkbox/Checkbox.tsx
@@ -30,7 +30,9 @@ const Checkbox = ({
 
   return (
     <S.Checkbox $color={checkedColor} $hoverColor={hoverColor} onClick={onClick}>
-      <S.FlexBox>{iconType === 'check' ? <CheckIcon /> : <PlusWhite />}</S.FlexBox>
+      <S.FlexBox>
+        {iconType === 'check' ? <CheckIcon aria-hidden="true" /> : <PlusWhite aria-hidden="true" />}
+      </S.FlexBox>
       <S.CheckboxInput type="checkbox" onChange={handleClick} checked={isChecked} />
     </S.Checkbox>
   );

diff --git a/frontend/src/components/_common/CounterBox/CounterBox.tsx b/frontend/src/components/_common/CounterBox/CounterBox.tsx
@@ -19,7 +19,12 @@ const CounterBox = ({
   totalCount,
 }: Props) => {
   return (
-    <S.Container $color={color} $gap={gap}>
+    <S.Container
+      $color={color}
+      $gap={gap}
+      aria-live="polite"
+      aria-label={`${totalCount}개 중 ${currentCount}개 선택됨`}
+    >
       {hasBracket && <span>(</span>}
       <span>{currentCount}</span>
       <span>/</span>

diff --git a/frontend/src/components/_common/Footer/FooterButton.tsx b/frontend/src/components/_common/Footer/FooterButton.tsx
@@ -22,25 +22,25 @@ const FooterButton = ({ logo, isActive = false }: Props) => {
     <S.Wrapper>
       {logo === 'home' && (
         <>
-          <Home stroke={stroke} fill={stroke} />
+          <Home stroke={stroke} fill={stroke} aria-label="홈 바로가기" />
           <S.Text isActive={isActive}>홈</S.Text>
         </>
       )}
       {logo === 'checklist' && (
         <>
-          <Checklist stroke={stroke} fill={fill} />
+          <Checklist stroke={stroke} fill={fill} aria-label="체크리스트 바로가기" />
           <S.Text isActive={isActive}>체크리스트</S.Text>
         </>
       )}
       {logo === 'article' && (
         <>
-          <Article stroke={stroke} fill={fill} />
+          <Article stroke={stroke} fill={fill} aria-label="아티클 바로가기" />
           <S.Text isActive={isActive}>아티클</S.Text>
         </>
       )}
       {logo === 'profile' && (
         <>
-          <Profile stroke={stroke} fill={fill} />
+          <Profile stroke={stroke} fill={fill} aria-label="마이페이지 바로가기" />
           <S.Text isActive={isActive}>마이페이지</S.Text>
         </>
       )}

diff --git a/frontend/src/components/_common/Header/Header.tsx b/frontend/src/components/_common/Header/Header.tsx
@@ -81,7 +81,7 @@ const Header = Object.assign(HeaderWrapper, {
   Logo: () => {
     return (
       <Link to={ROUTE_PATH.home}>
-        <BangGgoodTextIcon />
+        <BangGgoodTextIcon aria-label="방끗 로고" />
       </Link>
     );
   },
@@ -96,6 +96,7 @@ const Header = Object.assign(HeaderWrapper, {
         }}
         onClick={handleClick}
         {...props}
+        aria-label="뒤로가기"
       />
     );
   },

diff --git a/frontend/src/components/_common/KakaoLogin/KakaoLoginButton.tsx b/frontend/src/components/_common/KakaoLogin/KakaoLoginButton.tsx
@@ -9,7 +9,7 @@ const KakaoLoginButton = () => {
 
   return (
     <S.KakaoLoginButton onClick={moveToKakao}>
-      <KakaoLogo />
+      <KakaoLogo aria-hidden="true" />
       <S.Text>카카오톡으로 시작하기</S.Text>
     </S.KakaoLoginButton>
   );
@@ -22,7 +22,8 @@ const S = {
     width: 100%;
     height: 5rem;
     ${flexRow}
-    justify-content: space-evenly;
+    gap: 0.5rem;
+    justify-content: center;
     align-items: center;
     border-radius: 0.8rem;
 

diff --git a/frontend/src/components/_common/Like/LikeButton.tsx b/frontend/src/components/_common/Like/LikeButton.tsx
@@ -41,6 +41,7 @@ const LikeButton = ({ isLiked = false, checklistId }: Props) => {
       onClick={handleClickLike}
       fill={fill ? theme.palette.red500 : 'NONE'}
       stroke={fill ? theme.palette.red500 : theme.palette.grey500}
+      aria-label="좋아요 버튼"
     />
   );
 };

diff --git a/frontend/src/components/_common/TipBox/TipBox.tsx b/frontend/src/components/_common/TipBox/TipBox.tsx
@@ -19,7 +19,7 @@ const TipBox = ({ tipType }: Props) => {
       <S.TipText>
         💡 <S.Bold>TIP</S.Bold> : {TIP_MESSAGE[tipType]}
       </S.TipText>
-      <CloseIcon onClick={closeTip} style={{ paddingRight: 1 }} />
+      <CloseIcon onClick={closeTip} style={{ paddingRight: 1 }} aria-label="클릭하면 팁박스가 삭제됩니다" />
     </S.TipBox>
   );
 };