<section>
 <img src="/hero.png" alt="hero"> 
 <article>
 <h1>Find the right Products and Services at the right time.</h1>
 <p>
 Handmade footwear, hair revamp, social media manager, sending errands, source of income</b> &mdash; you name it, Taaskly got it. Find every product or service you need today when you sign up and use Taaskly. 
 </p>
 <a href="/main/home">Outsource a Task</a>
 <a href="/main/services"> Find a service</a>
 <a href="/main/marketplace" >Find a shop</a>
 </article>
</section>
 

HTML 스니펫에서 다음을 관찰할 수 있습니다:

⭐ 이미지, 텍스트 및 버튼이 <섹션> 요소 안에 있습니다.

⭐ <섹션> 요소는 <이미지>와 <기사> 요소를 동일하게 나눕니다.

⭐ <기사> 요소는

,

및 요소를 포함합니다.

⭐ 버튼은 요소로 코딩되어 있으므로 버튼이 아닌 링크입니다. 일반적으로 사용자를 다른 페이지나 보기로 안내하려면 항상 링크를 사용하고, 사용자가 동일한 보기에서만 작업을 수행하도록 하려는 경우에는 버튼을 사용하세요. 이에 대한 자세한 내용은 Angular의 버튼 페이지 를 참조하세요.

랜드마크를 사용하여 명확한 페이지 구조 제공

랜드마크는 시각 장애인이 화면 리더로 웹 페이지를 탐색하는 데 도움이 되는 시맨틱 태그입니다. 랜드마크를 사용하면 웹 페이지의 여러 부분을 쉽게 정의할 수 있습니다. Apple의 웹사이트 은 랜드마크를 사용합니다.

위 이미지는 네 가지 랜드마크를 보여줍니다. 접근성 인사이트 확장 프로그램을 사용하여 이러한 랜드마크를 시각화할 수 있습니다.

이미지에서 상단의 <내비게이션>, <섹션>이 포함된 <바닥글>, <내비게이션> 요소를 추론할 수 있습니다. 이미지에 ‘탐색’, ‘지역’, ‘콘텐츠 정보’가 눈에 띄게 표시됩니다. 이를 역할이라고 하며 나중에 살펴보겠습니다.

페이지에 여러 개의 랜드마크를 사용해야 할 때는 항상 레이블로 랜드마크를 구분하세요. 예를 들어 Apple처럼 여러 개의 <내비게이션> 요소를 사용하는 경우 레이블을 지정해야 합니다. aria-label 속성을 사용하여 레이블을 지정해야 합니다. 따라서 다음과 같이 작성할 수 있습니다:

 <nav aria-label = "global">
<nav aria-label = "local navigation">
<nav aria-label = "apple directory">
 

레이블을 사용하면 화면 리더가 탐색을 건너뛰는 데 도움이 될 수 있습니다.

역할, 이름 및 값 속성 활용

접근성 기능이 내장된 HTML 요소를 사용할 수 없는 경우도 있습니다.

⭐ 달성하려는 목적에 맞는 기본 HTML 요소가 없는 경우입니다. 예를 들어, 다른 요소가 그 역할에 적합하지 않아서

 <header role = "navigation">
<nav role = "banner">
<div role = "navigation">
 

 <div role = "button">Click me!</div>
 

 <nav role = "navigation" aria-label = "global-navigation">...</nav>
 

 <!-- name attribute -->
<nav role = "navigation" name = "global-navigation">...</nav>

<!-- accessible name -->
<nav role = "navigation" aria-label = "global-navigation">...</nav>
 

 <!-- aria-valuenow -->
<button class="play-button" aria-label="Play audio" aria-valuenow="0"></button>
<audio src="audio-file.mp3"></audio>

<!--aria-expanded-->
<div role="button" aria-expanded="false">FAQ 1</div>

<!--value-->
<input type="checkbox" name="product[]" value="1">