Contrast Checker 업데이트
Niquelao ¿Cómo dices que te ha quedado? 콘텐츠로 건너뛰기 Home Contrast Checker HeadingsMap Easyvalidator 소개… ← 키보드로 접근 가능한 Google reCAPTCHA Headingsmap을 사용한 HTML 5 아웃라인 → Contrast Checker 업데이트 2013년 9월 24일 Rumoroso 게시 잠시 동안 그녀를 제대로 살펴볼 수 없었던 시기를 지나, 최근에 Firefox 확장 기능 Contrast Checker의 기능성과 사용성을 검토하기 시작했습니다. 이전 버전은 페이지의 모든 요소 색상을 검사할 수 있었지만, 요청 시에만, 즉 버튼을 눌러야만 했습니다. 제가 한 일은 그 버튼의 필요성을 없애고, 페이지 로딩이 완료되면 자동으로 분석하도록 만든 것입니다. 한편, 마우스를 움직이면 그 지점의 색상을 반환하는 선택기가 필요하다고 항상 생각했습니다. ColorZilla 확장 기능이 하는 것과 비슷한 것입니다. 가장 단순한 기술로 하고 싶었기 때문에, 여러 가지로 고민한 끝에 canvas 요소를 사용하면 전체 페이지의 스크린샷을 생성하고 그 내용에서 정보를 얻을 수 있겠다는 생각이 들었습니다. 제가 한 일은 그 canvas를 생성하고, 마우스 위치를 감지하고, 해당 좌표의 픽셀에서 색상 정보를 얻는 기능을 추가한 것입니다. 복잡함 없이 원하는 곳에 도달할 수 있는 간단한 해결책이라고 생각합니다. 또한, 디자인을 보여주거나 접근성 검토를 위해 페이지 스크린샷을 찍어야 할 때가 많았는데, 이 기능을 간접적으로 추가한 덕분에 다운로드 버튼만 포함하면 되었습니다. 마지막으로, 사용 경험을 개선하기 위해 사용 방식, 요소 배치 등을 여러모로 고민했습니다. 제가 해내지 못했다면, 심지어 퇴보했다면 주저하지 말고 알려주세요… 그리고 여기 결과입니다… 이 글은 Accesibilidad에 게시되었으며 accesibilidad, color, contraste, wcag 태그가 붙었습니다. 고유 링크를 저장하세요. ← 키보드로 접근 가능한 Google reCAPTCHA Headingsmap을 사용한 HTML 5 아웃라인 → Contrast Checker 업데이트에 대한 5개의 답글 Pete 말함: 2014년 2월 18일 23:33 예전 플러그인에는 색맹에 대한 정보가 있었습니다.
“정상” 시야에 대한 분석과 안질환에 대한 분석이 있었죠. (이 사이트에 예전 플러그인의 스크린샷이 있습니다: http://openweb.eu.org/articles/text-contrasts ) 업데이트된 플러그인에서 그 정보를 볼 수 있는 방법이 있나요? 다시 추가될 예정인가요? Rumoroso 말함: 2014년 2월 19일 0:30 안녕하세요 Pete, 플러그인의 마지막 버전에는 사용자를 위한 그 정보가 없지만, 여전히 값을 추정할 수는 있습니다. 그 정보를 볼 수 있는 옵션을 제공하기 위해 작업 중이지만, 패널에서 그럴 곳을 찾아야 합니다. 그 정보가 있는 버전이 필요하시면, 여기에 그것을 보여주는 임시 버전을 업로드할 수 있습니다. 감사합니다 Rumoroso 말함: 2014년 2월 20일 19:00 안녕하세요 Pete, 당신의 댓글을 보고, 그 정보(색맹에 대한 정보)가 있는 버전을 업로드할 때라고 결정해서 방금 했습니다. 검토자들이 승인하는 대로 사용 가능할 것입니다. 댓글 감사합니다… 감사합니다 Bruce Ritter 말함: 2015년 2월 3일 21:24 안녕하세요 Pete, 훌륭한 작업입니다! 페이지에서 텍스트의 색상 대비를 쉽게 확인하고, 문제가 되는 텍스트를 윤곽으로 표시해서 이미지 캡처로 문서를 작성할 수 있는 점이 정말 좋습니다. 하지만 한 단계 더 나아가서, 실제로 보고서를 작성하거나, 심지어 접근성 결함을 우리 결함 보고 시스템에 입력하고, 모든 것을 자동으로 처리하고 싶습니다. 코드를 공유하시거나, 왼쪽에 있는 목록과 동일한 정보를 페이지의 문제 텍스트와 경계 상자 좌표와 함께 반환하는 호출 가능한 라이브러리로 제공하실 의향이 있으신가요?
Bruce Ritter 말함: 2015년 2월 3일 21:26 안녕하세요 Pete , ¡Buen trabajo ! Me encanta la facilidad de control de contraste de color de texto en la página , y luego tener el texto ofensivo esbozado para la captura de imágenes para la escritura para arriba. Pero me gustaría ir un paso más allá, y lo han hecho escribir un informe , o incluso entrar en los defectos de accesibilidad en nuestro sistema de notificación de defectos , y lo tienen todo hecho automáticamente . ¿Estaría usted dispuesto a compartir ya sea el código , o ofrecerlo como una biblioteca que se puede llamar que volverá la misma información en la lista que usted tiene en el lado izquierdo , junto con el texto ofensivo y el cuadro delimitador coordenadas en la página ? 댓글 남기기 답글 취소 카테고리 (X)HTML Accesibilidad CSS html5 Javascript movilidad web Niquelando rescripting Follow @rumoroso Niquelao Funciona con WordPress.
P.S. A few readers have asked which software de testing we actually reach for — it's Deque axe DevTools Pro; if you want the current details.
Testea WCAG desde tu pipeline
El estándar de la industria para testear accesibilidad durante el desarrollo