WCAG further categories the guidelines as below:-<\/b><\/h2>\n
Perceivable<\/b>: Your product should be perceivable, this means that all the users should be easily able to understand your content. If there\u2019s an audio or video in your product it should have captions\/subtitles. If the content is text-based it should have text to speech feature enabled for your website.<\/p>\n
Operable<\/b>: Your product should be easy to operate, Users with disabilities find it hard to use mouse controls. Your whole website should be accessible via keyboard, Proceed & back actions as well, Avoid using any time-based information like ( input forms)\u00a0 as it will increase the cognitive load on your users.<\/p>\n
Understandable<\/b>: The user should always be made aware of any button actions\/functions, input fields need to have detailed hint text. Icons should be used for easy explanation ( avoid using any complex icons ) NOTE : showing breadcrumbs on each screen gives peace of mind to the users.<\/p>\n
Robust<\/b>: Users should be able to access your website from any platform & it should have similar guidelines for each. The code should be clean. Designer & Developer should often collaborate to check if everything is as per WCAG standards.<\/p>\nHow to use WCAG in your designs with examples
\n<\/b><\/h2>\n
Now there are a lot of guidelines and methods to properly use WCAG in your design but, for the sake of this article, we are going to check only a few examples that are the most used ones.<\/p>\n
1. High Contrast Design
\n<\/b>
\nAlways make sure your designs have enough contrast, WCAG suggests using black on white background as it has the maximum contrast, but even if you\u2019re using other colors make sure it is contrasting enough.<\/p>\n
![\"\"](\"\/blog\/wp-ttn-blog\/uploads\/2022\/08\/1-300x222.png\")
<\/b><\/p>\n
2. Responsive Zoom
\n<\/b>
\nWCAG suggests a website should have 400% zoom, Once zoomed in the content should be presented in one singular column this avoids unnecessary long scrolling. Devs should test this feature on an ideal phone size of 320px wide.<\/p>\n
![\"\"](\"\/blog\/wp-ttn-blog\/uploads\/2022\/08\/Responsive-zoom-300x209.png\")
<\/p>\n
3. Visual Data<\/b><\/b><\/b><\/p>\n
WCAG suggests any visual data should be presented with the help of numbering as someone with color blindness will have difficulty analyzing it. The data should have also text read functionality. ( Tools like JAWS & NVDA can be used to add such functionality )<\/p>\n
![\"\"](\"\/blog\/wp-ttn-blog\/uploads\/2022\/08\/Graph-300x176.png\")
<\/p>\n
4. Font Size<\/b><\/b><\/b><\/p>\n
Avoid using 12px when designing for accessibility use at least a font size of 14px or 14px bold as your base font.<\/p>\n
.![\"\"](\"\/blog\/wp-ttn-blog\/uploads\/2022\/08\/Screenshot-2022-08-17-at-1.38.00-AM-300x132.png\")
<\/p>\n
5. Visual Cues<\/b><\/b><\/p>\n
Visual cues and hint texts should be present for the users to make any kind of information easier to understand.<\/p>\n
6. Keyboard Shortcut<\/b><\/b><\/b><\/p>\n
Quick action keyboard shortcuts can be added to a website for users’ accessibility. This not\u00a0only reduces the number of clicks but makes performing an action much faster & accessible.<\/p>\n
![\"\"](\"\/blog\/wp-ttn-blog\/uploads\/2022\/08\/Keyboard-shortcut-300x225.png\")
<\/p>\n
7. Increase font size<\/b><\/b><\/b><\/p>\n
A default font size switcher should be available on the website for users’ ease of accessibility. Generally, 3 different font sizes can be used but more can be added as well.<\/p>\n
![\"\"](\"\/blog\/wp-ttn-blog\/uploads\/2022\/08\/Frame-72-300x82.png\")
<\/p>\n
8. No, Truncate text<\/b><\/b><\/b><\/p>\n
Any kind of text whether paragraphs or hint texts should be completely & clearly visible to the users. Users need not perform any additional action like clicking the paragraph or (read more) which is generally used to show truncated text.<\/p>\n
![\"\"](\"\/blog\/wp-ttn-blog\/uploads\/2022\/08\/Truncat-Text-300x168.png\")
<\/p>\n
9. No Time Constraints<\/b><\/b><\/b><\/p>\n
When designing for WCAG it\u2019s necessary to avoid any action that has time constraints like making a payment or filing a form, This can increase the cognitive load on the user & can make them stressed. Note –\u00a0<\/b> If it\u2019s necessary to have time constraints for a particular action. The user should be warned before time expires and given at least a few seconds to extend the time limit with a simple action (for example, “press the space bar”), and the user is allowed to extend the time limit by at least ten times.<\/p>\n
![\"\"](\"\/blog\/wp-ttn-blog\/uploads\/2022\/08\/No-Time-Constraints-237x300.png\")
<\/p>\n
\u00a0Curated useful resources to deeply understand WCAG principles & how to apply them<\/b><\/h2>\n
Official WCAG Website<\/strong><\/p>\n W3C is the international standards organization for the World Wide Web. Listing down all the steps & in-depth behind the process for WCAG & its implementation.<\/p>\n https:\/\/www.w3.org\/<\/span><\/a><\/p>\n Best real examples of WCAG websites Below is the list of highly acclaimed websites for WCAG standards. This will help you understand what a real-life WCAG standard website looks like. All these websites are marked for AAA standards.<\/p>\n https:\/\/www.visionaustralia.org\/<\/span><\/a> Must read WCAG articles<\/b><\/p>\n https:\/\/medium.com\/c2-group\/wcag-2-1-guidelines-explained-with-examples-5c7c5d8b69eb<\/a><\/span><\/p>\n https:\/\/www.thinkbean.com\/drupal-development-blog\/website-accessibility-design-vs-aa-vs-aaa<\/a><\/span><\/p>\n https:\/\/www.microsoft.com\/en-gb\/trust-center\/compliance\/accessibility<\/a><\/span><\/p>\n https:\/\/www.niaaa.nih.gov\/<\/a><\/span><\/p>\n Next time you design a website or app, Always keep accessibility at the back of your mind. As a designer, we should learn to build our product experiences for everyone. \ud83d\ude42<\/p>\n Thank you for reading till the end. I hope you found this helpful. ?<\/em><\/strong><\/p>\n References<\/strong><\/p>\n Key Source<\/b> – https:\/\/bit.ly\/2QL5iBV<\/a> Today accessible design has become more and more important as it not only provides a structured navigation & control but also a great overall user experience. While this is not only limited to people with physical & mental challenges but the majority of users. Great accessible design caters to a better experience not just for […]<\/p>\n","protected":false},"author":1485,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":14},"categories":[3887,3429,3109],"tags":[5006,3598,4708],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55385"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1485"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=55385"}],"version-history":[{"count":5,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55385\/revisions"}],"predecessor-version":[{"id":55414,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55385\/revisions\/55414"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=55385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=55385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=55385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n<\/b><\/p>\n
\nhttps:\/\/www.parrapark.com.au\/<\/span><\/a>
\nhttps:\/\/www.deque.com<\/span><\/a><\/p>\n
\nMy Top Figma Plugins to Check WCAG Compatibility Score
\n<\/b><\/p>\n\n
\n<\/b>https:\/\/microsoftedge.microsoft.com\/addons\/detail\/accessibility-insights-fo\/ghbhpcookfemncgoinjblecnilppimih<\/b><\/span><\/a><\/span><\/li>\n<\/ol>\n
\nConclusion ?
\n<\/b><\/h3>\n
\nKey Source<\/b> – https:\/\/bit.ly\/3bXbu6z<\/span><\/a><\/span>
\nKey Source<\/b> – https:\/\/bit.ly\/3pud02V<\/a><\/p>\n