5 성 등급 평가 시스템에 접근할 수 있는 사용자 인터페이스 만들기

만약 당신이 인터넷 쇼핑센터에서 쇼핑을 하고 당신이 구매한 상품에 대한 평론을 남겨 달라는 요청을 받았다면, 당신은 자주 5성급 등급 평가 시스템을 만나게 될 것이다.이것은 매우 직관적이고 이해하기 쉽다. 우리는 모든 점수의 의미를 쉽게 가설할 수 있으며, 어떠한 해명도 필요 없다.
저는 현재 PHP, HTML, CSS, 그리고 일부 자바스크립트를 사용하여 쇼핑센터를 만들고 있습니다. 저는 이 쇼핑센터에 접근할 수 있는 UI를 구축하는 데 도전하기로 결정했습니다.
이 예에서는 일반 HTML, JavaScript 및 CSS를 사용하여 부트합니다.
부트에 익숙하지 않은 경우 this documentation!
만약 당신이 CSS에 대해 잘 이해한다면 어떤 종류가 당신이 일하는 정확한 선택인지 알게 될 것입니다. 이것은 실제적으로 미리 설정된 CSS 종류를 사용하는 시간을 줄일 것입니다.
자, 우리 시작합시다.
우선, 나는 보통 HTML 문서를 만드는 것부터 시작한다.
아래의 예시 형식과 완성된 작업을 볼 수 있습니다.


간단한 완두콩 레몬 짜기!
CSS를 위해 Bootstrap을 선택할 때, 나는 그것들의 용도에 따라 모든 종류를 추가했다.우리의 목표는 접근 가능한 사용자 인터페이스를 만드는 것이기 때문에 HTML 문서의 의미를 개선하기 위해 WAI-ARIA 속성, 예를 들어 role, aria-label와 aria-checked를 추가했습니다.
나는 오랫동안 곰곰이 생각해서 role="radiogroup" 모든 아이콘과 닻을 포함하는 포장기div를 사용하기로 결정했다.모든 닻이 사실상 선택 단추처럼 작동하기 때문에 모든 닻이 검사되었거나 검사되지 않았음을 사용자에게 알려야 한다. 따라서 나는 이것이 본 사례의 가장 좋은 해결 방안이 될 것이라고 결론을 내렸다.
JavaScript에서 동적으로 추가한 다음 사용자가 선택하기 때문에 같은 값aria-label을 비워 둡니다.나는 각 닻점에 대해 정의를 내렸다div.보조 장치가 자신들이 무엇인지를 알게 하고, 사용자가 자신들에게 무엇을 해야 하는지 가정할 수 있기 때문에, 이것은 장애 사용자들에게 도움이 될 것이다.그 밖에 각 닻이 role="radio"과 그에 상응하는 값을 포함할 때 이러한 속성은 더욱 의미가 있다.나는 이미 Mac에서 Voice Over로 테스트를 진행했는데, 내가 닻 주위를 이동할 때마다, 그것은 aria-label 과 aria-label 의 값을 읽는다.위대하다!!!
마지막으로 JavaScript에 대해 살펴보겠습니다.

(function (win, doc){
    const rating = {
        init : function () {
            this.rating();
        },
        rating: function() {
            const stars = doc.querySelectorAll('.rating');
            const starArray = Array.from(stars);
            const role = doc.querySelector('div[role]');
            let totalRate = 0;

            stars.forEach((el, i) => {
                el.addEventListener('keypress', (e) => {
                    const { key, target } = e;
                    if (key === 'Enter') interaction(i);
                });

                el.addEventListener('click', (e) => {
                    e.preventDefault();
                    interaction(i);
                });
            });

        function interaction(i) {
            starArray.forEach((el, j) => {
                const star = el.firstElementChild;

                if (i === j) {
                    if (star.classList.contains('bi-star')){
                        star.classList.remove('bi-star');
                        star.classList.add('bi-star-fill');
                        star.parentElement.setAttribute('aria-checked', true);
                        totalRate++;
                    } else {
                        star.classList.remove('bi-star-fill');
                        star.classList.add('bi-star');
                        star.parentElement.setAttribute('aria-checked', false);
                        totalRate--;
                    }
                } else if (i > j){
                    if (star.classList.contains('bi-star')){
                        star.classList.remove('bi-star');
                        star.classList.add('bi-star-fill');
                        star.parentElement.setAttribute('aria-checked', true);
                        totalRate++;
                    }
                } else if (i < j){
                    if (star.classList.contains('bi-star-fill')) {
                        star.classList.remove('bi-star-fill');
                        star.classList.add('bi-star');
                        star.parentElement.setAttribute('aria-checked', false);
                        totalRate--;
                    }
                }
            });

            role.setAttribute('aria-label', `Your rating is ${totalRate}`);
        }
    }
}
    rating.init();
})(window, document);

