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

Text cosmetics

pull/3774/merge
Cagatay Civici 2023-03-21 11:31:13 +03:00
parent 8309633198
commit 3456b5bd35
7 changed files with 98 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
doc/accessibility/ColorsDoc.vue
View File

@ -1,39 +1,39 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Colors on a web page should aim a contrast ratio of at least <strong>4.5:1</strong> and consider a selection of colors that do not cause vibration.</p> <p>Colors on a web page should aim a contrast ratio of at least <strong>4.5:1</strong> and consider a selection of colors that do not cause vibration.</p>
<h3>Good Contrast</h3>
<p>Color contrast between the background and the foreground content should be sufficient enough to ensure readability. Example below displays two cases with good and bad samples.</p>
<div class="flex">
<div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-blue-600" style="borderradius: 10px">
<span class="text-white">GOOD</span>
</div>
<div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-blue-400" style="borderradius: 10px">
<span class="text-white">BAD</span>
</div>
</div>
<h3>Vibration</h3>
<p>Color vibration is leads to an illusion of motion due to choosing colors that have low visibility against each other. Color combinations need to be picked with caution to avoid vibration.</p>
<div class="flex">
<div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-pink-500" style="borderradius: 10px">
<span class="text-blue-500">VIBRATE</span>
</div>
</div>
<h3>Dark Mode</h3>
<p>Highly saturated colors should be avoided when used within a dark design scheme as they cause eye strain. Instead desaturated colors should be preferred.</p>
<div class="flex">
<div class="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style="borderradius: 10px">
<span class="text-indigo-500">Indigo 500</span>
<i class="text-indigo-500 pi pi-times-circle mt-3 text-xl"></i>
</div>
<div class="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style="borderradius: 10px">
<span class="text-indigo-200">Indigo 200</span>
<i class="text-indigo-200 pi pi-check-circle mt-3 text-xl"></i>
</div>
</div>
</DocSectionText> </DocSectionText>
<h3>Good Contrast</h3>
<p class="doc-section-description">Color contrast between the background and the foreground content should be sufficient enough to ensure readability. Example below displays two cases with good and bad samples.</p>
<div class="flex">
<div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-blue-600" style="borderradius: 10px">
<span class="text-white">GOOD</span>
</div>
<div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-blue-400" style="borderradius: 10px">
<span class="text-white">BAD</span>
</div>
</div>
<h3>Vibration</h3>
<p class="doc-section-description">Color vibration is leads to an illusion of motion due to choosing colors that have low visibility against each other. Color combinations need to be picked with caution to avoid vibration.</p>
<div class="flex">
<div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-pink-500" style="borderradius: 10px">
<span class="text-blue-500">VIBRATE</span>
</div>
</div>
<h3>Dark Mode</h3>
<p class="doc-section-description">Highly saturated colors should be avoided when used within a dark design scheme as they cause eye strain. Instead desaturated colors should be preferred.</p>
<div class="flex">
<div class="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style="borderradius: 10px">
<span class="text-indigo-500">Indigo 500</span>
<i class="text-indigo-500 pi pi-times-circle mt-3 text-xl"></i>
</div>
<div class="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style="borderradius: 10px">
<span class="text-indigo-200">Indigo 200</span>
<i class="text-indigo-200 pi pi-check-circle mt-3 text-xl"></i>
</div>
</div>
</template> </template>

18
doc/accessibility/FormControlsDoc.vue
View File

@ -10,22 +10,28 @@
</code></pre> </code></pre>
<p class="doc-section-description">On the other hand, a fancy css based button using a div has no keyboard or screen reader support.</p> <div class="doc-section-description">
<p>On the other hand, a fancy css based button using a div has no keyboard or screen reader support.</p>
</div>
<pre v-code.script><code> <pre v-code.script><code>
&lt;div class="fancy-button" @click="onButtonClick(event)"&gt;Click&lt;/div&gt; &lt;div class="fancy-button" @click="onButtonClick(event)"&gt;Click&lt;/div&gt;
</code></pre> </code></pre>
<p class="doc-section-description"> <div class="doc-section-description">
<i>tabindex</i> is required to make a div element accessible in addition to use a keydown to bring the keyboard support back. To avoid the overload and implementing functionality that is already provided by the browser, native form controls <p>
should be preferred. <i>tabindex</i> is required to make a div element accessible in addition to use a keydown to bring the keyboard support back. To avoid the overload and implementing functionality that is already provided by the browser, native form
</p> controls should be preferred.
</p>
</div>
<pre v-code.script><code> <pre v-code.script><code>
&lt;div class="fancy-button" @click="onClick(event)" @keydown="onKeyDown(event)" tabindex="0"&gt;Click&lt;/div&gt; &lt;div class="fancy-button" @click="onClick(event)" @keydown="onKeyDown(event)" tabindex="0"&gt;Click&lt;/div&gt;
</code></pre> </code></pre>
<p class="doc-section-description">Form components must be related to another element that describes what the form element is used for. This is usually achieved with the <i>label</i> element.</p> <div class="doc-section-description">
<p>Form components must be related to another element that describes what the form element is used for. This is usually achieved with the <i>label</i> element.</p>
</div>
<pre v-code.script><code> <pre v-code.script><code>
&lt;label for="myinput"&gt;Username:&lt;/label&gt; &lt;label for="myinput"&gt;Username:&lt;/label&gt;
&lt;input id="myinput" type="text" name="username" /&gt; &lt;input id="myinput" type="text" name="username" /&gt;

