たとえば、画面ソフトウェアを読む必要があるユーザー。フロントエンドとして、どうすればそれを耐えることができますか？私はいつもそのような記事を書いて、より良いアクセシビリティを備えたページを作成する方法を共有したいと思っていました。今日の計画には、HTML TA AGとWCAG標準の組み合わせが含まれています。一部の人々の生活がより簡単になるように、このようなHTMLを書くことをお勧めします。
今日共有したいのは、HTMLタグを使用してWCAG標準とセマンティックネットワークの目標を反映する方法です。
実際、これはWCAGとは何の関係もありませんが、互換性が向上し、特に後方互換性があるページについては、次のように書くことをお勧めします。
<！doctype html>
インターネット接続は、ページ上の最も一般的なタグとして<a>を使用して実装されているとほぼ言えます。どのように扱う必要がありますか？
<a href = title = accesskey = m rel =Hidefocus>リンク</a>
また、HTMLタグを正しく使用することも非常に重要です。これは、画面読み取りソフトウェアユーザーのページ構造の理解を助長します。特に、H1、H2、H3などのラベルを使用する場合、乱用は簡単に構造的な混乱につながる可能性があります。もちろん、一般的なタグを使用してから、CSSを使用して視覚的なコントラストを作成することも、普通の人が認識できるものでもあります。しかし、ソフトウェアユーザーを読んでいる画面はどうでしょうか。もちろん、ここではページタグの使用に注意を払う必要があります。ABBRの最も重要なことは、略語を説明するためにタイトル属性を追加することです。例えば：
<abbr title = web開発者> wd </abbr>
引用符の大きな段落がある場合は、<blockquote>を使用しますが、インラインの見積もりは<cite>を使用して構造を読みやすくします。
<blockquote>私はいつもそのような記事を以前に書きたいと思っていました。今日の計画には、HTML TA AGとWCAG標準の組み合わせが含まれています。一部の人々の生活がより簡単になるように、このようなHTMLを書くことをお勧めします。 </blockquote> <p> Aの最も印象的な文は、あなたが前にいるとき、あなたは愛を持っている必要があるということです。いつでもあらゆる種類の人々にro音を使用しないでください</cite>。 </p>
紙に何かを書くことは、コンピューターに何かを書くようなものではありません。元に戻すキーを使用してそれを押すことができますが、何かが削除されていることを強調したいときはどうすればよいですか？つまり、<del>タグを使用します。例えば：
<del> HTMLに重点を置くときは、＆lt; b＆gt;を使用してください。タグ</del> HTMLに重点を置くときは、＆lt; strong＆gt;を使用してください。タグ
効果は次のようです：
HTMLを強調するときは、<b>タグを使用してくださいHTMLを強調するときは、<strong>タグを使用してください
昨年、Alipayのフロントエンドブログをするために新人を服用していたとき、私が最も感銘を受けたのは、<DL>を使って好きだったことでした。当時、私はこれらの学生はかなり良いものであり、セマンティクスをよく理解していると思っていました。定義リストを使用することはめったにありません。代わりに、一般的な<ul> <ol>の2つを使用します。 <DL>も注意して使用する必要があります。W3Schoolの例、コーヒー、ミルクの定義など、特定の決定的なエントリのみを使用することをお勧めします。
<dl> <dt> coffee </dt> <dd> - ブラックホットドリンク</dd> <dt>ミルク</dt> <dd> - 白い冷たい飲み物</dd> </dl>
リスト、これはすべてのフロントエンドに非常に馴染みがあります。構造は非常に柔軟に適用できるため、ナビゲーション、リスト、タブなどでよく使用されます。これについて多くのことを言う必要はありません。しかし、理解する必要があることが1つあります。 <ul>/<ol>が<table>の代替品であるとは思わないでください。一般的に使用されるHTMLタグでは、各タグには独自の機能があり、誰にでも代用する人はいません。
<ol> <li>コーヒー</li> <li>お茶</li> <li>ミルク</li> </ol>
テーブルの場合は、代わりに段落を使用しないでください。リストはもちろんです。それが絶対に必要であり、それらは転換可能でない限り。さらに、テーブルには注意すべき点がいくつかあります。
<表の概要= Sofishのブログステータス> <thead> <tr> <th> date </th> <th> ip </th> <th> pv </th> </tr </thead> <tbody> <tr> <td> 2011.11 </td> <td> 3000 </td> <td>
<code>はコンピューターコードテキストを参照し、<pre>は事前にフォーマットされたテキストを参照します。 <pre>はより広い範囲であり、さまざまなテキスト、特にコードのフォーマットに使用できるブロック要素です。一般的に<p>の代わりに<pre>を使用しないなど、主に意味的に正しい使用を使用するときに特別な注意を払う必要はありません。
<code> text-align：center </code> <pre> {（1 * 102） +（9 * 101） +（3 * 100）} </pre>現代のWebページでは、<br>を使用することは非常にまれです。 Webページの空白スペースは、通常、CSSパディングとマージンを使用して実装されています。これはより正確で制御しやすいです。推奨される使用法は、一般的な段落<p>を使用して、ページの空白を制御する代わりに簡単なラインブレークを行うことです。
<p>私は段落です。 <br />政治は常に線を壊しています。 </p>
<hr>非常に良い意味効果があります。しかし、彼の視覚効果は制御が困難です。私は以前にさまざまなブラウザの問題についてそのような記事を書いたことがあります。一般的に、それはめったに使用されません。画面読み取りソフトウェアユーザー向けに特別に別のページを提供する場合、それは非常に役立つかもしれません。
<h3>タイトル1 </h3> <p> lorem ipsum is ... </p> <hr/> <h3>タイトル2 </h3> <p>これは... </p>のエントリです
実際、2つのタグ<div>/<Span>にはセマンティクスがあり、両方ともドキュメント内のセクションを定義しています。はい、それは実際にはHTML5の<section>と同じです。検索エンジンのために、検索エンジンはセマンティックラベルであると考えているため、セマンティックラベルになります。推奨される使用法は、他のコンテナをレイアウト、パラグラフなどの代替ではなく、追加の視覚効果を追加するなどのページフレームとして使用することです。
<div id = container> <div id = content> </div> <div id = sidebar> <ul> <li> <li> <span> </span>、ああ、私のzsh </span> </li> </ul> </div> </div>
これらのタグは、ページタグの階層で最も重要なタグであるとほとんど言えます。本の構造を使用してこれらのタグを説明することができます。ページを作成するときは、そのような考えを心に留めておく必要があります。
はい、もちろん、引用<blockquote>、技術書に記載されているコード<pre class = code>、注意が必要なポイントのリスト、<ul>、簡単な比較のためのテーブルなどもあります。
<h1> logo </h1> <h2> title </h2> <div class = entry> <h3>概要：</h3> <p> lorem ipsumは... <em> <em> </em> </p> </div>
<em>略語を強調します。そして<strong>は強く強調しています。始めたばかりの多くの学生は、<em>、<strong>、<cite>、<i>、<b>、<b>のラベルを正確に使用することはできません。 <i>と<b>は基本的に放棄され、現在のものと同等であり、<strong>。一般的に、コンテンツの重要性の順序は次のとおりです。強い>em≈引用。
<strong>注：</strong> <cite> font、center </cite>など、<em> font </em>など、古いタグを使用しないでください。
フォームアイテムはHTMLの比較的複雑なタグであり、次の点に注意を払う必要があります。
<form method = post action = http：//sofish.de> <fieldset> <legend>私のフォーム</legent> <ラベル= firstName>* first Name> first name> <input input = text id = firstname/> <for = speek> say：</label> <textarea id = speech = sepum = </film> </ful
写真の場合、盲人はそれらを見ることができません。代替テキストを表すようにALTを提供します。これがどんな絵かを伝えてください。
<img src = http：//sofish.de/favicon.ico alt = happy favorites favicon/>
<iframe>フレームワークの使用を避けるようにしてくださいが、それらを使用する必要がある場合は、それらを説明するためにタイトル属性を提供することが最善です。
<iframe src = http：//sofish.de title = happy favorites/</iframe>
メディアは比較的複雑な形式でもあり、処理が面倒です。通常、これを行うことができます：
<audio src = mozart.mp4> mozart 39 Symphony </audio>
ページにはタイトルが含まれている必要があり、各タグは認識可能である必要があります。たとえば、これはAlipayに反映されています。
<Title>連絡先に私に連絡してください - ハッピネスのお気に入り</title>
よし。今のところすべてです。 WCAGは、これらの単純なHTMLタグの使用だけではなく、セマンティックWebページは1つまたは2つの記事に記述できるものではありません。ゆっくりしてください。最も一般的なものから始めて、良い習慣を身につけてください。記事の冒頭で文に戻ると、使用が難しいページを書く心がありますか？