카테고리
검수 가이드라인
전문가 검수 절차
AI로 대체 텍스트 생성하기 1. 전문가 대시보드에서 내가 담당하는 사이트 확인 2. 이미지 목록으로 이동 3. 에디터 상 대체 텍스트 ai 생성 - 사용자가이드 내용과 동일 프로세스 1. ai로 대체 텍스트 생성하기 이렇게 검토해주세요 1. 에디터 상 ai 생성 및 검토/보완 2. 검토/보완는 아래 내용과 동일 프로세스 - 이렇게 검토해주세요 - 이미지 유형 별 검토/보완은 검수 가이드라인 문서를 참고해주세요! 1. 검수 가이드라인 가이드 작성 시 참고 : - https://docs.google.com/presentation/d/1w7u0TUQBP1q1vxuvBHa6Mgij1tm_b-uq/edit?slide=id.p8#slide=id.p8 - https://www.notion.so/inseq/218cedcd842780f6a8d3f11d45ce40d0?source=copy_link성과 관리 - 수정필요
검수 품질 달성 기준 - 이미지 공통 가이드로 이동 전제 조건 1. 시각 장애인이 오류 없이 정보를 이해할 수 있어야 해요. 2. 웹 접근성 인증 심사 요구 사항을 충족해야해요. - 이미지 유형에 따라 대체 텍스트가 적절하게 제공되어야 해요. - alt (description)이 의미 누락이나 왜곡된 내용 없이 정보를 전달해야해요. - 동일한 유형의 이미지에 일관된 기준이 적용되어야 해요. - 이미지와 맥락정보가 중복되거나 모순되지 않아야 해요. -- 전문가 검수 성과 측정기준 ai 리서치 (노션) 우수 전문가 혜택 안내 - 이후 추가 예정 - 전문가 금/은/동에 대한 레벨 안내 - 레벨 별 혜택 - 우수 전문가 혜택 전문가 등급 (금/은/동) 🥇 금 - 자격조건 - 업무범위 - 혜택 🥈은 - 자격조건 - 업무범위 - 혜택 🥉동 - 자격조건 - 업무범위 - 혜택 --- 가이드 작성 시 참고 등급 자격조건 업무 범위 금(1) 컨설턴트 경력 1년 이상, 웹 접근성 인증 경험 5회 이상
장식형
검수 대상 및 기준 검수 대상 : 구분선, 배경 패턴, 장식 아이콘, 불릿 등 정보나 기능을 전달하지 않는 이미지 검수 기준 장식 목적의 콘텐츠는 빈 값(alt="")으로 제공해야 합니다. 오류 유형 별 검수 기준 1. 적절한 대체 텍스트 제공 - 1-1 <img> 등 이미지 요소에 alt 속성이 누락된 경우 (오타로 인해 의미가 변경된 경우 포함) - 1-2 불릿 등 의미 없는 이미지에 alt 속성을 누락했거나, 빈 값(alt="")으로 제공하지 않은 경우또는 불필요한 대체 텍스트를 제공한 경우 수정 가이드 이 이미지는 장식 목적으로만 사용되었는가? 👉 <img> 요소 → alt="" 로 제공해야 합니다. 👉 CSS 배경 이미지 → 별도의 대체 텍스트를 제공하지 않습니다. 배포 기준 및 운영 정책 장식형 이미지는 원칙적으로 alt=""로 제공하는 것이 기준입니다. 다만, 앨리 서비스에서는장식형 이미지를 맥락형 데이터에 포함하여 관리하고 있으며,다른 맥락에서 재사용될 가능성을 고려해기능형
검수 대상 및 기준 검수 대상 버튼, 링크 등 클릭 또는 선택 시 특정 동작을 수행하는 이미지 검수 기준 - 기능형 이미지는 무엇을 하는지(핵심 기능)가 alt에 포함되어야 합니다. - 화면 낭독기는 요소 유형(버튼, 링크 등)을 이미 안내하므로 “이미지”, “버튼” 등의 중복 표현은 사용하지 않는 것을 권장합니다. 오류 유형별 검수 기준 1.적절한 대체 텍스트 제공 - 1-1. <img> 등 이미지 요소에 alt 속성을 제공하지 않은 경우 - 1-4. <img> 요소의 대체 텍스트를 title만으로 제공한 경우 - 1-5. QR코드 등의 이동 주소 정보를 대체 텍스트·설명·링크 등으로 제공하지 않은 경우 5.명확한 지시사항 제공 - 5-1. 색·크기·모양·방향 등 지시사항을 시각 정보로만 제공한 경우 수정 가이드 - img 요소의 경우 alt 값을 사용했는가? - 색상·위치 정보 없이 버튼 또는 링크의 기능을 이해 가능한가? 👉 img 요소인 경우 alt 값을 사용하여 대체 텍스트그래픽형
정의 : 텍스트가 아닌 시각적 정보와 분위기를 통해 의미를 전달하는 이미지를 의미해요 ✔️ 이렇게 분류해요 두 가지 모두 해당된다면 그래픽형으로 분류해요. 1. 맥락 영향 없음 - 장식형/기능형 과 달리 그래픽형 은 이미지 속 정보가 주변 맥락에 의해 달라지지 않아요. 2. 설명 요약 가능 - 사용자가 핵심 정보를 빠르게 이해할 수 있도록, 이미지 정보를 간결하게 요약해서 제공해요. ✔️ 이렇게 검토해요 이미지 목적 고려 - 이미지의 내용을 단순 요약하지 않고, 전달하고자 하는 정보의 목적을 고려해서 작성해요. - 잘못된 예시 ❌: <a><img src="./img-dogs.jpg" alt="개사진"></a> 객관적인 내용으로 작성 - 이미지 상에서 확인할 수 있는 객관적인 사실을 작성하고, 자체적으로 해석한 주관적인 감상 표현은 작성하지 않아요. - 잘못된 예시 ❌: <a> <img src="./img-dogs.jpg" alt="잔디가 깔린 넓은 공원에서 하얀색 털을 가진 개와 검은색정보형
정의 : 글자가 중심이 되어 정보를 알려주는 이미지를 의미해요. ✔️ 이렇게 분류해요 맥락 영향 없음 - 장식형/기능형 과 달리 정보형 은 이미지 속 정보가 주변 맥락에 의해 달라지지 않아요. 설명 요약 불가 - 글자로 정보를 제공하는 정보형 의 경우, 설명을 요약하면 사용자에게 오해를 일으킬 수 있어요. 200자 이내 설명문 - 200자 이상의 긴 설명은 복합형으로 분류되어 상세설명(description)을 제공해야해요. 세 가지 모두 해당된다면 정보형이에요. ✔️ 이렇게 검토해요 이미지의 정보 전체 작성 - 이미지가 전달하려는 목적이 담긴 단어나 문장은 임의로 요약하지 않고 모두 작성해요. - 잘못된 예시 ❌: <img src="./img-banner.jpg" alt="스미싱 문자 주의 배너"> 꾸밈 요소는 제외 - 이미지를 꾸미기 위해 사용된 장식용 글자는 alt 값으로 작성하지 않아요. - 잘못된 예시 ❌: <img src="./img-banner.jpg" alt="정부24를 사복합형
정의 : 이미지에 포함된 정보가 많거나, 구조가 복잡한 이미지를 의미해요. ✔️ 이렇게 분류해요 200~250자 이상의 대체 텍스트 - 200~250자 이상의 텍스트로 alt 에 포함하기 어려운 경우 복합형으로 분류해요. 다양한 서식으로 구성 - 이미지의 내용이 제목, 문단, 목록, 링크, 그래프, 테이블 등 다양한 서식으로 구성되어 문장으로 설명하기 어렵다면 복합형으로 분류해요. 둘 중 하나라도 해당된다면 복합형이에요. ✔️ 이렇게 검토해요 alt는 핵심 주제만 간략히 - 이미지에 포함된 내용의 주제, 목적, 의도를 짧게 요약해 작성해주세요. - 잘못된 예시 ❌: <img src="./img-cardnews.jpg" alt="제재처분 절차는 어떻게 되나요? 제제처분 사유가 발생하면 이렇게 절차가 진행됩니다 1. 제재처분 사유 발생...."> 상세 설명은 모든 정보 포함 - 이미지의 정보를 시각적으로 인식하는 순서와 동일한 흐름으로 작성해 주세요. - 위에서 아래로 - 왼쪽에서 오른쪽으