59
doc/accessibility/IntroductionDoc.vue
View File

@ -1,39 +1,38 @@
<template> <template>
<p class="line-height-3 bg-indigo-600 text-white p-3 text-lg" style="border-radius: 10px">PrimeVue has WCAG 2.1 AA level compliancy. Refer to the accessibility documentation of each component for detailed information.</p>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>
According to the World Health Organization, 15% of the world population has a disability to some degree. As a result, accessibility features in any context such as a ramp for wheelchair users or a multimedia with captions are crucial to According to the World Health Organization, 15% of the world population has a disability to some degree. As a result, accessibility features in any context such as a ramp for wheelchair users or a multimedia with captions are crucial to
ensure content can be consumed by anyone. ensure content can be consumed by anyone.
</p> </p>
<p>Types of disabilities are diverse so you need to know your audience well and how they interact with the content created. There four main categories;</p> <p>Types of disabilities are diverse so you need to know your audience well and how they interact with the content created. There four main categories;</p>
<h3>Visual Impairments</h3>
<p>
Blindness, low-level vision or color blindness are the common types of visual impairments. Screen magnifiers and the color blind mode are usually built-in features of the browsers whereas for people who rely on screen readers, page
developers are required to make sure content is readable by the readers. Popular readers are
<a href="https://www.nvaccess.org" alt="NVDA Reader"> NVDA </a>
,
<a href="https://www.freedomscientific.com/Products/software/JAWS/" alt="JAWS Reader"> JAWS </a> and
<a href="https://www.chromevox.com" alt="ChromeVox Reader"> ChromeVox </a>
.
</p>
<h3>Hearing Impairments</h3>
<p>
Deafness or hearing loss refers to the inability to hear sounds totally or partially. People with hearing impairments use assistive devices however it may not be enough when interacting with a web page. Common implementation is providing
textual alternatives, transcripts and captions for content with audio.
</p>
<h3>Mobility Impairments</h3>
<p>
People with mobility impairments have disabilities related to movement due to loss of a limb, paralysis or other varying reasons. Assistive technologies like a head pointer is a device to interact with a screen whereas keyboard or a
trackpad remain as solutions for people who are not able to utilize a mouse.
</p>
<h3>Cognitive Impairments</h3>
<p>
Cognitive impairments have a wider range that includes people with learning disabilities, depression and dyslexia. A well designed content also leads to better user experience for people without disabilities so designing for cognitive
impairments result in better design for any user.
</p>
</DocSectionText> </DocSectionText>
<h3>Visual Impairments</h3>
<p class="doc-section-description">
Blindness, low-level vision or color blindness are the common types of visual impairments. Screen magnifiers and the color blind mode are usually built-in features of the browsers whereas for people who rely on screen readers, page developers
are required to make sure content is readable by the readers. Popular readers are
<a href="https://www.nvaccess.org" alt="NVDA Reader"> NVDA </a>
,
<a href="https://www.freedomscientific.com/Products/software/JAWS/" alt="JAWS Reader"> JAWS </a> and
<a href="https://www.chromevox.com" alt="ChromeVox Reader"> ChromeVox </a>
.
</p>
<h3>Hearing Impairments</h3>
<p class="doc-section-description">
Deafness or hearing loss refers to the inability to hear sounds totally or partially. People with hearing impairments use assistive devices however it may not be enough when interacting with a web page. Common implementation is providing
textual alternatives, transcripts and captions for content with audio.
</p>
<h3>Mobility Impairments</h3>
<p class="doc-section-description">
People with mobility impairments have disabilities related to movement due to loss of a limb, paralysis or other varying reasons. Assistive technologies like a head pointer is a device to interact with a screen whereas keyboard or a trackpad
remain as solutions for people who are not able to utilize a mouse.
</p>
<h3>Cognitive Impairments</h3>
<p class="doc-section-description">
Cognitive impairments have a wider range that includes people with learning disabilities, depression and dyslexia. A well designed content also leads to better user experience for people without disabilities so designing for cognitive
impairments result in better design for any user.
</p>
</template> </template>

4
doc/accessibility/SemanticHTMLDoc.vue
View File

@ -26,7 +26,9 @@
</code></pre> </code></pre>
<p class="doc-section-description">Same layout can be achieved using the semantic elements with screen reader support built-in.</p> <div class="doc-section-description">
<p>Same layout can be achieved using the semantic elements with screen reader support built-in.</p>
</div>
<pre v-code.script><code> <pre v-code.script><code>
&lt;header&gt; &lt;header&gt;
&lt;h1&gt;Header&lt;/h1&gt; &lt;h1&gt;Header&lt;/h1&gt;

