将属于 CSS 网格布局子级的 HTML 标签放入 <section> 标签中，以便对 WCAG 更加友好
Putting HTML tags that are CSS grid layout children into a <section> tag to be more WCAG friendly
使用 CSS 网格布局网页，是否可以在 <section> 等标签内对标签进行语义分组，而不会破坏网格布局，因为语义分组内的项目是意味着是网格容器的直接子代？
我想做这个语义分组，通过将内容分组成连贯的单元来强迫自己遵守 WCAG 规范 (https://www.w3.org/WAI/GL/wiki/Using_HTML5_section_element)；我面临的问题是，我看不到如何在保持布局的同时将页眉分组为 <section>，布局部分由专用于徽标的网格单元组成。
HTML 标记
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!-- Begin Wrapper -->
<!-- I tried to put a <main> tag instead of a div here, but as a result I
got a blank page showing nothing else but the logo top left
of the page -->
<div id="wrapper">
<!-- header, semantic grouping #1 that I would like to make -->
<div id="logo" ><img src="../assets/images/some_image.png"/></div>
<div id="header"><h1>header h1</h1></div>
<!-- content, semantic grouping #2 that I would like to make -->
<div id="left_aside">
<nav>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
</nav>
</div>
<div id="right_content">test right content</div>
<!-- footer, semantic grouping #3 that I would like to make -->
<footer>test footer</footer>
</div>
<!-- End Wrapper -->
</body>
CSS风格
/* whole */
body {
margin : 0;
height : 100vh;
overflow: hidden;
}
#wrapper {
height : 100vh;
width : 100vw;
display : grid;
grid-template-columns: 1fr 8fr;
grid-template-rows : 2fr 17fr 1fr;
grid-gap : 2px 2px;
}
/* header */
#logo {
grid-column : 1/2;
grid-row : 1/2;
display : flex;
justify-content: center;
align-items : center;
padding : 1em;
}
img {
max-width : 150px;
max-height : 90px;
}
#header {
grid-column : 2/4;
grid-row : 1/2;
display : flex;
justify-content: center;
align-items : center;
}
h1 {
text-align : center;
}
/* content */
#left_aside {
background : yellow;
grid-column: 1/2;
grid-row : 2/3;
}
#right_content {
background : black;
color : white;
grid-column: 2/4;
grid-row : 2/3;
}
/* footer */
footer {
background : orange;
grid-column: 1/4;
grid-row : 3/4;
}
我必须说我在这里很困惑，因为大多数建议基本上都说要避免使用网格而不是语义分组：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility
to use a set of <div> elements instead as then you can have the element to be a direct child of a container set to display: grid. Be aware of this temptation and find ways to develop your design without stripping out the markup. Starting out with a well-structured document is a very good way to avoid the problem, as you will be aware that you are removing semantic elements in order to make the layout work if you actually have to go into the document and do so!
恐怕我还没有找到正确的结构或示例来解决我的问题。
分配添加的分组元素display:contents是否得到您需要的？像这样：
/* whole */
body {
margin : 0;
height : 100vh;
overflow: hidden;
}
#wrapper {
height : 100vh;
width : 100vw;
display : grid;
grid-template-columns: 1fr 8fr;
grid-template-rows : 2fr 17fr 1fr;
grid-gap : 2px 2px;
}
section {
display:contents;
}
/* header */
#logo {
grid-column : 1/2;
grid-row : 1/2;
display : flex;
justify-content: center;
align-items : center;
padding : 1em;
}
img {
max-width : 150px;
max-height : 90px;
}
#header {
grid-column : 2/4;
grid-row : 1/2;
display : flex;
justify-content: center;
align-items : center;
}
h1 {
text-align : center;
}
/* content */
#left_aside {
background : yellow;
grid-column: 1/2;
grid-row : 2/3;
}
#right_content {
background : black;
color : white;
grid-column: 2/4;
grid-row : 2/3;
}
/* footer */
footer {
background : orange;
grid-column: 1/4;
grid-row : 3/4;
}
<!-- Begin Wrapper -->
<!-- I tried to put a <main> tag instead of a div here, but as a result I
got a blank page showing nothing else but the logo top left
of the page -->
<div id="wrapper">
<!-- header, semantic grouping #1 that I would like to make -->
<section>
<div id="logo" ><img src="../assets/images/some_image.png"/></div>
<div id="header"><h1>header h1</h1></div>
</section>
<!-- content, semantic grouping #2 that I would like to make -->
<section>
<div id="left_aside">
<nav>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
</nav>
</div>
<div id="right_content">test right content</div>
</section>
<!-- footer, semantic grouping #3 that I would like to make -->
<footer>test footer</footer>
</div>
<!-- End Wrapper -->
根据@Alochi 所说的以及我们在评论中的讨论，我将更改您使用的 HTML 标签，使其更具语义。然后，您可以根据需要使用 CSS display: contents“隐藏”语义容器，以实现您想要的布局。
<!-- content, semantic grouping #2 that I would like to make -->
<!-- use markup tags to show intent aside, nav, section, article -->
<article>
<aside id="left_aside">
<nav>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
</nav>
</aside>
<section id="right_content">test right content</section>
</article>
</div>
<!-- End Wrapper -->
这是 Rachel Andrew 对 display: contents 正在做的事情的 overview of "semantic" markup using HTML5 tags. And a good description。
使用 CSS 网格布局网页，是否可以在 <section> 等标签内对标签进行语义分组，而不会破坏网格布局，因为语义分组内的项目是意味着是网格容器的直接子代？
我想做这个语义分组，通过将内容分组成连贯的单元来强迫自己遵守 WCAG 规范 (https://www.w3.org/WAI/GL/wiki/Using_HTML5_section_element)；我面临的问题是，我看不到如何在保持布局的同时将页眉分组为 <section>，布局部分由专用于徽标的网格单元组成。
HTML 标记
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!-- Begin Wrapper -->
<!-- I tried to put a <main> tag instead of a div here, but as a result I
got a blank page showing nothing else but the logo top left
of the page -->
<div id="wrapper">
<!-- header, semantic grouping #1 that I would like to make -->
<div id="logo" ><img src="../assets/images/some_image.png"/></div>
<div id="header"><h1>header h1</h1></div>
<!-- content, semantic grouping #2 that I would like to make -->
<div id="left_aside">
<nav>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
</nav>
</div>
<div id="right_content">test right content</div>
<!-- footer, semantic grouping #3 that I would like to make -->
<footer>test footer</footer>
</div>
<!-- End Wrapper -->
</body>
CSS风格
/* whole */
body {
margin : 0;
height : 100vh;
overflow: hidden;
}
#wrapper {
height : 100vh;
width : 100vw;
display : grid;
grid-template-columns: 1fr 8fr;
grid-template-rows : 2fr 17fr 1fr;
grid-gap : 2px 2px;
}
/* header */
#logo {
grid-column : 1/2;
grid-row : 1/2;
display : flex;
justify-content: center;
align-items : center;
padding : 1em;
}
img {
max-width : 150px;
max-height : 90px;
}
#header {
grid-column : 2/4;
grid-row : 1/2;
display : flex;
justify-content: center;
align-items : center;
}
h1 {
text-align : center;
}
/* content */
#left_aside {
background : yellow;
grid-column: 1/2;
grid-row : 2/3;
}
#right_content {
background : black;
color : white;
grid-column: 2/4;
grid-row : 2/3;
}
/* footer */
footer {
background : orange;
grid-column: 1/4;
grid-row : 3/4;
}
我必须说我在这里很困惑，因为大多数建议基本上都说要避免使用网格而不是语义分组：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility
to use a set of
<div>elements instead as then you can have the element to be a direct child of a container set todisplay: grid. Be aware of this temptation and find ways to develop your design without stripping out the markup. Starting out with a well-structured document is a very good way to avoid the problem, as you will be aware that you are removing semantic elements in order to make the layout work if you actually have to go into the document and do so!
恐怕我还没有找到正确的结构或示例来解决我的问题。
分配添加的分组元素display:contents是否得到您需要的？像这样：
/* whole */
body {
margin : 0;
height : 100vh;
overflow: hidden;
}
#wrapper {
height : 100vh;
width : 100vw;
display : grid;
grid-template-columns: 1fr 8fr;
grid-template-rows : 2fr 17fr 1fr;
grid-gap : 2px 2px;
}
section {
display:contents;
}
/* header */
#logo {
grid-column : 1/2;
grid-row : 1/2;
display : flex;
justify-content: center;
align-items : center;
padding : 1em;
}
img {
max-width : 150px;
max-height : 90px;
}
#header {
grid-column : 2/4;
grid-row : 1/2;
display : flex;
justify-content: center;
align-items : center;
}
h1 {
text-align : center;
}
/* content */
#left_aside {
background : yellow;
grid-column: 1/2;
grid-row : 2/3;
}
#right_content {
background : black;
color : white;
grid-column: 2/4;
grid-row : 2/3;
}
/* footer */
footer {
background : orange;
grid-column: 1/4;
grid-row : 3/4;
}
<!-- Begin Wrapper -->
<!-- I tried to put a <main> tag instead of a div here, but as a result I
got a blank page showing nothing else but the logo top left
of the page -->
<div id="wrapper">
<!-- header, semantic grouping #1 that I would like to make -->
<section>
<div id="logo" ><img src="../assets/images/some_image.png"/></div>
<div id="header"><h1>header h1</h1></div>
</section>
<!-- content, semantic grouping #2 that I would like to make -->
<section>
<div id="left_aside">
<nav>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
</nav>
</div>
<div id="right_content">test right content</div>
</section>
<!-- footer, semantic grouping #3 that I would like to make -->
<footer>test footer</footer>
</div>
<!-- End Wrapper -->
根据@Alochi 所说的以及我们在评论中的讨论，我将更改您使用的 HTML 标签，使其更具语义。然后，您可以根据需要使用 CSS display: contents“隐藏”语义容器，以实现您想要的布局。
<!-- content, semantic grouping #2 that I would like to make -->
<!-- use markup tags to show intent aside, nav, section, article -->
<article>
<aside id="left_aside">
<nav>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
</nav>
</aside>
<section id="right_content">test right content</section>
</article>
</div>
<!-- End Wrapper -->
这是 Rachel Andrew 对 display: contents 正在做的事情的 overview of "semantic" markup using HTML5 tags. And a good description。