본문 바로가기

WWWEB139

[WAI-ARIA] id/password input 아이디를 생성하는 입력상자에 어떻게 입력해야 하는지 알 수가 없고, 잘못 입력하고 발생하는 에러 메시지를 통해서만 "5~20자의 영문 소문자, 숫자와 특수기호만 사용가능합니다" 라는 것을 알 수 있게 된다. 또한 비밀번호도 오류가 발생한 후에 입력도움을 알 수 있기 때문에 스크린리더 사용자는 상당한 불편을 겪게 된다. 이렇게 입력 지침을 에러메시지를 통해서만 제공하는 방법을 스크린리더 사용자에게 좋지 않은 경험이 된다. "에러베시지"의 잘못된 예와 같이 스크린리더 사용자는 에러가 발생해도 에러가 발생 된 상황을 전혀 알 수 없기 때문에 "1111"이라고 아이디를 입력했지만, 그것이 입력 기준에 맞지 않는지는 알 수가 없다. 이때 입력 서식인 요소에 aria-label 또는 aria-labelledby와 .. 2020. 7. 17.
[WAI-ARIA] auto complete 예제 https://www.wah.or.kr:444/_Upload/pds2/WAI-ARIA%20%EC%82%AC%EB%A1%80%EC%A7%91(%EC%98%A8%EB%9D%BC%EC%9D%B8%ED%8C%90).pdf=> 35p https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships?hl=ko 요소 역할 속성/상태 설명 combobox 콤보박스 역할을 정의 aria-haspopup 텍스트 필드와 연관된 하위 수준의 메뉴가 있으면 true, 그렇지 않으면 false aira-autocomplete 사용자 입력에 대한 자동완성 지원 여부를 설정 aira-activedescenda.. 2020. 7. 17.
[WAI-ARIA] 탭 예제 https://www.wah.or.kr:444/_Upload/pds2/WAI-ARIA%20%EC%82%AC%EB%A1%80%EC%A7%91(%EC%98%A8%EB%9D%BC%EC%9D%B8%ED%8C%90).pdf 요소 역할 속성/상태 설명 tablist 탭 집합 presentation 요소의 리스트 의미를 삭제 tab aria-selected="true/false" 요소의 역할을 탭으로 정의하고, 선택되었을 때 true, 선택되지 않았을 때 false aria-controls="{}" tabpanel의 id명 id="{}" aria-labelleddby 속성의 함수명 tabpanel aria-expanded="true/false" 요소의 역할을 tabpanel로 정의하고, tabpanel이 열렸을 때 .. 2020. 7. 17.
다크 모드 코딩 방법 ( css : prefers-color-scheme ) https://developer.mozilla.org/ko/docs/Web/CSS/@media/prefers-color-scheme //light 모드@media( prefers-color-scheme: light ){ } //dark 모드@media( prefers-color-scheme: dark ){ } 2020. 3. 9.
크롬에서 filter blur 이슈 관련 https://stackoverflow.com/questions/47914821/image-moves-on-hover-when-changing-filter-in-chrome 2018. 3. 22.
[css] placeholder color 변경 ::-webkit-input-placeholder{font-size:17px;color:#666}::-moz-placeholder{font-size:17px;color:#666;opacity:1}::-ms-input-placeholder{font-size:17px;color:#666} 2017. 7. 21.
[js] 키워드, 예약어 * ES5 스펙 키워드 break, case, catch, continue, debugger, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with * ES3 예약어 abstract, boolean, byte, char, class, const, debugger, double, enum, export, extends, final, float, goto, implements, import, int, interface, long, native, package, private, protected, public, s.. 2017. 6. 18.
[서브라임텍스트] encodinghelper 서브라임텍스트에서 파일 인코딩을 표시하고 싶어서 찾아봤더니 encodinghelper라는 패키지를 설치해서 인코딩을 확인한다는 글들이 나옴. 하지만 해당 패키지는 이미 삭제되어 찾을 수 없었다. ㅠㅠ https://packagecontrol.io/packages/EncodingHelper 하지만 파일 변환이 아닌 파일인코딩을 보는 것이 목적이었기 때문에, 아래에서 찾은 것처럼 "Preferences > Settings - Users"에서 아래 코드를 작성해서 간단히 적용할 수 있었다. "show_encoding" : true, http://stackoverflow.com/questions/21289157/set-encoding-of-file-to-utf8-with-bom-in-sublime-text-3 2017. 2. 2.
[tweenmax]트윈맥스 라이브러리 라이선스 http://greensock.com/licensing/ * standard (ok), business (ok)Usage in 100% free apps, games, sites, and other software even if you charge a fee to develop these products100 % 무료 응용 프로그램, 게임, 사이트 및 기타 소프트웨어의 사용은이 제품을 개발하기 위해 비용을 청구하는 경우This includes advertising, internal sites and tools, promotional web sites, free software, and pretty much everything that isn't sold to multiple end users.이것은 광고.. 2016. 10. 11.
728x90
반응형