본문 바로가기

접근성

(3)
드래그로 정렬가능한 컴포넌트 sortable 위젯 기능을 구현할 수 있는 가장 손쉬운 방법은 jquery-ui sortable 사용하는 것! 그런데 문제가 있다, 드래그만으로는 접근성에 위배된다. 장애인을 배려하지않는 ui/ux 구조! 손이 없거나 입으로 도구를 사용하는 장애인들에겐 드래그나 스와이프 행위가 쥐약이기 때문이다. 그래서 반드시 모바일에서는 터치할 수 있는 버튼이 존재해야 한다. 간혹, 없는 경우가 있는데 그건 접근성 통과후 제외시켰거나 접근성업체와의 물밑거래 후 권장사항으로 돌렸기 때문이다. 구글링을 하다보니, jquery-ui에 버튼 이동되는 컴포넌트를 발견했는데 angular로 구현되어 있었다. 참고 url : https://codepen.io/thgreasi/pen/Gqpiu jquery만을 사용하여 똑같이 구현..
튤팁 tooltip See the Pen jgaNwE by rainydaymusickr (@rainydaymusickr) on CodePen. 회사에서는 전용코어를 개발해서 사용하는데, 외부 프로젝트에서는 차용해서 사용할 여건이 안되다보니 직접 만들어서 사용하게 된다. 요즘 함수기반클래스와 프로토타입클래스 두 방식으로 만드는 연습을 하는 중인데 개인적으로는 함수기반클래스가 스코프안에 자리잡아 코드관리가 용이한거 같다. 함수기반클래스는 객체생성마다 동일한 내부함수를 만들어주기에 안좋다고는 하지만, 엄청난 데이타를 처리할 정도가 아니라면 굳이 고집한다해도 상관없을듯 하다. 그리고 함수선언 기본형인 function 함수명(){ 으로 시작하는 형태가 내겐 부담이 덜한거 같다. 실전에서는 리터럴기반클래스 방식이 주로 사용되긴 하지만..
스와이퍼+스크롤탭 *swiper.js ( idangero.us ) 원소스 출처: 신한카드 모바일웹 swiper 옵션 알아두기 Js var swiperWeb = new Swiper('.swiper-container', { initialSlide : 0, //Index number of initial slide. direction: "horizontal", //Could be 'horizontal' or 'vertical' autoHeight: true, loop: true, touchAngle: 30, //Allowable angle in degrees to trigger touch move threshold: 20, //Threshold value in px. If "touch distance" will be lower ..