본문 바로가기

전체 글373

[WAI-ARIA] multi form 기본 컨트롤이 아닌 커스텀 컴포넌트 등을 사용하는 경우와 같이 과 요소를 사용하지 못하는 경우가 발생할 수 있는데, 이러한 경우 WAI-ARIA의 group 역할(role)을 사용하면 과 동등한 의미를 전달할 수 있고, 여기에 aria-labelledby 속성을 사용함으로 요소가 가지는 의미 또한 전달이 가능해진다. 물론 당연히 HTML의 기본 요소 과 를 사용하는 것이 항상 우선이다. WAI-ARIA의 적용은 이것이 불가할 경우에 대한 차선책으로 선택할 수 있는 보조 기술이다. 요소 역할 속성/상태 설명 div group 폼에 공통적인 레이블을 참조할 수 있는 필드의 논리적 집합을 그룹핑 div aria-labelledby 그룹의 레이블에 해당하는 요소의 ID를 설정 DOCTYPE html> multi.. 2020. 7. 20.
[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.
728x90
반응형

티스토리툴바