[TIL]Webアクセス性、Web標準

Web規格

Web上で標準的に使用されるテクノロジーまたはルールでは、オペレーティングシステムまたはブラウザを使用して同じコンテンツを表示できます.

Webアクセス性

プロフェッショナルなスキルを必要とせず、あらゆる環境でWebサイトが提供するすべての情報にアクセスできるようにします.

Webアクセスを維持する理由

障害者差別禁止法が制定されているので、守らなければなりません
将来の法律では、2013年4月11日から障害者も非障害者と同じように電子情報と非電子情報を使用することが規定されています.
Webアクセスについては、以下の事項を考慮する必要があります.

Webアクセス寸法の例

スクリーンリーダー/imgタグ

img要素の場合、スクリーンリーダーとしてalt値が読み出されます.
inputのタイプがimageまたはbutton、または画像マッピングの領域に置換テキストがある場合はaltを指定します.

<img src="160314.png" alt="주식수수료 평생무료 비대면계좌개설 신규/온라인/유관기관 제비용 제외 2018년 12월 31일까지 선물/옵션 1년 무료, 신용이자 연 3.5% 60일 우대">
<img src="btn_next.png" alt="다음 콘텐츠 보기"> /*의미있는 이미지인 경우에도 값을 넣어줘야 한다*/

2.コンテンツのリニア構造
Webページを構成するすべてのコンテンツは、ユーザーがコンテンツを理解できるように線形構造で記述する必要があります.제목-내용-더 보기 콘텐츠表示順に공지사항, 더 보기 버튼, 내용と表記されている場合はエラーです
論理順序は제목 > 내용 > 더 보기 버튼で、表記もこの順序で記入してください

<div class="noti_section">
    <h3><span class="blind">공지사항</span></h3>
        <ul class="lst_noti">
            <li>
                <a href="…">[복구완료] 10/19 (금), '뮤직'...</a>
            </li>
            <li>
                <a href="…">[복구완료] 10/17 (수), '지도'...</a>
            </li>
        </ul>
        <a href="…"><span class="blind">공지사항</span>더보기</a>
</div>

3.表の構造
HTML 5からsummary属性がないため、タイトルやダイジェスト情報は字幕に提供される

<table>
	<caption>
		<strong>직원 관리 현황 표</strong>
		<span>부서별 직원 수, 합계 정보</span>
	</caption>
	<thead>
		<tr>
			<th scope="col">번호</th>
			<th scope="col">부서</th>
			<th scope"col">직원 수</th>
		</tr>
	</thead>
</table>

シンボルマーク

意味タグとは,ページ構造の理解を容易にするために定義されたタグである.
html 5の導入

共通ラベル

タイトル:Webドキュメント上部
nav:主にメニュー表示に使用
aside:左側または右側
section&article:本稿
フッター:Webドキュメントの下部

SEO-Searchエンジン最適化（検索エンジン最適化）

Webドキュメントを作成する際に手動タグを使用する必要はありませんが、使用する場合に利点があります.

SEOの最適化に有利である.(SEO: Search Engine Optimization)
検索エンジンは、タグの目的構造に適合するように設計されたサイトから、より迅速かつ効率的に情報を取得することができる.
検索結果の公開に有利です.

検索エンジンはロボット(Robot)というプログラムを利用して毎日世界中のサイト情報を収集している.
検索エンジンはHTMLコードで意味を認識するだけで、「意味要素」(Semantic element)を解釈します.

効率的なWebアクセス
一般的なブラウザでは差はないが,スクリーンリーダー(視覚障害者向けのネットサーフィンプログラム)などの環境では,Webのアクセス性と可用性が向上している.

ButtonタグのDefault type

buttonラベルのdafault値はsubmitです
ボタンラベルの種類は3種類ございます
1) submit, reset, button

Sectionラベルとarticleラベルの違い

section
部分(部分、領域、領域)をグループ化し、分離の役割を果たす.
テーマ別のグループ.
article
ファイル内でグループを分離する役割を果たします.
コンテンツが独立しています.
※論理関係のない要素を組み合わせた場合はdivを使用します.

<section>
  <h1>과일</h1>
  <section>
     <p>빨간색</p>
     <article>사과</article>
     <article>체리</article>
  </section>
</section>

リファレンスサイト

https://www.boostcourse.org/web201/joinLectures/193141
https://www.youtube.com/watch?v=xToJhmAJYCE
https://moo-you.tistory.com/m/406
https://falaner.tistory.com/48