카테고리
웹 접근성 모드
맥락형
- 맥락형- 맥락형의 개념 및 정의- 맥락형에 대체 텍스트를 제공하는 방법- 앨리에서 제공하는 방법 - context-id 추가 방법으로 링크연결맥락형 이미지를 사이트에 배포하려면?사이트 배포 가이드를 작성하여, 사용자가 사이트 배포 기능에 대해 알고 스스로 작업물을 배포할 수 있어야 한다.- 맥락형 배포시 컨텍스트 아이디를 추가해야 기능형이나 장식형으로 구분이 가능함을 안내- 컨텍스트 아이디 추가 방법- 추가 후 결과에 대한 설명- context-id 가이드 : https://www.notion.so/inseq/context-id-2cacedcd842780298823da64256e89e6?source=copy_link장식형
장식형 이미지란? 디자인 목적으로 사용되어, 텍스트를 꾸미거나 별도의 의미가 없는 이미지는 장식형으로 분류돼요 이렇게 분류해 드려요! 1. 사용된 맥락에 따라 의미 해석이 달라지는 경우 2. 이미지에 명확하거나 독립적인 의미를 부여하기 어려운 경우 3. 이미지와 동일한 맥락의 텍스트가 앞이나 뒤에 함께 제공되는 경우 두 가지 이상 해당된다면 장식형 이미지로 분류해요. 대체 텍스트를 직접 작성하려면? 장식형이미지는 대체 텍스트를 제공하지 않아요. 장식형이미지는 alt 속성을 빈 값으로 제공해요. - alt 값은 공백을 포함한 불필요한 문자를 모두 제거하여 작성해주세요. - 올바른 예 ✅ alt="" - 잘못된 예 ❌ alt=" " - 잘못된 예 ❌ alt="돋보기" ✔️ 이렇게 검토해 주세요! AI는 실수할 수 있어요. 생성 후에는 꼭 검토해 주세요. - alt="" 처럼 공백이나 불필요한 문자가 포함되어있지 않나요?기능형
기능형 이미지란? 버튼, 링크 등 요소에 사용되어 텍스트 대신 특정 기능을 의미하는 이미지는 기능형 으로 분류돼요. 이렇게 분류해 드려요! 1. 사용된 맥락에 따라 해석이 달라지는 경우 2. 특정 기능을 수행하는 버튼이나 링크 등 상호작용 요소에 사용된 아이콘 이미지인 경우 두 가지 모두 해당된다면 기능형 이미지로 분류해요. 대체 텍스트를 직접 작성하려면? 기능형이미지의 대체 텍스트는 해당 기능을 직관적으로 이해할 수 있는 단어로 작성해야 해요. 의미를 쉽게 이해할 수 있는 명확한 단어로 작성해주세요. - 이미지가 사용된 맥락을 고려하여 작성해주세요. - 올바른 예 ✅ alt="검색" - 잘못된 예 ❌ alt="돋보기" - 이미지가 사용된 요소의 기능이나 역할을 작성해주세요. - 잘못된 예 ❌ alt="돋보기 아이콘" ✔️ 이렇게 검토해 주세요! AI는 실수할 수 있어요. 생성 후에는 꼭 검토해 주세요. - 이미지에 포함된 글자와 대체 텍스트를 비교했을 때 오탈자가 없나요? - alt그래픽형
그래픽형 이미지란? 이미지가 주변 텍스트와 콘텐츠의 맥락을 보완하는 역할을 할 때, 텍스트가 아닌 시각적 정보와 분위기로 의미를 전달하는 이미지는 그래픽형 으로 분류돼요. 이렇게 분류해 드려요! 1. 이미지 속 정보가 상황에 따라 의미가 바뀌지 않는 경우 2. 설명을 요약해도 되는 시각적 정보인 경우 두 가지 모두 해당된다면 그래픽형 이미지로 분류해요. 대체 텍스트를 직접 작성하려면? 그래픽형이미지의 대체 텍스트는 시각 정보나 분위기 정보를 전달해야해요. 이미지의 시각정보를 간결하게 작성해주세요. - 이미지의 전체적인 시각적 정보를 간결하게 작성해주세요. - 올바른 예 ✅ alt="오랜지 색 장난감 한 개를 함께 입에 물고 잔디밭을 달리는 블랙과 골든 래브라도 리트리버" - 이미지의 목적을 고려하지 않은 설명은 작성하지 마세요. - 잘못된 예 ❌ alt="개 사진" , alt="반려동물" - 주관적인 감상 표현은 작성하지 마세요 - 잘못된 예 ❌ alt="잔디가 깔린 넓은 공원에서정보형
정보형 이미지란? 글자가 중심이 되어 정보를 알려주는 이미지는 정보형으로 분류돼요. 이렇게 분류해 드려요! 1. 이미지 속 정보가 상황에 따라 의미가 바뀌지 않는 경우 2. 설명을 요약할 수 없는 정보인 경우 3. 200자 이내 설명문으로 설명 가능한 경우 세 가지 모두 해당된다면 정보형 이미지로 분류해요. 대체 텍스트를 직접 작성하려면? 정보형 이미지의 대체 텍스트는 모든 사용자에게 동등한 정보를 제공해야해요. 이미지의 정보는 모두 작성해주세요. - 이미지가 전달하려는 목적이 담긴 단어나 문장은 모두 작성해주세요. - 올바른 예 ✅ alt="정부24를 사칭하여 개인정보를 요구하는 스미싱 문자 및 피싱 사이트에 각별히 주의하세요." - 이미지의 설명을 요약하지 마세요. - 잘못된 예 ❌ alt="스미싱 문자 주의 배너" - 꾸밈 요소로 사용된 글자는 작성하지 마세요. - 잘못된 예 ❌ alt="정부24를 사칭하여 개인정보를 요구하는 스미싱 문자 및 피싱 사이트에 각별히 주의하세요.복합형
복합형 이미지란? 이미지에 포함된 정보가 많거나, 구조가 복잡하다면 복합형으로 분류돼요. 이렇게 분류해 드려요! - 이미지 내 정보를 빠짐없이 작성했을 때 200~250자 이상 길어질 경우 - 이미지의 내용이 제목, 문단, 목록, 링크, 그래프, 테이블 등 다양한 서식으로 구성된 경우 둘 중 하나라도 해당된다면 복합형 이미지로 분류해요. 대체 텍스트를 직접 작성하려면? 복합형 이미지는 이미지에 포함된 정보량이 많고 구조가 복잡하기 때문에 1. alt 는 빠르게 파악할 수 있도록 간단히 요약된 정보만 제공해야 해요. 2. 정보를 누락 없이 이해할 수 있도록 상세 설명(description)은 따로 제공해 주세요. 1) alt는 핵심 주제만 간략히 작성하세요. - 이미지에 포함된 내용의 주제, 목적, 의도를 짧게 요약해 작성해 주세요. - 올바른 예 ✅ alt="제재처분 절차" - 전체 내용을 모두 설명하지 마세요. - 잘못된 예 ❌ alt="제재처분 절차는 어떻게 되나요? 제제처분 사