사이트를 만들 때 아래 도움말을 따르면 장애인을 비롯한 모든 사용자가 더 쉽게 사이트를 읽을 수 있습니다.
대체 텍스트 포함
이미지, 로고, 그림 등의 그래픽을 위한 대체 텍스트를 사용하세요. 대체 텍스트가 없으면 스크린 리더 사용자는 '이미지'라는 메시지만 듣게 됩니다. 일부 이미지는 자동으로 대체 텍스트를 포함하므로 내가 원하는 대체 텍스트가 맞는지 확인하는 것이 좋습니다.
삽입된 이미지에 대체 텍스트 추가 또는 수정
- 이미지 또는 로고를 선택합니다.
- 수정 옵션 더보기
대체 텍스트 추가로 이동합니다.
- 설명 입력란에 대체 텍스트를 입력합니다.
대체 텍스트 추가로 이동합니다.배경 이미지에 대체 텍스트 추가 또는 수정하기
- 컴퓨터를 사용하여 Google Sites에서 사이트를 엽니다.
- 배경 이미지에 대체 텍스트를 추가합니다.
- 사이트 헤더: 헤더 왼쪽 하단에서 이미지
를 클릭합니다.
- 섹션: 섹션 오른쪽에서 섹션 색상
이미지
- 사이트 헤더: 헤더 왼쪽 하단에서 이미지
- 대체 텍스트를 클릭합니다.
- 설명 입력란에 대체 텍스트를 입력합니다.
이미지 맞춤 테마 로고 또는 배너 이미지에 대체 텍스트 추가 또는 수정하기
새 맞춤 테마에 대체 텍스트 추가하기
- 컴퓨터를 사용하여 Google Sites에서 사이트를 엽니다.
- 오른쪽에서 테마 패널을 선택합니다.
- '맞춤'에서 테마 만들기
를 선택합니다.
- 로고 또는 배너 이미지를 업로드하려면 이미지 추가
- 대체 텍스트를 추가하려면 업로드된 이미지
를 선택합니다.맞춤 테마 헤더에 대체 텍스트 추가 또는 수정하기
- 컴퓨터를 사용하여 Google Sites에서 사이트를 엽니다.
- 오른쪽에서 테마 패널을 선택합니다.
- '맞춤' 아래의 맞춤 테마 오른쪽 상단에서 더보기
- '이미지'에서 헤더 이미지
- 설명 입력란에 대체 텍스트를 입력합니다.
고대비 사용
높은 색상 대비를 사용하면 텍스트와 이미지를 더 쉽게 읽고 이해할 수 있습니다. 웹 콘텐츠 접근성 가이드라인(WCAG) 2.0에서는 큰 텍스트의 경우 4.5:1, 기타 텍스트 및 이미지의 경우 7:1의 최소 대비율을 권장합니다. 예를 들면 흰색 배경에는 밝은 회색 텍스트를 사용하지 않는 것이 좋습니다.
Chrome DevTools를 사용하여 색상 대비 높이기에 관한 권장사항을 검토하고 사이트에 적용할 수 있습니다.
링크 텍스트로 유용한 정보 사용
스크린 리더는 링크를 찾아 페이지를 스캔할 수 있으므로 정보를 제공하는 링크 텍스트가 도움이 됩니다. 페이지의 제목을 링크 텍스트로 사용하는 것이 가장 좋습니다. 예를 들어 내 프로필 페이지로 연결하는 경우 링크 텍스트로 '여기를 클릭하세요' 또는 전체 URL을 사용하지 말고 '내 프로필'을 사용하는 것이 좋습니다.
텍스트 크기 및 정렬 확인
사이트를 읽기 쉽게 만들려면 가능한 한 큰 텍스트와 왼쪽 정렬을 사용하세요. 텍스트 양쪽 맞춤을 사용하면 단어 간의 공백이 넓어지므로 읽기 어렵습니다.
텍스트를 통해 문서의 서식 및 내용 설명
의미를 전달하는 데 시각적인 서식에만 의존하지 않는 것이 좋습니다. 스크린 리더에서는 굵게 표시 또는 강조표시와 같은 서식 변경 사항을 사용자에게 알려주지 않을 수도 있습니다. 예를 들어 텍스트의 중요한 부분을 표시하기 위해 '중요'라는 단어를 추가할 수 있습니다.
번호 매기기 및 글머리기호 목록 사용
Google Docs와 Google Slides에서는 접근성을 위해 일부 목록을 자동으로 감지하고 서식을 지정합니다. 예를 들어 문서에서 '1.'을 입력하여 새 줄을 시작하면 새 줄은 자동으로 번호 매기기 목록의 첫 번째 항목이 됩니다. 글머리기호 및 번호 매기기 목록 지정 방법 알아보기