등대 득점-가급성 어떻게 향상

6102 단어 lighthousewebdevbeginnersperformance

이 글에서 나는 무장애적인 측면에서 완벽한 등대 점수를 얻는 좋은 기교를 나눌 것이다.
무장애성은 등대의 감사 범위를 뛰어넘는 매우 중요하다는 것을 알아야 한다.단지 Lighthouse에 의존해서 사이트의 접근성을 평가하지 마라.Lighthouse에서는 일부 액세스 가능성 문제만 자동으로 감지되므로 수동 테스트를 권장합니다.

모든 요소가 충분한 대비도를 확보해야 한다


밝기가 배경 밝기에 지나치게 가까운 원소의 대비도가 비교적 낮다.대비도가 낮은 원소는 거의 보이지 않는다.
아래 단추는 내부 텍스트와 대비는 좋으나 배경과 대비는 좋지 않습니다.

우리는 버튼의 색을 바꾸거나 적당한 색의 테두리를 추가해서 배경 대비도를 높일 수 있다. 아래와 같다.

검사 시 Chrome은 요소의 명암비를 보여줍니다.

Tabindex를 사용하여 키보드 사용자 환경 개선


키보드로만 당신의 사이트를 훑어보는 것이 어렵습니까?당신이 실행할 수 없는 절차가 있습니까?
만약 그렇다면, 너는 아직 해야 할 일이 있다.
기본적으로 키보드 접근 단추와 링크 등 요소를 사용할 수 있습니다.tabindex="0"을 설정하면 다른 유용한 요소에 초점을 추가할 수 있습니다.
tabindex = "0"은 링크와 폼 요소 이외의 요소가 키보드 초점을 받을 수 있도록 합니다.탭 순서는 변경되지 않지만 페이지의 링크/버튼처럼 논리적 탐색 흐름에 요소가 배치됩니다.이것은 아이콘과 같은 요소에 매우 편리하다. 왜냐하면 이것은 자연 옵션의 순서의 일부분이 아니기 때문이다.
tabindex = "1"이나 0보다 큰 값을 설정하지 마십시오.자연 탭 순서에서 요소가 삭제됩니다.

제목 요소 추가


제목이 화면 판독기 및 기타 보조 기술인 사용자는 이 페이지에 대한 개요를 제공합니다.제목은 보조 기술이 발표된 첫 번째 텍스트다.검색엔진 사용자는 또한 제목에 의존하여 페이지가 그들의 검색과 관련이 있는지 확인한다.
페이지마다 유일한 제목을 사용합니다.너의 제목도 묘사적이어야 한다. 집처럼 모호한 제목을 사용하지 마라.
<head>
    <title>Linda Ojo</title>
</head>

"lang" 속성 추가


화면 판독기는 단어의 정확한 발음을 확보하기 위해 지원하는 언어마다 다른 음성 라이브러리를 사용합니다.화면 판독기는 이 언어 라이브러리 사이를 쉽게 전환할 수 있지만, 전제 조건은 웹 페이지가 지정한 내용을 읽을 언어를 지정하는 것이다.
페이지에 요소에 대한 언어가 지정되지 않은 경우 화면 판독기는 사용자가 화면 판독기를 설정할 때 선택한 기본 언어를 사용하는 페이지로 가정하므로 일반적으로 내용을 이해할 수 없습니다.
예를 들어, 다음 코드는 문서의 언어를 영어로 설정합니다.
<html lang="en">

제목 요소를 올바르게 정렬


정확하게 배열된 제목은 단계를 뛰어넘지 않고 페이지의 의미 구조를 전달하며 보조 기술을 사용할 때 내비게이션과 이해가 더욱 쉽다.
모든 제목 요소를 논리적이고 숫자적인 순서에 따라 내용의 구조를 반영하도록 한다.제목 텍스트는 관련 장과 절의 내용을 명확하게 전달해야 한다.
예를 들면 다음과 같습니다.
<div>
    <h1>Colors</h1>
    <section>
    <h2>Primary Colours</h2>
    …
        <h3>Red</h3>
    </section>
</div>

이미지에 선택적 텍스트 추가


모든 이미지는alt 속성을 가져야 합니다. 이 속성은 간단한 설명 텍스트를 포함합니다.그림이 장식용으로 사용되고 유용한 내용을 제공하지 않으면 빈alt="속성을 설정하십시오.
화면 리더를 사용하는 시력이 손상된 사용자는alt 속성을 읽어서 페이지의 이미지를 더 잘 이해할 수 있기 때문에 이 점은 매우 중요하다.이러한 속성은 로드할 수 없는 이미지의 위치에도 표시됩니다.
<!-- Do -->
<img src="background.png" alt=""> <!--decorative image -->
<img src="dancers.png" alt="4 female dancers in yellow dresses"> <!-- informative image-->

호출 조작 요소는 묘사적인 텍스트가 있어야 한다


CTA는 사용자가 목표를 달성하기 위해 트리거하는 요소입니다.CTA의 예로는 버튼, 링크, 아이콘, e.t.c가 있습니다.
Lighthouse는 일반 CTA 텍스트를 표시합니다. 예를 들어 '여기 클릭', '시작', '더 보기', '더 보기' e.t.c. CTA 요소의 묘사적인 텍스트를 사용하면 화면 독자들이 당신의 내용을 이해할 수 있습니다.
<!-- Don't  -->
❌ <p>To load more pictures, <a href="/articles">click here</a>.</p> 

<!-- Do -->
✅ <p><a href="/articles">Load more pictures of Schrute Farms</a>.</p>

항상 상위 요소에 목록 항목 배치하기


보조 기술이 목록에 나타나면 사용자 목록에 몇 항목이 있는지 알려 줍니다.목록 항목을 부모 목록 요소에 포장하지 않으면 보조 기술로 사용자의 기대를 정확하게 설정할 수 없습니다.
Lighthouse flags는 부모 요소에 포함되지 않은 항목을 나열합니다.아래 그림과 같이 목록 항목을 항상 부모 요소에 배치합니다.
<!-- Unordered list -->
    <ul>
        <li>Green</li>
        <li>Blue</li>
        <li>Yellow</li>
    </ul>
<!-- Ordered list -->
    <ol>
        <li>Antelope</li>
        <li>Bat</li>
        <li>Cheetah</li>
    </ol>
이상의 힌트는 당신의 등대 방문성 점수를 높여 누구나 당신의 사이트를 쉽게 사용할 수 있도록 할 것입니다.
rake routes
rails를 실행하지 못하면 곤란합니다.저를 좀 도와주십시오

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage