수다닷컴

YES/NO로 나뉘는 순서도, 접근성 마크업 조언 부탁드려요

라온제나 2026.09.04 댓글 8

YES/NO 분기가 있는 순서도를 이미지로 만들었는데, 대체 텍스트를 어떻게 구성해야 논리적으로 전달될지 고민입니다.
단계별로 목록을 만들고 2단계에서 가입 여부를 확인한 뒤, 해당하는 절차를 안내하는 방식으로 마크업했어요.
스크린 리더로 들었을 때 같은 내용이 반복되거나 분기 부분이 헷갈릴까 걱정됩니다.
더 나은 구성 방법이 있을까요?

댓글 8

  • 얀별 2026.09.04

    흐름을 두 가지로 나눠서 만들면 간단할 것 같아요.

  • 라임나무 2026.09.04

    협약 체결과 교육 신청을 하나의 흐름도로 묶지 말고, 별도 흐름도로 구성하면 분기 없이 더 쉽게 표현할 수 있을 것 같아요.

  • 키움 2026.09.04

    흐름도는 일반인도 이해하기 어려울 수 있으니 텍스트를 숨기지 않고 이미지 아래에 설명을 함께 두는 방법도 괜찮아요.
    찾아오는 길 안내에서 약도만 보여주는 대신 글로 설명을 덧붙이는 것처럼요.
    그리고 단계 몇 개를 건너뛰게 하려고 기능을 계속 추가하는 게 꼭 필요한지도 생각해 볼 수 있겠네요.

  • 아란 2026.09.04

    단계를 줄이고 2단계에서 해당하지 않을 때 다음 절차를 안내하는 방식이군요.
    이 방법도 생각해 봐야겠어요 ㅎㅎ

  • UniQue 2026.09.04

    1~6단계로 나누기보다 가입 여부 확인을 먼저 두고, 해당하지 않으면 회사 담당자가 가입하도록 안내한 다음 회원가입과 교육 신청으로 이어가면 어떨까요?

  • 매디 2026.09.04

    재직 근로자 여부에 따라 해당하는 절차를 나눠 안내하면 될 것 같아요.

  • 가을 2026.09.04

    longdesc를 쓰더라도 텍스트 설명을 생략하는 건 아니죠?

  • 아픔이보여 2026.09.04

    편하게 longdesc에 설명을 풀어 쓰는 방법도 있겠네요 ㅎㅎ
    HTML5에서는 지원되지 않을 수 있고, IR 기법으로 처리하기도 조금 애매하긴 해요.