웹 표준 & 웹 접근 과제 정리

웹 표준에서는 HTML을 시맨틱(semantic)하게 작성하는 것의 중요성을 강조하는데 시맨틱 HTML란 HTML이 구조를 만드는 것을 넘어 의미를 갖도록 만들겠다는 의도가 담겨있다고 할 수 있다.

< b >태그와 < storng >태그

< b >태그는 Bold의 약자로 특정 텍스를 굵게 쓰기 위해 쓰지만 별다른 내용은 없다. 반면 < storng >태그는 "매우 중요, 긴급"의 의미를 갖고 있기 때문에 조금 더 시맨틱 HTML에 가깝다.

< i >태그와 < em >태그

< i > 태그는 italic의 약자로 특정 텍스트를 기울여 표기되며 주로 기술용어, 외국어, 등장인물의 생각 등 특정 구문에 사용된다. 반면 < em >태그는 주위 텍스트와 비교했을 때 해당 부분을 강조하기 위해 사용한다. 하지만 기울임꼴 글씨체가 필요한 경우 해당 태그들을 사용하지 말고 CSS의 font-style: italic을 사용하는 것이 좋다.

글자 사이에 간격주기

줄바꿈 태그인 < br >을 남발하여 간격을 주는것은 시맨틱 HTML에 어긋나기 때문에 CSS나 styled component를 사용해서 간격을 주는 것이 좋다.

인라인 스타일링 지양하기

HTML 요소 안에 인라인으로 스타일링 속성을 설정하는 것은 기껏 분리한 영역을 다시 합치는 것과 같으므로 웹 표준을 지키기 위해서는 HTML과 CSS 코드를 분리해서 작성하는 것이 바람직하다.

대체 텍스트 작성하기

시각적 요소를 인지하지 못하는 사용자들을 위해서(voice over, screen reader) 텍스트가 아닌 콘텐츠를 제공할 땐 해당 콘텐츠가 어떤 콘텐츠인지 설명하는 대체 텍스트를 작성해주는 것이 좋다.

<img src={catImage} alt="윙크하는 황색고양이" />