접근성 준수 컴포넌트 - 이미지 (테이블 대체 텍스트 만들기)

 

테이블이 포함된 이미지는 대체 텍스트 구성이 쉽지 않습니다. 헤더가 포함된 테이블이 경우 각 값들을 헤더의 내용과 매칭시켜 줘야 하기 때문입니다. 'table' 태그로 텍스트를 추출해서 숨김처리하여 스크린리더가 읽게 하는 것을 생각할 수 있지만, 아쉽게도 대부분의 스크린리더는 랜더링되지 않는 'table' 태그는 소리내어 읽지 않습니다. 

 

GPT를 활용하거나 직접 입력하여 테이블 내용을 리스트 정보로 변환

테이블 태그는 읽지 않지만, 리스트로 변환된 정보는 스크린 리더가 잘 읽어 줍니다. 일일히 텍스트를 타이핑할 수도 있으나, 너무 작업량이 많으니 GPT를 활용해 보도록 합니다. 이미지를 업로드한 이후에 GPT에게, '이 이미지 속 테이블 정보를 리스트 형태로 구성해서 HTML로 만들어 줘'라는 식의 프롬프트를 입력하면 됩니다.

 

'visually-hidden'으로 숨김 텍스트 처리하기

이제 추출된 텍스트를 활용하여 숨김 텍스트로 문서 내에 삽입해 주면 됩니다. 숨김 텍스트 처리를 위한 'visually-hidden' 클래스 속성 정의는 다음 코드를 참고하시면 됩니다(sound-only, sr-only 등의 클래스 명으로도 자주 활용됩니다).

     .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
    }

 <div class="visually-hidden">
        <h3>성적우수 장학금</h3>
        <h4>수여대상</h4>
        <ul>
            <li>성적 최우수 장학금: 1명, 학기별 성적 최상위 1인, 300,000원</li>
            <li>성적 우수 장학금: 3명, 성적 최상위 1인 제외한 최상위 3인, 200,000원</li>
            <li>성적 장려 장학금: 4명, 성적 최상위 1인, 우수 3인 제외한 최상위 4인, 100,000원</li>
        </ul>
        <h4>세부기준</h4>
        <ul>
            <li>학기별 수강자 중 6과목 이상, 수강과목 평균 80점 이상이며 수강과목 모두 B학점 이상인 자 (수강과목 중 최상위 성적 6과목을 기준으로 산정)</li>
...

대체 텍스트 테스트하기

스크린리더를 활용해 정상적으로 텍스트가 읽히는지 확인하고, GPT가 생성한 코드가 이미지의 텍스트를 잘 반영하는지도 검증하도록 합니다.