閉じタグ&アクセシビリティ等チェックツール

処理中...
waiting...

【検査対象HTML】

以下にチェック対象のHTMLを入力してチェックボタンを押してください。
本チェックの前に他のツールで要素の親子関係が正しいかのチェックを実施しておいてください。
チェック結果の表示/非表示




【属性の順番ルール】
(対象タグ名:[属性順番配列])



スタイル変更:

【解析結果】

エラー行を押すとそこにジャンプします。 うまく飛ばない時もありますので、その時はソースを検索してください。
各説明の[ ]は関連する達成基準です。

【閉じタグのチェック結果】[4.1.1]
閉じタグのチェック。タグが閉じていないと、デザインがずれたり、ブラウザ毎に表示が変わったり、
リーダで正しく読み上げられない可能性があります。
「認識できないエラー」も表示しますが、これはタグの終了(>)がないか書式がおかしいなどのエラーです。
"<![CDATA["の場合XHTMLでは使用しても問題ありません。
【入れ違いタグのチェック結果】[4.1.1]
入れ違いタグ(例:<div><span></div></span>)のチェック。間違っているとデザインがずれたり、ブラウザ毎に表示が変わったり、 リーダで正しく読み上げられない可能性があります。
【imgタグのaltが存在するかのチェック結果】[1.1.1] [H37]
altには画像に記述された文字を書き、画像の意味をリーダで読み上げられるようにします。
もし画像に意味がない場合でも、alt=""(空文字)を設定します。リーダはaltが無い場合、srcの記述を読むので聞き手は困ります。
【HTML5で廃止されたタグが存在するかのチェック結果】
HTML5制定時に廃止されたタグが結構あります。HTML5で書いている場合は使わないようにしましょう。
【tableタグが入れ子になっているかのチェック結果】
tableをレイアウトの位置取りなどで使用していませんか。tableは表を表現するものです。
リーダで正しく読み上げられない可能性があります。
【tableにthが存在するかのチェック結果】[1.3.1] [H51] [H43]
tableにはthを書いて、項目名が分かるようにします。複雑なtableの場合はheaders属性を使うとベターです。
例: <table><tr><th scope="row">歳</th><td>21歳</td></tr></table>
【idが重複しているかのチェック結果】[4.1.1]
idは重複してはいけせん。別の名前を付けてください。
【属性が重複しているかのチェック結果】[4.1.1]
1つのタグ内で、属性は重複してはいけません。
【属性の記述順のチェック結果】
属性の記述の順番にルールを設けている場合、順番通り記述しましょう。アクセシビリティというより、コーディングルールです。
【コントロール(input,selectなど)に説明を書いているかのチェック結果】[1.3.1] [H44] [H65] [4.1.2] [H91]
コントロールには説明を書きます。リーダが読み上げるので何を入力したらよいかが分かります。
例: <input type="text" name="tel" title="電話番号(半角数字ハイフンなし)" >
例: <input name="num" aria-describedby="a2"><span id="a2">※番地</span><br>
   <input name="bld" aria-describedby="a3"><span id="a3">※建物名</span>
例: <label for="salad">サラダ</label>:<input type="radio" name="dish" id="salad">
【(その他)箇条書き可能性のチェック結果】[4.1.2] [H88]
箇条書きの可能性がある個所を抽出します。箇条書きの意味の箇所であればol,ul要素を使用しましょう。
違う場合はol,ul要素を使用しないようにしてください。
ol,ulを使用することで、リーダがリストであること、複数の塊りの情報であることを伝えてくれます。
例: <ul><li>箇条1</li><li>箇条2</li></ul>
【(その他)a要素をリンク以外の目的で使ってる可能性のチェック結果】[1.3.1]
a要素を遷移以外の目的で使用している可能性がある個所を抽出します(href=void(0)を抽出)。リーダはa要素はリンクとして読み上げるので、画面間遷移、画面内遷移で使用すべきです。
リンクを押した時の動作として、テキストをクリアするなどの機能の場合、ボタンにして意味をはっきりさせましょう。
例: <button type="button"><img src="ok.jpeg"></button>
例: <input type="image" src="ok.jpeg" alt="OK">