I have a question about accessibility (hidden, display:none)

Hello, NeoDahl ^ - ^

I answer your question.

Setting the hidden property does not differ significantly from the display: none setting in the CSS just by being processed at the browser end.

However, the processing of assistive technology (AT, screen reader, etc.) is a little different. The hidden attribute provides a way to access hidden content so that even a hidden content diary can be read by reference from a secondary technology. On the other hand, elements with the display: none style are not.

In summary

There is no difference in the browser stage, but there is a difference in the accessibility stage.

——————————————————————————————————————————————————————

"5.1. The hidden attribute" describes the hidden attribute as follows.

The hidden property is a configurable property for all HTML elements and has a Boolean value.

If the hidden property is set on an element, it is not related to the current state of the document, or another element on the page has declared that the hidden property can be reused.

User Agents should not render elements with the hidden attribute set. This can be implemented indirectly through a style layer.

For example, the HTML+CSS user agent can be implemented according to the rule proposed in 1010 Rendering. This means expect not necessarily (MUST).

In other words, elements with the hidden attribute should not be rendered in the browser As I said, it's not necessarily, but it means that I expect it.

Note that these properties are typically implemented using CSS and can be overridden by CSS properties. This means that if you set the display: block style to the element to which the hidden property is applied, it will be rendered on the screen.

<div hidden style="display: block">
  The hidden property is set, but this content is rendered on the screen.
</div>

The HTML5 standard document provides an example of a game login as an example of using the hidden property.(I personally think this is not an appropriate example)

<h1>Game Example</h1>

<section id="login">
  <h2>Login</h2>
  <form>
  ...
  <!-- Login processing when user is authenticated through the login() function -->
  </form>
  <script>
  function login() {
    // When calling a login function, switch the screen
    document.querySelector('#login').hidden = true;
    document.querySelector('#game').hidden = false;
  }
  </script>
</section>

<section id="game" hidden>
  <!-- Screen to show login users -->
  ...
</section>

Never use the hidden property to hide only certain elements that are not contained within, because everything contained in the set element is not read from the screen reader.

Do not hyperlink hidden elements with the hidden property. Also, you should not refer to hidden elements with the hidden attribute set in the <label> and <output> elements. This is because it creates confusion for the user.

However, it is possible to refer to a hidden element with the hidden property set in the script.

You must not hyperlink hidden elements.

<a href="#non-a11y">Accessibility member</a>

<section id="non-a11y" hidden>...</section>

Use the aria-describedby property to reference hidden paragraph elements.

<p hidden id="y9-table-summary">Table summary (hidden on screen)</p>

<table aria-describedby="y9-table-summary">
  ...
</table>

Use the hidden property on canvas elements that draw using scripts to turn off the graphic buffer.

<canvas hidden></canvas>

Form controls can refer to hidden <form> elements using the form attribute .

<form id="hide-form" hidden>
  ...
</form>

<Button form="hide-form" type="submit">Transfer</Button>

Accessibility APIs are recommended to provide a way to basically hide structured content and make it visible as needed. Hidden content should not be recognized by the user, regardless of whether or not they are using a secondary technology (AT) or a user agent.

Hidden content can be accessed by using the id property as a reference.

This means that secondary technology can make hidden elements accessible based on user needs, while maintaining that hidden content is not read by default.

The manufacturer shall not use a mechanism to refer to elements that have been tampered with to prevent them from being read by users, assistive technologies, etc. (This means that they should not be used for purposes that should be read by assistive technologies, etc.)

Some assistance techniques can cause problems when making elements with hidden properties visible on the screen, so referencing hidden elements may lose the essential meaning of content hiding.

The element hidden inside the section is still active. This means that the script allows the form control to send the content of that content.