Skip to content
BIGDEO® 프로젝트 매니저BIGDEO® 프로젝트 매니저BIGDEO® 프로젝트 매니저
  • 팀 로그인

마켓메이커™

  • 코스모스팜 회원가입관리 플러그인 사용 시 이메일 템플릿 설정/작성중입니다.
  • 이미지 자동 리사이징 플러그인
  • 비밀번호 보안 – 비밀번호가 강력하지 않아도 가입 가능하도록 설정하는 방법
  • 마켓메이커(워크립) 미디어 추가(Add Media) 버튼 추가 방법
  • 마켓메이커 선생님/프리랜서 Manage Services 메뉴 없애기
  • 마켓메이커 –> Switch Account 메뉴 없애기
  • 마켓메이커 – 의뢰인(Freelancer) 이미지 설정 안되는 문제
  • 결제 페이지 – 계속하려면 주소를 입력해 주세요.

모바일앱

  • 안드로이드 모바일앱 회원가입 패스워드 알고리즘 PHP native password hash
  • 차이통 아이오닉 모배일앱 가이드 Docs
  • 입시의 한수 – 안드로이드 React Native
  • 안드로이드 키파일 생성 방법
  • 안드로이드 웹뷰 특정 링크 문제 처리
  • 동영상 다운로드 제거
  • TEFL in Korea 리액트 네이티브 모바일 앱 가이드 문서

샵메이커™

  • 소셜로그인 사용자정의 css 세팅 가이드
  • 강의 수강 버튼 => 모바일에서 하단 sticky 로 구현하기
  • Woocommerce subscription(정기결제) 온전한 사이트 만들기