30
doc/accessibility/WAIAriaDoc.vue
View File

@ -18,10 +18,12 @@
</code></pre> </code></pre>
<p class="doc-section-description"> <div class="doc-section-description">
A fancy checkbox with css animations might look more appealing but accessibility might be lacking. Checkbox below may display a checked font icon with animations however it is not tabbable, cannot be checked with space key and cannot be read <p>
by a reader. A fancy checkbox with css animations might look more appealing but accessibility might be lacking. Checkbox below may display a checked font icon with animations however it is not tabbable, cannot be checked with space key and cannot be
</p> read by a reader.
</p>
</div>
<pre v-code.script><code> <pre v-code.script><code>
&lt;div class="fancy-checkbox"&gt; &lt;div class="fancy-checkbox"&gt;
&lt;i class="checked-icon" v-if="checked"&gt;&lt;/i&gt; &lt;i class="checked-icon" v-if="checked"&gt;&lt;/i&gt;
@ -29,7 +31,9 @@
</code></pre> </code></pre>
<p class="doc-section-description">One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of <i>aria-labelledby</i> as a replacement of the <i>label</i> tag with for.</p> <div class="doc-section-description">
<p>One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of <i>aria-labelledby</i> as a replacement of the <i>label</i> tag with for.</p>
</div>
<pre v-code.script><code> <pre v-code.script><code>
&lt;span id="chk-label"&gt;Remember Me&lt;/span&gt; &lt;span id="chk-label"&gt;Remember Me&lt;/span&gt;
&lt;div class="fancy-checkbox" role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk-label" &lt;div class="fancy-checkbox" role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk-label"
@ -39,11 +43,13 @@
</code></pre> </code></pre>
<p class="doc-section-description"> <div class="doc-section-description">
However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the usage of <p>
<i>p-sr-only</i> However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the usage of
that hides the elements from the user but not from the screen reader. <i>p-sr-only</i>
</p> that hides the elements from the user but not from the screen reader.
</p>
</div>
<pre v-code.script><code> <pre v-code.script><code>
&lt;label for="chkbox"&gt;Remember Me&lt;/label&gt; &lt;label for="chkbox"&gt;Remember Me&lt;/label&gt;
&lt;div class="fancy-checkbox" @click="toggle"&gt; &lt;div class="fancy-checkbox" @click="toggle"&gt;
@ -54,7 +60,9 @@
</code></pre> </code></pre>
<p class="doc-section-description">A working sample is the PrimeVue checkbox that is tabbable, keyboard accessible and is compliant with a screen reader. Instead of ARIA roles it relies on a hidden native checkbox.</p> <div class="doc-section-description">
<p>A working sample is the PrimeVue checkbox that is tabbable, keyboard accessible and is compliant with a screen reader. Instead of ARIA roles it relies on a hidden native checkbox.</p>
</div>
<div class="card flex align-items-center justify-content-center"> <div class="card flex align-items-center justify-content-center">
<label for="binary" class="mr-2">Remember Me</label> <label for="binary" class="mr-2">Remember Me</label>

1
doc/accessibility/WCAGDoc.vue
View File

@ -9,7 +9,6 @@
refers to <strong>Web Content Accessibility Guideline</strong>, a standard managed by the WAI (Web Accessibility Initiative) of W3C (World Wide Web Consortium). WCAG consists of recommendations for making the web content more accessible. refers to <strong>Web Content Accessibility Guideline</strong>, a standard managed by the WAI (Web Accessibility Initiative) of W3C (World Wide Web Consortium). WCAG consists of recommendations for making the web content more accessible.
PrimeVue components aim high level of WCAG compliancy in the near future. PrimeVue components aim high level of WCAG compliancy in the near future.
</p> </p>
<p> <p>
Various countries around the globe have governmental policies regarding web accessibility as well. Most well known of these are <a href="https://www.section508.gov/manage/laws-and-policies/">Section 508</a> in the US and Various countries around the globe have governmental policies regarding web accessibility as well. Most well known of these are <a href="https://www.section508.gov/manage/laws-and-policies/">Section 508</a> in the US and
<a href="https://digital-strategy.ec.europa.eu/en/policies/web-accessibility">Web Accessibility Directive</a> of the European Union. <a href="https://digital-strategy.ec.europa.eu/en/policies/web-accessibility">Web Accessibility Directive</a> of the European Union.

1
pages/accessibility/index.vue
View File

@ -10,6 +10,7 @@
<div class="doc-intro"> <div class="doc-intro">
<h1>Accessibility</h1> <h1>Accessibility</h1>
<p>An introduction to accessibility and how it translates to Vue UI Components.</p> <p>An introduction to accessibility and how it translates to Vue UI Components.</p>
<p class="line-height-3 bg-indigo-600 text-white p-3 text-lg" style="border-radius: 10px">PrimeVue has WCAG 2.1 AA level compliancy. Refer to the accessibility documentation of each component for detailed information.</p>
</div> </div>
<DocSections :docs="docs" /> <DocSections :docs="docs" />
</div> </div>