4가지 웹 사이트 액세스 향상 방법

10465 단어 htmlcssa11ywebdev
인터넷 접근성은 추상적이고 무형의 개념으로 여겨지는 경우가 많다.
사실상, 웹 사이트의 접근성을 대폭 높일 수 있는 아주 실행 가능한 방법들이 있다. 특히 당신이 막 시작했을 때이다.

1. "운동 줄이는 것을 더 좋아한다"사용
CSS에서prefers-reduced-motion 미디어 조회는 웹 페이지의 양식을 최적화하여 브라우저의 요구를 만족시키고 운동을 줄이는 사용자를 만족시킬 수 있는 강력한 방식이다.
중요한 것은 당신 사이트의 일부 사용자들이 현기증이 있을 수도 있고 간질이 발작하기 쉬울 수도 있으며, 더욱 조용한 조회 체험을 좋아할 수도 있다는 것을 고려해야 한다.
다음 코드 세그먼트는 네 줄로만 웹 페이지의 모든 애니메이션 및 전환을 강제로 비활성화하여 모션 감소를 요청하는 사용자가 사용할 수 있도록 합니다.
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition-duration: 0s !important;
    }
}
이것은 대부분의 현대 브라우저들이 인정하는 표준으로, 모든 다른 사용자의 조회 체험은 이 코드 세션의 영향을 받지 않습니다.
웹 사이트 기본 CSS 파일의 시작 또는 끝에 추가할 수 있습니다.

2. 소셜 공유 이미지에 대체 텍스트 추가
많은 인터넷 애플리케이션과 소셜네트워크서비스, 예를 들어 페이스북이나 트위터는 사이트 링크를 공유할 때'부자 대상'을 나타낸다.
이것은 사이트 페이지의 삽입식 미리보기로 볼 수 있습니다.
제목, 설명, 도메인 이름, 페이지와 관련된 이미지나 동영상을 포함할 수 있습니다.
그러나 <head> 라벨에 다른 사이트가 이해할 수 있는 이미지를 포함하는 것은 이미 많은 사이트의 상당히 보편적인 방법이 되었지만 대체 텍스트를 제공하는 경우는 훨씬 적다.
옵션 텍스트는 화면 판독기가 사용자에게 이미지를 설명하는 방식으로, 다음과 같은 표준 이미지 요소에서 흔히 볼 수 있습니다.
<img src="apple.jpg" alt="A red apple ontop of a wooden table.">
그러나 대부분의 부유한 대상에게 대체 텍스트를 제공하려면 머리에 다음과 같은 메타태그<head>를 제공해야 한다.
<meta property="og:image:alt" content="Example alternative text">
Twitter에서 공유하는 이미지에 대체 텍스트를 제공하려면 <head>에 메타 태그를 입력해야 합니다.
<meta name="twitter:image:alt" content="Example alternative text">

3. 페이지 상단에 건너뛰기 링크 삽입
링크를 건너뛰면 화면 판독기 사용자가 웹 페이지를 조회할 때 시간을 절약할 수 있습니다.
키보드 사용자가 웹 페이지의tab 키를 처음 눌렀을 때 '주요 내용으로 이동' 이라고 쓰여 있는 숨겨진 상자를 표시할 수 있도록 합니다.
만약 그들이 계속 enter 키를 누르면, 그들은 즉시 사이트 내비게이션과 페이지의 주요 부분으로 스크롤할 것이다.
이렇게 하면 화면 판독기를 사용하는 사용자는 전체 내비게이션 표시줄의 읽는 과정에서 들을 필요가 없고, 바로 문장으로 넘어가기만 하면 된다.
다음 예를 고려하십시오.
    ...
</head>
<body>
    <a href="#main-content">Skip to main content</a>
    <nav>
        ...
    </nav>
    <main id="main-content">
        ...
    </main>
    ...
건너뛰기 링크는 항상 표시의 바로 아래에 있어야 합니다. 왜냐하면 이것은 초점을 맞출 수 있는 첫 번째 요소이기 때문입니다.
화면 판독기는 사용자가 일반적으로 그것을 볼 수 없더라도 그것을 감지할 수 있다.
해싱 링크를 따라 일치하는 ID가 있는 요소로 사용자를 보냅니다.제공된 예제에서 사용자는 <main> 요소로 스크롤하여 탐색 메뉴를 건너뜁니다.

4. 의미 구현 HTML
마지막으로 또 다른 웹 사이트의 접근성을 향상시키고 화면 독자들이 웹 사이트를 더욱 잘 이해하도록 돕는 위대한 실천은 의미 HTML 표기를 사용하는 것이다.
의미 HTML 태그는 페이지 구조에 대한 컨텍스트 이해를 제공합니다.
다음은 HTML5의 모든 기능semantic tags입니다.