일반 개발지원 정보

  • 페이지 또는 포스트를 원하는 시간에 만료시키고 싶을 때
  • 서버 취약점 PleskLin 없애기 x-powered-by: PleskLin
  • 코스메이커 /members/ 리스트 숨기기
  • 사용자 이름 디스플레이 숏코드
  • Mailpoet 에서 같은 AP내 동일 IP에서 구독이 안되는 문제 You need to wait X seconds before subscribing again.
  • 랜덤 댓글 출력하기
  • 코스메이커 메시지 송신 이름 검색시 소속 정보 노출
  • SHA 256 패스워드 암호화
  • Gravityform 설문 사용자 제한
  • Server: Apache 서버 이름 지우기
  • x-powered-by: PleskLin 없애기
  • 어드민 메뉴를 프론트엔드로 보내기
  • Plesk 워드프레스에서 128MB 이상 파일 첨부할 경우 문제점 해결
  • Amazon Lightsail vs Vultr
  • 프론트엔드, 백엔드 다른 언어 사용하기
  • 페이지 권한 제한 및 멤버 플러그인
  • 파고다 마이차이랑 다운로드 문제 – Plesk SSL
  • 툴바 에디터 Toolbar Editor
  • 타임존 Date 설정하기 php.ini in Plesk 플레스크
  • 코스메이커(BuddyBoss) 한글입력문제
  • 코스메이커-Essential 플러그인에 ACF(Advanced Custom Fields) 플러그인 사용하기
  • 코스메이커 폐쇄 사이트(회원가입 없는 사이트) 설정 방법
  • 코스메이커 강의 카테고리(작업) 클릭시 문제
  • 코스메이커 강의 댓글 기능 허용/미허용 세팅 방법
  • 코스메이커 – 아이콘 깨질 시 해결방안
  • 유패스 비디오 태그 다운로드 막기
  • 웹 접근성 개선하기
  • 워드프레스 한글 username 허용하기
  • 워드프레스 프로필 이미지 불러오기
  • 워드프레스 자동 업데이트 방지하기
  • 워드프레스 이미지 픽셀 제한 풀기
  • 워드프레스 모바일 Viewport 적용법
  • 워드프레스 디버그 모드 사용하기
  • 워드프레스 기본 보내는 메일 셋팅 – 스닛펫 코드
  • 워드프레스 관리자 메일 여러 개 사용하기
  • 워드프레스 검색 필터 변경하기
  • 워드프레스 REST API 오류, 루프백 요청 완료할 수 없는 이슈 조치 (1)
  • 워드프레스 datepicker와 사이트 번역 상관관계
  • 워드프레스 .gif 파일 구동하기
  • 워드브레이크 넣기(필수사항)
  • 워드랩 – WordWrap 한글 끊기 방지 기능
  • 우커머스 주문 내역 export
  • 우커머스 외부상품 링크 New Tab or Window
  • 우커머스 외부링크 새로운 창으로
  • 우커머스 상품 가격 –> 원으로
  • 우커머스 무료 가격 표시 스닛펫 코드
  • 우커머스 로그아웃시 확인 과정 생략
  • 우커머스 디지털 상품 플레이 또는 다운로드 403에러
  • 우커머스 Shop page 필터 숨기고 수정, 평점순, 인기순, 낮은 가격순
  • 우커머스 REST API Prefix 변경하기
  • 어드민 페이지 하단 문구 수정
  • 어드민 대시보드 정리 방법
  • 아이들영어에서 관리자 화면 메뉴 ui 추가 방법
  • 아마존 AWS 서브 도메인 설정
  • 아마존 AWS Lightsail Plesk 설치
  • 수자원공사 미디어 파일 업로드 권한 문제
  • 수자원 멀티사이트 목록 타이틀 전부 표시하기
  • 소셜미디어 링크 대표 썸네일 이미지 바꾸기
  • 설문 폼(gravityforms) 라이센스 경고 메시지 삭제 방법
  • 상단 어드민 바 숨기기
  • 사용자 폰트 플러그인 Use Any Font [ Freemium ]
  • 사용자 데이터 csv 파일 한글깨짐 해결
  • 부산 퀴즈 대소문자 구분 없애기
  • 백엔드 워드프레스 어드민 대시보드 번역
  • 리커버프라이스 카카오톡 제휴사 기능 추가
  • 로그인시 기억하기(Remember Me) 기능 넣기
  • 고대디 co.kr 도메인 구입시 주소 입력
  • 건국대학교 그룹 자동 생성법
  • 가입시 display_name을 user_nicename 로 복사
  • 가비아 호스팅 사용 프로젝트 에러페이지 세팅 HTML 공유
  • WP REST API 사용자 정보 막기
  • WP REST API Prefix 변경하기
  • WP REST API Filter 기능 구현
  • WP REST API Filter and Authentication
  • WP OAuth Server – Access Token Length
  • WP Activity Log – 로그 플러그인 커스텀 방법
  • Woocommerce 외부상품링크 – New Tab
  • WooCommerce APi 우커머스 API 사용
  • Vultr 스냅샷 마이그레이션 이후 Plesk 라이센스 셋팅 방법
  • Vultr 서버 업그레이드시 유의 사항
  • Vultr Snapshot 이후 IP 재설정하기
  • Under Construction Pro 자동 On/Off 시간 설정하기
  • The link you followed has expired. 에러
  • REST API 비주얼 에디터 없애기 및

    태그 없애기

  • R on JupyterHub Ubuntu 18.04
  • Plesk를 이용한 백엔드 서버 설치시 도메인 설정
  • plesk(Vultr Server)에 SSL 인증서 적용하기
  • Plesk 방화벽 관련
  • Plesk 라이센스 업그레이드
  • PDF웹북 – 전자책 헤더에 목록 추가하기
  • Obtaining an Access Token – 후하뮤직 REST API
  • MangBoard, Elementor 같이 사용하기
  • JupyterHub Install on Ubuntu 18.04 / 20.04
  • Jupyter 사용자 디렉토리 패스 on Ubuntu 18.04
  • iTemes security로 워드프레스 보안 강화하기 (1)
  • How to get an access token? Using POSTMAN and REST API
  • Flatsome Theme Count up 기능 활용하기
  • Farmbot 포팅 개발에 대한 1차 정리
  • Enable HTTPS for JupyterHub
  • Elementor plugin css 적용 및 설정 적용 안되는 이슈 조치하기
  • Echo Knowledge Base – Multiple Knowledge Bases – Single Site
  • Custom WooCommerce REST API
  • cafe24 미디어 파일 업로드 용량 증가 방법
  • API Key를 이용한 REST API 구현
  • All in One Migration Unlimited Extension – 마이그레이션
  • [어드민] 어드민 계정 생성 시 유의 할 점
  • [Quform]번역 및 설정 필수 사항

