a11y Chrome에서 a11y를 확인하는 방법 a11y (액세서빌러티)는 항상 체크하지 않으면 곧 떨어집니다. 언제든지 Google 크롬 디버깅 도구를 사용하여 확인하세요. 디버깅 도구 Audits 사용 여기는 SP 페이지에서만 실행할 수 있습니다. 디버그 툴에 나오지 않았다면, 디버깅 도구를 연 상태에서 Command + Shift + P그러면 검색이 나오므로 show audits 이번에는 a11y를 살펴보고 싶기 때문에 Accessi... 디버깅a11yaccessibility웹 A11y 잠금 해제: 스크린 리더 자동화 테스트 지난 1년 동안 스크린 리더 자동화라는 주제에 대한 마지막 게시물 이후 표준 및 도구의 발전으로 인해 우리는 이제 더 나은 위치에 있습니다. 이 일련의 사양, 테스트 표준 및 테스트 자동화를 구축함으로써 스크린 리더 상호 운용성을 개선하여 스크린 리더 에코시스템을 최고 수준의 도구로 발전시키려는 사명을 가지고 결성된 것을 보게 되어 기쁩니다. 표준 커뮤니티가 장기 목표를 향해 천천히 작업하는... a11ywebdevjavascriptnode 그리드 항목에 대한 사용자 정의 키보드 탐색 생성 인터넷 검색을 할 때 정확한 해결책을 찾지 못했기 때문에 여기에 내가 배운 것을 설명하는 기사가 있습니다. 우리가 만들고 있는 것을 볼 수 있습니다. 저장소를 복제하거나 전체 파일을 다운로드할 수 있습니다. 항목에 필요한 모든 데이터는 파일items.json에 있습니다. 그것들을 App로 가져와 각각을 반복할 수 있습니다. 현재 우리는 각 항목에 대해 동일한 텍스트만 표시합니다. 이미지와 확... a11yreacttypescript 버튼 태그가 궁금한 경우 CSS 및 JavaScript 의 세계에서 개발자는 모든 HTML 태그를 만들 수 있습니다. 위의 이미지에서 어떤 버튼이 실제로 html 태그button를 사용하고 있는지 확인할 수 있습니까? CSS 및 JavaScript의 힘을 볼 수 있습니다. span , a , div 를 button 처럼 보이게 만들 수 있습니다. 접근성을 수정할 수 있습니까? 역할<button>Click here</... tutoriala11ywebwebdev ARIA HTML 향상의 파괴적인 측면 이 코드 시스템은 보조 기술 사용자의 사용자 경험을 향상시키고 HTML이 부족한 곳에 의미를 추가하기 위해 만들어졌습니다. 그러나 제대로 구현되지 않으면 사용자 경험을 완전히 완전히 파괴할 수도 있습니다. 그러나 aria-label 속성의 값은 액세스 가능한 이름을 제공하는 요소 내의 기본 텍스트를 완전히 파괴합니다. 사용자 기대치가 다른 두 가지 완전히 다른 경험. 개발자는 활성화될 때 새... htmlwebdeva11y 🤷♂️ W1y d2s a11y h2e 그렇게 b4y c9d a1d i10e? 👿 오늘 짧고 간단한 게시물을 통해 사람들이 내 질문에 대한 의견에 동의하는지 동의하지 않는지 알고 싶습니다. 제 말은 접근성(장애인이 최종 제품을 사용할 수 있도록 보장하는 것)이 실제로 그렇게 어렵지 않다는 뜻입니다. 관행을 설명하기 위해 가능한 가장 접근하기 어려운 방법을 사용하는 것(단순한 "접근성"대신 a11y)과 을 이해하려는 끔찍한 작업 사이에서 우리는 왜 그렇게 어렵게 만듭니까? ... watercoolera11ycodenewbiediscuss 접근성(A11y) 왜 그렇게 중요한가요?🧵 "a11y"🤔가 무엇인가요? A11y - 접근성 왜 "a11y"라고 쓰나요? 문자 "a"와 "y"사이에 11개의 다른 문자가 있기 때문입니다 :) 분명히 당신은 느린 페이지 로딩, 읽을 수 없는 글꼴, 잘못되고 이상한 탐색, 흐릿하고 겹치는 색상, 보기에 좋지 않고 모바일 장치에서 작동하지 않는 페이지의 성가심을 경험한 적이 있을 것입니다. 이러한 문제는 우리에게는 사소한 불편일 수 있지만 ... beginnersa11ydiscusswebdev A11Y 101: Semantic HTML이 항상 승리합니다. 이것은 기술 문서라기보다는 설명에 가깝고 시맨틱 HTML이 항상 승리하는 이유를 설명합니다. 시맨틱 HTML과 비시맨틱 HTML의 주요 차이점은 시맨틱이 코딩을 설명하는 방식이라는 것입니다. 인수에서 접근성을 제외하더라도 시맨틱 HTML을 학습하는 데 시간과 노력을 집중하고 투자하는 것이 좋습니다. 브라우저는 이러한 차이를 가로채고 인쇄 스타일을 생각하고 스타일을 읽을 수 있습니다 가 웹 사... beginnersa11ywebdev Zephyr, 웹 블루투스 및 접근성 동글에서 실행되는 간단한 펌웨어 가 BLE에 연결된 전화/태블릿의 모든 컴퓨터에서 저렴하고 쉽게 사용자 지정되는 USB 마우스 컨트롤을 제공할 수 있는 방법을 살펴보겠습니다. 참고: 이 게시물에서는 펌웨어(C 사용) 및 웹 애플리케이션(JavaScript 사용)의 주요 부분에 대한 개요만 살펴보겠습니다. 서비스에 정의된 특성은 속성이 연결된 '변수'로 볼 수 있으며, 이를 통해 읽기, 쓰기 ... nrf52840a11ywebbluetoothzephyr A11Y 101: 다중 링크가 있는 접근 가능한 카드 이미지에서 전체 카드를 볼 수 있습니다. 그리고 그 아래에는 링크가 포함된 제목이 있습니다. 그 아래에는 링크일 필요가 없는 일반적인 게시물 정보가 있습니다. 스크린 리더는 해당 이미지 대체 텍스트를 읽고 사용자는 다른 곳으로 이동할 것으로 예상할 수 있습니다. 그리고 솔직히 이것을 하는 방법은 여러 가지가 있습니다. 이런 식으로 두 개의 링크를 유지하지만 이미지의 tab index를 -1로... beginnersa11ywebdev A11Y 101: 양식 레이블 누락 양식으로 작업할 때 항상 레이블을 설명하는 양식 레이블을 사용하도록 선택해야 합니다. 두 예제에서 공통적으로 볼 수 있는 것은 하나의 필드와 버튼이 있는 양식입니다. 종종 양식이 무엇을 위한 것인지, 사용자에게 기대되는 것이 무엇인지 충분히 명확할 수 있습니다. 내 예제에서 시각적 독자를 위해 자리 표시자를 설명합니다. 그러나 시각 장애인을 위한 이 양식이 무엇인지 명확하지 않을 수 있습니다... beginnersa11ywebdev SwiftUI에서 사용자 지정 글꼴로 굵은 텍스트 지원 접근성을 위해 빌드할 때 염두에 두어야 할 기본 설정이 많이 있습니다! Bold Text 기본 설정을 입력하십시오. 이 설정은 더 나은 가독성을 보장하기 위해 모든 텍스트의 가중치를 증가시키는 iOS 설정입니다. 사용자가 Bold Text 기본 설정을 활성화하면 사용자 인터페이스의 모든 항목이 가독성을 높이기 위해 더 굵게 표시됩니다. 일반 텍스트는 약간 굵게, 약간 굵은 텍스트는 굵게, 굵... a11yswiftiosswiftui UX&A11y에 대한 짧은 8월 개발자 팁 3개 여러분! 전정 장애가 있는 사람들을 위한 애니메이션 제작, 양식 유효성 검사 시 UX 개선, 스크린 리더 검색 코딩에 대해 이야기하고 싶습니다. 당신은 무엇을 만들지 알고 있습니다 😎 저는 그들의 지원 없이 이 글을 쓰지 않았습니다. 애니메이션이 현기증, 메스꺼움 및 두통을 유발할 수 있다는 것을 알고 계셨습니까? WCAG 2.2에는 섹션 2.3.3이 있습니다. 전정 장애가 있는 사용자가 모... htmla11ycsswebdev 키보드 테스트: 완료의 정의에 대한 A11y 향상 팀이 웹 콘텐츠를 빠른 속도로 공개하는 데 매우 집중하고 있기 때문에 접근성 테스트는 일반적으로 콘텐츠가 프로덕션에 출시된 후에 수행됩니다. 이러한 도구를 사용하면 개발 팀이 개발할 때 콘텐츠의 접근성을 확인할 수 있으며 일상적인 민첩한 프로세스 속도가 느려지지 않습니다. 팀은 axe-core와 같은 자동화 라이브러리를 사용하거나 접근성 규칙이 포함된 린터를 사용하거나 완전히 렌더링된 콘텐츠... a11ytestingwebdevhtml A11Y 101: 와이아리아 이 접근성 여정을 파헤치는 동안 이라는 말을 몇 번 들었을 것입니다. 이러한 종류의 요소는 항상 약간의 마크업이 있는 일반 div로 설명되었습니다. 따라서 WAI-ARIA가 살아납니다. 추가 시맨틱을 제공하는 데 사용할 수 있는 속성 집합을 정의하는 W3C에서 작성한 사양입니다. 역할: role="value"를 사용하여 정의할 수 있습니다. 속성: 예를 들어 요소에 추가 의미 부여: aria... webdevbeginnersa11y A11Y 101: WAI-ARIA 상태 이제 가능한 모든 ARIA 속성을 살펴보았으므로 모든 상태에 대해 동일한 작업을 수행해 보겠습니다. 요소가 있는 현재 상태를 추가하기 위해 상태가 있다는 것을 기억하는 것이 좋습니다. aria-checked: 이 상태를 가질 수 있는 입력 필드의 현재 선택된 상태를 나타냅니다 aria-disabled: 요소가 현재 비활성화된 경우 설명됨 aria-expanded: 요소가 확장되었는지 또는 축... webdevbeginnersa11y
Chrome에서 a11y를 확인하는 방법 a11y (액세서빌러티)는 항상 체크하지 않으면 곧 떨어집니다. 언제든지 Google 크롬 디버깅 도구를 사용하여 확인하세요. 디버깅 도구 Audits 사용 여기는 SP 페이지에서만 실행할 수 있습니다. 디버그 툴에 나오지 않았다면, 디버깅 도구를 연 상태에서 Command + Shift + P그러면 검색이 나오므로 show audits 이번에는 a11y를 살펴보고 싶기 때문에 Accessi... 디버깅a11yaccessibility웹 A11y 잠금 해제: 스크린 리더 자동화 테스트 지난 1년 동안 스크린 리더 자동화라는 주제에 대한 마지막 게시물 이후 표준 및 도구의 발전으로 인해 우리는 이제 더 나은 위치에 있습니다. 이 일련의 사양, 테스트 표준 및 테스트 자동화를 구축함으로써 스크린 리더 상호 운용성을 개선하여 스크린 리더 에코시스템을 최고 수준의 도구로 발전시키려는 사명을 가지고 결성된 것을 보게 되어 기쁩니다. 표준 커뮤니티가 장기 목표를 향해 천천히 작업하는... a11ywebdevjavascriptnode 그리드 항목에 대한 사용자 정의 키보드 탐색 생성 인터넷 검색을 할 때 정확한 해결책을 찾지 못했기 때문에 여기에 내가 배운 것을 설명하는 기사가 있습니다. 우리가 만들고 있는 것을 볼 수 있습니다. 저장소를 복제하거나 전체 파일을 다운로드할 수 있습니다. 항목에 필요한 모든 데이터는 파일items.json에 있습니다. 그것들을 App로 가져와 각각을 반복할 수 있습니다. 현재 우리는 각 항목에 대해 동일한 텍스트만 표시합니다. 이미지와 확... a11yreacttypescript 버튼 태그가 궁금한 경우 CSS 및 JavaScript 의 세계에서 개발자는 모든 HTML 태그를 만들 수 있습니다. 위의 이미지에서 어떤 버튼이 실제로 html 태그button를 사용하고 있는지 확인할 수 있습니까? CSS 및 JavaScript의 힘을 볼 수 있습니다. span , a , div 를 button 처럼 보이게 만들 수 있습니다. 접근성을 수정할 수 있습니까? 역할<button>Click here</... tutoriala11ywebwebdev ARIA HTML 향상의 파괴적인 측면 이 코드 시스템은 보조 기술 사용자의 사용자 경험을 향상시키고 HTML이 부족한 곳에 의미를 추가하기 위해 만들어졌습니다. 그러나 제대로 구현되지 않으면 사용자 경험을 완전히 완전히 파괴할 수도 있습니다. 그러나 aria-label 속성의 값은 액세스 가능한 이름을 제공하는 요소 내의 기본 텍스트를 완전히 파괴합니다. 사용자 기대치가 다른 두 가지 완전히 다른 경험. 개발자는 활성화될 때 새... htmlwebdeva11y 🤷♂️ W1y d2s a11y h2e 그렇게 b4y c9d a1d i10e? 👿 오늘 짧고 간단한 게시물을 통해 사람들이 내 질문에 대한 의견에 동의하는지 동의하지 않는지 알고 싶습니다. 제 말은 접근성(장애인이 최종 제품을 사용할 수 있도록 보장하는 것)이 실제로 그렇게 어렵지 않다는 뜻입니다. 관행을 설명하기 위해 가능한 가장 접근하기 어려운 방법을 사용하는 것(단순한 "접근성"대신 a11y)과 을 이해하려는 끔찍한 작업 사이에서 우리는 왜 그렇게 어렵게 만듭니까? ... watercoolera11ycodenewbiediscuss 접근성(A11y) 왜 그렇게 중요한가요?🧵 "a11y"🤔가 무엇인가요? A11y - 접근성 왜 "a11y"라고 쓰나요? 문자 "a"와 "y"사이에 11개의 다른 문자가 있기 때문입니다 :) 분명히 당신은 느린 페이지 로딩, 읽을 수 없는 글꼴, 잘못되고 이상한 탐색, 흐릿하고 겹치는 색상, 보기에 좋지 않고 모바일 장치에서 작동하지 않는 페이지의 성가심을 경험한 적이 있을 것입니다. 이러한 문제는 우리에게는 사소한 불편일 수 있지만 ... beginnersa11ydiscusswebdev A11Y 101: Semantic HTML이 항상 승리합니다. 이것은 기술 문서라기보다는 설명에 가깝고 시맨틱 HTML이 항상 승리하는 이유를 설명합니다. 시맨틱 HTML과 비시맨틱 HTML의 주요 차이점은 시맨틱이 코딩을 설명하는 방식이라는 것입니다. 인수에서 접근성을 제외하더라도 시맨틱 HTML을 학습하는 데 시간과 노력을 집중하고 투자하는 것이 좋습니다. 브라우저는 이러한 차이를 가로채고 인쇄 스타일을 생각하고 스타일을 읽을 수 있습니다 가 웹 사... beginnersa11ywebdev Zephyr, 웹 블루투스 및 접근성 동글에서 실행되는 간단한 펌웨어 가 BLE에 연결된 전화/태블릿의 모든 컴퓨터에서 저렴하고 쉽게 사용자 지정되는 USB 마우스 컨트롤을 제공할 수 있는 방법을 살펴보겠습니다. 참고: 이 게시물에서는 펌웨어(C 사용) 및 웹 애플리케이션(JavaScript 사용)의 주요 부분에 대한 개요만 살펴보겠습니다. 서비스에 정의된 특성은 속성이 연결된 '변수'로 볼 수 있으며, 이를 통해 읽기, 쓰기 ... nrf52840a11ywebbluetoothzephyr A11Y 101: 다중 링크가 있는 접근 가능한 카드 이미지에서 전체 카드를 볼 수 있습니다. 그리고 그 아래에는 링크가 포함된 제목이 있습니다. 그 아래에는 링크일 필요가 없는 일반적인 게시물 정보가 있습니다. 스크린 리더는 해당 이미지 대체 텍스트를 읽고 사용자는 다른 곳으로 이동할 것으로 예상할 수 있습니다. 그리고 솔직히 이것을 하는 방법은 여러 가지가 있습니다. 이런 식으로 두 개의 링크를 유지하지만 이미지의 tab index를 -1로... beginnersa11ywebdev A11Y 101: 양식 레이블 누락 양식으로 작업할 때 항상 레이블을 설명하는 양식 레이블을 사용하도록 선택해야 합니다. 두 예제에서 공통적으로 볼 수 있는 것은 하나의 필드와 버튼이 있는 양식입니다. 종종 양식이 무엇을 위한 것인지, 사용자에게 기대되는 것이 무엇인지 충분히 명확할 수 있습니다. 내 예제에서 시각적 독자를 위해 자리 표시자를 설명합니다. 그러나 시각 장애인을 위한 이 양식이 무엇인지 명확하지 않을 수 있습니다... beginnersa11ywebdev SwiftUI에서 사용자 지정 글꼴로 굵은 텍스트 지원 접근성을 위해 빌드할 때 염두에 두어야 할 기본 설정이 많이 있습니다! Bold Text 기본 설정을 입력하십시오. 이 설정은 더 나은 가독성을 보장하기 위해 모든 텍스트의 가중치를 증가시키는 iOS 설정입니다. 사용자가 Bold Text 기본 설정을 활성화하면 사용자 인터페이스의 모든 항목이 가독성을 높이기 위해 더 굵게 표시됩니다. 일반 텍스트는 약간 굵게, 약간 굵은 텍스트는 굵게, 굵... a11yswiftiosswiftui UX&A11y에 대한 짧은 8월 개발자 팁 3개 여러분! 전정 장애가 있는 사람들을 위한 애니메이션 제작, 양식 유효성 검사 시 UX 개선, 스크린 리더 검색 코딩에 대해 이야기하고 싶습니다. 당신은 무엇을 만들지 알고 있습니다 😎 저는 그들의 지원 없이 이 글을 쓰지 않았습니다. 애니메이션이 현기증, 메스꺼움 및 두통을 유발할 수 있다는 것을 알고 계셨습니까? WCAG 2.2에는 섹션 2.3.3이 있습니다. 전정 장애가 있는 사용자가 모... htmla11ycsswebdev 키보드 테스트: 완료의 정의에 대한 A11y 향상 팀이 웹 콘텐츠를 빠른 속도로 공개하는 데 매우 집중하고 있기 때문에 접근성 테스트는 일반적으로 콘텐츠가 프로덕션에 출시된 후에 수행됩니다. 이러한 도구를 사용하면 개발 팀이 개발할 때 콘텐츠의 접근성을 확인할 수 있으며 일상적인 민첩한 프로세스 속도가 느려지지 않습니다. 팀은 axe-core와 같은 자동화 라이브러리를 사용하거나 접근성 규칙이 포함된 린터를 사용하거나 완전히 렌더링된 콘텐츠... a11ytestingwebdevhtml A11Y 101: 와이아리아 이 접근성 여정을 파헤치는 동안 이라는 말을 몇 번 들었을 것입니다. 이러한 종류의 요소는 항상 약간의 마크업이 있는 일반 div로 설명되었습니다. 따라서 WAI-ARIA가 살아납니다. 추가 시맨틱을 제공하는 데 사용할 수 있는 속성 집합을 정의하는 W3C에서 작성한 사양입니다. 역할: role="value"를 사용하여 정의할 수 있습니다. 속성: 예를 들어 요소에 추가 의미 부여: aria... webdevbeginnersa11y A11Y 101: WAI-ARIA 상태 이제 가능한 모든 ARIA 속성을 살펴보았으므로 모든 상태에 대해 동일한 작업을 수행해 보겠습니다. 요소가 있는 현재 상태를 추가하기 위해 상태가 있다는 것을 기억하는 것이 좋습니다. aria-checked: 이 상태를 가질 수 있는 입력 필드의 현재 선택된 상태를 나타냅니다 aria-disabled: 요소가 현재 비활성화된 경우 설명됨 aria-expanded: 요소가 확장되었는지 또는 축... webdevbeginnersa11y