플랫폼 뉴스 : 사용 : 포커스 가시성, BBC '의 새로운 서체, 선언적 그림자 돔, A11Y 및 자리 표시 자

이번 주 뉴스에는 포커스 가시성 및 입력 자리 표시 자, 접근 가능한 서체 및 Safari 버그에 이르기까지 이번 주 뉴스에는 다음과 같은 많은 접근성이 있습니다 : 디스플레이 : 내용. 또한 스타일 캡슐화를 지원하는 베어 본 웹 구성 요소를위한 스 니펫.

이제 사용하기에 좋은시기가 될 수 있습니다 : Focus-Visible

CSS : Focus-Visible 의사 클래스 대체 : 키보드 사용자를위한 사용자 지정 초점 표시기를 만드는 새로운 방법으로 초점을 맞 춥니 다. Chrome은 최근 초점으로 전환했습니다. 초점 : 사용자 에이전트 스타일 시트에서 초점으로 가시 가능하며, 그 변경으로 인해 사용자가 버튼을 클릭하거나 탭할 때 기본 초점 링은 더 이상 표시되지 않습니다.

전환 할 때 : 초점으로 : 초점을 가시적으로, 거꾸로 호환성을 고려하십시오. 키보드 포커스 표시기는 지원하는 브라우저뿐만 아니라 모든 브라우저에서 초점을 보일 수있는 브라우저에서 명확하게 볼 수 있어야합니다. 스타일 만 있다면 : 포커스 가시 가능한, 비 지원 브라우저에는 디자인에 따라 "충분히 명확하거나 눈에 띄지 않을 수 있습니다".

 버튼 {
  배경 : 흰색;
}

버튼 : 포커스 가시성 {
  개요 : 없음;
  배경 : #ffdd00; /* 금 */
}

사용을 시작하는 좋은 방법 : Focus-Visible Today 오늘 초점 스타일을 정의하고 초점 규칙을 정의한 다음 즉시 다음과 같은 스타일을 취소하는 것입니다. 초점 : Not (: Focus-Visible) 규칙. 이것은 가장 우아하고 직관적 인 패턴은 아니지만 모든 브라우저에서 잘 작동합니다.

• 지원 하지 않는 브라우저 : 포커스가 가시적으로 정의 된 초점 스타일을 사용합니다. 초점 규칙과 두 번째 스타일 규칙을 완전히 무시합니다 (때문에 초점을 볼 수있는 것은 알려지지 않음).
• 지원을 하는 브라우저에서 Focus-Visible에서 두 번째 스타일 규칙은 다음과 같은 초점 규칙에 정의 된 포커스 스타일을 되 찾습니다. 다시 말해, 초점 규칙에 정의 된 포커스 스타일은 다음과 같은 경우에만 적용됩니다. 초점-가시성도 활성화됩니다.

 버튼 : 초점 {
  개요 : 없음;
  배경 : #ffdd00; /* 금 */
}

버튼 : 초점 : 아님 (: Focus-Visible) {
  배경 : 흰색; / * 금지 금지 */
}

BBC는보다 접근하기 쉬운 서체를 만들었습니다

BBC는 Reith (BBC의 창립자 John Reith 경의 이름을 따서 명명됨)라는 고유 한 사용자 정의 서체를 만들었습니다. 그들의 목표는 여러 언어를 지원하고 특히 소규모 장치에서 더 쉽게 읽을 수있는 글꼴을 만드는 것이 었습니다. 글꼴은 혼합 능력 사용자 그룹 (난독증 및 시력 장애)과 다른 스크린 크기에 걸쳐 테스트되었습니다.

우리 [BBC]는 Helvetica 또는 Arial을 사용하고있었습니다. 우리는 또한 Gill Sans를 기업 서체로 가지고있었습니다. 이 서체는 100 년 전에 인쇄 된 페이지를 위해 설계되었으며 오늘날의 최신 디지털 화면에서는 잘 작동하지 않습니다.

참고 : Wakamai Fondue의 Reith Sans 및 Reith Serif를 검사하려면 BBC 웹 사이트의 Firefox의 DOM Inspector에서 Fonts Pane의 "모든 글꼴의 페이지"섹션에서 Woff2 파일의 URL에 빠르게 액세스 할 수 있습니다.

디스플레이 : Safari에서는 내용이 여전히 액세스 할 수 없습니다

