누구나 쓸 수 있는 페이지 만들기

접근성 있는 페이지는 누구나 이용할 수 있습니다. 스크린 리더를 쓰는 사람, 시력이 좋지 않은 사람, 화면의 움직임을 피하는 사람, 햇빛 아래에서 휴대폰을 보는 사람 모두에게 해당합니다. 많은 부분은 LinkHarbor가 자동으로 처리하지만, 일부는 직접 챙겨야 합니다. 이 글에서는 무엇을 주의해야 하는지 설명합니다.

#LinkHarbor가 자동으로 하는 일

• 방문자가 시스템에서 “Reduce motion”(동작 줄이기)을 켜면 배경 동영상이 재생되지 않고, 스크롤 및 패럴랙스 효과와 마우스 오버 애니메이션이 꺼짐
• “제목” 블록은 스크린 리더가 탐색에 쓰는 실제 제목으로 출력됨
• “이미지”와 “갤러리” 블록의 이미지에는 내가 입력한 대체 텍스트가 설명으로 붙음
• 버튼에 직접 텍스트 색상을 고르지 않았다면 LinkHarbor가 버튼 색상에 맞는 색을 선택함

#이미지의 대체 텍스트

대체 텍스트는 이미지에 무엇이 보이는지 설명합니다. 스크린 리더가 이를 읽어 주며, 이미지가 로드되지 않을 때도 표시됩니다.

“이미지” 블록

블록 편집기의 “대체 텍스트” 입력란입니다.

“갤러리” 블록

이미지마다 최대 200자의 “대체 텍스트”를 입력합니다.

• 파일이 아니라 내용을 설명: “IMG_2041” 대신 “나무 테이블 위의 라테 아트 카푸치노”
• 텍스트가 들어 있는 이미지라면 그 텍스트를 대체 텍스트에 포함
• 짧게 쓰기. 보통 한 문장이면 충분함

입력란이 어디에 있는지는 무료 블록 자세히 보기와 콘텐츠 블록에서 설명합니다.

#제목으로 구조 만들기

긴 페이지는 큰 글씨 대신 “제목” 블록으로 나누세요. 스크린 리더 사용자는 제목에서 제목으로 건너뛰며 “영업시간”이나 “연락처”처럼 원하는 내용을 빠르게 찾습니다.

#명확한 링크 제목

• 모든 링크는 그 자체로 의미가 통해야 함: “여기를 클릭하세요” 대신 “PDF 메뉴판”
• 대상이 다른 링크에 같은 제목을 쓰지 않기
• 제목 앞의 이모지는 소리 내어 읽히므로 아껴 쓰기

링크에 대한 자세한 내용은 링크 추가와 스타일 지정에 있습니다.

#대비와 가독성

• 특히 밝은 파스텔 색상을 쓸 때 텍스트와 배경 사이의 대비가 충분한지 확인
• 텍스트가 배경 이미지나 동영상 위에 있다면 테마의 “오버레이 불투명도”로 읽기 쉽게 유지
• 중요한 텍스트를 이미지 안에만 넣지 않기. 스크린 리더 사용자는 읽을 수 없음
• 읽기 쉬운 글꼴과 텍스트 블록에 너무 작지 않은 글자 크기 선택

색상, 배경, 글꼴은 테마에서 설정합니다. 디자인을 참고하세요.

#커스텀 CSS는 신중하게

커스텀 CSS로는 거의 모든 것을 바꿀 수 있습니다. 접근성에 중요한 부분도 마찬가지입니다. 포커스 테두리를 숨기거나 텍스트를 너무 작게 줄이지 말고, 변경한 뒤에는 키보드로도 페이지를 테스트하세요. 커스텀 CSS를 참고하세요.

#직접 테스트하기

1. 휴대폰의 스크린 리더(iPhone은 VoiceOver, Android는 TalkBack)를 켜고 페이지를 들어 봅니다
2. 시스템 설정에서 글자 크기를 키우고 모든 내용이 여전히 읽기 쉬운지 확인합니다
3. 밝은 빛 아래와 다크 모드에서 페이지를 봅니다