🕊️ 🌱 👨🏼‍🔧 HTMHell - balisage de l'enfer 👃🏽 🍀 💆🏾

Les salutations. Je présente à votre attention la traduction de notes du site HTMHell - une collection de mauvais exemples de code HTML tirés de projets réels.

Chaque note comprend un morceau de mauvais code lui-même, qui est complété par des explications sur les erreurs et pourquoi il vaut mieux ne pas le faire. Et en conclusion, une option est proposée qui est considérée comme plus correcte.

Depuis que j'ai regroupé en un seul article des notes initialement indépendantes et autosuffisantes, je me suis parfois permis, lors de la traduction, de m'écarter un peu du style des formulations originales, en essayant de rendre le texte moins «sec» et plus cohérent.

1. Bouton déguisé en lien

Mauvais code

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

Erreurs et quoi corriger

Un exemple d'utilisation incorrecte d'un élément <button>

. Utilisez l'élément pour créer un lien vers une autre page ou un autre site <a>

. Ne négligez pas la sémantique des balises HTML à moins qu'il ne soit clairement nécessaire de le faire.
Grâce aux éléments <a>

, les pages peuvent être référencées sans JavaScript
L'attribut title

décrit le contenu de l'élément sous la forme d'une info-bulle et pour les éléments, <button>

il n'est pas nécessaire de le spécifier
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 - balisage de l'enfer