웹 접근성 및 CSS 심화, 호환성 이슈

웹 접근성 및 CSS 심화, 호환성 이슈

1. HTML 및 CSS 심화 학습

이번 글에서는 웹 접근성(Accessibility), CSS의 심화 내용(Flexbox와 Grid Layout), 그리고 브라우저 호환성 이슈에 대해 다루어 보겠습니다. 이전 글에서 다룬 HTML과 CSS의 기본 개념을 토대로, 웹 개발에서 중요한 추가적인 내용들을 살펴보겠습니다.

2. 웹 접근성(Accessibility)

2.1 웹 접근성이란?

웹 접근성(Web Accessibility)은 장애를 가진 사람을 포함한 사용자 모두가 웹 콘텐츠에 접근 및 이용할 수 있도록 보장하는 것을 의미합니다..

• 목표: 신체적, 시각적, 청각적, 인지적 장애를 가진 사람들이 웹 콘텐츠를 이용하는 데 어려움이 없도록 하는 것.
• 법적 요구: 많은 국가에서 웹 접근성은 법률로 규정되어 있기도 하구요, 이를 준수하지 않을 경우 법적 책임이 발생할 수도 있습니다.

2.2 웹 접근성의 중요성

• 사회적 포용성 증진: 모든 사람에게 동등한 정보 접근 기회 제공.
• 사용성 향상: 접근성 개선은 전체 사용자 경험을 향상시킴.
• SEO 향상: 접근성 준수는 검색 엔진 최적화에도 긍정적인 영향을 미침.
• 법적 준수: 관련 법률과 표준을 준수하여 법적 문제 예방.

2.3 웹 접근성 가이드라인 (WCAG)

WCAG(Web Content Accessibility Guidelines)은 W3C의 WAI(Web Accessibility Initiative)에서 제공하는 웹 접근성 지침입니다.

• 원칙: 지각성, 운용성, 이해성, 견고성
• 레벨: A, AA, AAA (AA 레벨 준수가 일반적 목표)

1) 지각성(Perceivable)

• 대체 텍스트 제공: 시각적 콘텐츠에 대한 대체 텍스트 (alt 속성) 제공
• 자막 및 대본 제공: 멀티미디어 콘텐츠에 자막이나 대본 제공
• 색상 대비: 텍스트와 배경 사이의 충분한 대비를 유지

2) 운용성(Operable)

• 키보드 접근성: 모든 기능을 키보드로 이용 가능하게 함
• 충분한 시간 제공: 콘텐츠를 읽고 상호작용할 충분한 시간 제공
• 발작 예방: 광과민성 발작을 유발할 수 있는 콘텐츠 피하기

3) 이해성(Understandable)

• 가독성: 명확하고 간단한 언어 사용
• 예측 가능한 네비게이션: 일관된 네비게이션 구조 유지
• 입력 지원: 폼 오류 시 도움말 및 수정 방법 제공

4) 견고성(Robust)

• 호환성: 다양한 사용자 에이전트와 보조 기술과의 호환성 유지
• 유효한 코드 작성: 표준에 맞는 유효한 HTML, CSS 코드 사용

2.4 웹 접근성 구현 방법

1) 시맨틱 마크업 사용

• 의미에 맞는 HTML 태그 사용
• 예: 제목에는 <h1>~<h6>, 단락에는 <p>, 목록에는 <ul>, <ol>, <li>

2) 이미지에 대체 텍스트 제공

• <img> 태그의 alt 속성에 이미지의 의미나 용도를 설명
• 장식용 이미지에는 빈 alt=""를 사용하여 스크린 리더가 읽지 않도록 함

3) 폼 요소에 레이블 연결

• <label> 태그를 사용하여 폼 요소와 레이블을 연결 (for 속성과 id 속성 이용)

<label for="email">이메일:</label>
<input type="email" id="email" name="email" />

4) 키보드 네비게이션 지원

• 링크나 버튼 등은 키보드로 접근 및 조작 가능해야 함
• tabindex 속성을 활용하여 포커스 순서 제어

5) ARIA 속성 사용

• 동적인 콘텐츠나 복잡한 UI 요소에 대해 추가적인 접근성 정보를 제공
• 예: role, aria-label, aria-hidden 등

6) 충분한 색상 대비 제공

• 텍스트와 배경 사이의 명도 대비를 최소 WCAG 기준(레벨 AA: 4.5:1) 이상으로 유지
• 색상 대비 체크 도구 사용하여 검증

7) 반응형 디자인 채택

• 다양한 기기와 화면 크기에서 콘텐츠가 올바르게 표시되도록 함

2.5 웹 접근성 테스트 도구

• 스크린 리더: NVDA, JAWS, VoiceOver 등을 사용하여 콘텐츠를 음성으로 확인
• 자동화 검사 도구:
  • WAVE: 웹 접근성 평가 도구
  • aXe: 브라우저 확장 프로그램
  • Lighthouse: Chrome 개발자 도구 내장

2.6 웹 접근성 향상을 위한 추가 팁

• 표준 준수 코드 작성: HTML, CSS의 유효성을 검증하여 오류를 최소화
• 미디어 대체 콘텐츠 제공: 비디오에 자막, 오디오에 대본 제공
• 자동 재생 금지: 페이지 로드 시 자동으로 소리나 영상을 재생하지 않음
• 명확한 링크 텍스트 사용: “여기를 클릭하세요” 대신 “회원가입 페이지로 이동”과 같이 링크의 목적을 명확히 함
• 콘텐츠 구조화: 제목, 부제목을 사용하여 문서를 계층적으로 구성

2.7 결론

