사이트 액세스 향상을 위한 8가지 팁

방문할 수 있는 사이트를 만드는 데는 여러 가지 기교와 규칙이 있기 때문에 감당하기 어려울 수도 있다.그러나, 우리는 우리가 모든 사람에게 사용할 수 있는 방식으로 그것을 구축할 수 있도록 확보하기를 바란다.다음은 사이트 액세스를 향상시킬 수 있는 오늘부터 적용할 수 있는 팁들입니다.

Heading Structure

Alt Attribute

Descriptive text for links

Form Labels

Table Captions

Scope Attribute

Visible Focus

Tabindex

Conclusion

1. 머리글 구조

제목이 사이트의 내용을 개술할 때 정확한 제목 구조를 제공하는 것이 매우 중요하다.단언 기술, 브라우저 플러그인, 기타 도구는 사용자에게 제목 네비게이션 사이트를 기반으로 하는 방법을 제공할 수 있다.

<h1>Heading 1</h1>
    <h2>Heading 2</h2>
        <h3>Heading 3</h3>
            <h4>Heading 4</h4>
                <h5>Heading 5</h5>
                    <h6>Heading 6</h6>

2. Alt 속성

사이트에서 이미지를 사용할 때는 항상 alt 속성을 제공해야 합니다.alt 속성은 이미지를 설명하는 데 사용됩니다.이것은 단언 기술이 사용자에게 설명을 읽을 수 있도록 허용한다.너는 스스로에게 물어볼 수도 있다. "만약 내가 그림으로 아이콘이나 표시를 하고 싶다면?"이 경우 alt 속성을 추가해야 하지만 이 값을 비워 두어야 합니다.이것은 자신감 있는 기술로 하여금 이미지를 무시하는 것이 안전하다는 것을 알게 한다.
예를 들어 만약에 우리가 우리 사이트에 아래의 그림을 표시하기를 원한다면 우리는 주장하는 기술이 사용자에게 설명을 읽을 수 있기를 바란다.

위 이미지의 HTML은 다음과 같습니다.

<img src="1968-chevrolet-camaro-convertible.png" alt="1968 Red Chevrolet Camaro Convertible" />

3. 링크의 설명 텍스트

링크를 위해 묘사적인 텍스트를 사용하면 사용자가 사이트의 서로 다른 링크를 구분하고 이 링크를 주목할지 여부를 확인하는 데 도움을 줄 수 있다.이것은 화면 판독기를 사용하는 사용자에게 매우 중요하다.그들은 Tab 키를 사용하여 당신의 사이트를 방문할 수 있으며, 내용에 의존해서 그들이 보고 있는 내용을 이해하도록 도와줄 수 있다.설명 텍스트는 링크를 계속 눌러야 하는지 확인하는 데 도움이 됩니다.
이렇게 하지 마세요.

<a href="#">Click here</a>

하다

<a href="#">1968 Chevrolet Camaro Convertible</a>

화면 판독기가 사용자에게 링크 중이라는 것을 알리기 때문에 텍스트에 '링크' 라는 단어를 포함할 필요가 없다.

4. 테이블 레이블

양식 레이블은 양식 입력에 필요한 컨텐트의 컨텍스트를 제공합니다.탭을 폼 요소와 연결하는 두 가지 방법은 현식이나 은식이다. (예는 아래 참조)탭은 탭 요소에 접근할 수 있는 더 큰 영역을 제공합니다.양식 태그를 클릭하면 자동으로 관련 요소로 포커스가 설정됩니다.
명확히
현식은 for의 label 속성과 표 요소의 id 속성이 일치한다는 것을 나타낸다.

<label for="first-name">First Name</label>
<input id="first-name" type="text" value="Rocco" />

함축성
은식은 폼 요소를 label 요소에 포장하는 것을 나타낸다.

<label>
    First Name
    <input id="first-name" type="text" value="Rocco" />
</label>

나는 WAI에 따라 현식 방법을 사용할 것을 건의합니다.그것은 보통 더 좋은 화면 판독기 지원을 가지고 있다.

5. 테이블 설명

caption은 표의 제목으로 사용됩니다.이것은 화면 판독기를 사용하는 사용자에게 매우 유용하다.사용자가 테이블 모드에 있으면 주로 제목을 사용하여 테이블을 식별합니다.이것은 더욱 좋은 내비게이션과 데이터 관련을 허용한다.모든 사용자에게 최상의 경험을 제공할 수 있도록 모든 표에 제목을 추가하는 것을 권장합니다.제목을 표시하지 않으려면 CSS를 사용하여 화면 외부에 요소를 표시할 수 있습니다.

