웹 표준 & 접근성

omegle·2022년 11월 8일

Web

문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간

웹 표준

웹표준이란 웹에서 표준적으로 사용되는 기술이나 규칙으로, 웹 페이지 제작 기법을 담고 있으며 웹개발에 사용되는 언어인 HTML(구조), CSS(표현), Javascript(동작) 등의 기술을 다룸.

웹 표준의 장점

유지 보수의 용이성
웹 호환성 확보
검색 호율성 증대
웹 접근성 향상

Semantic HTML

웹 표준에서는 HTML을 시맨틱하게 작성하는 것의 중요성을 강조함.
단순히 <div>, <span> 요소로만 화면을 구성하지 않고, 시맨틱 요소로 화면을 구성하니 요소의 이름만 보고도 화면에서 어떤 역할을 하는지, 어떤 담게 될지 명확하게 알 수 있게 됨.

Semantic HTML의 필요성

개발자간의 소통
검색 효율성
웹 접근성

Semantic HTML의 종류

요소	설명
`<header>`	페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소
`<nav>`	메뉴,목차 등에 사용되는 요소
`<aside>`	문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소
`<main>`	이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소
`<article>`	게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소. 각각의 을 구분하기 위한 수단이 필요하며, 보통 제목 `<hgroup>`을 포함하는 방법을 사용.
`<section>`	문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용. 제목()을 포함하는 경우가 많음.
`<hgroup>`	제목을 표시할 때 사용하는 요소로, `<h1>` ~`<h6>` 요소가 `<hgroup>`
`<footer>`	페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소

자주 틀리는 마크업

1. 인라인 요소, 블록 요소

// h1, div 요소는 블록 요소이고,
// a, span 요소는 인라인 요소입니다.
<a href=""> <h1>나쁜 예시 1</h1> </a>
<span> <div>나쁜 예시 2</div> </span>
<div><span>올바른 예시</span></div>

2. <strong> 요소와 <em> 요소 사용하기

<b>글씨를 두껍게</b>   -- 대체하기 -->  <strong>콘텐츠 매우 강조하기</strong>
<i>글씨 기울이기</i>   -- 대체하기 -->  <em>콘텐츠 강조하기</em>

3. <hgroup> 올바르게 사용하기

// 나쁜 예시
<h1>엄청 큰 글씨</h1>
  <h3>적당히 큰 글씨</h3>
<h2>큰 글씨</h2>
        <h6>엄청 작은 글씨</h6>
    <h4>그냥 글씨</h4>
// 좋은 예시
<h1>제목</h1>
<h2>큰 목차</h2>
  <h3>작은 목차</h3>
  <h3>작은 목차</h3>
<h2>큰 목차</h2>
  <h3>작은 목차</h3>
    <h4>더 작은 목차</h4>
    <h4>더 작은 목차</h4>

4. </br>을 요소 사이 간격 만들기 위한 목적으로 사용하기 않기

// 나쁜 예시
요소 사이에 여백을 주고싶을 때
<br />
<br />
이렇게 하면 안된다
// 좋은 예시 1
<p>요소 사이에 여백을 주고싶을 땐</p>
<p>아예 별도의 단락으로 구별하세요.</p>

// 좋은 예시 2
  //HTML 파일
<p class="margin">요소 사이에 여백을 주고싶을 땐</p>
<p class="margin">CSS 속성으로 여백을 설정해주세요.</p>

  //CSS 파일
.margin { margin: 10px }

4. HTML과 CSS 코드를 분리해서 작성하기

// HTML 파일
<head>
<style>
  h1 { color : "red" }
</style>
</head>
(O) <h1>스타일링 속성은 CSS로 작성하기.<h1>
(O) <h2>style 요소를 사용해도, CSS 파일을 따로 작성해도 괜찮다.<h2>
(X) <h3 style="color: blue">이렇게 인라인 스타일링으로는 사용하지 마세요.</h3> 

// CSS 파일
h2 { color : "yellow" }

크로스 브라우징

크로스 브라우징이란 웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미함.

SEO

SEO란 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업.
검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게 만들어 줌.

On-Page SEO : 말 그대로 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법.
Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법으로, 웹 페이지 내용이나 구조와는 관계가 없음.

SEO에 영향을 미치는 요소(On-Page에서 통제)

1. <title> 요소
-<title> 요소는 검색 결과창에서 제목에 해당하는 요소로, <head> 요소의 자식 요소로 작성.

제목이 너무 길거나 짧아서 사용자가 제목으로 사이트를 파악하기 어려워지면 유입률이 떨어짐.
<title> 요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아지지만 같은 키워드를 반복하면 검색시 불이익을 받을 수 있음.

2. <meta> 요소

메타 데이터를 담는 요소. 메타 데이터란 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터.
요소도 요소의 자식 요소로 작성해주는 것이 일반적.

SEO를 위한 meta 요소
  <meta name="속성값" content="내용" />

오픈 그래프
property 속성을 사용하며, 다른 사람에게 공유하기 위한 것이 목적
  <meta property="속성값" content="내용" />

3. <hgroup> 요소
<hgroup> 요소는 콘텐츠의 제목을 표시하는 용도인만큼 핵심 키워드를 포함하고 있을 가능성이 높음. 따라서 검색 엔진도 <hgroup> 요소의 내용을 중요하게 취급하고, 그렇기 때문에 콘텐츠를 작성할 때 핵심 키워드를 의식해서 <hgroup> 요소에 넣어주는 것도 SEO에 도움이 됨.

웹 접근성

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

웹 접근성을 갖추면 얻을 수 있는 효과

사용자층 확대
다양한 환경 지원
사회적 이미지 향상

웹 접근성 접근성 지침

인식의 용이성 : 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.

1) 적절한 대체 텍스트
2) 자막 제공
3) 색에 무관한 콘텐츠 인식
4) 명확한 지시사항 제공
5) 텍스트 콘텐츠 명도 대비
6) 자동 재생 금지
7) 콘텐츠 간 구분

운용의 용이성 : 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.

8) 키보드 사용 보장
9) 초점 이동
10) 조작 가능
11) 응답 시간 조절
12) 정지 기능 제공
13) 깜빡임과 번쩍임 사용 제한
14) 반복 영역 건너뛰기
15) 제목 제공
16) 적절한 링크 텍스트

3. 이해의 용이성 : 콘텐츠는 이해할 수 있어야 한다.

17) 기본 언어 표기
18) 사용자 요구에 따른 이행
19) 콘텐츠 선형 구조
20) 표의 구성
21) 레이블 제공
22) 오류 정정

4. 견고성 : 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.

23) 마크업 오류 방지
24) 웹 애플리케이션 접근성 준수

omegle

JANG EUN JI | 장은지

이전 포스트

[React] Custom Component

다음 포스트