vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add accessibility page

pull/345/head
cagataycivici 2020-05-13 10:24:09 +03:00
parent d27203e6e4
commit 99a6f9a085
5 changed files with 70 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/AppMenu.vue
View File

@ -10,6 +10,7 @@
<router-link to="/theming">Theming</router-link>
<a href="https://www.primefaces.org/designer/primevue">Designer</a>
<a href="https://www.primefaces.org/designer/api/primevue/2.0.0">Sass API</a>
<router-link to="/accessibility">Accessibility</router-link>
<router-link to="/flexgrid">PrimeFlex</router-link>
<router-link to="/icons">Icons</router-link>
</div>

7
src/router.js
View File

@ -15,7 +15,12 @@ export default new Router({
path: '/setup',
name: 'setup',
component: () => import('./views/setup/Setup.vue')
},
},
{
path: '/accessibility',
name: 'accessibility',
component: () => import('./views/accessibility/AccessibilityDemo.vue')
},
{
path: '/support',
name: 'support',

2
src/views/Home.vue
View File

@ -55,7 +55,7 @@
<img alt="accesibility" src="../assets/images/home/vue-accesibility.png" />
<div class="feature-card-detail">
<span class="feature-name">ACCESSIBILITY</span>
<p>UI Components for everyone with full support for Section 508 compliance.</p>
<p>UI Components for everyone with full support for Web Content Accessibility Guidelines (WCAG).</p>
</div>
</div>
</div>

61
src/views/accessibility/AccessibilityDemo.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Accessibility</h1>
<p>UI Components for everyone with full support for Web Content Accessibility Guidelines (WCAG).</p>
</div>
</div>
<div class="content-section documentation">
<h3 style="margin-top:0">WCAG</h3>
<p>The Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI)
of the World Wide Web Consortium (W3C), the main international standards organization for the Internet.</p>
<h3>Accessible Components</h3>
<p>PrimeVue components are implemented based on the WCAG guidelines and follow the best practices outlined here.</p>
<ul>
<li>Utilize semantic HTML where suitable.</li>
<li>Use ARIA roles and attributes to describe an element.</li>
<li>Prefer elements that are keyboard accessible by default such as a button instead of a clickable div.</li>
<li>Implement keyboard navigation for list elements.</li>
<li>Use colors to support the suggested contrast ratios e.g. WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.</li>
<li>Avoid colors that produce optical vibrations against a dark background, which can induce eye strain.</li>
</ul>
<h3>Utility CSS Classes</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-sr-only</td>
<td>Element becomes visually hidden however accessibility is still available.</td>
</tr>
<tr>
<td>p-link</td>
<td>Renders a button as a link.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
li {
line-height: 1.5;
}
</style>

6
src/views/theming/Theming.vue
View File

@ -83,7 +83,7 @@ html {
</thead>
<tbody>
<tr>
<td>p-components</td>
<td>p-component</td>
<td>Applies component theming such as font-family and font-size to an element.</td>
</tr>
<tr>
@ -102,10 +102,6 @@ html {
<td>p-link</td>
<td>Renders a button as a link.</td>
</tr>
<tr>
<td>p-link</td>
<td>Renders a button as a link.</td>
</tr>
<tr>
<td>p-error</td>
<td>Applies the invalid theme color to a text.</td>