<img alt="" />
<input type="image" alt="" />
<input type="button" alt="" />
<map alt=""> <area alt="" /></map>

<i class="fa fa-times-circle"></i>
<span class="blind">Close submenu</span>

<img alt="인공지능 스피커 프렌즈를 지금 만나보세요 구매하러 가기" />

<img
  alt="주식수수료 평생무료 비다면계좌개설 신규/온라인/유관기관 제비용 제외 2018년 12월 31일까지 선물/옵션 1년무료, 신용이자 연 3.5% 60일 우대"
/>

<!--alt가 너무 길면 p태그로 따로 빼기도 합니다-->

<img alt="" />
<p class="blind">
  주식수수료 평생무료 비다면계좌개설 신규/온라인/유관기관 제비용 제외 2018년
  12월 31일까지 선물/옵션 1년무료, 신용이자 연 3.5% 60일 우대
</p>

<img src="graph.png" alt="" />

<table class="blind">
  <caption></caption>
  <thead>
    <tr>
      <th scope="col">년도</th>
      <th scope="col">과일종류</th>
      <th scope="col">재배 수</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2013</td>
      <td>양파</td>
      <td>800</td>
    </tr>
    ...
  </tbody>
</table>

<!-- 첫번째 방법 -->
<img src="btn_next.png" alt="다음 콘텐츠 보기" />

<!-- 두번째 방법 -->
<a href="#" class="link_next">다음 콘텐츠 보기</a>
<style>
  .link_next {
    background-image: url('./image/icon_next.png');
  }
</style>

<img src="brown_img_5.png" alt="미안해하는 브라운" />

<a href="http://www.naver.com">
  <img src="qr_code.png" alt="http://www.naver.com 바로가기 QR 코드" />
</a>

<!-- 잘못된 예 - 스크린 리더에 2번 나오게 됩니다.(alt와 span을 둘다 읽어주기 때문에) -->
<a href="">
	<img src="thumb01.jpg" alt="팽이버섯요리 집에서 맥주안주추천 바삭한 팽이버섯튀김">
</a>
<a href="">
	<span>팽이버섯요리 집에서 맥주안주추천 바삭한 팽이버섯튀김<span>
	<span>팽이버섯요리 집에서 맥주안주추천 바삭한 팽이버섯튀김 비가 내리고 음악이 흐르면 그렇게 튀김이 생각납니다. 오늘은...</span>
</a>

<!-- 옳은 예 - a 태그 하나로 묶고 alt를 쓰지 말아야 합니다-->
<a href="">
	<img src="thumb01.jpg" alt="">
	<span>팽이버섯요리 집에서 맥주안주추천 바삭한 팽이버섯튀김<span>
	<span>팽이버섯요리 집에서 맥주안주추천 바삭한 팽이버섯튀김 비가 내리고 음악이 흐르면 그렇게 튀김이 생각납니다. 오늘은...</span>
</a>

<!-- 캡차 같은 경우, 음성으로 듣기와 같은 청각적 캡차를 동시에 제공하기 때문에 
alt="2F7S6N9U"를 제공하기보다는 음성으로 듣기 버튼으로 안내해야 합니다. -->

.blind {
  display: none;
}
.blind {
  visibility: hidden;
}

.blind {
  position: absolute; // 레이아웃에 영향을 끼치지 않도록
  clip: rect(0 0 0 0);
  width: 1px; // 스크린 리더가 읽을 수 있도록
  height: 1px;
  margin: -1px;
  overflow: hidden; // 눈에 보이는 부분을 제거
}

<img src="123456.png" alt="" />

<thead>
  <tr>
    <th rowspan="2" scope="col" id="date">기준일</th>
    <th colspan="2" scope="col" id="gsale">경기도 매매가</th>
  </tr>
  <tr>
    <th scope="col" id="price">면적 단가</th>
    <th scope="col" id="change">변동액</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row" id="d20181020">2022.10.20</th>
    <td headers="date d20181020 gsale price">902</td>
    <td headers="date d20181020 gsale change">유지 0</td>
  </tr>
  <tr>
    <th scope="row" id="d20181021">2022.10.21</th>
    <td headers="date d20181021 gsale price">904</td>
    <td headers="date d20181021 gsale change">상승 2</td>
  </tr>
</tbody>

<label for="user_id">아이디</label>
<input type="text" id="user_id" />

<label for="user_pw">비밀번호</label>
<input type="password" id="user_pw" />

<input type="text" title="생년월일 중 년 4자리 입력" />
<input type="text" title="생년월일 중 월 입력" />
<input type="text" title="생년월일 중 일 입력" />