웹 표준 및 웹 접근성 🔥

웹 표준이란?

웹표준이란 말 그대로 ‘웹에서 표준적으로 사용되는 기술이나 규칙’을 의미하며, 웹 사이트에 접속한 사용자는 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동해야 함을 의미한다.

HTML5에서 추가된 내용이 있나요?

semantic요소, input 타입과 요소, 그래픽 요소 등. 자세한 건 아래 링크에서 확인가능 http://tcpschool.com/html/html5_intro_addition

웹 접근성이란?

웹 접근성(Web Accessibility) 이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것입니다.

비장애인이 웹상에서 제공되는 텍스트와 이미지, 영상 등을 접했을 경우, 한눈에 재빨리 내용 파악이 가능하지만, 장애인은 그렇지 않습니다. 그림이나 사진들을 제공할 때 눈으로 볼 수 없는 경우를 대비하여 그림이나 사진을 대신 할 수 있는 설명을 텍스트로 제공해야 하며, 동영상이나 오디오의 경우 청각장애인을 위한 음성정보를 문자로 제공해야 합니다. 또한, 마우스를 사용할 수 없는 사용자를 위하여 키보드만으로도 모든 콘텐츠에 접근하여 이용할 수 있도록 해야 하며, 움직임이 느린 사용자를 위해 시간조절기능을 제공해야 합니다.”

웹 접근성에 맞는 마크업 예시 몇가지 말해보시오

https://web-for-all.tistory.com/3

div 무차별 남발이 아닌 section별로 알 맞은 시멘틱 요소 사용

시멘틱 태그란 무엇인가 왜 사용하는가

시맨틱 태그 (Semantic Tag)란? Semantic은 ‘의미의’, ‘의미론적인’이라는 뜻을 가진 형용사이다. 따라서 시맨틱 태그란 의미가 있는 태그를 말한다.

div나 span과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없는 반면, form, table, article 등 의미가 있는 태그는 내용을 명확하게 정의한다.

그렇다면 의미있는 태그를 사용함으로써 얻는 장점은 무엇일까??

시맨틱 태그 사용의 장점 검색엔진최적화(SEO) 🔍 : 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 제목은 h1, 중요한 단어는 strong 또는 em을 사용하는 등 의미에 맞는 올바른 태그르 사용하는 것이 중요하다. 시각장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 도움이 된다.

시맨틱 태그를 사용한 코드 블록을 찾는 것은 끝없는 div(div > div > div …)를 탐색하는 것보다 훨씬 쉽다.

W3C에 따르면 “시맨틱 웹을 사용하면 애플리케이션, 기업 및 커뮤니티에서 데이터를 공유하고 재사용할 수 있다”고 한다. (의미가 있는 요소는 개발자 모두에게 명확한 의미를 전달한다)

시맨틱 태그를 정하는 팁, 유의사항 사용할 태그를 결정하기전 “채울 데이터를 가장 잘 설명하고 나타내는 요소는 무엇일지?” 먼저 자문해 본다. 사용할 HTML은 태그는 스타일 기반이 아닌 채워질 데이터를 기반으로 결정되어야 한다. (예를들어 블로그 글 제목 스타일이 p태그를 사용하는 단락과 같은 디자인이더라도, p가 아닌 h1을 사용해야한다.) -> 어떻게 보여야 하는지는 전적으로 CSS의 책임이다. (이부분 헷갈리지 말자!)