접근성 속성 (alt, role)

으넝·2024년 9월 5일

목록 보기

2/9

code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blog</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        line-height: 1.6;
      }

      header {
        color: #000;
        font-weight: 900;
        margin-left: 20px;
        padding: 10px 0;
        font-size: x-large;
      }

      nav {
        padding: 10px;
      }

      nav a {
        font-weight: 100;
        color: #000;
        margin: 0 10px;
        text-decoration: none;
        cursor: pointer;
      }

      main {
        display: flex;
        margin: 20px;
      }

      article {
        flex: 3;
        padding: 20px;
        background: #f4f4f4;
        margin-right: 20px;
      }

      .image {
        width: 400px;
        height: 600px;
        object-fit: fill;
      }

      footer {
        background: #004cff;
        color: white;
        padding: 60px 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
    <header>
      <h1>My Simple Blog</h1>
    </header>

    <main>
      <article>
        <img class="image" src="./image/00a460f03a8f0.png" alt="검은색 의자" />
      </article>
      <article>
        <img class="image" src="./image/41c388374f544.jpg" alt="야외 의자" />
      </article>
      <article>
        <img class="image" src="./image/70d418db083a6.jpg" alt="살내 의자" />
      </article>
    </main>

    <footer>
      <p>&copy; 2024 copy right</p>
    </footer>
  </body>
</html>

1. role

정의: role 속성은 웹 콘텐츠의 특정 역할을 정의합니다. 주로 ARIA(Accessible Rich Internet Applications) 속성으로 사용되며, 스크린 리더와 같은 보조 기술이 페이지의 구조와 기능을 이해하는 데 도움을 줍니다.

용도: 특정 요소의 역할을 명시하여 접근성을 높입니다. 예를 들어, 버튼, 대화 상자, 이미지 슬라이더 등의 역할을 정의할 수 있습니다

<div role="button" tabindex="0">Click me</div>

2. alt

정의: alt 속성은 <img> 요소에 대한 대체 텍스트를 제공하는 속성입니다. 이미지를 로드할 수 없는 경우 또는 스크린 리더 사용자가 이미지를 이해할 수 있도록 설명을 제공합니다.

용도: 이미지의 의미나 내용을 설명하여 접근성을 높입니다. 이는 시각적으로 이미지를 볼 수 없는 사용자에게 중요한 정보를 제공합니다.

<img src="image.jpg" alt="black stool">

3. 차이점

특성	`role`	`alt`
사용 위치	다양한 HTML 요소에 사용 가능	`<img>` 요소에만 사용
목적	요소의 역할 정의	이미지 대체 텍스트 제공
접근성	ARIA를 통해 접근성 향상	시각적 정보의 대체 제공