👨🏾‍🚒 👲🏻 🏗️ HTMHell-地獄のマークアップ 🚿 👩🏿‍🤝‍👨🏻 🏢

ご挨拶。HTMHellサイトからのメモの翻訳をあなたの注意を喚起します -実際のプロジェクトから取られたHTMLコードの悪い例のコレクションです。

各メモには、間違ったコード自体が含まれています。これには、間違いが何であるか、およびこれを行わない方がよい理由の説明が補足されています。そして結論として、より正しいと考えられるオプションが提案されます。

最初は独立していて自給自足の単一の記事ノートにまとめたので、翻訳中に、テキストをより「乾燥」せず、より一貫性のあるものにしようとして、元の定式化のスタイルから少し逸脱することを許可することがありました。

1.リンクを装ったボタン

悪いコード

<button role="link" title="Name of website" tabindex="0">
  <img alt="Name of website" src="logo.jpg" title="Name of website">
</button>

エラーと修正方法

要素の誤った使用の例<button>

。この要素を使用して、別のページまたはサイトにリンクします<a>

。明確な必要がない限り、HTMLタグのセマンティクスを無視しないでください。
要素のおかげで<a>

、JavaScriptなしでページを参照できます
属性title

はツールチップの形式で要素のコンテンツを記述し、要素の<button>

場合は指定する必要はありません
tabindex

,

<a href="https://">
  <img alt="Name of website" src="logo.jpg">
</a>

2. role="button"

<div tabindex="-1">
  <div role="button">
    <svg width="28" height="24"> … </svg>
  </div>
</div>

<div>

- role

, <button>
<button>

tabindex

. HTML-
<div>

- . <button>

Enter

Space
SVG-, , SVG

, , .

<button>
  <span class="sr-only">Send</span>
  <svg width="28" height="24" aria-hidden="true"> … </svg>
</button>

.sr-only

,

.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}

3. -

<img src="/images/edit.gif" onclick="openEditDialog(123)">
<img src="/images/delete.gif" onclick="openDeleteDialog(123)">

<img>

JavaScript,
<div>

, img>

. <button>

, Enter

Space
( alt

). - ,

№1: , alt

<button onclick="openEditDialog(123)">
  <img src="/images/edit.gif" alt="Edit product XY">
</button>
<button onclick="openDeleteDialog(123)">
  <img src="/images/delete.gif" alt="Delete product XY">
</button>

№2: alt

,

<button onclick="openEditDialog(123)">
  <span class="sr-only">Edit product XY</span>
  <img src="/images/edit.gif" alt="">
</button>
<button onclick="openDeleteDialog(123)">
  <span class="sr-only">Delete product XY</span>
  <img src="/images/delete.gif" alt="">
</button>

alt

, , , .sr-only

.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}

4.

<a href="https://example.com">
  <button>Example</button>
</a>

, : ,
, <a>

, <button>

, "The Links vs. Buttons Showdown" Marcy Sutton

.button {
  /*  CSS,      */
}

<a href="https://example.com" class="button">Example</a>

5.

: , . ,

<a href="#form" role="button" aria-haspopup="true"> &nbsp;&nbsp;Register&nbsp;&nbsp; </a>

role="button"

, , , . ,
aria-haspopup="true"

, ,
padding

CSS,

.button {
  /*   CSS      */
}

<a class="button" href="#form"> Register </a>

6. void- "href"

<a href="javascript:void(1)" onClick='window.location="index.html"'>Link</a>

JavaScript- ,
JavaScript. href

, 100%
. /

<a href="index.html">Link</a>

7. "id"

 <table>
   <tr id="body">
     <td id="body">
       <table id="body">
         <tr id="body_row">
           <td id="body_left">…</td>
           <td id="body_middle">…</td>
           <td id="body_right">…</td>
         </tr>
       </table>
     </td>
   </tr>
 </table>

id

