킹바구니

모든 태그 정리한것 아님. 필요한것만 빼서 정리. 1. https://developer.mozilla.org/ko/docs/Web/HTML/Element/a - HTML: Hypertext Markup Language | MDN HTML 요소(앵커 요소)는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. developer.mozilla.org - 기본적으로 링크(href)를 위한 태그이나 href요소는 필수가 아님. - href에 #를 쓰면 페이지가 새로고침/최상단으로 이동하는데 개발/접근성 처리시 주의(링크할 필요없으면 href를 없애고, 버튼으로 사용할꺼면 role=button 추가) - 안에 또다른 를 ..

1. HTMLElement.style document.querySelector('div').style.left = '100px'; document.querySelector('div').style.width = '200px'; 어떤 element을 css말고 javascript로 변경하고 싶다면 이렇게 쓰면 됨. 그런데, width값을 알고싶어서 저걸 쓰면 값이 제대로 나오지 않음 그 이유는 css나 인라인코드로 width값 등이 설정되어있더라도, 자바스크립트로 별도로 지정되지 않았다면 style.width형태로는 요소의 값을 뽑아낼 수 없음. 즉 css로 display: none을 해서 화면상에는 없어도 자바스크립트로 별도로 값을 지정해줬다면 그 값을 출력함. 자바스크립트로 width를 10000px로 ..

태그 예를들어 이런 태그가 있는데 focus를 줘도 안먹는 경우가 있음. 뭐 css적으로 display: none한것도 아니고, $('p').get(0).focus()이렇게도 해보고 그랬는데 결론은 그냥 셋타임아웃이 제일 효과적임. $('p').focus(); setTimeout(function() { $('p').focus(); }, 100); 난 혹시 몰라서 저런 경우 발생시 두개를 다 써놓곤 함. 시간초는 보통 100~200정도 다들 하는듯.. jquery focus() not working

접근성 기능 빠르게 켰다끄기 단축키는 이곳에서 확인 가능 [https://peamexx.tistory.com/134] ----------------------------------------------------- 귀로만 듣다보면 문장을 잘못 듣거나, 단어가 헷갈리는 경우가 있음. 이럴때 자막 패널을 켜두면 텍스트로 확인하기 용이함. 안드로이드 (voice assistant) 1. 설정 - 접근성 - 스크린 리더 - 설정 - 개발자 옵션 - TTS출력 표시 아이 편해 !! 안드로이드 (talkback) 1. 설정 - 접근성 - 설치된 서비스 - talkback - 설정 - 고급 설정 - 개발자 설정 - 음성 출력 표시 생긴거는 위에 voice assistant의 자막패널과 똑같이 생김. 아이폰 1. 설정..

접근성 테스트를 하려면 빨리 켜고 빨리 꺼야하는데 매번 설정에 들어가서 켜서 다시 빠져나오는게 너무 불편했었음. 그러다가 빠른실행 방법을 알게되서 정리함. ----------------------------------------- 참고로 talkback과 voice assistant 차이점도 정리해봄. talkback은 안드로이드 기존 스크린리더이며, voice assistant는 삼성에서 만든 스크린리더로 갤럭시 s6부터 이용 가능함. 둘다 기본적으로 안드로이드에 설치되어있음 [https://nuli.navercorp.com/community/article/1132808]. ※ 그런데 안드로이드 11, One UI 3.0이후 업데이트로 talkback과 voice assistant을 통합하여 새로운 (..

가끔 로그찍을때 요로코롬 나올때 있음. 객체형태라서 그런데 방법은 2가지 1. JSON.stringify console.log(JSON.stringify(data)) 2. console.dir console.dir(data)

부트스트랩 모달을 쓰고 있었기때문에 기본적으로 role='dialog', aria-modal='true'이런게 다 기본적으로 되어있는데도 안드로이드에서만 스와이프하다보면 뒷배경에 focus가 가능했었음. 위 스크린샷처럼 떠있는 'save changes'가 focus된 상태에서 오른쪽으로 스와이프하면 뒷 background에 있는 다른 요소에 focus가 가버림 개빡 방법 $('header, footer').attr('aria-hidden', 'true'); 다행히도 aria-hidden을 뒷 요소들한테 다 주면 된다. modal이 켜졌을땐 true, 꺼졌을땐 false로 해주면 뒤에 안잡음. display none이나 visibility hidden이런것도 해봤는데 얘네는 자칫하면 화면이 밀려버리는 경우..

promise, asnyc, await 이런 최신 문법들이 나왔지만 현실적으로 ie를 맞춰야한다거나 하는 상황이 벌어지면 쓸수가 없음. 그럼 콜백함수를 쓸수밖에 없는데 어쩌다보면 막 너무 지저분해지고 길어지고 하는 상황들이 벌어짐. 그래서 polyfill을 찾아보다가 유튜브에서 한번 보고 따라해봄. https://codepen.io/pmx/pen/XWZJzGM promise polyfill (IE9 맞춤) ... codepen.io ---------------------------- 아니면 이를 지원하는 라이브러리같은게 있는데 하나 아는거는 rsvp.js라서 이걸로도 한번 해봄. https://codepen.io/pmx/pen/abErVqx RSVP.js (IE9 맞춤) ... codepen.io

modal 열때 스무스하게 열림/닫힘 효과 없애는 방법 modal은 class에 .fade 삭제 offcanvas는 css 추가 .offcanvas { transition: transform 0s; } modal은 css줘보고 난리쳤는데 그냥 저게 직빵임. class없애도 열고 닫는데 지장없음. 접근성 작업한다면 꼭 저런 스무스 애니메이션 빼길 바람(스무스한 그 찰나에 focus를 잃어버리는 등 별짓이 다 일어남)

접근성이라는게 aria~류만 잘 써주면 되는줄 알았더니, 실제로 스크린리더 기기별로 지원하는 aria가 달랐고, 또 원래대로라면 예를들어 '목록 버튼, 랜드마크'라고 정상적으로 읽어주는 것을, 업체측 사정에 따라 알아듣기 쉽게 '목록'이라고만 읽어줘야할 때도 있었는데, 그러다보니 작업하기가 참 까다로웠음. 처음에는 그렇게 바꾸다보니 이게 접근성이 맞나 싶다가도 오히려 또 굳이 저렇게 다 길게 읽어주는걸 보니 실제 쓰려면 그래도 간결한게 맞긴맞네라는 생각도 들었음(긴거는 진짜 '텍스트 필드, 글자를 입력하려면 이중탭 하세요, 맞춤법 로터를 이용한 사용' 뭐 이런식으로 textarea하나를 저렇게 읽어댐.. 물론 이건 iOS긴 하다만) 아무튼 그와중에 select box를 태그말고 커스텀으로 만들어야하는 상..