코스메이커™

  • 회원가입 버튼 삭제
  • 퀴즈 객관식 문항 랜덤으로 출력 설정하기
  • 코스메이커™ – 온라인 이러닝 솔루션 소개
  • 코스메이커 프로필 페이지 번역
  • 코스메이커 인증서 ID 생성 LearnDash Certificate Unique ID Generator Plugin
  • 코스메이커 어드민 강의 페이지에서 셀렉(카테고리) 박스 선택 안될 시
  • 코스메이커 번역 파일
  • 인터렉티브 비디오
  • 인터랙티브 콘텐츠 비메오 영상 올릴때 링크 수집 방법
  • 로그인 페이지에서 아이디 입력필드 placeholder 변경
  • 강의 통계 레포트 데이터 출력 오류시 해결방법
  • 강의 수강 페이지 – 상단 헤더 로고 업로드 방법
  • 강의 수강 가능(불가능) 날짜 세팅방법
  • 강의 목차 => 번역 파일 위치
  • 강사용 대시보드(overview)화면 정리
  • Unique Certificate ID Generator 플러그인 활성화 후 메뉴 클릭시 대시보드 찌그러짐
  • learndash 강의페이지에서 강의 구매 버튼 클릭시 상품페이지 거치지 않고 바로 결제 페이지로 이동시키기
  • LearnDash Course Management System
  • checkout 페이지 제목 변경

테마/플러그인

  • Learndash Custom User Enrollment Plugin
  • 비활동시 자동 로그아웃 (시간설정 가능) Inactive Logout
  • SHA 256 패스워드 암호화
  • 어드민 메뉴를 프론트엔드로 보내기
  • WP Team Pro
  • WP ERP PRO
  • WP SMS PRO
  • 이수증명서 ID LearnDash Certificate Unique ID Generator Plugin
  • 변경 전 URL이 캐시로 남아있을 때 전체적인 URL 변경 방법
  • 뉴스레터 플러그인 – MailPoet 2 & MailPoet 2 Premium
  • WP OAuth Server – Personal
  • Uncanny LearnDash Toolkit Pro
  • Report 플러그인 – 아이들영어, 런대시 플러그인
  • Product Video for WooCommerce
  • Learndash Custom User Enrollment Plugin
  • Kboard 수정 버전 공유
  • Event Espresso for LearnDash 이벤트 에스프레소 런대시
  • Elementor essential addons 엘리멘터 에센셜 애드온

표준화 기술지원

  • 코스메이커 instructor role 플러그인 표준화
  • [A001] 시간 표시 바꾸는 방법

코스메이커 A001

  • A001-19. 엘리멘터 라이센스 설정
  • A001-1. 스닛펫 보내는 이메일 설정
  • A001-18. iTheme Security 알림 설정
  • A001-17-2. 관리자화면 대시보드 화면 숨김처리(어드민 대시보드 위젯 에디터)
  • A001-17-1. 관리자화면 대시보드 화면 숨김처리(어드민 메뉴 에디터)
  • A001-17. 관리자화면 Topbar 숨김처리(툴바에디터)
  • A001-16. [누구나 가입할 수 있습니다] 기능 해제하기
  • A001-15. 사이트 보안 기능 설정
  • A001-14. 이메일 세팅(SMTP) – gmail 계정 확보하기
  • A001-13. 404페이지
  • A001-12. 아이콘 깨지지 않도록 대처하는 법
  • A001-11-1. 사이트 접근성
  • A001-10. 보내는 이메일 정보 바꾸기
  • A001-9. 우커머스 사용의 경우 보내는 이메일 관련 정보 수정
  • A001-8. 퍼마링크 설정하기
  • A001-7. 한국 시간 설정
  • A001-6. 사이트 제목, 태그라인
  • A001-5. 헤더로고
  • A001-4. 푸터내용, 이용약관, 개인정보처리방침 메뉴
  • A001-4. 푸터내용, 이용약관, 개인정보처리방침 메뉴
  • A001-3. 담당자 이메일 주소 변경
  • A001-2. 백엔드 사이트 로고, 로그인 로고 변경
  • A001-1. 스닛펫 보내는 이메일 설정

