CSS가있는 접근 가능한 각주

키 테이크 아웃

CSS 카운터를 사용하여 각주 번호를 자동화하여 문서를 변경할 때 수동 회전 필요성을 줄일 수 있습니다. 바닥 글의 각주 순서는 텍스트의 참조 순서와 일치해야합니다. 스크린 리더가 각주에 액세스 할 수있게하려면 각주 참조를 설명하기 위해 바닥 글에 제목을 추가 할 수 있습니다. 'Aria described'속성은이 제목에 참조를 연결하는 데 사용될 수 있습니다. CSS‘:: after’pseudo element를 사용하여 각 각주 참조의 카운터를 표시 할 수 있습니다. ‘: Target’의사 클래스는 각주가 참조 될 때 각주를 강조하는 데 사용될 수 있습니다. 각주에 완전히 액세스 할 수 있도록하기 위해 연속 링크 링크를 추가 할 수 있습니다. 여기에는 컨텐츠의 각 참조에 고유 ID 속성을 추가하는 것이 포함되며 바닥 글의 각 목록 항목에 링크를 추가하여 연결할 수 있습니다. ‘aria-label’속성은이 링크를 설명하는 데 사용될 수 있습니다.

나는 다른 날 CSS 카운터와 함께 놀았고 각주를 다루기 위해 그것들을 사용하는 것에 대해 생각했습니다. 이 문제에 대해 놀랍게도 긴 입력을 가진 표절에 따르면 각주는 다음과 같습니다.

[…] 노트가 페이지 하단에 배치되었습니다. 그들은 위의 텍스트의 지정된 부분에 대해 언급 또는 의견을 인용합니다.
• .
저자가 정보를 추가하거나 내용 중간에 또는 괄호를 사용하지 않고 참조를 인용 할 때 종종 논문에서 그것들을 보게됩니다. 일반적으로 각주는 문서의 각주 위치에 따라 숫자로 표시되면 문서의 맨 아래에 동일한 숫자가 표시되어 추가 내용이 추가됩니다. 웹에서 각주의 문제는 유지하기가 고통 스러울 수 있다는 것입니다. 동일한 문서에서 종종 작업을 수행하고 섹션 순서를 변경하고, 참조를 추가하면 모든 기존 각주를 다시 흡수 해야하는 것이 지루할 수 있습니다. 예를 들어, 문서에 각주에 대한 3 개의 기존 참조가 있고 다른 각주에 대한 기존 참조가있는 경우 다른 각주를 추가하려는 경우 다른 모든 것보다 먼저 발생하는 콘텐츠에 대해서는 모두를 다시 생각해야합니다. 좋지 않다…
• 우리는 CSS 카운터를 사용 하여이 모든 것을 훨씬 쉽게 만들 수 있습니다. 수작업으로 번호 매기기를 유지할 필요가없고 자동으로 수행 할 수 있다면 어떨까요? 우리가주의를 기울여야 할 유일한 것은 바닥 글의 실제 음표의 순서가 텍스트에서 참조의 외관 순서를 존중한다는 것입니다.
. 샘플 문서 만들기 우리가 시작할 수 있도록 샘플 문서를 만들어 봅시다.
우리의 예제는 가벼운 것입니다.
요소에 일부 내용이 있습니다. 여기에는 )가 문서화 ID를 가리키는 링크 ()가 포함되어 있으며 기사의 의 메모에 매핑되었습니다. > 몇 가지 스타일로 다음과 같이 보일 수 있습니다
접근 가능하게 만들기
실제로 카운터에 들어가기 전에 스크린 리더에 마크 업이 완전히 액세스 할 수 있는지 확인해야합니다. 우리가하고 싶은 첫 번째 일은 설명이나 각주 참조 역할을하는 바닥 글에 제목을 추가하는 것입니다. 이 제목을 CSS로 숨길 것입니다. 시각적으로 표시되지 않습니다.
그런 다음 Aria가 설명한 속성을 사용 하여이 제목으로 모든 참조를 설명하고 싶습니다.
이제 스크린 리더 사용자는 링크가 각주에 대한 참조 일 때를 이해할 것입니다. 참조 추가 나는 당신이 생각하는 것을 알고 있습니다.
그는 CSS 카운터가있을 것이라고 말했습니다. CSS 카운터는 어디에 있습니까?
<span><span><span><article>></article></span>
</span>  <span><span><span><h1 id="gt">></h1></span>CSS-Powered Footnotes<span><span></span>></span>
</span>
  <span><span><span><p>></p></span>Maintaining <span><span><a> href<span>="#footnotes"</span>></a></span>footnotes<span><span></span></span></span></span></span></span></span>
> manually can be a pain. By using href="#css">CSS
> href="#css-counters">counters> to add the numbered references in the text and an ordered list to display the actual footnotes in the footer, it becomes extremely easy.>
>
>
• id="footnotes">
Footnotes are notes placed at the bottom of a page. They cite references or comment on a designated part of the text above it.>
• id="css">
Cascading Style Sheets>
• id="css-counters">
CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.> > > > 걱정하지 마세요, 친구, 그들은오고 있습니다.

우리가 할 일은 각주 라벨로 설정된 Aria가 설명 된 속성이있는 문서의 모든 링크에 대한 카운터를 증가시키는 것입니다. 그런 다음 pseudo element를 사용하여 카운터를 표시합니다. 거기에서 CSS 스타일을 적용하는 것이 전부입니다

