텍스트 접근성

10.1 접근성

접근성 (accessibility) 웹 콘텐츠는 현대 웹 디자인에서 중요한 부분이야. 이건 모든 사용자가, 장애가 있는 사람들을 포함해서, 웹 페이지를 쉽게 상호작용할 수 있도록 하는 걸 목표로 해.

이 목표를 달성하기 위한 주요 도구 중 하나는 ARIA 속성(Accessible Rich Internet Applications)이야. 이 속성들은 웹 콘텐츠를 더 이해하기 쉽고, 보조 기술(예: 화면 낭독기)과 더 접근 가능하게 만들어줘.

ARIA가 뭐야?

ARIA (Accessible Rich Internet Applications)는 HTML 요소에 추가해서 그 접근성을 개선하기 위한 특수한 속성 세트야. 이 속성들은 요소의 구조와 동작에 대한 추가 정보를 제공해서 보조 기술이 웹 콘텐츠를 더 잘 해석하고 상호작용할 수 있도록 도와줘.

텍스트의 가독성을 높이기 위한 주요 ARIA 속성들:

aria-label 속성

aria-label 속성은 화면 낭독기에 의해 읽힐 텍스트 레이블을 요소에 제공하기 위해 사용돼. 이 속성은 요소에 눈에 보이는 레이블이 없거나 더 자세한 설명이 필요한 경우 유용해.

사용 예시:

    
      <button aria-label="닫기 대화 상자">X</button>
    
  

aria-labelledby 속성

aria-labelledby 속성은 요소를 페이지의 다른 레이블과 id를 사용해서 연결시켜. 이미 존재하는 레이블과 요소를 연결해서 맥락과 설명을 제공할 때 유용해.

사용 예시:

    
      <h2 id="section-title">섹션 제목</h2>
      <p aria-labelledby="section-title">이 문단은 섹션 제목과 관련된 텍스트야.</p>
    
  

aria-describedby 속성

aria-describedby 속성은 설명을 담고 있는 한 개 이상의 요소를 id를 통해 요소에 연결해. 이 속성은 추가 정보나 맥락을 제공할 때 유용해.

사용 예시:

    
      <input type="text" aria-describedby="input-description">
      <p id="input-description">이름을 입력하세요.</p>
    
  

10.2 역할

role 속성

role 속성은 요소의 역할을 정의해서 보조 기술이 해당 요소를 어떻게 해석해야 하는지 알려줘. button, navigation, main, article 등 다양한 역할이 있어.

사용 예시:

    
      <nav role="navigation">
        <ul>
          <li><a href="#home">홈</a></li>
          <li><a href="#about">소개</a></li>
          <li><a href="#contact">연락처</a></li>
        </ul>
      </nav>
    
  

aria-live 속성

aria-live 속성은 동적으로 업데이트되는 콘텐츠에 사용돼. 이 속성은 화면 낭독기에 요소 내부의 콘텐츠가 변경되었음을 알려줘서, 이를 읽어주도록 해. 값에는 off, polite, assertive가 포함돼.

사용 예시:

    
      <div aria-live="polite">
        <p>여기에 중요한 정보가 표시될 거야.</p>
      </div>
    
  

aria-hidden 속성

aria-hidden 속성은 보조 기술에 요소가 사용자에게 접근 가능해야 하는지를 알려줘. true 값은 요소를 보조 기술로부터 숨기고, false 값은 접근 가능하게 만들어.

사용 예시:

    
      <div aria-hidden="true">
        <p>이 텍스트는 화면 낭독기에 의해 숨겨질 거야.</p>
      </div>
    
  

aria-expanded 속성

aria-expanded 속성은 요소가 열려 있는지 또는 접혀 있는지를 나타내. 이 속성은 주로 "아코디언"이나 드롭다운 메뉴 같은 제어 요소에서 사용돼.

사용 예시:

    
      <button aria-expanded="false" aria-controls="menu">메뉴</button>
      <ul id="menu" hidden>
        <li><a href="#item1">항목 1</a></li>
        <li><a href="#item2">항목 2</a></li>
        <li><a href="#item3">항목 3</a></li>
      </ul>
    
  

aria-controls 속성

aria-controls 속성은 현재 요소에 의해 관리되는 요소를 나타내. 이 속성은 aria-expanded와 같은 속성과 함께 사용해서 상호작용 제어 요소를 만들어.

사용 예시:

    
      <button aria-controls="content" aria-expanded="false">보이기/숨기기</button>
      <div id="content" hidden>
        <p>숨겨진 콘텐츠.</p>
      </div>
    
  

1

Опрос

텍스트 꾸미기,  15 уровень,  5 лекция

недоступен

텍스트 꾸미기

텍스트 꾸미기

Открыть