{"id":241915,"date":"2023-03-08T13:00:41","date_gmt":"2023-03-08T21:00:41","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/visualstudio\/?p=241915"},"modified":"2023-03-07T10:05:33","modified_gmt":"2023-03-07T18:05:33","slug":"developing-accessible-apps-with-visual-studio","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/developing-accessible-apps-with-visual-studio\/","title":{"rendered":"Developing Accessible Apps with Visual Studio"},"content":{"rendered":"<p>When your application has an accessibility issue, it means that some users will find it harder or impossible to use your application. This means that a percentage of your users are having a bad experience or simply can\u2019t use your product. The implications are far reaching, because many countries have laws governing accessibility in applications for consumers, government, or educational use. Accessibility is as important as privacy or security, to ensure your application is usable by all developers and complies with legal standards.<\/p>\n<h2>The Integrated Accessibility Checker<\/h2>\n<p>That\u2019s easier said than done, but Visual Studio is making it easier. Visual Studio 2022 17.5 introduced the Integrated Accessibility Checker. This tool scans for several common accessibility issues in desktop applications and provides feedback on those errors directly in Visual Studio. The scan is powered by the Axe-Windows engine. This is the same engine which powers <a href=\"https:\/\/accessibilityinsights.io\/docs\/windows\/overview\/\">Accessibility Insights for Windows<\/a>. The Integrated Accessibility Checker now brings the power of this engine directly into Visual Studio for a more streamlined experience.<\/p>\n<p><iframe title=\"YouTube video player\" src=\"\/\/www.youtube.com\/embed\/fQShLpg5bec\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2>Getting Started<\/h2>\n<p>Currently, the Integrated Accessibility Checker works on XAML based, desktop applications, including WPF, UWP and WinUI3. This includes .NET MAUI when it\u2019s running with WinUI3 as well as Xamarin when it\u2019s running with UWP. To access the Checker, invoke either the \u201cShow Accessibility Checker\u201d button in the In-App Toolbar or the \u201cScan for Accessibility Issues\u201d button in the Live Visual Tree while you\u2019re debugging your application.<\/p>\n<p><img decoding=\"async\" width=\"1353\" height=\"166\" class=\"wp-image-241916\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2023\/03\/two-captures-from-visual-studio-the-left-capture.png\" alt=\"Two captures from Visual Studio. The left capture shows the top edge of an application being debugged including the in-app toolbar. The 7th button is the &quot;Show Accessibility Checker&quot; button, shows an accessibility icon in white and has a red circle around it. The right capture shows the top of the Live Visual Tree panel in Visual Studio. On the toolbar at the top of that panel, the 6th button is the &quot;Scan for Accessibility Issues&quot; button, has the same accessibility icon in blue and also has a red circle around it.\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2023\/03\/two-captures-from-visual-studio-the-left-capture.png 1353w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2023\/03\/two-captures-from-visual-studio-the-left-capture-300x37.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2023\/03\/two-captures-from-visual-studio-the-left-capture-1024x126.png 1024w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2023\/03\/two-captures-from-visual-studio-the-left-capture-768x94.png 768w\" sizes=\"(max-width: 1353px) 100vw, 1353px\" \/><\/p>\n<p>When you invoke the scan button, Visual Studio will scan the running application for any accessibility issues the Axe-Windows engine knows how to detect. Visual Studio will then display these issues in the Accessibility Checker panel at the bottom of the Visual Studio IDE.<\/p>\n<p><img decoding=\"async\" width=\"1548\" height=\"342\" class=\"wp-image-241917\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2023\/03\/the-accessibility-checker-panel-in-visual-studio-i.png\" alt=\"The Accessibility Checker panel in Visual Studio includes a toolbar with an enabled &quot;Play&quot; button and a disabled &quot;Stop&quot; button. The panel also has a table for the detected issues that has columns for the Automation ID, Rule, Description and How to Fix for each issue; there are two issues in the list.\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2023\/03\/the-accessibility-checker-panel-in-visual-studio-i.png 1548w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2023\/03\/the-accessibility-checker-panel-in-visual-studio-i-300x66.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2023\/03\/the-accessibility-checker-panel-in-visual-studio-i-1024x226.png 1024w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2023\/03\/the-accessibility-checker-panel-in-visual-studio-i-768x170.png 768w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2023\/03\/the-accessibility-checker-panel-in-visual-studio-i-1536x339.png 1536w\" sizes=\"(max-width: 1548px) 100vw, 1548px\" \/><\/p>\n<p>The panel will display the Automation ID when it\u2019s available, additional information about the rule causing the issue, a description of the issue and some information to fix the problem. Hot Reload will allow you to fix many of the issues in your XAML and push them directly to the running app. In these cases, either of the scan buttons in the In-App Toolbar or the Live Visual Tree, as well as the green triangle in the Accessibility Checker panel can rescan your application to confirm that the fix properly addressed the issue.<\/p>\n<h2>More to Come<\/h2>\n<p>The Integrated Accessibility Checker is the first tool Visual Studio is providing for developers to build accessible applications. Our mission is to help developers have immediate access to the tools to create accessible applications. The Integrated Accessibility Checker can\u2019t detect all accessibility issues, but it\u2019s a start.<\/p>\n<p>We\u2019re eager to see how folks feel about the Integrated Accessibility Checker, and we\u2019d love to hear from you. Head over to <a href=\"https:\/\/developercommunity.visualstudio.com\/t\/Feedback-for-the-Integrated-Accessibilit\/10301408\">Developer Community<\/a> and let us know what you think. Also, for more accessibility tools, including tools for testing web or Android apps, check out <a href=\"https:\/\/accessibilityinsights.io\/\">Accessibility Insights<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When your application has an accessibility issue, it means that some users will find it harder or impossible to use your application. This means that a percentage of your users are having a bad experience or simply can\u2019t use your product. The implications are far reaching, because many countries have laws governing accessibility in applications [&hellip;]<\/p>\n","protected":false},"author":13892,"featured_media":255385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[155],"tags":[229,6815,133],"class_list":["post-241915","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-studio","tag-accessibility","tag-visual-studio-2022","tag-xaml"],"acf":[],"blog_post_summary":"<p>When your application has an accessibility issue, it means that some users will find it harder or impossible to use your application. This means that a percentage of your users are having a bad experience or simply can\u2019t use your product. The implications are far reaching, because many countries have laws governing accessibility in applications [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/241915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/13892"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=241915"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/241915\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/255385"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=241915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=241915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=241915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}