Add accessibility page

src/AppMenu.vue

@@ -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>

src/router.js

@@ -15,6 +15,11 @@ 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',

src/views/Home.vue

@@ -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>

src/views/accessibility/AccessibilityDemo.vue

@@ -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>

src/views/theming/Theming.vue

@@ -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>