접근성 접근성은 여기 dev에서와 같이 우리가 개발하는 앱이 모든 사람이 사용할 수 있기를 원합니다.

갈고리를 가진 사람들, 나무 지체, 눈에서 레이저를 쏘거나 아직 Jerry를 잡지 못했습니다. 그들은 모두 dev.to에서 배운 모든 훌륭한 기술로 구축한 멋진 새 앱에 액세스하기를 원합니다.

오늘 저는 모든 사람들이 귀하의 사이트를 사용하고 소속감을 느낄 수 있도록 도움을 주기 위해 최근에 알게 된 모듈을 소개하고자 합니다. 거꾸로 서거나 마음을 읽는다면.

내가 지금 매우 흥분하는 도구는 도끼 코어입니다. 모든 사람이 귀하의 플랫폼에서 환영받는다는 것을 보여주기 위해 귀하가 할 수 있는 일에 대해 사용하기 쉽고 직접적인 피드백을 제공합니다.

내 블로그는 색상과 큰 글꼴의 대조가 매우 훌륭하고 좋습니다. 기사는 태그에 싸여 있습니다. 그러나 나는 다른 것을 배워야 했다. 몇 가지 문제가 있습니다. 그리고 모든 사람이 내 페이지에 더 쉽게 액세스할 수 있도록 노력하겠습니다. 비록 그가 미니언들이 그에게 내 페이지를 읽게 놔두더라도.

axe-core를 사용하여 사이트를 분석하면 중요한 문제 목록을 얻을 수 있으며, 이로 인해 한 방문자 또는 다른 방문자가 귀하의 콘텐츠를 즐기는 데 방해가 될 수 있습니다.

Axe-core는 좋은 사람들을 방해할 수 있는 모든 작은 불편함을 찾는 데 도움을 줄 뿐만 아니라 자체적으로 모든 프로그래머가 액세스할 수 있는 매우 깨끗한 API와 명령줄 도구를 가지고 있습니다.
클라이언트 사이트의 사이트 내부에서 실행하고 브라우저의 JavaScript 콘솔에서 결과를 얻을 수 있습니다. 이 모듈은 다양한 프레임워크와 잘 작동하며 예를 들어 반응용 통합을 제공합니다.

자바스크립트 도구에 이러한 통합을 통해 전체 제품 개발 주기에서 접근성을 주시하고 나중에 고려하여 접근성을 개선하지 않도록 할 수 있습니다.

내 블로그는 정적 사이트이므로 cli 도구를 사용하여 간단하게 테스트했습니다. 먼저 npm install -g axe-cli 로 설치하고 다음과 같이 사이트를 테스트하십시오: axe http://tnickel.de/ .

이 도구는 엔지니어에게 유용할 뿐만 아니라 관리에도 좋습니다. 아시다시피 경영진은 숫자를 좋아하기 때문입니다. axe를 사용하면 접근성 문제에 대한 단일 번호를 얻을 수 있으며 번호를 낮추고 접근성을 높이는 작업을 할 수 있습니다.

이제 귀하의 소중한 콘텐츠에 대한 접근성을 개선하지 않을 변명의 여지가 없습니다.

API

뭐? 당신은 여전히 ​​당신의 프로젝트와 함께 그것을 사용하는 방법의 예를 볼 필요가 있습니까? HTML에 일부 스크립트 태그를 추가하여 사용하는 것은 어떻습니까?

<script src="node_modules/axe-core/axe.min.js"></script>
<script>

var lastViolations = '';
setInterval(() => {
    axe.run().then(({ violations }) => {
       const violationData = JSON.stringify(violations);
        if (violations.length && violationData !== lastViolation) {
           lastViolation = violationData;
            console.log(violations);
        }
    }).catch(err => {
        console.error('some issue with axe:', err);
    });
}, 10000);
</script>

예, 이 코드는 효율적일 필요가 없습니다. 사용자 장치가 아닌 개발 중에만 사이트에서 실행됩니다. 구성 요소가 업데이트된 후 redux 저장소가 업데이트를 전달한 후 ax를 프레임워크에 더 잘 통합할 수 있습니다.

개발 중에 지속적으로 실행되는 어딘가에 추가하기만 하면 됩니다. 그러면 사이트를 개선하는 방법과 팁을 항상 볼 수 있습니다. 글을 읽지 못하는 대통령도 당신의 기사를 이해할 수 있다는 것을 알고 있습니다.