개요
- 2021.11.15 - 2021.11.16 약 2일간 한 코딩에 대한 글입니다.
완성본
- 완성 웹사이트: http://web-accessibility.netlify.app/
- 미리 공유하는 이유는 하단 글이 너무 길기 때문이다.. 😂
- 캡쳐본 : 모바일, 태블릿, 데스크탑 순
1. 웹접근성 이렇게 어려운거였나?
웹 접근성은 지금까지 표면적으로만 알고 있었다는 것을 이번 프로젝트를 하면서 정말 많이 느꼈던거 같다 😥 그래서 웹 접근성이 좋은 웹사이트를 만들게 되었나?라는 질문에 나의 대답은 NO이다.
- 사실 실무에서 웹 접근성이 어떻게 진행되는지 정확히 모른다. 그렇기 때문에 예를들면, 키보드의 접근성을 보장하는 부분에서 논리적인 순서는 어떻게 짜야하지?라고 고민했었다.
- 지금 내가 생각했을 때 가장 베스트 정답은 기존 웹사이트의 이동 순서를 그대로 따라하는 것이라 판단했다.
- 사실 그 웹사이트가 웹 접근성이 좋은가?라고 했을 때 웹 접근성 마크를 받았기 때문에 안받은 웹사이트 보다는 좋을것이라 생각했고, 무엇보다 아무런 실무경험이 없는 나보다는 적어도 실무경험이 많은 분의 논리적인 순서를 따라가는 것이 맞다고 판단했다.
NULI 웹사이트를 통해 무엇을 구현해보았는지 확인하기 🙄
- NULI 웹사이트: https://nuli.navercorp.com/guideline/s02/g09
- 참고로 해당 웹사이트를 통해 무엇을 구현할 수 있었는지 작성해보려고 한다!
1. 적절한 대체 텍스트 제공
- 다음 페이지 버튼에 스크린리더에서 읽을 수 있는 대체 텍스트를 제공하였다.
- 놓친 것도 분명히 있을거라 판단되는데 우선 내가 아는 한에서 최대한 작성해보았다!
- 의미없는 이미지의 경우 웬만하면 background-image로 넣거나 의사요소(pseudo-element)로 넣었다.
- 이모티콘 이미지: 없음 (적절한 대체 텍스트를 제공하는 것이 맞다 - 몰랐던 부분! 😁 예를 들면, 이모티콘X 화난곰돌이O)
- QR코드: 없음 (해당 링크를 알수 있도록 작성해야 된다! - 몰랐던 부분! 예를 들면 QR코드X QR코드 네이버 바로가기O)
- 썸네일 이미지: 나의 경우는 이미지와 텍스트가 일치한다면 alt를 비워뒀다. (예시는 짤막하게 보여주기 위해 일부 텍스트는 지웠다)
<a href="#">
<img src="./assets/images/example1.jpg" alt="">
<h3>항균 및 세균독소 펩타이드 고효율 ~ </h3>
<p>ㅇ 생명체가 스스로를 보호하기 위한 ~ </p>
<span>자세히보기</span>
</a>- 캡차 이미지: 없음 (alt의 경우 '보안문자'로 입력 및 음성으로 들을 수 있는 버튼 제공)
- 사용자가 업로드하는 이미지 : 없음 (대체 텍스트를 제공할 수 있도록 안내하고 툴을 제공)
2. 자막 제공
- 멀티미디어 X
3. 색에 무관한 콘텐츠 인식
- 차트, 슬라이드버튼, 페이지내이션,탭버튼
- 색에 관계없이 콘텐츠가 인식되어야 함. (해당 건은 웹사이트를 클론코딩하였기 때문에 콘텐츠가 인식된다고 생각!)
4. 명확한 지시 사항 제공
- 관련된 내용이 없어보인다!
5. 텍스트 콘텐츠의 명도 대비
- 명도대비는 좋아보이지 않지만, 클론코딩이기 때문에 기존 웹사이트를 그대로 따랐다.
- WAVE?라는 크롬 익스텐션을 통해서 명도대비를 확인해보았다.
- 결과가 좋지 않다😥 해당 익스텐션이 좋은 지 확인 후, 추후에 변경할 수 있는건 변경해보아야겠다!
- 주로 회색배경+흰색글씨가 명도대비 테스트에 합격하지 못했다.
6. 자동 재생 금지
- 배경음 없음!
7. 콘텐츠 간의 구분
- 나는 각각의 콘텐츠마다 왜이렇게 선을 그었을까 생각했는데 이 이유 때문인거 같다
8.키보드 사용보장😂 / 9.초점이동은 완료
firstGnbTitle.focus(function () {
$(".header-bottom").addClass("focus");
});
$(".header-bottom .gnb-btn").focusout(function () {
$(".header-bottom").removeClass("focus");
});
$(".snb >li >a").keydown(function (e) {
const keyCode = e.keyCode || e.which;
if ($(this).hasClass("snb-depth1") && keyCode === 13) {
$(this).siblings().show();
}
});- 요거는 내가 focus를 할 때 작성한 코드! (이외에도 좀 있다)
- 기본적으로 웹사이트가 hover시 드롭다운 메뉴가 펼쳐지거나, 탭 메뉴의 컴포넌트들이 있기 때문에 tab으로 원하는 순서대로 안가는 경우가 있어서 코드를 작성해야 했다.
10. 조작가능 / 11. 응답시간 조절
- 컨트롤의 크기는 기존 웹사이트에서 사용하는 이미지를 그대로 가져왔기 때문에 문제가 없을거라 판단된다.
- 11번에 관련된 내용은 없었다.
12. 정지기능제공
- 해당 웹사이트에도 autoplay 슬라이더의 경우 정지버튼이 있었기 때문에 똑같이 구현했다! 😉
13. 깜빡임과 번쩍임 사용 제한
- 해당 웹사이트는 없었다.
14. 반복 영역 건너뛰기
- 건너뛰기 영역을 만들어놓았다! 😉
15. 제목 제공
- 페이지 제목: 메인 웹사이트 타이틀 작성 완료
- 프레임 제목: 프레임 없음
- 콘텐츠 블록: 모두 제공 및 만약에 제목이 외관상 보이지 않는다면 css로 처리
<nav>
<h2 class="sr-only">주요 메뉴</h2>
...
</nav>.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
clip: rect(0 0 0 0);
overflow: hidden;
}- 예를 들어, 메인 메뉴의 경우 제목이 없더라도 미리 사용자가 인지할 수 있도록 '주요 메뉴'라는 타이틀을 적어주고 웹사이트에서는 보이지 않지만 스크린리더에는 읽히도록 css를 작성하였다.
- 해당 CSS는 네이버에서 참고하여 작성!
16. 적절한 링크 텍스트
- 우선 빈링크는 제거하는게 맞으나, 해당 웹사이트는 메인 웹사이트만 클론코딩하였기 때문에 서브페이지의 링크가 없기 때문에 '#'로 작성하였다.
<img src="./assets/images/promotion3.png" alt="버섯 흑타리">- 포스터에 필요한 문구가 있다면 대체 텍스트 제공
17 ~ 21 : 이해의 용이성
- 해당 관련해서는 딱히 문제가 없거나 메인 웹사이트에 포함되어 있지 않은 내용으로 패스.
23. 마크업 오류 방지
- 생각해보니 마크업 오류를 확인해보지 못했다. 내일 해서 수정할 부분을 해야겠다!
24. 웹 애플리케이션 자체 접근성
- 포함X
크로스브라우징 IE11도 어렵다😥
- 좋았던 점은 flex 사용이 되기 때문에 기본적인 레이아웃은 쉽게 해나갈 수 있었다.
- 생각보다 자바스크립트의 경우 IE11에서 제공되지 않는게 많다보니 다시 제이쿼리로 변경해야할 때도 있었다.
$(".research-section .slides").slick(
$.extend({}, commonSetting, {
responsive: [
{
breakpoint: 1199,
settings: {
slidesToShow: 3,
},
},
],
})
);
$.extend()는 두 객체를 합할 때 사용된다.- 만약에 앞에 빈 객체를 만들지 않으면 두 객체가 합해져서 기존 객체가 변경이 되는 경우가 있다 (처음에 뭐 때문인지 몰라서 삽질..🥴)
그외에 자잘한 이슈
slick 이슈 정리
- 슬라이드 아이템 전부 웹사이트에 보이는 경우 slick-clone을 만들지 못하는 버그발생
🤍 구세주 🤍
slidesToShow === slideCount
https://github.com/kenwheeler/slick/issues/3551 - 슬라이드 아이템이 전부 보이는 경우 transform: translate3d(0,0,0)으로 되어서 tab으로 이동시 슬라이드가 알아서 움직이는 현상 발생
- 이건 진짜 마지막까지 뭐 때문에 움직이는 지 몰랐다가 console에서 태그 뜯어보는 중 translate3d가 안먹히는 걸 알게되어서 발견!
useTransform: false으로 설정 후 CSS에 내가 직접 작성
그 외
- 사실 스킵 네비게이션의 경우 자바스크립트로 짜야하는 줄로만 알았는데 a:active, a:focus로 충분히 CSS만으로 만들 수 있다
결론 및 해야할 사항들🥺
- 개인적으로 지금까지 만들었던 웹사이트 중 가장 많은 사항을 배웠다고 장담할 수 있다. 웹접근성부터 시작해서 크로스브라우징, 반응형웹 효율적으로 만들기 등.. 역시 모든 배움은 삽질에서 나온다 😂
- 하다보니 아직 해야할 사항들이 있다는 것을 깨달아 좀 적어보려고 한다.
✅ 마크업 오류 확인 및 수정
✅ 몰랐는데 IE로 tab 이동해보니 일부분이 버벅거린다...^^ 이유를 찾아봐야겠다.
웹 퍼블리셔입니다💓