thumbnail
카테고리

웹 접근성 모드

맥락형

맥락형 이미지란? 같은 이미지라도 사용된 맥락에 따라 의미가 달라질 수 있는 이미지를 의미해요. 이처럼 같은 이미지라도 사용된 위치와 역할에 따라 장식형 이나 기능형으로 달라질 수 있어요. 앞·뒤 맥락을 파악할 수 있는 정보가 없어, 정확한 유형 분류와 대체 텍스트 생성이 어려운 이미지는 맥락형으로 분류돼요. 맥락형 이미지를 활용하려면? 앨리는 스마트 필터링 시스템을 통해 반복적으로 사용된 이미지를 자동으로 인식하고, 동일한 이미지에는 하나의 대체 텍스트를 공통적으로 적용해 관리해요. 하지만 맥락형 은 동일한 이미지라도 사용된 맥락에 따라 의미가 변경될 수 있기 때문에, 이미지를 간단히 묘사한 기본적인 대체 텍스트만 제공하며 배포 대상에서는 제외돼요. 맥락형 이미지를 사이트에 활용하려면 아래 방법 중 하나를 선택해주세요. - context-id 활용하기 - 동일한 이미지에 서로 다른 대체 텍스트를 적용할 수 있어요. - 웹 접근성 개선 서비스 신청하기 - 전문가의 검토를 통해 사이트

장식형

장식형 이미지란? 디자인 목적으로 사용되어, 텍스트를 꾸미거나 별도의 의미가 없는 이미지는 장식형으로 분류돼요. 이렇게 분류해 드려요! 1. 사용된 맥락에 따라 의미 해석이 달라지는 경우 2. 디자인 목적으로 사용되어 대체 텍스트 제공이 불필요한 경우 두 가지 모두 해당된다면 장식형 이미지로 분류해요. 대체 텍스트를 작성하려면? 장식형은 alt 를 빈 값(alt="")으로 제공하는 것이 원칙이에요. 하지만 앨리에서 장식형 이미지를 맥락형 에 포함해 관리하며, 다른 맥락에서의 활용을 고려해 이미지를 간단히 묘사한 기본적인 대체 텍스트를 제공하고 있어요. 따라서 장식형으로 분류된 이미지는 에디터에 대체 텍스트가 입력되어있더라도 사이트 배포 시에는 원칙적으로 빈 값으로 적용돼요.

기능형

기능형 이미지란? 버튼, 링크 등 요소에 사용되어 텍스트 대신 특정 기능을 의미하는 이미지는 기능형 으로 분류돼요. 이렇게 분류해 드려요! 1. 사용된 맥락에 따라 해석이 달라지는 경우 2. 특정 기능을 수행하는 버튼이나 링크 등 상호작용 요소에 사용된 아이콘 이미지인 경우 두 가지 모두 해당된다면 기능형 이미지로 분류해요. 대체 텍스트를 직접 작성하려면? 기능형이미지의 대체 텍스트는 해당 기능을 직관적으로 이해할 수 있는 단어로 작성해야 해요. 의미를 쉽게 이해할 수 있는 명확한 단어로 작성해주세요. - 이미지가 사용된 맥락을 고려하여 작성해주세요. - 올바른 예 ✅ alt="검색" - 잘못된 예 ❌ alt="돋보기" - 이미지가 사용된 요소의 기능이나 역할을 작성해주세요. - 잘못된 예 ❌ alt="돋보기 아이콘" ✔️ 이렇게 검토해 주세요! AI는 실수할 수 있어요. 생성 후에는 꼭 검토해 주세요. - 이미지에 포함된 글자와 대체 텍스트를 비교했을 때 오탈자가 없나요? - 원본

그래픽형

그래픽형 이미지란? 이미지가 주변 텍스트와 콘텐츠의 맥락을 보완하는 역할을 할 때, 텍스트가 아닌 시각적 정보와 분위기로 의미를 전달하는 이미지는 그래픽형 으로 분류돼요. 이렇게 분류해 드려요! 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="제재처분 절차는 어떻게 되나요? 제제처분 사