Angular SPA에 액세스 가능하게 만들기

Angular 프로젝트에서 "주 콘텐츠로 건너뛰기"(Bypass Block) 링크 구현

시각 장애가 있는 사용자를 돕기 위해 프로젝트에서 구축할 수 있는 가장 중요한 링크 중 하나는 "주 콘텐츠로 건너뛰기"링크를 구현하는 것입니다.

"메인 콘텐츠로 건너뛰기" 링크는 무엇입니까

일반 키보드 사용자라면 확실히 이 링크를 사용하고 좋아할 것입니다. 다음은 제가 실제로 이야기하고 있는 내용의 스크린샷입니다.



이 화면을 직접 보려면 검색 키를 입력하고 Enter 키를 누르세요. 그런 다음 탭 키를 누릅니다. '메인 콘텐츠로 건너뛰기' 링크가 표시됩니다.

이 링크의 주요 목적은 키보드 사용자와 시각 장애가 있는 사용자가 맨 위에 있는 모든 링크를 탭하는 대신 기본 콘텐츠로 이동할 수 있도록 돕는 것입니다. 이 시나리오에서 사용자는 검색 상자, 검색 상자 주위의 아이콘, 그 아래에 있는 모든 링크("전체", "이미지", "뉴스"등)를 처리할 필요가 없습니다. 대신 키보드가 검색 결과의 첫 번째 링크로 이동합니다.

이것은 다음과 같이 각도 프로젝트에서 구현할 수 있는 매우 귀중한 사용성 자산입니다. 자세한 내용은 이 항목에 대한 WCAG standards을 참조하십시오.

이 기능을 구현하기 위해 다양한 접근 방식을 취할 수 있습니다. 여기서는 사용할 수 있는 이러한 접근 방식 중 하나를 보여 드리겠습니다.

1단계, 앵커 스크롤링을 활성화합니다.

먼저 app-routing.module.ts에 이 블록을 추가하여 각도 프로젝트에서 앵커 태그를 활성화합니다.

RouterModule.forRoot(routes, {
    anchorScrolling: 'enabled',
  })

2단계, 링크.

구성 요소 위에 간단한 링크를 구현하십시오. 대부분의 경우 app.component.html 파일에 있습니다. 이런 식으로 될 것입니다.

<a class="nav-link" [routerLink]="[currentUrl]" [fragment]="'main'" >Skip to Main Content </a>

이 간단한 앵커 링크의 [routerLink] 부분은 나중에 설명하겠습니다. 그러나 [fragment]는 '#main'의 div가 있는 section 또는 id가 있는 것을 고려하여 추가될 URL의 main 부분입니다.

3단계, 라우터 이벤트를 구독합니다.

사용자가 다른 페이지와 구성 요소를 클릭하고 탐색할 때마다 URL이 변경됩니다. 우리의 임무는 이 이벤트를 구독하여 이러한 변화를 듣는 것입니다. 이렇게 하면 항상 현재 URL을 알 수 있고 위에 표시된 링크의 [routerLink] 값으로 추가할 수 있습니다. 앱 구성 요소의 생성자에서 이 작업을 수행할 수 있습니다.

currentUrl: any = ''
constructor(router: Router) {
    router.events.subscribe((e) => {
      if (e instanceof NavigationEnd) {
        if (e.url != '') {
          this.currentUrl = e.url;
        } else {
          this.currentUrl ='';
        }
      }
    });
  }

참고: 다음과 같이 이 클래스 위에 @angular/router에서 Router 및 NavigationEnd를 가져와야 합니다.

import { Router, NavigationEnd, NavigationStart } from "@angular/router";

마지막으로 4단계인 메인 섹션입니다.

마지막으로, 사용자가 링크를 클릭하고 section가 있는 동일한 URL로 리디렉션될 때 id가 div인 main의 #main가 있는지 확인하고 앱이 해당 URL로 이동합니다.