<table>
    <caption>Company Information</caption>
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Symbol</th>
            <th scope="col">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Microsoft Corporation</th>
            <td>MSFT</td>
            <td>$218.29</td>
        </tr>
    </tbody>
</table>

6.범위 속성

화면 판독기는 scope 속성을 사용하여 데이터 셀을 해당하는 제목 셀과 연결합니다.화면 판독기는 어떤 것을 사용할지 추측하기 위해 최선을 다할 것이다.scope의 기본값은 col입니다.나는 네가 추측을 피하기 위해 솔직하게 말할 것을 건의한다.

<table>
    <caption>User Information</caption>
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Rocco Sangellino</th>
            <td>36</td>
        </tr>
    </tbody>
</table>

7. 가시초점

가시 초점은 키보드 사용자가 어떤 조작 가능한 요소에 초점이 있는지 알 수 있도록 도와줍니다.브라우저에는 기본 스타일이 있지만, css가 초기화되거나 인기가 없을 때 삭제됩니다.너는 자신의 스타일을 추가해서 너의 사이트 디자인에 일치시킬 수 있다.포커스 스타일을 제공하는 장점은 사이트를 운영하는 키보드 사용자에게 도움을 준다는 것이다.중요한 것은 최소한 초점 상태에 어떤 스타일을 추가해서 모든 사용자가 최상의 체험을 할 수 있도록 하는 것이다.

<button type="submit">Submit</button>

/* default Chrome style */
:focus {
    outline: -webkit-focus-ring-color auto 1px;
}

/* Custom CSS */
button:focus {
  outline: none;
  border: 2px solid red;
  color: blue;
}

8. 태그 색인

Tabindex 는 키보드 초점을 관리하는 데 사용됩니다.세 가지 용도가 있는데 그것이 바로 tabindex="-1", tabindex="0", tabindex="1"(또는 1보다 큰 숫자)이다.다음은 각 항목의 의미를 상세하게 분석해 보겠습니다.

tabindex="-1" - 기본 탐색 흐름에서 요소를 제거합니다.이것은 키보드를 사용하여 요소를 표로 만들 수 없지만 프로그래밍을 통해 초점을 설정할 수 있음을 의미합니다.대부분의 경우, 이것은 비 상호작용 요소, 예를 들어div,span 또는 단락에 사용된다.모드를 열고 초점을 이 모드로 설정하기를 원할 때나, 폼에서 오류 메시지로 초점을 설정하기를 원할 때 유용합니다.

<div class="modal-dialog" tabindex="-1">
    <div class="sr-only">Start of modal</div>
    <h2 class="modal-header">Header</h2>
    <div class="modal-body">Modal Content</div>
    <div class="sr-only">End of modal</div>
</div>

document.querySelector('.modal-dialog').focus();

tabindex="0" - 요소가 정상적인 탐색 흐름에 영향을 주지 않고 키보드 초점을 받을 수 있도록 합니다.링크와 폼 요소를 제외하고는 키보드 내비게이션이 있기 때문에 원소에 사용됩니다.일반적으로 초점을 맞출 수 없는 사용자 정의 요소를 만들려면 이 옵션을 사용하십시오.

<div tabindex="0" role="button">I am now focusable via the keyboard.</div>

주의: role="button"을 사용하면 enter과 spacebar 기능을 추가해야 합니다.div는 단추를 완전히 충당해야 하기 때문입니다.

tabindex="1" - 수동으로tabindex를 -1 또는'0'이외의 값으로 설정하는 것을 피해야 한다.이것은 정상적인 내비게이션 절차에 영향을 주고 사용자를 곤혹스럽게 하며 이상적이지 않은 결과를 초래할 수 있다.모든 탭 가능한 요소는 DOM의 위치를 기준으로 기본 탭 색인을 갖습니다.다음 예시를 보십시오.tabindex가 설정되지 않았음을 주의하십시오.브라우저는 먼저 button을 주목하고 a을 주목하며 마지막으로 마지막 button을 주목한다.

<button type="button">Will be focused first</button>
<a href="#">Will be focused second</a>
<button type="button">Will be focused third</button>

결론

나는 현재의 사이트를 업데이트하거나 새로운 사이트를 만들고 있다면 기교를 제공했다.나는 네가 모든 사용자가 너의 사이트를 즐길 수 있도록 웹 페이지의 접근성을 읽는 데 시간을 좀 쓰도록 격려한다.시작하기 위한 링크는 다음과 같습니다.

Web Content Accessibility Guidelines (WCAG)

WebAIM

Understanding WCAG 2.0

Accessible Rich Internet Applications (WAI-ARIA