빅디오 기본 테마 A001

  • A001-19. 엘리멘터 라이센스 설정
  • A001-9. 우커머스 사용의 경우 보내는 이메일 관련 정보 수정
  • A001-8. 퍼마링크 설정하기
  • A001-6. 사이트 제목, 태그라인
  • A001-5. 헤더로고
  • A001-2. 백엔드 사이트 로고, 로그인 로고 변경
  • A001-18. iTheme Security 알림 설정
  • A001-17-2. 관리자화면 대시보드 화면 숨김처리(어드민 대시보드 위젯 에디터)
  • A001-17-1. 관리자화면 대시보드 화면 숨김처리(어드민 메뉴 에디터)
  • A001-17. 관리자화면 Topbar 숨김처리(툴바에디터)
  • A001-16. [누구나 가입할 수 있습니다] 기능 해제하기
  • A001-15. 사이트 보안 기능 설정
  • A001-14. 이메일 세팅(SMTP) – gmail 계정 확보하기
  • A001-13. 404페이지
  • A001-13. 404페이지
  • A001-12. 아이콘 깨지지 않도록 대처하는 법
  • A001-11-1. 사이트 접근성
  • A001-10. 보내는 이메일 정보 바꾸기
  • A001-9. 우커머스 사용의 경우 보내는 이메일 관련 정보 수정
  • A001-8. 퍼마링크 설정하기
  • A001-7. 한국 시간 설정
  • A001-6. 사이트 제목, 태그라인
  • A001-5. 헤더로고
  • A001-4. 푸터내용, 이용약관, 개인정보처리방침 메뉴
  • A001-3. 담당자 이메일 주소 변경
  • A001-2. 백엔드 사이트 로고, 로그인 로고 변경
  • A001-1. 스닛펫 보내는 이메일 설정
  • Home
  • Docs
  • 사이트 접근성 (대체 텍스트 올바르게 제공하기- 1편)

사이트 접근성 (대체 텍스트 올바르게 제공하기- 1편)

Table of Contents
  • 오류유형1. 이미지 요소의 alt 속성 제공
  • alt 속성을 선언하지 않은 경우
  • alt 속성을 선언하였으나 대체 텍스트를 입력하지 않은 경우
  • alt 속성을 선언하지 않은 경우
  • 대체 텍스트 내용을 불충분하게 제공한 경우
  • 대체 텍스트의 오타로 인해 정보전달에 문제가 생긴 경우
  • 접근성 텍스트 작성 참고

오류유형1. 이미지 요소의 alt 속성 제공 #

웹사이트에 이미지를 표현하고 싶을 때 여러 가지 방법을 이용할 수 있습니다. 그 중 가장 기본적이며, 흔하게 사용되는 방법이 img, input type=”image”와 같은 HTML 이미지 요소(element)의 사용일 것입니다.
alt 속성(attribute)은 이러한 이미지 요소를 대체할 수 있는 텍스트(alternative text), 즉, 설명을 제공하는 역할을 합니다. 스크린 리더는 alt 속성값으로 제공된 텍스트를 해석해서 음성으로 출력해 줍니다. 이번 편에서는 이미지 콘텐츠의 대체 텍스트를 제공하는 방법 중 하나인 alt 속성과 관련된 웹 접근성 오류에 대해 알아보겠습니다.

alt 속성을 선언하지 않은 경우 #

만약 alt 속성 자체를 생략해 버린다면 어떻게 될까요? alt 속성을 생략하는 것은 이미지가 중요한 콘텐츠이지만 이를 설명하는 텍스트를 사용할 수 없는 상태를 의미합니다. 어찌 되었든 의미가 있는 콘텐츠이기 때문에 대부분의 스크린 리더는 이미지 요소에 대한 해석을 건너뛰지 않습니다. 하지만 이미지 요소에서 사용할 수 있는 텍스트 설명이 없으므로, 대신 경로 정보(src)를 음성으로 출력하게 됩니다.

Do Not

img src=”/wp-content/uploads/2020/01/BIGDEOlogo_200.png”

스크린 리더 음성
“빅디오로고 이백 피앤지 이미지”

Do

img src=”/wp-content/uploads/2020/01/BIGDEOlogo_200.png” “alt=”빅디오로고””

스크린 리더 음성
“빅디오로고 이미지”

일반적으로 우리는 웹사이트가 제공하는 정보를 이해하기 위해 콘텐츠를 볼 때, 이미지 요소의 경로 정보를 필요로 하지는 않습니다. 오히려 경로 텍스트가 화면 그대로 노출되어 있다면 알고싶은 중요한 콘텐츠에 집중하기 어렵기 때문입니다. 이는 스크린 리더 사용자에게도 마찬가지 입니다. 중간 중간에 의미 없는 긴 알파벳을 반복적으로 듣게 된다면 이미지 콘텐츠의 의미를 이해할 수 없을 뿐더러 콘텐츠 탐색에 방해를 받게 됩니다. 그러므로 웹 페이지에 이미지 요소를 제공 할 때, alt 속성을 선언하는 것을 잊지 말아야 합니다.

alt 속성을 선언하였으나 대체 텍스트를 입력하지 않은 경우 #

alt 속성을 선언하였더라도 텍스트 설명이 없다면 사용자들은 결국 이미지의 의미를 이해할 수 없습니다. 텍스트 설명을 생략하는 것은 이미지라는 콘텐츠가 가지고 있는 정보를 알 수 없는 것과는 다른 문제를 만들어 냅니다. 위의 예시에서 alt 속성을 선언하고 빈값(“”)을 제공하는 것은 이미지가 핵심적인 요소가 아님을 의미하기 때문에 스크린 리더는이미지 요소를 해석하지 않습니다. 결국 스크린 리더 사용자들은 내용 중에 이미지 콘텐츠가 있다는 것조차 알 수 없게 됩니다.

alt 속성을 선언하지 않은 경우 #

만약 alt 속성 자체를 생략해 버린다면 어떻게 될까요? alt 속성을 생략하는 것은 이미지가 중요한 콘텐츠이지만 이를 설명하는 텍스트를 사용할 수 없는 상태를 의미합니다. 어찌 되었든 의미가 있는 콘텐츠이기 때문에 대부분의 스크린 리더는 이미지 요소에 대한 해석을 건너뛰지 않습니다. 하지만 이미지 요소에서 사용할 수 있는 텍스트 설명이 없으므로, 대신 경로 정보(src)를 음성으로 출력하게 됩니다.

대체 텍스트 예시 이미지

Do Not

img src=”/wp-content/uploads/2020/11/alt-text.png” alt=””

Do

img src=”/wp-content/uploads/2020/11/alt-text.png” “alt=”날짜를 체크하여 여행갈 곳을 선정한 후, 여행을 간다.””

alt속을 선언하고 텍스트 값을 제공함으로써, 이제 우리는 이미지 콘텐츠의 의미를 사용자들에게 전달할 수 있게 되었습니다. 하지만 사용자가 대체 텍스트를 통해 정보의 도움이 필요 없는 일반적인 사용자들이 이해할 수 있는 것과 동등한 수준의 정보를 제공받기 위해서는 좀 더 노력이 필요합니다. 대체 텍스트를 통해 유용한 정보가 전달될 수 있도록 다음 사례들을 통해 대체 텍스트의 내용을 적절하게 제공하는 방법에 대해 알아보도록 하겠습니다.

대체 텍스트 내용을 불충분하게 제공한 경우 #