, ,
, ( , 2016 ). ,
HTML5-.
Flexbox CSS Grid,
ID

<main id="body">
   <aside id="secondary_content"> </aside>
   <article id="primary_content"> </article>
   <aside id="tertiary_content"> </aside>
 </main>

8.

<a href="#" onclick="modal.open()">Login</a>

<a>

: PDF-
– JavaScript- . <button>

type="button"

,
, , JavaScript,

№1: <button>

<button type="button" onclick="modal.open()">Login</button>

, , <button>

.

№2:

<a href="/login" onclick="modal.open()">Login</a>

- <a>

, href

, , . , , JavaScript

, , JavaScript -

9. Cookie

<body>
  <header>…</header>
  <main>…</main>
  <footer>…</footer>

  <div class="cookie_consent modal">
    <p>We use cookies…</p>
    <div class="cookie_consent__close">
      <i class="fa fa-times"></i>
    </div>
    <div class="cookie_consent__ok">OK</div>
  </div>
</body>

Cookie . , .
, <div>

,
<div>

- . ,
, , <div>

. <button>

, Enter

Space
,
Font Awesome , <i>

aria-hidden="true"
Font Awesome Unicode- ::before

. . "" (times), fa-times - "", " ". : Talkback VoiceOver
, Escape

<body>
  <div class="cookie_consent modal">
    <h2 class="sr-only">Cookie notice</h2>
    <p>We use cookies…</p>
    <button class="cookie_consent__ok">OK</button>
    <button class="cookie_consent__close">
      <span class="sr-only">Close notification</span>
      <i class="fa fa-times" aria-hidden="true"></i>
    </button>
  </div>
  <header>…</header>
  <main>…</main>
  <footer>…</footer>
</body>

, .sr-only

, ,

.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}

Screen readers and cookie consents

10.

<section id="page-top">
  <section data-section-id="page-top" style="display: none;"></section>
</section>
<main>
  <section id="main-content">
    <header id="main-header">
      <h1>...</h1>
      <section class="container-fluid">
        <section class="row">
          <article class="content col-sm-12">
            <section class="content-inner">
              <div class="content__body">
                <article class="slider">
                  <section class="slide"> … </section>
                </article>
              </div>
            </section>
          </article>
        </section>
      </section>
    </header>
  </section>
</main>

(<article>

, <aside>

, <nav>

, <section>

) – , -
, ,
, , . <div>

,
<section>

, – region. . <section>

( , )
, – <section>

<div>
- <header>

. <main>

. <header>

,
() aria-labelledby

<div id="page-top">
  <div data-section-id="page-top" style="display: none;"></div>
</div>
<main>
  <section id="main-content">
    <header id="main-header">
      <h1>...</h1>
    </header>
    <div class="container-fluid">
      <div class="row">
        <div class="content col-sm-12">
          <div class="content-inner">
            <section aria-labelledby="sliderheading" class="content__body">
              <h2 id="sliderheading" hidden>New Products</h2>
              <ul class="slider">
                <li class="slide"> … </li>
              </ul>
            </section>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

Accessibility Support - section element (html)

11.

<span class="nav-toggle"> ☰ Menu </span>

, " ". "☰", unicode
- , . CSS- background
, <div>

, <img>

, <span>

. <button>

, Enter

Space

.
<span>

, . ,
aria-expanded

. true

– , false

–

<button class="nav-toggle" aria-expanded="false">
  <span aria-hidden="true">☰</span> Menu
</button>

12. "/"

<form role="form">
  <h2>Poll title</h2>
  <div id="pollQuestion">Is this accessible?</div>
  <div name="pollGroup" role="radiogroup">
    <div role="radiogroup" aria-label="Poll title">
      <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
      <span>Yes</span>

      <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
      <span>No</span>

      <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
      <span>Maybe</span>

      <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
      <span>Can you repeat the question?</span>
    </div>

    <button type="submit">Vote</button>
  </div>
