h1 요소 활용하기
현재 h2로 페이지 타이틀이 표현되고 있는데 h1요소로 하는게 title랑도 일치하고 보조 기술로 접근시 좀 더 접근성이 좋습니다.
링크가 아닌 a태그
<a href="javascript:;" class="toggle-nav"></a>
Plain Text
복사
다른 화면을 전환하는 기능이 아니라면 a태그가 아닌 다른 태그로 지정하는것이 좋습니다.
장식 요소에 alt 태그
장식 요소에 alt 태그는 비어있는 값으로 하는게 좋습니다.
<div class="in-screen" id="in-screen-1">
<img src="img/page123_01/step-1/image.26.png" alt="데코" class="deco" id="step_1_deco_1" style="translate: none; rotate: none; scale: none; transform: translate3d(0px, 6.06px, 0px); opacity: 1;">
<img src="img/page123_01/step-1/image.24.png" alt="데코" class="deco" id="step_1_deco_2" style="translate: none; rotate: none; scale: none; transform: translate3d(0px, -6.06px, 0px); opacity: 1;">
<img src="./img/page123_01/step-1/A_paper.png" class="paperrockscissors" id="paperrockscissors_A" alt="A-가위바위보">
<img src="./img/page123_01/step-1/B_rock.png" class="paperrockscissors" id="paperrockscissors_B" alt="B-가위바위보">
</div>
Plain Text
복사
name이 비어있는 버튼
어떤 버튼인지 알 수 없습니다.
<button type="button" id="btn_Start"></button>
Plain Text
복사
도달하기 어려운 Disclosure widgets
활동 방법을 알고 싶어서 눌러도 도달하기 어렵기 때문에 설명을 알기 어렵습니다.
아래 가이드를 준수해서 개발해야 합니다.
name이 없는 버튼
<button type="button" class="btn_stage_2" id="btn_inactive_A" style="translate: none; rotate: none; scale: none; display: block; transform: translate(0px, 0px);"></button>
Plain Text
복사
visually hidden 속성을 활용하여 button content가 name으로 인식되게 해야합니다.
눈에 안보이는 요소 가리기
<div class="in-screen" id="in-screen-1">
<img src="img/page123_01/step-1/image.26.png" alt="데코" class="deco" id="step_1_deco_1" style="translate: none; rotate: none; scale: none; transform: translate3d(0px, 18.58px, 0px); opacity: 1;">
<img src="img/page123_01/step-1/image.24.png" alt="데코" class="deco" id="step_1_deco_2" style="translate: none; rotate: none; scale: none; transform: translate3d(0px, -18.58px, 0px); opacity: 1;">
<img src="./img/page123_01/step-1/A_paper.png" class="paperrockscissors" id="paperrockscissors_A" alt="A-가위바위보" style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">
<img src="./img/page123_01/step-1/B_rock.png" class="paperrockscissors" id="paperrockscissors_B" alt="B-가위바위보">
</div>
Plain Text
복사
활동을 시작하고 예전 이미지가 aria-hidden 처리가 안되어 있어서 페이지에 존재하는것 처럼 인식 됩니다.
설명 없는 이미지
<svg width="462" height="462" id="graph_svg" class="team_B">
<line x1="231" y1="231" x2="0" y2="78" id="graph_svg_line" style="stroke-dashoffset: 0px; opacity: 0;"></line>
<line x1="231" y1="231" x2="462" y2="384" id="graph_svg_line_mirror" style="stroke-dashoffset: 0px; opacity: 0;"></line>
</svg>
Plain Text
복사
svg에 title요소와 desc 요소를 넣어서 설명을 적어줘야 합니다.
마우스로만 작동 가능한 상호작용 요소
li, 수식 요소로만 되어 있어서 상호작용이 가능한 요소인데 마우스로만 활동이 가능해서 접근성이 떨어집니다.