3/3 일일정리 웹 표준/웹 접근성 개선 실습

코드스테이츠

3/3 일일정리 웹 표준/웹 접근성 개선 실습

강물둘기 2023. 3. 3. 13:33

웹표준 / 웹 접근성 개선 실습을 진행하였다.

1. Semantic HTML

div와 span으로 되어있는 태그들을 시멘틱요소인 article, nav, header, footer등으로 바꾸는 작업을 했다.

당장 눈에 띄는 차이는 없엇지만, SEO에 노출이 잘 된다던가, 웹 접근성이 늘어나는 등의 효과를 얻을 수 있다.

2. 자주 틀리는 마크업

화면으로 볼때는 큰 문제가 없는데 웹표준에 어긋나고 권장되지 않는 마크업 사용법을 실습을 통해 알아보았다.

⓵ 인라인 요소 안에 블록 요소를 넣는 것은 권장하지 않는다.

⓶ , 는 시멘틱 요소가 아니기 때문에 쓰지않고, 대신 , 을 사용한다.

⓷ <hgroup>은 제목을 적을 때 사용하는 태그이기 때문에 글자 크기 조절등에는 사용하지 않는다. 글자 크기를 조정하고 싶으면 css를 사용한다.

⓸ 은 한 태그 내에서 줄바꿈을 할 때 사용하는 태그이다. 요소와 요소 사이를 띄우기 위해 사용하지 않는다. 요소 사이의 거리를 조절하고싶으면 css margin이나 padding 속성을 이용한다.

⓹ 인라인 스타일링은 웹 표준에 어긋난다. css 파일을 이용하여 스타일링을 하는것이 권장된다.

3. 대체 텍스트

시각적인 요소를 인지하지 못하는 사용자를 위해 대체 텍스트를 '잘' 작성해야 한다. <img> 태그의 경우 alt 속성을 사용하여 이미지 설명을 작성한다.

설명은 너무 광범위하게 작성하지 않고(예 - 토끼 사진인데 동물이라고 표현) 너무 장황하게 작성하는 것도 지양해야 한다. 또한 주변에 이미지를 충분히 설명하는 텍스트가 있으면 대체 텍스트로 빈문자열을 할당한다.

*주의할 점 : alt 속성에 빈문자열을 할당하면 요소 자체를 인식하지 않으므로 주의가 필요하다.

4. 콘텐츠의 선형구조

듣기만 해도 정보를 이해하기 좋은 구조로 코드를 작성하는 것이 좋다.

Tab 요소의 경우 제목 -제목 -제목 내용 - 내용 - 내용 식으로 코드를 작성하게 되는데

이럴 경우 스크린 리더를 사용하는 사용자는 스크린 리더가 읽어 주는 제목 -제목 -제목 내용 - 내용 - 내용 을 듣고 어떤 구조인지 파악하는것이 힘들 수 있다.

따라서 코드를 작성할 때 제목 - 내용, 제목 - 내용, 제목 - 내용 방식으로 작성하면 웹 접근성을 높일 수 있다.

<div>
    <div>{tab1.title}</div>
    <div>{tab1.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
</div>
<div>
    <div>{tab2.title}</div>
    <div>{tab2.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
</div>
<div>
    <div>{tab3.title}</div>
    <div>{tab3.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
</div>

5. WAI-ARIA

시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하여 추가적인 의미를 부여할 수 있다.

하지만 시맨틱 요소만으로 의미를 충분히 부여할 수 있으면 WAI-ARIA 사용을 지양해야 한다.

WAI-ARIA는 보조적으로만 사용하고 시맨틱한 HTML을 작성하는것이 최우선이다.

WAI-ARIA로는 역할(role 속성), 상태(aria-selected), 속성(aria-label, aria-live) 등을 표현할 수 있다.

역할 표시
<div role="button">div이지만 button으로 사용되는 요소</div>

상태 표시
<li role="tab" aria-selected="true">Tab1</li>

속성 표시
<button aria-label="검색"/> <img src="돋보기.png" /> </button>