</form>

<form>

, role="form"
– . , <form>

aria-labeledby

, .
role="radiogroup"

, . , <fieldset>
aria-labelledby

. . <legend>
, <span>

<label>

for
<fieldset>

<form aria-labelledby="poll-title">
  <h2 id="poll-title">Poll title</h2>
  <fieldset>
    <legend>Is this accessible?</legend>

    <input type="radio" id="radio1" name="poll" value="yes">
    <label for="radio1">Yes</label>

    <input type="radio" id="radio2" name="poll" value="no">
    <label for="radio2">No</label>

    <input type="radio" id="radio3" name="poll" value="maybe">
    <label for="radio3">Maybe</label>

    <input type="radio" id="radio4" name="poll" value="repeat">
    <label for="radio4">Can you repeat the question?</label>

    <button type="submit">Vote</button>
  </fieldset>
</form>

13.

<input type="checkbox" id="accept" required>
<label for="accept">
  <a href="/legal"> I accept the confidentiality policy and data… </a>
</label>

( )
( )
,
<label>

<input type="checkbox" id="accept" required>
<label for="accept"> I accept the confidentiality policy and data… </label>
(read <a href="/legal">Terms and conditions</a>)

14. "type"

<a type="button" class="button" href="/signup" tabindex="-1">Sign up</a>

<a>

type

, ,
, , MIME-. ,
, href

- ( ), <a>

, <button>

, , :
tabindex

, . , JavaScript
, ,
, <button>

<a href="/signup" class="button">Sign up</a>

15.

: <div>

JavaScript

<h3>
  <div style="display: block; text-align: start; position: relative;" class="title">
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">H</div>
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">e</div>
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">a</div>
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">d</div>
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">i</div>
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">n</div>
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">g</div>
  </div>
</h3>

, ,

DOM. DOM-
DOM- ,
. , , CSS-

№1

<h3> Heading </h3>

№2

, , , , , aria-hidden="true"

<h3 class="title">
  <span class="sr-only">Heading</span>
  <div aria-hidden="true">
    <div style="transform-origin: 50% 50% -30.8917px;" class="char">H</div>
    <div style="transform-origin: 50% 50% -30.8917px;" class="char">e</div>
    <div style="transform-origin: 50% 50% -30.8917px;" class="char">a</div>
    <div style="transform-origin: 50% 50% -30.8917px;" class="char">d</div>
    <div style="transform-origin: 50% 50% -30.8917px;" class="char">i</div>
    <div style="transform-origin: 50% 50% -30.8917px;" class="char">n</div>
    <div style="transform-origin: 50% 50% -30.8917px;" class="char">g</div>
  </div>
</h3>

, . CSS-, .sr-only

, , .

.title {
  display: block;
  text-align: start;
  position: relative;
}
.char {
  position: relative;
  display: inline-block;
  transform: rotateX(90deg);
}
.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}

16. alt, ..., aria-label, ..., alt

: ,

<a tabindex="0">
  <div alt="Browser Wars: The Last Engine" aria-label="Browser Wars: The Last Engine">
    <div>
      <img alt="Browser Wars: The Last Engine" src="thumbnail.jpg">
    </div>
  </div>
</a>

<a>

href

, , (HTML )
-, , , , , href

<button>

, ,
href

. tabindex

, ,
alt

div
ARIA. aria-label

div

, img

( alt

)

href

alt

<a href="detail.html">
  <div>
    <img alt="Browser Wars: The Last Engine" src="thumbnail.jpg">
  </div>
</a>

17.

: , ,

<section>
  <section>
    <h2>Overview</h2>
    <figure class="card" data-url="image1.html" style="background: url(image1.jpg)">
      <figcaption>
        <h4>My heading</h4>
        <article>Teasertext...</article>
      </figcaption>
    </figure>
    <figure class="card" data-url="image2.html" style="background: url(image2.jpg)"> … </figure>
  </section>