소절
이러한 의미 표시는 <div> 요소와 유사하지만 화면 판독기와 검색엔진에 추가 컨텍스트를 제공합니다.
  • <header>: 제목은 내용의 소개나 시작 부분, 또는 내비게이션 링크의 집합을 나타낸다.
  • <nav>: 탭에 네비게이션 링크가 포함되어 있습니다.
  • <nav>: 문서의 절을 정의하는 데 사용할 수 있습니다.
  • <section>: 보통 사이드바를 묶는 데 사용되며, 사이드마크는 포위된 내용 이외의 내용을 나타낸다.
  • <aside>: 문서의 주요 내용은 <main> 라벨에 있어야 한다.
  • <main>: 문장은 독립적이고 독립적이며 모듈화된 내용이다.예를 들어 이것은 전자상거래 사이트의 검색 결과 격자에 있는 제품이나 블로그 글 미리 보기와 유사할 수 있다.
  • <article>: 바닥글은 문서에서 바닥글로 지정된 부분을 나타냅니다.그것은 판권 정보 등의 내용을 포함할 수 있다.
    • 다음은 각 의미절 태그의 예입니다.
    </head>
<body>
    <nav>
        ...
    </nav>
    <section>
        <main>
            ...
        </main>
        <aside>
            ...
        </aside>
    </section>
    <section>
        <article>
            <header>...</header>
            ...
        </article>
        <article>
            <header>...</header>
            ...
        </article>
    </section>
    <footer>
        ...
    </footer>
    기억해라, 그것들이 반드시 모두 사용될 필요는 없다!필요하고 적당할 때만 의미 표시를 사용합니다.

    내연어의
    이러한 의미 표시에는 텍스트가 포함되어 있으며 일반적으로 <footer> 요소에서 사용됩니다.
  • <p>: 첨부된 텍스트가 시간 또는 날짜임을 나타냅니다.일반적으로 포함"datetime" attribute은 검색엔진이 문서를 더욱 잘 이해하도록 돕기 위한 것이다.
  • <time>: 첨부된 텍스트를 강조 표시해야 합니다.기본적으로 많은 브라우저는 <mark> 요소에 노란색 배경색을 추가합니다.
    • 각 방법의 예는 다음과 같습니다.
    <p>As of writing this, the time is <time>11:00</time>, and the date is <time datetime="2021-08-22">August 22</time>.

<p>This is some text, but <mark>this is some important text</mark>.</p>

    의미 이미지
    이러한 의미 표시는 이미지를 포함하는 데 사용됩니다.
  • <mark>: 그림에 <figure> 또는 <img> 요소가 포함되어 있고 기초 이미지가'자체 포함'임을 표시한다.
  • <picture>: 선택할 수 있는 <figcaption> 요소도 <figure> 요소를 포함하여 첫 번째 하위 요소나 마지막 하위 요소로 이미지를 설명하는 데 사용할 수 있다.
    • 다음은 <figcaption> 태그가 있는 예제입니다.
    <figure>
    <img src="ball.jpg" alt="A red ball centered in a grassy field">
    <figcaption>A red ball centered in a grassy field</figcaption>
</figure>
    당신의 <figure> 라벨은 <figcaption> 라벨의 <figcaption> 속성과 일치할 필요가 없습니다!

    드롭다운 메뉴
    마지막으로 두 개의 의미 표시가 함께 작동하여 전환 가시성을 가진 내용을 만듭니다.
  • alt: 이 표시는 사용자가 가시성을 전환할 수 있는 상세한 정보를 지정합니다.드롭다운 목록처럼 보이지만 JavaScript는 없습니다.
  • <img>: 이것은 모든 <details>원소의 첫 번째 서브원소일 것이다.이것은 <summary> 요소의 나머지 내용을 볼 수 있는 전환입니다.
    • 다음은 이러한 태그를 사용하는 예입니다.
    <details>
    <summary>If you click this, the sibling element(s) will be toggled!</summary>
    <p>This text is hidden by default, but its visibility can be toggled by the `<summary>` tag.</p>
    <p>Here is some more text, which is also hidden by default.</p>
</details>
    아마도 이러한 의미 라벨의 구체적인 예는 이후의 문장에서 탐구할 것이다.
    이 라벨들 중 일부에 관해서도 많은 미묘한 규칙이 따라야 한다.예를 들어 어떤 문서 페이지에도 여러 개의 <details> 태그가 포함되어서는 안 되고 <details> 태그는 일부 태그의 후손이 되어서는 안 된다. 예를 들어 <main>.

    결론
    성공했어!
    본고에서 열거한 실천은 실현의 난이도에 있어서 다소 다르지만 모두 조작할 수 있고 매우 확실한 결과를 낳는다.
    이 네 가지 실천 중 두 가지를 실시하는 것만으로도 올바른 방향을 향한 큰 걸음으로 당신의 사이트가 실제적으로 접근성에 관심을 갖는 것은'규정 준수 상자'가 아니라 방문성에 관심을 갖는 것을 나타낸다.
    hibenate 기록 사용
    [ 2021.06.21 ] 하루 세 문제(3일차)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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