Jaka jest różnica między ukrytym atrybutem (HTML5) a regułą display:none (CSS)?

Prosta zasada:

Ukrywasz coś, ponieważ nie jest to jeszcze semantycznie część zawartości strony, jak seria potencjalnych komunikatów o błędach, które nie zostały jeszcze wywołane? Użyj hidden.

Czy ukrywasz coś, co jest częścią zawartości strony, na przykład przełączanie akapitu w stan zwinięty, aby uniknąć bałaganu? Użyj display:none.

hidden jest o semantyce (czy coś jest obecnie częścią zawartości strony) i {[3] } jest o prezentacji zawartość strony.

Niestety, hidden nie nadpisze żadnego display CSS, nawet jeśli intuicyjnie miałoby sens, że coś, co nie jest częścią strony, nigdy nie powinno być wyświetlane. Jeśli chcesz, aby hidden było respektowane, dodaj tę regułę css: [hidden] { display: none !important }

Przykłady:

1. Użyj hidden dla wiadomości "dziękuję", która nie powinna istnieć jako część strony, dopóki nie zostanie wypełniony formularz.

2. Użyj hidden dla serii potencjalnych komunikatów o błędach które mogą być wyświetlane użytkownikowi w zależności od jego działań na stronie. Błędy te nie są semantycznie częścią zawartości strony, dopóki nie wystąpił błąd.

3. Użyj display: none do nawigacji, która jest wyświetlana tylko po najechaniu kursorem myszy lub kliknięciu przycisku menu.

4. Użyj display: none dla paneli z kartami, gdzie jedynym powodem dla paneli z kartami jest to, że byłoby zbyt przytłaczające, aby pokazać użytkownikowi wszystkie panele jednocześnie. (Być może gdyby użytkownik miał wystarczająco szerokie ekran, Wszystkie szyby zostaną pokazane. Dlatego panele były zawsze częścią zawartości strony, a więc logika prezentacji CSS jest właściwym wyborem).

5. Użyj display: none, aby zwinąć akapit lub sekcję wewnątrz dokumentu. Oznacza to, że akapit jest nadal częścią zawartości strony, ale ukryliśmy go dla wygody użytkownika.

Uwaga: urządzenia ułatwiające dostęp mogłyby korzystać ze znajomości różnicy między nawigacją a treścią, która jest zawartość, która nie jest obecnie uważana za część strony i dlatego nigdy nie powinna być opisywana użytkownikowi.

Jaka jest różnica pomiędzy atrybutem hidden (HTML5) a display:none rule (CSS)?

MDN potwierdza, że:

Zmiana wartości właściwości CSS display na elemencie o hidden atrybut nadpisuje zachowanie.

I możemy to pokazać wprost:

.hidden {
  display:none;
}

.not-hidden {
  display: block
}

<p hidden>Paragraph 1: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>
<p class="hidden">Paragraph 2: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>
<p hidden class="not-hidden">Paragraph 3: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>
<p class="hidden not-hidden">Paragraph 4: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>

To pokazuje, że istnieje zerowa różnica prezentacyjna pomiędzy:

• a) <p hidden>
• b) <p class="hidden"> // .hidden {display: none;}

Dodawanie Dostępności:

jednakże ... jest coś więcej do rozważenia niż prezentacja wizualna. Powinniśmy również wszyscy zająć się czytnikami ekranu , aby zmaksymalizować dostępność (prawda?w 1999 roku, w wyniku połączenia dwóch spółek, w 1999 roku, doszło do połączenia dwóch spółek.]}

• b) <p class="hidden" aria-hidden="true"> // .hidden {display: none;}

Dlaczego używanie class="hidden" i aria-hidden="true" jest lepsze niż używanie hidden?

Ponieważ my wiemy , że CSS może być nadpisany za pomocą kaskady lub specyfiki, a my wiemy, że aria-hidden mówi do agentów dostępności, takich jak czytniki ekranu.

Atrybut HTML5 hidden jest o wiele bardziej szkicowy. Nie mówi wprost, co robi, a czego nie robi - i, co gorsza, wydaje się sugerować, że robi rzeczy, których w rzeczywistości nie robi.]}

Zobacz też: https://meowni.ca/hidden.is.a.lie.html

Finał Uwaga:

Niezależnie od kombinacji HTML, CSS i ARIA, zauważ, że:

Mamy już 6 metod ukrywania treści z różnymi cele/intencje.

1. display: none;
2. visibility: hidden; (nie pokazuj, ale nadal trzymaj spację)
3. opacity: 0;
4. width: 0; height: 0;
5. aria-hidden="true"
6. a w przypadku danych formularza, input type="hidden"

Źródło: https://davidwalsh.name/html5-hidden#comment-501242