대체 텍스트는 글자 그대로 이미지 요소를 대체할 수 있는 텍스트여야 합니다. 일반 사용자가 시각적으로 이미지 콘텐츠를 봤을 때 할 수 있는 내용과 동등한 수준의 구체적인 설명이 제공되지 않는다면 대체 텍스트가 있어도 스크린 리더 사용자들은 여전히 콘텐츠에 접근하는 데 제약이 있습니다.

Example. 이미지로 저장한 텍스트

이미지 출처 : https://brunch.co.kr/@snclab/2

Do Not

img src=”/wp-content/uploads/2020/11/alt-text.png” alt=”오늘 하루, 모든 ebook 25% 할인””

Do

img src=”/wp-content/uploads/2020/11/alt-text.png” “alt=”오늘 하루, 모든 ebook 25% 할인. 문학전집 시리즈 및 신간 도서는 할인에서 제외됩니다.””

Do Not코드의 alt속성값에서는 할인 제외 품목에 대한 정보가 빠져 있습니다. 물론 위 예시 이미지에서는 전달하려는 정보의 핵심은 도서 할인에 관한 것이지만, 할인에서 제외되는 품목이 있다는 것을 아는 사용자와 그렇지 않은 사용자는 같은 웹사이트라도 매우 다른 방식으로 책을 탐색하게 될 것입니다.

대체 텍스트의 오타로 인해 정보전달에 문제가 생긴 경우 #

대체 텍스트는 오타 없이 정확한 내용으로 제공해야 합니다. 문장과 단어 군데 군데 포함된 오타는 스크린 리더 음성에 의존하여 청각적으로 정보를 처리하는 사용자들의 이해를 방해합니다. 더군다나 오타가 발생한 부분이 콘텐츠에서 핵심이 되는 내용이라면 스크린 리더 사용자는 정보를 완전히 다르게 이해할 수 밖에 없습니다.

Example. 이미지 텍스트를 통해 중요한 정보를 전달하는 이미지

이미지 출처 : https://brunch.co.kr/@snclab/2

Do Not

img src=”/wp-content/uploads/2020/11/alt-text.png” alt=”봄맞이 걷기 행사 참여자 모집, 모집기간 2019년 4월 2일부터 4월 21일. 행사 내용 올바른 걷기자세 안내, 함께 걷기. 접수방법 홈페이지를 통한 온라인 접수 (썬착순). 신청하러가기””

Do

img src=”/wp-content/uploads/2020/11/alt-text.png” “alt=”봄맞이 걷기 행사 참여자 모집, 모집기간 2019년 4월 1일부터 4월 22일. 행사 내용 올바른 걷기자세 안내, 함께 걷기. 접수방법 홈페이지를 통한 온라인 접수 (썬착순). 신청하러가기””

Do Not 코드를 유심히 살펴보면, 참여자 모집 시작일이 2일로 잘못 표기된 것을 알 수 있습니다. ‘고작 오타 하나일 뿐인데.’ 하고 생각할지도 모르겠지만, 단순해 보이는 이 오타 하나로 인해 스크린 리더 사용자들은 하루의 신청 기회를 놓치게 되고 결국 행사에 참여 하지 못하게 될 지도 모릅니다. 그러므로 이미지의 대체 텍스트를 제공할 때 오타가 발생하지 않도록 주의하고, 특히 위 사례와 같이 대체 텍스트에 중요한 정보가 포함되는 경우에는 작업을 완료하기 전에 한번 더 점검하는 것이 좋습니다.

접근성 텍스트 작성 참고 #

– 미디어 업로드 시 대체 텍스트 필수 입력 / 장식용 이미지의 경우 빈 공란 처리
– a 링크의 경우 # 형태인 빈 링크로 두면 안됨.

What are your Feelings
Share This Article :
어떻게 도와드릴까요?

어떻게 도와드릴까요?

Updated on 11월 5, 2020

답글 남기기 답글 취소하기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다

프로젝트 진행 중 알게 된 모든 알고리즘, 소스코드 및 지적재산권은 빅디오®에 있습니다.
  • 팀 로그인
Copyright 2021 © BIGDEO®
  • 팀 로그인

로그인

비밀번호를 잊어버리셨나요?