이제 다음과 같이 보입니다

<span><span><span><footer>></footer></span>
</span>  <span><span><span><h2 id="id-span-footnote-label-span-gt"> id<span>="footnote-label"</span>></h2></span>Footnotes<span><span></span>></span>
</span>  <span><span><span><ol>></ol></span>
</span>    ...
  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span>

꽤 멋져요, 응? 마지막으로, 참조에서 각주로 향할 때, 우리는 바닥 글의 메모를 강조하여 실제로 참조되는 메모가 무엇인지 알 수 있습니다.

약간 생생하므로 자유롭게 사용자 정의하십시오. 나는 하이라이트를 위해 순수한 노란색을 좋아한다고 말해야하지만 너무 확실하게 보인다 :

우리의 데모는 완전한 액세스 할 수있는 최종 요소 하나가 필요합니다. 생각해보십시오 : 당신은 참조에 초점을 맞추고 바닥 글의 관련 메모로 가서 읽고 ... 아무것도 없습니다. 당신은 당신이 떠난 곳으로 돌아갈 수있는 방법이 필요합니다! 해당 링크를 제공하는 것은 어렵지 않습니다. 컨텐츠의 각 참조에 고유 한 ID 속성 만 추가하여 연결할 수 있습니다. 나는 단순하게 가고 그들이 언급 한 신분증을 가져 가기로 결정했고, 단순히 -ref를 추가합니다. 그런 다음 바닥 글의 각 목록 항목에는 방금 추가 한 관련 ID로 연결된 자체 링크가 있습니다. 링크의 내용은

backlink 유니 코드 아이콘 (↩)이며 "컨텐츠로 돌아 가기"값의 aria-label 속성이 있습니다.

CSS에서 해당 링크를 대상으로하려면 Aria-Label 속성에 Aria가 설명한 것과 같은 방식으로 의존 할 수 있습니다.

여기에 최종 데모가 어떻게 보이는지 Codepen에서 Sitepoint (@SitePoint)의 CSS가있는 펜 액세스 가능한 각주를 참조하십시오.

최종 생각 몇 줄의 CSS와 몇 개의 ARIA 속성만으로, 우리는 액세스 할 수 있고 JavaScript가 필요하지 않은 CSS 구동 각주를 만들었습니다. 얼마나 멋진가요? 주제에서, 나는 Heydon Pickering의 지능형 선택기와 함께 시맨틱 CSS를 적극 권장합니다. 또한 페이지의 접근성을 확인하려면 Gaël Poupard의 a11y.css를 확인하십시오.

이 데모의 접근성에 대한 귀중한 도움에 대한 Heydon Pickering에게 큰 감사를 표합니다. CSS의 접근 가능한 각주에 대한 자주 묻는 질문 (FAQ) 웹 컨텐츠에서 각주를 사용하는 것의 중요성은 무엇입니까?
각주는 웹 컨텐츠의 가독성과 신뢰성을 향상시키는 데 중요한 역할을합니다. 주요 내용의 흐름을 방해하지 않고 추가 정보, 설명 또는 참조를 제공합니다. 자세한 설명이나 출처가 필요한 학업, 연구 또는 기술 콘텐츠에 특히 유용합니다. 각주를 사용하여 독자는 재량에 따라 주제를 더 깊이 파고하여 콘텐츠를보다 사용자 친화적이고 액세스 할 수 있도록 선택할 수 있습니다. CSS를 사용하여 액세스 가능한 각주를 어떻게 만들 수 있습니까?
액세스 가능한 생성을 어떻게 만들 수 있습니까? CSS를 사용하는 각주에는 몇 단계가 포함됩니다. 먼저 적절한 태그를 사용하여 HTML에서 각주를 표시해야합니다. 그런 다음 CSS를 사용하여 각주를 스타일링하고 배치 할 수 있습니다. CSS를 사용하면 글꼴 크기, 색상 및 페이지의 위치를 ​​포함하여 각주의 모양을 제어 할 수 있습니다. 또한 CSS를 사용하여 각주에서 본문에 대한 링크를 만들 수 있으므로 독자가 콘텐츠를 쉽게 탐색 할 수 있습니다.

CSS를 사용하여 동적 각주를 만들 수 있습니까? 예. , CSS는 동적 각주를 만드는 데 사용될 수 있습니다. 이는 각주가 특정 단어 나 문구 위로 떠오르는 것과 같은 사용자 상호 작용에 따라 나타나거나 사라질 수 있음을 의미합니다. 이것은 CSS 의사 클래스 및 전환을 사용하여 달성 할 수 있습니다. 그러나 보조 기술을 사용하는 사용자를 포함하여 이러한 동적 각주가 여전히 모든 사용자가 액세스 할 수 있도록하는 것이 중요합니다.

접근 가능한 각주를 만드는 모범 사례는 무엇입니까?

접근 가능한 각주를 만들 때, 본문과 명확하게 구별 할 수 있고 탐색하기 쉽고 유용한 정보를 제공하는 것이 중요합니다. 각주에 다른 글꼴 크기 또는 색상을 사용하여 본문에 대한 링크를 제공하고 각주가 관련이 있고 간결한지 확인하여 달성 할 수 있습니다. 또한 다양한 보조 기술로 각주를 테스트하여 진정으로 접근 할 수 있도록하는 것이 중요합니다.

위 내용은 CSS가있는 접근 가능한 각주의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!