tailwindCss “sr-only”

page.tsx 페이지 컴포넌트 안에는 하나의 h1 태그가 있는 것이 좋다.
  • 컴포넌트 레벨의 요소들은 그래서 h2부터 헤딩을 시작해야 한다.
  • 오직 page.tsx 에서만 h1 태그를 하나 선언하는 것이 접근성 측면에서 좋다.
 
그런데 h1 태그를 페이지 상에 시각적으로 노출시키고 싶지 않은 경우가 있다.
이런 경우에는 AT 사용자들을 위해 접근성을 고려하면서도, 시각적으로는 보이지 않도록 처리하는 것이 좋다.
 
tailwindCss에서는 “sr-only”로 이걸 가능하게 도와준다.
export const AboutPage = () => {
  return (
    <main>
      {/* 접근성을 위해 h1 태그를 쓰되, 시각적으로 보이진 않았으면 좋겠다. */}
      <h1 className="sr-only">About Me</h1>
      <Hero />
      <Content />
    </main>
  );
};

export default AboutPage;