CSS 디스플레이 : 콘텐츠 값은 2018 년부터 브라우저에서 지원되었습니다.이 값의 요소는“상자를 생성하지 않으며”어린이로 효과적으로 대체됩니다. 이것은 내용 값을 사용하여 Semantic Document 구조를 유지하면서 플렉스/그리드 항목에 더 깊은 중첩 요소를 "홍보"하는 데 사용될 수있는 Flex 및 그리드 레이아웃에 특히 유용합니다.

불행히도,이 기능은 원래 브라우저의 접근성 트리에서 요소를 제거하는 구현 버그가 있습니다. 예를 들어, 디스플레이 :

요소에 내용을 적용하면 해당 요소가 더 이상 스크린 리더가 언급하지 않았습니다. 그 이후 로이 버그는 Firefox 및 Chrome (최신 버전)에서 고정되었습니다.

Chrome 및 Firefox에서 스크린 리더는 사용자에게 "메인 내비게이션"에 "목록, 2 항목"이 포함되어 있음을 알려줍니다. 사파리에서는

및
• 요소가 접근성 트리에 존재하지 않기 때문에 후자의 부분이 누락되었습니다. Apple이 Safari 에서이 버그를 수정할 때까지 시맨틱 요소의 내용 값을 사용할 때 조심하고 화면 독자에서 테스트하여 Safari에서도 페이지에 액세스 할 수 있는지 확인하십시오.

  자리 표시 자 텍스트의 색상을 무시할 때 불투명도를 설정하십시오

  접근성 전문가는 가능한 경우 자리 표시자를 피하는 것이 좋습니다. 사전 인구가있는 텍스트에 혼란 스러울 수 있으며 사용자가 값을 입력하기 시작할 때 사라질 수 있습니다. 그러나 많은 웹 사이트 (Wikipedia 및 Gov.uk 포함)는 검색 필드와 같은 단일 입력 필드 만 포함 된 간단한 웹 양식으로 자리 표시자를 사용합니다.

  자리 표시자는 널리 지원되는 자리 표시 자 Pseudo Element를 통해 스타일을 지정할 수 있습니다. 디자인이 자리 표시 자 텍스트에 맞춤 색상을 요구하는 경우 색상과 불투명도를 모두 지정하십시오. 후자는 Firefox에 필요하며 불투명도를 적용합니다 : 0.54 ~ :: 자리 표시자는 기본적으로. 이 값을 무시하지 않으면 자리 표시 자 텍스트가 Firefox에서 대비가 충분하지 않을 수 있습니다.

   .Search-Field :: 자리 표시 자 {
    색상 : #727272;
    불투명도 : 1; / * Firefox */
  }

  선언적 섀도우 Dom은 스타일 캡슐화 대중화에 도움이 될 수 있습니다

  Shadow Dom의 주요 특징 중 하나는 스타일 캡슐화입니다. 외부 페이지의 스타일 규칙은 Shadow Tree 내부의 요소와 일치하지 않으며 그 반대도 마찬가지입니다. 이 기능을 사용하려면 Shadow Dom 트리를 요소 (일반적으로 와 같은 사용자 정의 요소)에 첨부하고 요소의 템플릿 (일반적으로 DOM의 요소에서)을 요소의 새로 생성 된 Shadow Dom으로 복사해야합니다.

  이 단계는 JavaScript에서만 수행 할 수 있습니다. 스타일 캡슐화에만 관심이 있고 요소에 대한 동적 기능이 필요하지 않은 경우 Shadow Dom으로 사용자 정의 요소를 작성하는 데 필요한 최소 JavaScript의 양이 있습니다.

   customElements.define (
    "내 요소",
    클래스는 htmlelement {{
      생성자 () {
        감독자();
  
        // dom에서 <template>를 찾으십시오
        템플릿 = document.getElementById ( "my-template");
  
        // 템플릿 내용 사본을 만들…
        let content = template.content.clonenode (true);
  
        //…
        this.attachshadow ({모드 : "Open"}). AppendChild (컨텐츠);
      }
    }
  );</template>

  스타일 캡슐화의 예는 Codepen의 Miriam Suzanne의 요소를 참조하십시오. 스코프 스타일은 HTML 창의

  JavaScript는 더 이상 현대식 브라우저에서 이러한 유형의 스타일 캡슐화를 만들 필요가 없을 수 있습니다. 이번 주 초, Chrome은 Google의 선언적 Shadow Dom 제안을 배송 한 최초의 브라우저가되었습니다. 표준이되면이 기능을 사용하면 서버 측 렌더링과 함께 Shadow Dom을 사용할 수 있습니다.

위 내용은 플랫폼 뉴스 : 사용 : 포커스 가시성, BBC '의 새로운 서체, 선언적 그림자 돔, A11Y 및 자리 표시 자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!