7 웹 사이트에서 웹을 사용하여 HTML에 액세스하기 위한 필수 도구❤️️ [템플릿]
18512 단어 howtowebaccessibilityhtmlaria
1. Aria 캐릭터, 상태 및 속성
ARIA는 액세스 가능한 리치 인터넷 어플리케이션을 나타냅니다.이러한 응용 프로그램은 액세스 트리라고 하는 DOM 서브셋과 통신하는 속성 목록입니다.접근성 트리는 더욱 간소화된 사이트 구현이다.어떤 사람들은 그림자 DOM이라고 할 수 있다.이 버전은 화면 판독기에서 읽을 수 있고 키보드 사용자가 초점을 맞출 수 있습니다.
HTML 태그에 올바른 역할 속성을 할당하면 ARIA가 원하는 기능을 기록할 수 있습니다.캐릭터를 정의할 때 추상적인 용어를 사용하지 않는 것이 중요하다.DOM 및 액세스 트리를 위한 사이트 구축에 사용되는 역할은 여러 가지가 있습니다.역할 유형 및 예제:
지표
소부품
문서 구조
<nav role="navigation">
<ul role="menu">
<li>
<a href="" role="menuitem">Home</a>
</li>
<li>
<a href="" role="menuitem">About</a>
</li>
<li>
<a href="" role="menuitem">Contact</a>
</li>
</ul>
</nav>
aria-hidden="true"
<nav role="navigation">
<ul role="menu">
<li>
<a href="" role="menuitem">Home</a>
</li>
<li aria-owns="child-item">
<a href="" role="menuitem">About</a>
</li>
<ul id="child-item">
<li>
<a href="" role="menuitem">My Mission</a>
</li>
<li>
<a href="" role="menuitem">Portfolio</a>
</li>
</ul>
<li>
<a href="" role="menuitem">Contact</a>
</li>
</ul>
</nav>
이것은 하나입니다.
모든 정부 주와 재산 명세서 2. 의미
ARIA의 위험 중 하나는 개발자가 전체 접근성을 난제로 만들 수 있다는 것이다.
때때로, 우리가 사이트에서 요소를 만드는 것은 단지 그것을 실행하기 위해서이다.긴급하게 프로젝트를 완성하겠다는 생각은 매우 매력적이다.이렇게 하면 매우 잘못 쓴 코드가'작업'만 할 수 있게 될 것이다.HTML 태그가 예상한 기능과 일치하면 사용자 체험이 향상됩니다.내 말의 가장 흔히 볼 수 있는 예는 span,div,text 요소를 단추로 하는 것이지 단추 표시를 사용하는 것이 아니다.이것은 기존의 접근 가능한 정의를 덮어쓰는 남용이다.스티브 포크너의 말을 인용하여 "영탄조가 없는 것이 나쁜 영탄조보다 낫다."
스티브 포크너
@ 스티브 포크너
📢 나쁜 영탄조보다 영탄조가 없는 것이 더 좋은 원칙 1: 역할은 약속의 원칙 2: 영탄조는 숨길 수도 있고 강화할 수도 있고 힘을 창조할 수도 있고 위험을 창조할 수도 있다
13:2017년 12월 28일 오후 20시
49
62
org/TR/wai-aria-pr… 3. Alt 텍스트
Alt text는 선택 가능한 텍스트의 약자입니다.대체 텍스트는 사용자에게 표시되지 않지만 링크나 이미지에 대한 정보를 포함합니다.그것은 묘사나 속성일 수 있다.화면 판독기와 검색 엔진 인덱스 이미지와 링크에 사용할 수 있습니다.
내 사이트에 내 이름, 내가 한 일, 이미지 설명이 있는alt 텍스트를 추가합니다.
4, 미디어 로드 지연
지연 로드는 Google Chrome 브라우저의 고유 기능입니다.이미지를 볼 때만 이미지를 로드할 수 있습니다.그림과 동영상이 미리 불러오지 않고 페이지 속도를 떨어뜨리지 않기 때문에 이것은 매우 좋다.로드 지연 기능을 사용하려면 이미지 HTML 태그에 다음 코드를 사용합니다.
loading="lazy"
를 참조하십시오.Addy Osmani의 이 글 보기 5, 장
사이트에서 일부를 실현하는 것은 서로 다른 유형의 내용을 분리하는 데 도움이 된다.일부는 검색, 사이드바, 주요 내용 등 이정표적 의미를 가진 라벨일 수 있다.일부 탭은 개발자가 페이지에 영역을 만들고 있다는 것을 보조 기술에게 알려 줍니다.내 사이트에서, 나는 그것으로'나에 관하여'와'내가 무엇을 하는가'를 구분한다.구조는 다음과 같습니다.
<div role="main">
<section class="section section-1" id="who" >
<div class="who" >
<h2 class="title">Who TF is Coop?</h2>
<p>Demo Text</p>
</div>
</section>
<section class="section section-2" >
<div class="what" >
<h2 class="title">What</h2>
</div>
</section>
이 MDN 페이지 보기 6. 태그 인덱스
일부 인터넷 사용자들은 키보드로만 사이트를 훑어본다.위아래 화살표가 스크롤되고tab키는 링크, 단추, 선택할 수 있는 페이지 요소에 주목합니다.enter키는 선택합니다.현대 브라우저 내장 키보드 초점.웹 브라우저가 사이트에서 누르거나 멈춰야 하는 부분을 감지할 수 없으면tabindex를 사용하십시오.Tabindex는 페이지의 선택 가능한 순서 또는 계층 구조를 설정합니다.기본값은 0입니다.이것은 모든 내용이 똑같이 중요하다는 것을 의미한다. 줄은 왼쪽에서 오른쪽으로, 사이드 메뉴나 열은 위에서 아래로 정렬된다.페이지 레이아웃과 일치하도록 탭 인덱스 값을 변경하고 가장 간단한 탐색을 보장합니다.
7. 포용적 디자인
나는 웹 사이트를 방문할 수 있도록 확보하는 가장 좋은 방법은 모든 기능을 사용하는 것이라고 알았다.외음, 화면 판독기를 켜거나 키보드로 사이트를 훑어보세요.이 점을 깨닫는 것은 우리 인류가 모든 사람이 우리의 인터넷 응용 프로그램에 접근할 수 있도록 확보하는 유일한 방법이다.
전체 홈 코드 템플릿
<!--begin nav bar-->
<nav id="nav" class="nav" role="navigation" >
<ul class="navbar" role="menu">
<li>
<a href="#home" role="menuitem" alt="home" tabindex="0">Home</a>
</li>
<li>
<a href="#who" role="menuitem" alt="Who is Njeri Cooper?" tabindex="1">Who</a>
</li>
<li>
<a href="#what" role="menuitem" alt="What does Njeri Cooper Do?" tabindex="2">What</a>
</li>
<li>
<a href="#contact" role="menuitem" alt="Contact Njeri Cooper" tabindex="3">Contact</a>
</li>
</ul>
</nav>
<!--begin main content section-->
<div role="main">
<section class="section section-1" id="who" >
<div class="who" >
<h2 class="title">Who TF is Coop?</h2>
<p>Njeri Cooper is a front end web and iOS developer. Lorem Khaled Ipsum is a major key to success.</p>
<p>They don’t want us to win. I’m giving you cloth talk, cloth. Special cloth alert, cut from a special cloth.</p>
</div>
</section>
<section class="section section-2" id="what" background="https://vignette.wikia.nocookie.net/steven-universe/images/e/ed/Steven_the_Swordfighter_Cloud_Temple_Background.jpg/" loading="lazy" alt="Cloud Temple Image From Steven Universe">
<div class="what">
<h2 class="title">What</h2>
<div class="links" id="contact">
<a href="http://github.com/njericooper" alt="Njeri's Github" tabindex="4">git</a>
<a href="https://dev.to/njericooper" alt="Njeri's tech blog" tabindex="5">dev to</a>
<a href="https://twitter.com/njericooper" class="last" alt="Njeri's Twitter" tabindex="6">twitter</a>
</div>
</div>
</section>
</div> <!--end main content section-->
<div class="email-container">
<div class="email_container">
<form id="singular-form" role="form">
<button class="shown" type="button" id="trigger" role="button" tabindex="7">Notify me</button>
<div id="input-container">
<input type="text" placeholder="E-mail">
<button type="button" role="button" tabindex="8">Send</button>
</div>
<div id="success">Thank you!</div>
</form>
</div>
<!--Footer-->
<footer class="footer" role="contentinfo">
<p>©2019 OG Codes</p>
</footer>
Njeri Cooper 회사
Njeri는 인터넷을 이용하여 교육, 혁신, 창조를 진행한다.그녀의 실제 학생을 프리랜서 dev에게 읽어라.언제든지 Njeri에게 메시지를 보내 주십시오.
| | | |
Reference
이 문제에 관하여(7 웹 사이트에서 웹을 사용하여 HTML에 액세스하기 위한 필수 도구❤️️ [템플릿]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/njericooper/7-must-haves-for-html-in-your-site-template-578i텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
