I have a question about the contents of the lecture.
This is the part that deals with the explanatory tool of the table around 8 minutes and 16 seconds of the lecture video.
After the .a11y-hidden class is applied to the p#kakaobank-notice-summary on the table, it is read once when the screen reader reads the main content, and
It is read once more by the aria-describedby attribute applied to the following table
I wonder if the description will be read in duplicate.
fast-frontend table accessibility
Hello, ID NeoDahl. ^^^
Thank you for your good questions about better user accessibility. :-) Thanks to the questions, I was able to find and organize related materials, and I am responding to you by organizing the HTML 5.2 standard technical document and the W3C accessibility tutorials.
—
First, let's take a look at the HTML 5.2 Standard Technical Documentation - Description of the table section. A paragraph element is located just above the table element, and you can see that the id property is given to connect it to the aria-describedbdy property of the table element.
If you look at the markup, it is the same as the markup shown in '[2-12] CSS Table Styling' 08:16 image. Then? Is there any problem of repeating the explanation of the table?"Let's break it down!
Let's take a look at NOTE about using the aria-describedbdy attribute as a clue to solving your questions.
In the example above the aria-describedby attribute is used to explicitly associate the information with the table for assistive technology users.
If you interpret the content, it is described as follows.
"In the example above, the aria-describedbdy property explicitly uses <table aria-describedbdy="summary"> and summary information for assistive technology users."
I see. :-) It's a very important story!
One of the important roles of HTML markup is state the relationship between each element. This allows you to structure tables that are meaningful and improve accessibility by setting aria-describedby properties.
—
Next, look at the W3C Web Accessibility Tutorial - Table Edition and the "Caption and Summary chapter, and we propose several complex summaries.
One of the several suggestions is an example using the aria-deservedby property. If you look at the example code snippet, it says:
If you look at the code snippet, it's a markup in the same format as the HTML 5.2 standard technical document.
<p id="tblDesc">Column one has the location and size of accommodation, other columns show the type and number of properties available.</p>
<table aria-describedby="tblDesc">...</table>
Let's take a look at why we're proposing to use the aria-describedby attribute.
In this approach, an element with an id attribute is associated with a summary by using the aria-describedby attribute of the table. Any element with a unique id attribute can be used as a summary for a table in this way.
The element containing the summary doesn’t need to be in front of the table in the document, but it helps users to discover the summary more quickly if the summary is near the table, especially if they are not using a screen reader.
Translating the description is as follows.
This approach method allows elements with unique id properties in a document to be associated with a summary of table elements with aria-describedby properties.
Although elements containing the summary do not need to be in front of the table (doesn't need), when the summary is near the table, it helps users, especially those who do not use screen readers, find the summary faster.
I see! ^^^
Now that we've reviewed the descriptions in each document, we're sure to answer them.
—
For more accessible table design, a summary must be provided for complex tables, and it is not necessary to have a summary next to the table, but we recommend that you put the summary in front of the table considering both screen reader users and those who do not.
FIN.
© 2024 OneMinuteCode. All rights reserved.