HTML과 CSS는 웹 표준화와 웹 접근성을 따르기 위한 주요 요소입니다.
HTML은 웹 문서의 구조와 의미를 정의하고, CSS는 웹 문서의 스타일과 레이아웃을 정의합니다.
HTML 요소 중에서는 HTML5에서 도입된 시맨틱 태그(semantic tag)가 웹 표준화와 웹 접근성에 기여합니다.
시맨틱 태그란 문서의 구조와 의미를 명확하게 표현하는 태그로,
예를 들면 <header>, <nav>, <section>, <article>, <footer> 등이 있습니다.
시맨틱 태그를 사용하면 웹사이트의 가독성과 검색엔진 최적화(SEO)에 도움이 됩니다.
CSS 요소 중에서는 스타일시트의 분리, 색상의 명시, 폰트의 크기 및 가독성,
레이아웃의 유연성 등이 웹 표준화와 웹 접근성에 영향을 줍니다.
스타일시트의 분리란 HTML과 CSS를 별도의 파일로 작성하여
HTML은 문서의 구조와 내용만 담당하고 CSS는 문서의 디자인과 레이아웃만 담당하도록 하는 것입니다.
색상의 명시란 색상을 이름으로 지정하지 않고 RGB나 HEX값으로 표현하여
다양한 브라우저에서 일관된 색상을 보여주도록 하는 것입니다.
폰트의 크기 및 가독성은 사용자가 폰트 크기를 조절할 수 있도록 상대단위(em, rem, %)로 지정하고,
폰트 종류는 가독성이 좋은 서체로 선택하며, 폰트 색상과 배경색은 대비가 충분히 되도록 하는 것입니다.
레이아웃의 유연성은 다양한 화면 크기와 해상도에 맞게 웹사이트가 자동으로 조절되도록
반응형 웹 디자인(responsive web design)을 적용하는 것입니다.
또한 아래와 같은 예시로 웹 표준화 및 접근성을 충족할 수 있습니다.
- 텍스트가 아닌 콘텐츠(이미지, 동영상, 오디오 등)에는 alt 속성을 사용하여 대체 텍스트를 제공합니다. 이렇게 하면 스크린 리더와 같은 보조 기기가 콘텐츠의 내용을 읽어줄 수 있습니다.
- font-size, color, margin 등의 속성을 사용하여 글자 크기, 색상, 여백 등을 지정할 수 있습니다. 이렇게 하면 웹 문서의 스타일과 레이아웃을 조절할 수 있고, 다양한 화면 크기와 해상도에 맞게 적응할 수 있습니다.
- <h1> 태그를 사용하여 제목을 표시하고, <p> 태그를 사용하여 단락을 표시합니다. 이렇게 하면 웹 문서의 구조와 의미가 명확해지고, 스크린 리더와 같은 보조 기기가 쉽게 인식할 수 있습니다.
- 멀티미디어 콘텐츠(동영상, 오디오 등)에는 자막, 원고, 수화 등의 다른 대안을 제공합니다. 이렇게 하면 청각 장애인이나 낮은 음량으로 듣는 사람들도 콘텐츠를 이해할 수 있습니다.
- 웹 문서의 제목은 <h1> 태그를 사용하고, 부제목은 <h2> ~ <h6> 태그를 사용하여 계층적으로 구성합니다. 이렇게 하면 웹 문서의 구조가 명확해지고, 내비게이션에 도움이 됩니다.
- 웹 문서의 배경색과 전경색(글자색)은 충분한 명도 대비를 갖도록 선택합니다. 이렇게 하면 시력이 약한 사람이나 색맹인도 콘텐츠를 잘 볼 수 있습니다.
- 웹 문서의 언어를 <html lang="ko">와 같이 명시합니다. 이렇게 하면 다국어 웹 사이트를 제공하거나 스크린 리더가 올바른 언어로 읽어주는데 도움이 됩니다.
- 웹 문서의 내용을 <header>, <nav>, <main>, <footer> 등의 시맨틱 요소로 구분합니다. 이렇게 하면 웹 문서의 의미와 역할이 명확해지고, 검색 엔진이나 보조 기기가 콘텐츠를 잘 인식할 수 있습니다.
- 웹 문서의 폼 요소(<input>, <select>, <textarea> 등)에는 <label> 태그를 사용하여 레이블을 연결합니다. 이렇게 하면 폼 요소의 목적과 기능이 명확해지고, 키보드나 마우스 없이도 폼 요소를 조작할 수 있습니다.
- 웹 문서의 링크 텍스트는 링크의 목적과 목적지를 설명하도록 작성합니다. 이렇게 하면 링크 텍스트만으로도 링크가 어디로 이동하는지 알 수 있고, 링크를 선택할지 여부를 결정할 수 있습니다.
'개발' 카테고리의 다른 글
| 정보처리기사 DB(데이터베이스) 요점정리 (0) | 2023.03.14 |
|---|---|
| 웹 표준, 웹 접근성, 웹 호환성 (1) | 2023.03.14 |