[FEATURE] LineBanner 웹접근성 고려하기

[SeoMiYoung]

📝 TASK 개요

다음 코드는 웹접근성을 고려하기 전, LineBanner.jsx의 코드입니다.

import { Link } from 'react-router-dom';

import styles from './LineBanner.module.scss';

export function LineBanner() {
  return (
    <>
      <article className={styles.purpleWeekImg}>
        <Link to="/" aria-label="더 풍성해진 10월의 퍼플위크 (적립률UP+3종 쿠폰팩)"></Link>
      </article>
    </>
  );
}

export default LineBanner;

배경 이미지가 포함된 요소에 aria-label 속성 값을 부여 했으므로 접근 가능한 것은 맞지만, aria-label 속성을 사용하는 것 보다는, 실제 콘텐츠를 포함하는 것이 더 많은 스크린 리더를 지원할 수 있다는 피드백을 받아, 다음과 같이 코드를 수정했습니다.

참고로 a11yHidden은 src/styles/_a11y.css에 있습니다.

import { Link } from 'react-router-dom';

import styles from './LineBanner.module.scss';

export function LineBanner() {
  return (
    <>
      <article className={styles.purpleWeekImg}>
        <Link to="/">
          <span className="a11yHidden">더 풍성해진 10월의 퍼플위크 (적립률UP+3종 쿠폰팩)</span>
        </Link>
      </article>
    </>
  );
}

export default LineBanner;