1. 웹 표준
✅ 웹 표준이란?
- 웹에서 표준적으로 사용되는 기술이나 규칙
- 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야함을 의미.
- 표준 스펙을 잘 지키는 것 뿐만 아니라 구조적 마크업(XHTML)과 표현 및 레이아웃(CSS) 및 사용자 행위 제어(DOMScripting)를 잘 분리하는 고급 홈페이지 구축 방식.
- 목적 : 웹의 사용성 및 접근성을 보장시키기 위함.
❓ 웹 표준을 사용해야 되는 이유?
- CSS와 HTML이 분리되어 유지보수에 들어가는 시간이 단축되고, 불필요한 마크업이 최소화되어 페이지 로딩속도가 향상된다.
- 오래된 브라우저에서도 컨텐츠가 적절하게 표시되고 호환성과 운용성이 확보된다.
- 스크린리더기 등 보조공학 기기 사용자들이 조금 더 정확한 정보를 얻을 수 있도록 돕는다.
- 검색봇을 통한 효율적 노출과 같은 검색엔진 최적화가 가능하다.
2. 웹 호환성(크로스브라우징)
✅ 크로스 브라우징이란?
- 어느 웹 브라우저를 사용하든간에 동일한 결과가 나오도록 하는 것
- 목적 : 웹 브라우저 버전, 종류에 관계없이 웹사이트 접근이 가능하게 하기 위함.
브라우저 마다 렌더링 엔진이 다르기에 전부 적용이 되게끔 설정해야 한다.
- 렌더링 엔진? : 내용 정보인 HTML, XML과 서식정보인 CSS, XML 등을 읽어들여 사람이 읽을 수 있는 문서로 표시하는, 웹 브라우저의 핵심기능을 담당하는 소프트웨어이다.
❓ 대응하는 법
가장 높은 점유율을 가지고 있는 웹 브라우저를 포커싱 하는 것이 중요하다.
- 캔 아이 유즈로 각 브라우저에 호환성을 확인할 수 있다. https://caniuse.com
- CSS 초기화 작업을 통해 브라우저마다 차이가 나는 기본 스타일 값들을 초기화 시킨다.(reset.css등의 작업)
- 핵(HACK) 을 사용하여 작업한다. (유지 보수가 어렵기에 추천 x)
3. 웹 접근성
✅ 웹 접근성이란? (Web Accessibility)
- 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것
스크린 리더기, 음성 인식과 같은 보조 과학 기술에서 인식 가능하도록 설정하여 준수할 수 있다.
❓ 대응하는 법
1. 대체 텍스트를 사용하여 스크린 리더기에 인식되도록 하기
-
img 태그 사용
img태그 내의 alt에 대체 텍스트를 입력해 스크린리더기가 읽을 수 있게 해야한다. 이미지에 글 콘텐츠가 포함 돼 있다면 똑같이 적어야 한다. 의미 없는 디자인용 이미지같은 경우는 alt를 빈칸으로 남겨둔다. QR코드와 같은 이미지는 어떤 QR코드인지 명시해야하며, 버튼도 기능을 명시해야 한다. -
background image 태그 사용
해당 이미지에 글씨를 넣어 스크린 리더기에는 인식할 수 있게 하면서 화면상에서는 글씨를 숨기는 방법을 이용한다.
즉, ir 기법을 사용!🖋 ir & is 기법
https://velog.io/@shiningwon97/ir-is-%EA%B8%B0%EB%B2%95)
2. 자동재생 배경음 적용 금지
3. Tab 키를 이용해 콘텐츠 선택이 가능하게끔 하기
tabindex 속성을 이용한다. 그러나 이를 남용하게 되면 탭키를 수 없이 눌러야 다음 메인 콘텐츠로 이동하기 때문에 오히려 불편함을 불러올 수 있기 때문에 탭의 이동 순서도 신경써야 한다.
<p tabindex='0'>탭 키를 이용할 수 있게 함</p>
<p tabindex='-1'>탭 키를 이용할 수 없게 함</p>
<p tabindex='1'>탭 키의 순서를 지정</p>
<p tabindex='2'>탭 키의 순서를 지정</p>
<p tabindex='3'>탭 키의 순서를 지정</p>4. 페이지 언어를 지정한다
<html lang="ko"> <!-- 전체 언어 -->
<p>좀 더 <span lang="en">fancy</span>한 삶을 살고 싶으신가요?</p> <!-- 특정 언어는 span의 속성을 이용한다. -->```