</section>

, <section>

. , "Why You Should Choose HTML5 <article> Over <section>" Bruce Lawson
. ,
, HTML5- <figure>

, . ,
, - HTML- , CSS- background

.
JavaScript. (<a href="path/to/page">

), .
<h1>

- <h6>

<section>

. <h4>

, , <figcaption>

,
<article>

. , , . <p>
, , . ""

<div>
  <section>
    <h2>Overview</h2>
    <article class="card">
      <h3>
        <a href="image1.html"> My heading </a>
      </h3>
      <img src="image1.jpg" alt="Description of image1" />
      <p>Teasertext...</p>
    </article>
    <article class="card"> … </article>
  </section>
</div>

18. div-

<div class="nav">
  <div>
    <div>about</div>
    <div>thoughts</div>
  </div>
</div>

<div>

- , - . <div>
<nav>

. , .
<ul>

<ol>

, . ,
, <ol>

<ul>
<a>

<div>

, . ,

<nav>
  <ul class="nav">
    <li>
      <a href="/about">about</a>
    </li>
    <li>
      <a href="/thoughts">thoughts</a>
    </li>
  </ul>
</nav>

19.

: ,

<h1>Product Status</h1>
<h2>Is the product available?</h2>
<div>
  <h3>
    <div>
      <div>
        <i>
          <h3 class="message is-success">
            It‘s <a>available</a>.
          </h3>
        </i>
      </div>
    </div>
  </h3>
</div>

<h1>

- <h6>

, ,
<div>

. , , - . Fragments in React ,
DOM. DOM-
DOM- ,
<h1>

- <h6>

. <h3>

<div>
<i>

, , . , CSS- font-style: italic
<a>

href

, ,
-, , , , href

<button>

, ,

 <h1>Product Status</h1>
 <p>Is the product available?</p>
 <p class="message is-success">
   It‘s <a href="/product.html">available</a>.
 </p>

20. HTMHell: ""

- – "".

, , , , , , . , - .

, 2 , HTMHell 11

1:

<div class="close"></div>

close::after {
  background: url("close.png");
  content: "";
}

<div>

- , . <div>
<div>

. <button>

Enter

Space
<div>
:

2:

<div class="close">
  ✕
</div>

"✕" - "" "", . , 2 ✕ 2 ( ). ""
, <div>
: - " " "" (times)

3: Font Awesome

<div class="close">
  <i class="fas fa-times"></i>
</div>

.fa-times::before {
  content: '\f00d';
}

, CSS
Font Awesome aria-hidden="true"

<i>
Font Awesome Unicode- ::before

. Unicode-, "" (times), fa-times - , . : Talkback VoiceOver
<i>

, , . , CSS- font-style: italic
, <div>
: "" (times)

4:

<a href="#" class="close">
</a>

a::after {
  font-size: 28px;
  display: block;
  content: "×";
}

<a>

href

, : PDF-
– JavaScript- . <button>

type="button"

,
, <a>

, <button>

, "The Links vs. Buttons Showdown" Marcy Sutton
, CSS
"✕" - "" "", . , 2 ✕ 2 ( ). ""
: ", " (link, times)

5:

<a href="#" class="close">
  Close
</a>

.close::before {
  content: "\e028";
}

, ,
<a>

CSS
: ", " (link, times close)

6: href

<a class="close" onclick="close()">×</a>

, href
<a>

href

, ,
-, , , , , href

<button>

, ,
-
, <a>

, <button>

, "The Links vs. Buttons Showdown" Marcy Sutton
: ", " (times, clickable)

7: -

<a onclick="close();">
   <img src="close.png">
 </a>

.
6 -
: "close.png, " (close.png, image)

8: -

<label class="close" for="close">
   <svg> … </svg>
 </label>
 <input id="close" type="radio">

[type="radio"] {
  display: none;
}

" ", <button>

