본문 바로가기

POST LIST381

[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.
싱가포르 여행 가볼만한 곳/ 먹어볼만한 곳 메모 [가볼만한 곳] 센토사섬 윙즈오브타임 유니버셜 스튜디오 나이트사파리 가든스 바이 더 베이 [먹어볼만한 것] 싱가폴 칠리크랩 야쿤가야 토스트 티챕터 2018. 4. 25.
크롬에서 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.
728x90
반응형