웹 접근성은 단순히 일부 사용자를 위한 기능이 아니라, 모든 사용자를 위한 웹을 만드는 데 필수적. 접근성을 고려한 웹 사이트는 사용성도 높아지고, 검색 엔진 최적화에도 도움이 되며, 법적 리스크를 줄일 수 있습니다. 개발 단계부터 접근성을 고려하여 더 나은 웹 환경을 만들어 보시죠.

3. CSS 심화 내용

3.1 Flexbox 레이아웃

Flexbox(Flexible Box)는 1차원(행 또는 열)에서 아이템을 배치하고 정렬하는 강력한 CSS 레이아웃 모듈.

1) Flexbox의 기본 개념

• 주축(main axis): 플렉스 아이템이 배치되는 기본 축 (기본값은 가로)
• 교차축(cross axis): 주축에 수직인 축

2) Flex 컨테이너와 아이템

• Flex 컨테이너: display: flex;를 지정한 부모 요소
• Flex 아이템: Flex 컨테이너의 자식 요소

3) 주요 속성

컨테이너 속성:

• flex-direction: 주축의 방향 설정 (row, row-reverse, column, column-reverse)
• flex-wrap: 아이템의 줄 바꿈 설정 (nowrap, wrap, wrap-reverse)
• justify-content: 주축 방향으로 아이템 정렬 (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items: 교차축 방향으로 아이템 정렬 (stretch, flex-start, flex-end, center, baseline)
• align-content: 여러 줄의 교차축 정렬 (아이템이 여러 줄인 경우)

아이템 속성:

• order: 아이템의 배치 순서 지정
• flex-grow: 남은 공간을 아이템이 차지하는 비율 지정
• flex-shrink: 아이템이 줄어드는 비율 지정
• flex-basis: 아이템의 기본 크기 설정
• align-self: 특정 아이템에 대한 교차축 정렬 (개별 아이템에 적용)

4) 예시

<div class="container">
  <div class="item">아이템 1</div>
  <div class="item">아이템 2</div>
  <div class="item">아이템 3</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.item {
  width: 100px;
  height: 100px;
}

3.2 Grid Layout

Grid Layout은 2차원(행과 열)에서 아이템을 배치하는 강력한 CSS 레이아웃 시스템.

1) Grid의 기본 개념

• Grid 컨테이너: display: grid;를 지정한 부모 요소
• Grid 아이템: Grid 컨테이너의 자식 요소
• 그리드 라인: 그리드의 시작과 끝을 나타내는 선

2) 주요 속성

컨테이너 속성:

• grid-template-columns: 열의 크기와 개수 지정
• grid-template-rows: 행의 크기와 개수 지정
• grid-gap: 그리드 셀 간의 간격 설정 (grid-row-gap, grid-column-gap)
• justify-items: 셀 내에서 아이템의 수평 정렬
• align-items: 셀 내에서 아이템의 수직 정렬
• justify-content: 전체 그리드의 수평 정렬
• align-content: 전체 그리드의 수직 정렬

아이템 속성:

• grid-column-start, grid-column-end: 아이템이 차지할 열의 시작과 끝 지정
• grid-row-start, grid-row-end: 아이템이 차지할 행의 시작과 끝 지정
• grid-area: 아이템이 차지할 영역을 한 번에 지정

3) 예시

<div class="grid-container">
  <div class="item item1">아이템 1</div>
  <div class="item item2">아이템 2</div>
  <div class="item item3">아이템 3</div>
  <div class="item item4">아이템 4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px 200px;
  grid-gap: 10px;
}

.item1 {
  grid-column: 1 / 3; /* 첫 번째 아이템이 첫 번째 행 전체를 차지 */
}

3.3 Flexbox와 Grid 비교

Flexbox:

• 1차원 레이아웃에 적합 (행 또는 열)
• 아이템의 크기와 순서가 동적으로 변할 때 유용

Grid Layout:

• 2차원 레이아웃에 적합 (행과 열)
• 레이아웃을 행과 열로 명확하게 정의할 때 유용

4. 브라우저 호환성 이슈

4.1 브라우저마다 CSS 지원 차이

• 일부 CSS 속성이나 기능은 모든 브라우저에서 동일하게 지원되지 않을 수 있음
• 오래된 브라우저나 특정 브라우저에서는 최신 CSS 기능을 지원하지 않을 수 있음

4.2 호환성 확인 방법

• Can I Use 웹사이트 활용: caniuse.com
• 특정 CSS 속성이나 기능의 브라우저 지원 현황을 확인 가능

4.3 대체 방법과 폴리필 사용

대체 방법:

• 호환되지 않는 기능 대신 다른 CSS 속성을 사용하여 비슷한 효과를 구현

폴리필(Polyfill):

• 자바스크립트를 이용하여 오래된 브라우저에서 새로운 기능을 사용할 수 있게 해주는 스크립트

4.4 벤더 프리픽스(Vendor Prefix)

브라우저별로 접두사를 붙여 CSS 속성을 지원하는 경우가 있음

주요 벤더 프리픽스:

• -webkit-: Chrome, Safari, iOS 등
• -moz-: Firefox
• -ms-: Internet Explorer, Edge
• -o-: Opera

예시:

.item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

4.5 CSS 리셋 및 노멀라이즈

CSS 리셋(Reset CSS):

• 브라우저 기본 스타일을 초기화하여 일관성 있는 스타일링을 가능하게 함
• 모든 요소의 기본 마진, 패딩 등을 제거

노멀라이즈(Normalize.css):

• 브라우저 간의 기본 스타일 차이를 최소화하면서 기본 스타일을 유지
• CSS 리셋보다 덜 공격적인 초기화 방식