Semantic HTML 및 Aria를 사용해야하는 이유

시맨틱 HTML 및 액세스 가능한 리치 인터넷 애플리케이션 (ARI)은 포용적이고 성능있는 웹 인터페이스를 구축하는 데 중요합니다. 그들은 콘텐츠에 필수적인 맥락을 제공하여 브라우저, 검색 엔진, 스크린 리더 및 사용자가 이해할 수 있도록합니다. 그들의 혜택에도 불구하고 많은 개발자들은이를 간과합니다. 인용 된 일반적인 이유는 그들의 장점에 대한 인식이 부족하기 때문입니다.

이 기사는 시맨틱 HTML과 ARIA의 이점을 살펴보고 시맨틱 HTML의 우선 순위와 최후의 수단 으로서만 ARIA의 사용을 옹호합니다.

일반 텍스트로 시작 : 문제

그만큼 요소는 페이지의 기본 내용을 보유합니다. 요소를 구성하지 않으면 브라우저는 제목 및 단락과 같은 콘텐츠 유형을 구별 할 수있는 기능이 없습니다. 이 예를 고려하십시오 :

 <code>A Study of Butterflies Butterflies are little bugs with cute wings. Butterfly Habitats Butterflies live in flower houses and hang out at dank coffeeshops.</code>

이러한 구조 부족은 몇 가지 문제를 초래합니다.

• 단락과 다르게 제목을 스타일링 할 수 없습니다.
• 검색 엔진 색인 및 발견 가능성 장애.
• 보조 기술에 대한 컨텐츠의 비효율적 인 커뮤니케이션.
• 불쌍한 시각적 프레젠테이션.

기본 구조 추가<div> 에스<p> 텍스트를 랩핑합니다<code><div> 요소는 약간의 개선을 제공합니다.<pre class="brush:php;toolbar:false">&lt;code&gt;&lt;div&gt; 나비 연구.&lt;/div&gt; &lt;div&gt;나비는 귀여운 날개를 가진 작은 벌레입니다.&lt;/div&gt; &lt;div&gt;나비 서식지&lt;/div&gt; &lt;div&gt;나비는 꽃집에 살고 Dank Coffeeshops에서 놀고 있습니다.&lt;/div&gt;&lt;/code&gt;</pre> <p> 그러나 이것은 여전히 ​​의미 론적 의미가 부족합니다. 콘텐츠 유형은 보조 기술 및 검색 엔진에 대해 모호합니다.</p> <h3 id="CSS의-스타일링-제한된-솔루션"> CSS의 스타일링 : 제한된 솔루션</h3> <p> CSS는 스타일을 만들 수 있습니다<code><div> 클래스 또는 ID를 사용하는 요소, 시각적 프레젠테이션 향상. 그러나 이것은 시력이있는 사용자에게만 도움이되며 다른 기술에 대한 의미 론적 의미를 제공하지 않습니다.<pre class="brush:php;toolbar:false">&lt;code&gt;&lt;div class=&quot;heading1&quot;&gt; 나비 연구&lt;/div&gt; &lt;div class=&quot;paragraph&quot;&gt;나비는 귀여운 날개를 가진 작은 벌레입니다.&lt;/div&gt; &lt;div class=&quot;heading2&quot;&gt;나비 서식지&lt;/div&gt; &lt;div class=&quot;paragraph&quot;&gt;나비는 꽃집에 살고 Dank Coffeeshops에서 놀고 있습니다.&lt;/div&gt;&lt;/code&gt;</pre> <p> 이 접근법은 깨지기 쉽고 내재 된 의미 론적 의미가 부족합니다.</p> <h3 id="시맨틱-HTML의-힘"> 시맨틱 HTML의 힘</h3> <p> 시맨틱 HTML 요소와 같은 요소<code><h1 id="code-h-그리고-code-p-고유-한-의미를-제공합니다-일반-대신-이러한-요소를-사용합니다-code-div-S는-훨씬-우수합니다-pre-code-h-나비-연구"> ,,,<code><h2> , 그리고<code><p> 고유 한 의미를 제공합니다. 일반 대신 이러한 요소를 사용합니다<code><div> S는 훨씬 우수합니다.<pre class="brush:php;toolbar:false">&lt;code&gt;&lt;h1&gt; 나비 연구&lt;/h1&gt; &lt;p&gt;나비는 귀여운 날개를 가진 작은 벌레입니다.&lt;/p&gt; &lt;h2 id=&quot;나비-서식지&quot;&gt;나비 서식지&lt;/h2&gt; &lt;p&gt;나비는 꽃집에 살고 Dank Coffeeshops에서 놀고 있습니다.&lt;/p&gt;&lt;/code&gt;</pre> <p> 이 접근법은 다양한 장점을 제공합니다.</p> <ul> <li> 기본 브라우저 스타일 및 개선 된 시각적 프레젠테이션.</li> <li> 향상된 검색 엔진 최적화.</li> <li> 보조 기술에 의한 적절한 해석.</li> <li> 더 깨끗하고 간결한 코드.</li> <li> HTML 프로세서와의 향후 방지 호환성.</li> </ul> <h3 id="시맨틱-HTML의-추가-이점"> 시맨틱 HTML의 추가 이점</h3> <p> 시맨틱 HTML은 추가 혜택을 제공합니다. 예를 들어, 사용<code><input type="tel"> 모바일 장치에 숫자 키패드를 제공합니다. Safari의 리더 모드와 같은 브라우저는 Semantic HTML의 혜택을 받아 더 깨끗한 읽기 경험을 제공합니다.

아리아 : 필요한 보충제

ARIA (접근 가능한 리치 인터넷 응용 프로그램)는 시맨틱 HTML을 보완하여 보조 기술의 접근성을 향상시킵니다. JavaScript가 조작 한 동적 컨텐츠에 특히 유용합니다.

예를 들어, 오류 메시지를 ARIA를 사용하여 양식 필드와 연결하면 화면 리더가 오류를 올바르게 발표 할 수 있습니다.

 <code><label for="first-name">First name</label><input type="text" id="first-name" aria-describedby="first-name-error"> <span id="first-name-error" aria-live="assertive">This field is required</span></code>

아리아 오용을 피합니다

Semantic HTML이 좋지 않은 경우 Aria를 사용하지 않도록하는 것이 중요합니다. 기본 HTML 요소 (예 : Checkboxes)를 모방하려고 시도합니다<div> S와 Aria는 적절한 기본 요소를 사용하는 것보다 지나치게 복잡하고 신뢰할 수 없습니다.<h3 id="결론"> 결론</h3> <p> 포괄적 인 설계는 모든 사용자의 접근성을 우선시합니다. 시맨틱 HTML은 기초이며, 다양한 기술에서 고유 한 의미를 제공하고 사용자 경험을 향상시킵니다. ARIA는 동적 인 인터페이스의 특정 접근성 문제를 해결하기 위해 시맨틱 HTML을 보충하기 위해 신중하게 사용되어야하지만 적절한 시맨틱 마크 업을 대체하지는 않습니다. 시맨틱 HTML의 우선 순위를 정하는 것은 진정한 포괄적 인 웹 경험을 만드는 가장 효율적이고 신뢰할 수있는 경로입니다.</p> </div>