모듈 바인딩기를 사용하는 경우 케이스와 iLife를 사용할 필요가 없습니다.모듈 바인딩기를 사용하지 않았기 때문에, 이 기술을 실현하는 것은 다른 자바스크립트 세션에 전역 변수 오염을 초래하는 것을 피하기 위해서입니다.
보시다시피 두 가지 유형의 이벤트 탐지기가 있습니다. role 이벤트는 마우스/터치보드를 사용하는 사용자에게 적용되고, click 이벤트는 키보드를 주로 사용하는 사용자에게 적용됩니다.
나는 필요할 때 쉽게 인용할 수 있도록 코드 블록의 맨 위에 모든 변수를 만들었다.우리는 사용자의 상호작용에 따라 어떤 HTML 요소가 필요한지 알고 있다.우선 모든 아나운서는 라디오 버튼처럼 일한다.

const stars = doc.querySelectorAll('.rating');
const starArray = Array.from(stars);

variable stars는 노드 목록이기 때문에, 나는 방법array를 사용하여 그것을 그룹으로 변환합니다.from().만약 당신이 왜 이렇게 해야 하는지 확실하지 않다면, 제가 신속하게 당신을 위해 총결산을 하겠습니다.keypress는 JavaScript API의 일부가 아닙니다.브라우저(문서) API의 일부로서 DOM 요소에 액세스할 수 있습니다.문제는 그 이름에 목록이 포함되어 있어도, 그것은 그룹이 아니라 노드의 집합이다.정말 사람을 곤혹스럽게 한다!배열 방법을 사용하여 DOM 요소를 조작하려면 먼저 document.querySelectorAll()를 배열로 변환해야 합니다.그리고 하나 더!내 코드 세션에서 노드 목록 nodelist 이forEach로 교체된 것을 볼 수 있습니다.여기서 stars와 NodeList.forEach() 방법을 혼동하지 마세요!실제로 JavaScript API는 아니며 문서와 상호 작용할 수 있도록 다른 언어로 볼 수 있습니다.나는 이것이 너의 곤혹을 규명할 수 있기를 바란다.
전체 코드 세션은 기본적으로 모든 닻 요소에 이벤트 탐지기를 추가하고 사용자의 입력 장치에 따라 정확한 이벤트 유형에서 나머지 코드를 실행합니다.코드의 중복을 줄이기 위해서, 나는 코드를 forEach 방법에 포장했다.만약 내가 이렇게 하지 않았다면, 나는 모든 닻 요소를 위해 같은 이벤트 탐지기를 만들어야 한다. 즉, 모든 이벤트 유형은 모두 5번 만들어야 한다.이런 방식을 통해 우리는 팀을 위해 더욱 읽을 수 있는 코드를 제공할 수 있고 더욱 효율적으로 일할 수 있다.
코드의 재사용을 극대화하기 위해서, 나는 Array.forEach()라는 함수를 만들었다.
마우스든 키보드든 상호작용을 하든 그들의 작업 원리는 기본적으로 같다.나는 interaction 방법을 사용하여 모든 요소에서 같은 작업을 교체하고 나머지 코드는 내가 작성한 조건에 따라 forEach와bi-star 사이에서 클래스를 교환할 뿐이다.
내가 두 번 사용했듯이 bi-star-fill와 ForEach 두 가지 색인 유형이 있다.i index는 닻 요소의 인덱스를 나타낸다. 사용자는 그 중 5개 요소 중에서 이 요소를 눌렀다. j index는 삽입 순환에 사용되기 때문에 닻 요소를 눌렀을 때마다i index가 표시한 수조는 교체된다.예를 들어 j 문장은 사용자j 또는 if( i === j )가 같은 요소에서 여러 번 전환된 상황에서 중복 상호작용을 사용하기 위한 것이다. 즉, click 값도 서로 바꾸기keypress와 aria-checked 사이를 전환할 수 있다.마지막으로 사용자가 5성 등급 평가와 상호작용할 때마다true값도 상응하여 바뀐다.
구글 등대 보고서에 따르면 아무런 오류도 검출되지 않았고 모든 것이 순조롭게 진행되었고 아무런 오류도 없었다.하지만 제 일에 개선할 점이 있다는 것을 알아차리신다면 주저하지 말고 회답을 남겨주시고 토론을 해보도록 하세요!;-)나는 네가 이 강좌가 너의 일에 도움이 된다고 생각하기를 바란다. 만약 네가 이것을 좋아한다면, 평론을 남기고, 나의 댓글도 좋아해라.
표지 사진 작성자Bonneval Sebastien가 Unsplash