, -
- , ()
SVG . SVG, "Creating Accessible SVGs" Carie Fisher
, display: none

<input>

<label>
:

9:

<button class="close" type="button">
  ×
</button>

"✕" - "" "", . , 2 ✕ 2 ( ). ""
: ", " (times, button)

10: svg

<button class="close">
  <svg> … </svg>
</button>

SVG . SVG, "Creating Accessible SVGs" Carie Fisher
: "" (button)

11: "X"

<div role="button" tabindex="0">X</div>

role

, <button
<button>

tabindex

. HTML-
1 , <div>
"X" ""
: ", " (X, button)

" "X" "" – , , "

Max Böck

<button type="button">
  Close
</button>

:
: ", " (Close, button)

<button type="button">
  Close
  <span aria-hidden="true">×</span>
</button>

"", , <span>

aria-hidden="true"
: ", " (Close, button)

<button type="button">
  <span class="sr-only">Close</span>
  <span aria-hidden="true">×</span>
</button>

.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}

, . CSS-, .sr-only

, , .
: ", " (Close, button)

<button type="button" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>

, SVG , aria-label
: ", " (Close, button)

5: Font Awesome

, Font Awesome

<button type="button" class="close" aria-label="Close">
  <span class="fa fa-times" aria-hidden="true"></span>
</button>

" ", " ", " ".

, , , . .

21. legend

: ,

<button class="panel-heading" tabindex="0" href="#collapse0" aria-expanded="true">
  <legend> Industries Served </legend>
</button>

<legend>

- , <fieldset>

(HTML legend)
<button>

tabindex

. HTML- .
href

<button>

(HTML button)

<button class="panel-heading" aria-expanded="true">
  Industries Served
</button>

22. div-

<div>About us</div>

<div onClick="location.href='about.html'">
  About us
</div>

<div data-page="aboutus" data-url="index.php">
  About us
</div>

... , <a>

<div>

- , . <div>
<div>

. <a>

Enter

.
<div>
" /" " "
<div>

(, " "). <a>

(, " , ")
aria-label

<div>
. <div>

- , role="link"

<a href="aboutus.html">
  About us
</a>

23.

<article>
  <div>
    <div class="sr-only">Image</div>
    <img src="/feature-teaser.png" alt="Feature teaser" />
  </div>
</article>
<div>
  <span>
    <span>Exciting feature!</span>
  </span>
  <div> This text describes what the feature does! </div>
  <a href="/blog/feature">
    <span>Read more</span>
    <svg viewBox="0 0 9 12" xmlns="http://www.w3.org/2000/svg">
      <path d="M.84 10.59L5.42 6 .84 1.41 2.25 0l6 6-6 6z"></path>
    </svg>
  </a>
</div>

<article>

. , . - , . <section>
<div>

"Image". , <img>

. HTML- . ""
<span>

, , , . . , . – <h4>
<div>

. <p>
"Read more" – . , . ,
<svg>

<section>
  <div>
    <img src="/feature-teaser.png" alt="" />
  </div>
  <div>
    <h4>Exciting feature!</h4>
    <p>This text describes what the feature does!</p>
    <a href="/blog/feature">
      <span>Read more about our exciting feature </span>
      <svg aria-hidden="true" viewBox="0 0 9 12" xmlns="http://www.w3.org/2000/svg">
        <path d="M.84 10.59L5.42 6 .84 1.41 2.25 0l6 6-6 6z"></path>
      </svg>
    </a>
  </div>
</section>

The Generic Section element

24. Placeholder - label

<input type="text" placeholder="First name">

<input>

<label>

. , <label>

(, ", "). , ,
placeholder

,
, placeholder

- .
::placeholder

. ,
<label>

, ,
placeholder

, , . , .
, , , .
, , ,
placeholder

,
Google Translate
, ,

 <label for="firstname">First name</label>
 <input type="text" id="firstname">

HTMHell-地獄のマークアップ