vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add CSS layer docs

Browse source
This commit is contained in:
Cagatay Civici 2023-12-26 11:13:55 +03:00
parent 4b4da8340d
commit bd71b03f64
17 changed files with 318 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

49
doc/guides/accessibility/SemanticHTMLDoc.vue Normal file
View file

@ -0,0 +1,49 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
HTML offers various element to organize content on a web page that screen readers are aware of. Preferring Semantic HTML for good semantics provide out of the box support for reader which is not possible when regular <i>div</i>
elements with classes are used. Consider the following example that do not mean too much for readers.
</p>
</DocSectionText>
<pre v-code><code>
&lt;div class="header"&gt;
&lt;div class="header-text"&gt;Header&lt;/div&gt;
&lt;/div&gt;
&lt;div class="nav"&gt;&lt;/div&gt;
&lt;div class="main"&gt;
&lt;div class="content"&gt;
&lt;/div&gt;
&lt;div class="sidebar"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="footer"&gt;
&lt;/div&gt;
</code></pre>
<div class="doc-section-description mt-3">
<p>Same layout can be achieved using the semantic elements with screen reader support built-in.</p>
</div>
<pre v-code><code>
&lt;header&gt;
&lt;h1&gt;Header&lt;/h1&gt;
&lt;/header&gt;
&lt;nav&gt;&lt;/nav&gt;
&lt;main&gt;
&lt;article&gt;&lt;/article&gt;
&lt;aside&gt;&lt;/aside&gt;
&lt;/main&gt;
&lt;footer&gt;
&lt;/footer&gt;
</code></pre>
</template>