{"id":5818,"date":"2019-01-08T11:24:28","date_gmt":"2019-01-08T11:24:28","guid":{"rendered":"https:\/\/visionar.design\/blog\/?p=5818"},"modified":"2019-03-08T11:26:30","modified_gmt":"2019-03-08T11:26:30","slug":"whats-new-with-the-web-accessibility-guidelines-wcag-2-1","status":"publish","type":"post","link":"https:\/\/visionar.design\/blog\/whats-new-with-the-web-accessibility-guidelines-wcag-2-1\/","title":{"rendered":"What&#8217;s new with the Web Accessibility Guidelines WCAG 2.1"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">W3C, the World Wide Web consortium, created in 1999 the first version of WCAG [w&#8217;k\u00e6g], the Web Content Accessibility Guidelines, in order to make online content accessible to all (i.e including people with disabilities). W3C defines disability as follows: &#8220;Blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these.&#8221;<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">While WCAG 1.0 mainly focused on HTML, WCAG 2.0 (2008) takes into account all of the digital content (PDF, etc.) and adds the four principles that are now used to break down accessibility: Perceivable, Operable, Understandable and Robust (POUR). Ten years later, with WCAG 2.1 as an addition to WCAG 2.0, the guidelines now also focus on mobile accessibility, accessibility for people with low vision and people with cognitive and learning disabilities.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Learn more about the 17 new success criteria below:<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><b>1.3 Adaptable<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">1.3.4 Orientation (AA)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">&#8220;Create content that can be presented in different ways (for example simpler layout) without losing information or structure.&#8221; Users should be able to use the website in portrait or landscape as they may not be able to turn their devices.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">1.3.5 Identify Input Purpose (AA)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">&#8220;The purpose of each input field collecting information about the user should be programmatically determined&#8221;. If the input fields are clearly defined in the source code, browsers should fill them with the users&#8217; information, which can be helpful.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">1.3.6 Identify Purpose (AAA)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">&#8220;In content implemented using markup languages, the purpose of user interface components, icons, and regions can be programmatically determined.&#8221; The idea is the same as before but applied to all elements that can (and thus, should) be defined. The more the elements are defined, the more screen readers and other pieces of assistive technology will be able to identify them and give them meaning.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><b>1.4 Distinguishable<\/b><b><br \/>\n<\/b><span style=\"font-weight: 400;\">&#8220;Make it easier for users to see and hear content including separating foreground from background.&#8221;<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">1.4.10 Reflow (AA)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">&#8220;Content can be presented without loss of information or functionality, and without requiring scrolling&#8221;.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">1.4.11 Non-Text Contrast (AA)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">&#8220;The visual presentation of user interface components and graphical objects have a contrast ratio \u00a0of at least 3:1 against adjacent color(s).&#8221;<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">1.4.12 Text Spacing (AA)<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Recommended text spacing:<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">&#8220;Line height (line spacing) to at least 1.5 times the font size;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Spacing following paragraphs to at least 2 times the font size;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Letter spacing (tracking) to at least 0.12 times the font size;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Word spacing to at least 0.16 times the font size.&#8221;<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">This should allow people with dyslexia and low vision to read the texts better.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">1.4.13 Content on Hover or Focus (AA)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">This rule is about how to implement additional content that is triggered if the pointer hovers an element. This new content shouldn&#8217;t get in the way and should stay on screen long enough to be read.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><b>2.1 Keyboard Accessible<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">2.1.4 Character Key Shortcuts (A)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Users should have the possibility to deactivate or reprogram keyboard shortcuts.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><b>2.2 Enough Time<\/b><\/p>\n<p><span style=\"font-weight: 400;\">&#8220;Provide users enough time to read and use content.&#8221;<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">2.2.6 Timeouts (AAA)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">&#8220;Users are warned of the duration of any user inactivity that could cause data loss, unless the data is preserved for more than 20 hours when the user does not take any actions.&#8221;<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><b>2.3 Seizures and Physical Reactions<\/b><\/p>\n<p><span style=\"font-weight: 400;\">&#8220;Do not design content in a way that is known to cause seizures or physical reactions.&#8221;<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">2.3.3 Animation from Interactions (AAA)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">&#8220;Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.&#8221;<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">The W3C webpage provides a false testimony that makes this success criterion clearer: &#8220;In the online tax app, as I move my mouse around or tab to different fields, this little bubble with the current balance follows me around the screen. Makes me dizzy and nauseous.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><b>2.5 Input Modalities<\/b><\/p>\n<p><span style=\"font-weight: 400;\">&#8220;Make it easier for users to operate functionality through various inputs beyond keyboard.&#8221;<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">2.5.1 Pointer Gestures (A)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">&#8220;All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential.&#8221;<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">2.5.2 Pointer Cancellation (A)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">See the example: &#8220;Problem: I went to hit the &#8220;Mute&#8221; button and accidentally touched the &#8220;End Call&#8221; button instead. It hung up immediately.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Works well: In another web conferencing application, if I accidentally touch the &#8220;End Call&#8221; button, I can just slide my finger off the &#8220;End Call&#8221; button and it won&#8217;t end the call.&#8221;<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">2.5.3 Label in Name (A)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">&#8220;For user interface components with labels that include text or images of text, the name \u00a0contains the text that is presented visually.&#8221; This is especially useful with the use of voice recognition: the action the user says out loud should be the one implemented in the code and visible on the screen.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">2.5.4 Motion Actuation (A)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">&#8220;Functionality that can be operated by device motion or user motion can also be operated by user interface components \u00a0and responding to the motion can be disabled to prevent accidental actuation [&#8230;]&#8221;<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">2.5.5 Target Size (AAA)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">&#8220;The size of the target for pointer inputs is at least 44 by 44 CSS pixels.&#8221;<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">2.5.6 Concurrent Input Mechanisms (AAA)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">This idea here is that users should be able to switch from one mode of input to another (mouse, keyboard, touchscreen, stylus\u2026)<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><b>4.1 Compatible<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">4.1.3 Status Messages (AA)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Automated messages to notify from an important background task. See the example the website gives: &#8220;Problem: I selected a class for the conference, but I can&#8217;t tell if it got added to my schedule.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Works well: When I add a meeting to my calendar, I hear a confirmation.&#8221;<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">WCAG 2.1 is a step forward in inclusivity and takes into account the new ways of using the web, with success criteria about the use of mobile devices and voice recognition, among other things. Thanks to W3C, developers and designers keep making progress in creating more inclusive content.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">All quotes come from the <\/span><a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\"><span style=\"font-weight: 400;\">W3C webpage<\/span><\/a><span style=\"font-weight: 400;\">, that will be helpful if you too plan on making your website more accessible.<\/span><\/p>\n<section id=\"easyCookie\" class=\"ec-fixed  ec-icon ec-black  ec-double-btn\" data-expiresdays=\"180\">\n\t\t<div>\n\t\t\t<div class=\"ec-infos\">\n\t\t\t\tHave a cookie \/\/ We use cookies to ensure that we give you the best experience on our website.\n\t\t\t<\/div>\n\t\t\t<div class=\"ec-btns\">\n\t\t\t\t<a href=\"#\" class=\"ec-accept\">OK. THANKS<\/a>\n\t\t\t\t<a href=\"https:\/\/visionar.design\/blog\/legal-and-privacy\" class=\"ec-empty\">More info<\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/section>","protected":false},"excerpt":{"rendered":"<p>W3C, the World Wide Web consortium, created in 1999 the first version of WCAG [w&#8217;k\u00e6g], the Web Content Accessibility Guidelines, in order to make online content accessible to all (i.e including people with disabilities). W3C defines disability as follows: &#8220;Blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities,&hellip;<\/p>\n","protected":false},"author":1,"featured_media":5867,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[],"_links":{"self":[{"href":"https:\/\/visionar.design\/blog\/wp-json\/wp\/v2\/posts\/5818"}],"collection":[{"href":"https:\/\/visionar.design\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/visionar.design\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/visionar.design\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visionar.design\/blog\/wp-json\/wp\/v2\/comments?post=5818"}],"version-history":[{"count":2,"href":"https:\/\/visionar.design\/blog\/wp-json\/wp\/v2\/posts\/5818\/revisions"}],"predecessor-version":[{"id":5866,"href":"https:\/\/visionar.design\/blog\/wp-json\/wp\/v2\/posts\/5818\/revisions\/5866"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/visionar.design\/blog\/wp-json\/wp\/v2\/media\/5867"}],"wp:attachment":[{"href":"https:\/\/visionar.design\/blog\/wp-json\/wp\/v2\/media?parent=5818"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/visionar.design\/blog\/wp-json\/wp\/v2\/categories?post=5818"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/visionar.design\/blog\/wp-json\/wp\/v2\/tags?post=5818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}