{"id":6806,"date":"2016-05-02T14:19:47","date_gmt":"2016-05-02T21:19:47","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/?p=6806"},"modified":"2016-05-02T14:19:47","modified_gmt":"2016-05-02T21:19:47","slug":"building-accessible-websites-just-got-a-lot-easier","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/building-accessible-websites-just-got-a-lot-easier\/","title":{"rendered":"Building accessible websites just got a lot easier"},"content":{"rendered":"<p><a href=\"http:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2016\/05\/screenshot.png\"><img decoding=\"async\" class=\"alignright size-full wp-image-6815\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2016\/05\/screenshot-1.png\" alt=\"Accessibility\" width=\"175\" height=\"175\" \/><\/a>When building websites it is important that it is accessible for everyone that needs to use it. Implementing web accessibility features greatly helps to achieve that. Here\u2019s what the <a href=\"https:\/\/www.w3.org\/WAI\/intro\/accessibility.php\">W3C has to say<\/a> about that:<\/p>\n<p style=\"padding-left: 30px\"><em><strong>Web accessibility means that people with disabilities can use the Web<\/strong>. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.<\/em><\/p>\n<p>The W3C continues to explain why it is important:<\/p>\n<p style=\"padding-left: 30px\"><em>The Web is an increasingly important resource in many aspects of life: education, employment, government, commerce, health care, recreation, and more. It is essential that the Web be accessible in order to provide <strong>equal access<\/strong> and <strong>equal opportunity<\/strong> to people with disabilities. An accessible Web can also help people with disabilities more actively participate in society.<\/em><\/p>\n<p>It\u2019s also good for business. For instance, if you run a web shop then you want to make sure that the largest number of people are able to purchase your products.<\/p>\n<p>However, building websites that conform to accessibility\u00a0standards such as <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\">WCAG 2.0<\/a>\u00a0(by the W3C)\u00a0or <a href=\"http:\/\/www.section508.gov\/content\/build\/website-accessibility-improvement\">Section 508<\/a>\u00a0(for US government compliance) has\u00a0traditionally been rather cumbersome and required use of 3<sup>rd<\/sup> party\u00a0web services such as the\u00a0<a href=\"http:\/\/wave.webaim.org\/\">Wave Accessibility Checker<\/a>.\u00a0It is\u00a0a disconnected experience that doesn&#8217;t\u00a0provide a natural workflow for web developers. Instead, what is needed is a way to make accessibility features\u00a0natural and easy to implement for web developers as part of their regular\u00a0development process.<\/p>\n<p><strong>Enter <a href=\"https:\/\/visualstudiogallery.msdn.microsoft.com\/3aabefab-1681-4fea-8f95-6a62e2f0f1ec\">Web Accessibility Checker<\/a>!<\/strong><\/p>\n<p>This Visual Studio extension utilizes Browser Link for ASP.NET to run standards based accessibility checks on the live running website. There is no\u00a0project specific setup required to make this work. Simply\u00a0<a href=\"https:\/\/visualstudiogallery.msdn.microsoft.com\/3aabefab-1681-4fea-8f95-6a62e2f0f1ec\">install the extension<\/a> and run the website in any browser.<\/p>\n<p>Under the hood, the extension uses the\u00a0<a href=\"https:\/\/github.com\/dequelabs\/axe-core\">axe-core<\/a> JavaScript library to perform the accessibility checking. The supported standards it checks for are:<\/p>\n<ul>\n<li>WCAG Level A<\/li>\n<li>WCAG Level AA<\/li>\n<li>Section 508<\/li>\n<li>Other best practices<\/li>\n<\/ul>\n<p>When the extension finds any accessibility errors it\u00a0displays directly inside the Error List\u00a0window.<\/p>\n<p><a href=\"http:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2016\/05\/accessibility-error-list.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-6825\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2016\/05\/accessibility-error-list-1.png\" alt=\"accessibility error list\" width=\"655\" height=\"178\" \/><\/a><\/p>\n<p>The accessibility check can either run\u00a0automatically when ASP.NET projects are run in the browser (<em>F5<\/em> or <em>View In Browser<\/em>) or when manually invoked (<em>Ctrl+Shift+M<\/em>).<\/p>\n<p><a href=\"http:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2016\/05\/accessibility-settings.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-6835\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2016\/05\/accessibility-settings-1.png\" alt=\"accessibility settings\" width=\"623\" height=\"164\" \/><\/a><\/p>\n<p>When manually invoked, the extension will run the accessibility check on all browser instances that currently has the web project loaded.\u00a0So if\u00a0different pages are loaded in different browsers, the\u00a0Error List will be populated with the combined set of errors.<\/p>\n<p>If you haven&#8217;t already, go download <a href=\"https:\/\/visualstudiogallery.msdn.microsoft.com\/3aabefab-1681-4fea-8f95-6a62e2f0f1ec\">Web Accessibility\u00a0Checker<\/a> and try it out. It works for any ASP.NET web project where Browser Link is able to connect. As usual, this extension is <a href=\"https:\/\/github.com\/madskristensen\/webaccessibilityChecker\">open source\u00a0on GitHub.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When building websites it is important that it is accessible for everyone that needs to use it. Implementing web accessibility features greatly helps to achieve that. Here\u2019s what the W3C has to say about that: Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities [&hellip;]<\/p>\n","protected":false},"author":398,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197],"tags":[31,147],"class_list":["post-6806","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","tag-asp-net","tag-visual-studio"],"acf":[],"blog_post_summary":"<p>When building websites it is important that it is accessible for everyone that needs to use it. Implementing web accessibility features greatly helps to achieve that. Here\u2019s what the W3C has to say about that: Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/6806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/398"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=6806"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/6806\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=6806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=6806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=6806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}