HTML 태그로 접근성 향상하기

 

📌 HTML 태그로 접근성 향상하기

 

* 접근성 향상을 위해서는 고유한 이름 짓는 것이 좋다.

• 단순히 "클릭", "더보기" 등과 같은 모호한 텍스트를 지정해서는 안됨

 

 

<a> 태그 ➡ 텍스트 삽입

<a href="/win-a-prize">상금 획득</a>

 

 

 

<img> 태그 ➡ alt 속성

• alt 속성과 aria-label 속성은 같이 사용할 수 없음

<img src="prize.png" alt="상금 획득">

 

 

 

<input> 태그 ➡ <label>

• <input> 태그의 id 속성과 <labe> 태그의 for 속성을 연결시켜야 함

<label for="email">Email</label>
<input type="email" id="email">

 

 

 

<table> 태그 ➡ <caption>

• <caption> 태그로 <table>의 제목 설정

<table>
    <caption>Monthly Sales Report</caption>
    <thead>
        <tr>
            <th>Month</th>
            <th>Sales</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$5000</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$6000</td>
        </tr>
        <tr>
            <td>March</td>
            <td>$7000</td>
        </tr>
    </tbody>
</table>

 

 

 

<fieldset> 태그 ➡ <legend> 

•  <legend> 태그로 <fieldset> 태그로 묶어둔 태그들의 제목 설정

<fieldset>
  <legend>Don't you love HTML?</legend>
  <input type="radio" name="yesno" id="yes"/>
  <label for="yes">Yes</label>
  <input type="radio" name="yesno" id="no"/>
  <label for="no">No</label>
</fieldset>

 

 

---

참고

 

접근성 향상을 위한 이름 짓기 - The Tracks of mulder21c

 

Naming things to improve accessibility