{"id":11033,"date":"2018-11-28T08:00:36","date_gmt":"2018-11-28T13:00:36","guid":{"rendered":"https:\/\/michigan.it.umich.edu\/news\/?p=11033"},"modified":"2024-07-08T06:05:40","modified_gmt":"2024-07-08T10:05:40","slug":"diy-web-accessibility-testing-tools-practices","status":"publish","type":"post","link":"https:\/\/michigan.it.umich.edu\/news\/2018\/11\/28\/diy-web-accessibility-testing-tools-practices\/","title":{"rendered":"DIY web accessibility testing tools &amp; practices"},"content":{"rendered":"<div id=\"attachment_11051\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-11051\" class=\"size-full wp-image-11051\" src=\"https:\/\/michigan.it.umich.edu\/news\/wp-content\/uploads\/2018\/11\/worldspace-comply-header.png\" alt=\"computer monitor showing Comply software UI\" width=\"600\" height=\"420\" srcset=\"https:\/\/michigan.it.umich.edu\/news\/wp-content\/uploads\/2018\/11\/worldspace-comply-header.png 600w, https:\/\/michigan.it.umich.edu\/news\/wp-content\/uploads\/2018\/11\/worldspace-comply-header-200x140.png 200w, https:\/\/michigan.it.umich.edu\/news\/wp-content\/uploads\/2018\/11\/worldspace-comply-header-286x200.png 286w, https:\/\/michigan.it.umich.edu\/news\/wp-content\/uploads\/2018\/11\/worldspace-comply-header-60x42.png 60w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-11051\" class=\"wp-caption-text\">(Deque)<\/p><\/div>\n<p><span style=\"font-weight: 400;\">You need not be an expert in digital or web accessibility to perform some low-threshold testing which will likely identify many high incidence issues in your EIT (electronic information technology). Technology requiring testing will include, but isn\u2019t limited to, web apps, web pages, blog posts, etc. And remember the golden rule: A little testing throughout the process is better than a lot of testing at the end.<\/span><\/p>\n<h1><span style=\"font-weight: 400;\">First step: Usability<\/span><\/h1>\n<p><span style=\"font-weight: 400;\">The first step is to take a look at the usability of what you are developing. Does the page or app make sense? Is it easily and intuitively navigable? Is the content structured in such a way that it can be parsed with minimal effort? Any usability issues will likely also present accessibility barriers. Fixing the first will often fix the latter to the benefit of all users. After following a basic usability overview and addressing those concerns, you are now ready to begin some automated testing. <\/span><\/p>\n<h1><span style=\"font-weight: 400;\">Automatic testing tools<\/span><\/h1>\n<p><span style=\"font-weight: 400;\">Most automated testing tools only find approximately 30-45% of issues, but they will provide you with a very useful baseline to determine where your page or app is at regarding accessibility. Some tools in this category do have a learning curve, but a few hours experimenting with them will turn you into an expert.<\/span><\/p>\n<ul>\n<li><strong>Wave:\u00a0<\/strong><span style=\"font-weight: 400;\">Somewhat dated but still very useful and friendly. Go to the <\/span><a href=\"https:\/\/wave.webaim.org\/\"><span style=\"font-weight: 400;\">WAVE site<\/span><\/a><span style=\"font-weight: 400;\">, input a URL, and it will provide a report. The summary panel on the left can be navigated to see issues and examine where on the page they occur.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"><strong>Axe:\u00a0<\/strong>This <a href=\"https:\/\/www.deque.com\/axe\/\">browser add-on<\/a> within Chrome and Firefox is\u00a0<\/span><span style=\"font-weight: 400;\">offered by Deque systems. Axe is extra handy because it highlights the problem areas within the interface and within the markup. This feature along with a brief explanation makes it easier for the technical and non-technical personnel to identify and understand the issues. \u00a0<\/span><\/li>\n<li><strong>Tota11y:\u00a0<\/strong><span style=\"font-weight: 400;\">A <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/tota11y-plugin-from-khan\/oedofneiplgibimfkccchnimiadcmhpe?hl=en\">Chrome browser extension<\/a> that has many helpful functions, like identifying illogical heading order, and missing labels. However, one of its most helpful features is the Screen Reader wand. Once the function is enabled, it reads to you what a screen-reader user hears as you hover over any content or navigation on a page. This feature can be helpful in understanding the nature of screen readers and potentially identify issues in the markup. <\/span><\/li>\n<li><strong>Comply:\u00a0<\/strong><span style=\"font-weight: 400;\">A truly automated testing tool licensed by U-M. With <a href=\"https:\/\/www.deque.com\/tools\/worldspace-comply\/\">Deque Comply<\/a>,\u00a0developers can scan complex informational websites and get back usable and actionable reports. Higher level reports and progress charts that provide an overview of a given website, or all the websites within a given unit, are useful for administrators.\u00a0<\/span><span style=\"font-weight: 400;\">All reports can be filtered and sorted by several criteria, and you can also set up a scheduled scan to see improvement over time.\u00a0<\/span><span style=\"font-weight: 400;\">Contact <\/span><a href=\"mailto:eas.accessibility@umich.edu\"><span style=\"font-weight: 400;\">eas.accessibility@umich.edu<\/span><\/a><span style=\"font-weight: 400;\">\u00a0to learn more about Comply.<\/span><\/li>\n<\/ul>\n<h1><span style=\"font-weight: 400;\">Additional testing practices and tools<\/span><\/h1>\n<p><span style=\"font-weight: 400;\">Some users will rely on the keyboard to interact with your page. Put your mouse away and try to operate your page with the keyboard only, using the tab key to move forward and the shift-tab key to move backward. Are you able to successfully navigate the page in question? Does the tab order make logical sense? Do all controls (links, buttons, fields, etc.) receive focus? Is the focus visible?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Take a look at your page. Do all elements have good contrast between foreground and background? If you suspect that a particular contrast is not good you should inspect it. The <\/span><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\"><span style=\"font-weight: 400;\">WebAim Contrast Checker<\/span><\/a><span style=\"font-weight: 400;\"> is a friendly tool to do so. It is a free tool that tells a user whether or not the color palettes throughout their digital media meet the minimum contrast ratios as outlined by WCAG 2.0. This tool provides your current contrast ratio and allows you to manipulate the color gradient, so you can keep the color combination, but adjust the hue and intensity a bit. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Some of your users will have a variety of vision deficits. The <\/span><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/nocoffee\/jjeeggmbnhckmgdhmgdckeigabjfbddl\"><span style=\"font-weight: 400;\">NoCoffee<\/span><\/a><span style=\"font-weight: 400;\"> (Chrome only) vision simulator is a browser extension that manipulates your interface to demonstrate a range of visual disabilities: glaucoma, various forms of colorblindness, cataracts and more. <\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Screen readers<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Learning how to operate a screen reader will be a big time investment, but well worth it if you are producing large amounts of EIT. We recommend \u00a0<\/span><a href=\"https:\/\/www.nvaccess.org\/\"><span style=\"font-weight: 400;\">NVDA<\/span><\/a><span style=\"font-weight: 400;\"> for Windows and <a href=\"https:\/\/www.apple.com\/accessibility\/mac\/vision\/\">VoiceOver<\/a> for macOS. The first is free and open source, the second comes with the operating system. There is also <a href=\"https:\/\/www.freedomscientific.com\/Products\/Blindness\/JAWS\">JAWS<\/a> from Freedom Scientific, for which the university has a license.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Get help<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Contact\u00a0<\/span><a href=\"mailto:eas.accessibility@umich.edu\"><span style=\"font-weight: 400;\">eas.accessibility@umich.edu<\/span><\/a><span style=\"font-weight: 400;\">\u00a0for consultation on accessibility related matters. We can assist you and your team in learning how to test your digital content for accessibility. We can also review existing digital information technology and work with you in addressing any issues.<\/span><\/p>\n<hr \/>\n<p><i>(Gonzalo Silverio, a digital accessibility analyst senior with ITS, contributed to this article.)<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"<p>You need not be an expert in digital or web accessibility to perform some low-threshold testing which will likely identify many high incidence issues in your EIT (electronic information technology). Technology requiring testing will include, but isn\u2019t limited to, web apps, web pages, blog posts, etc. And remember the golden rule: A little testing throughout the process is\u2026 <span class=\"read-more\"><a href=\"https:\/\/michigan.it.umich.edu\/news\/2018\/11\/28\/diy-web-accessibility-testing-tools-practices\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":92,"featured_media":11050,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","_umich_oidc_access":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","footnotes":""},"categories":[4],"tags":[95,585,26],"class_list":["post-11033","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-features","tag-accessibility","tag-testing","tag-training"],"uagb_featured_image_src":{"full":["https:\/\/michigan.it.umich.edu\/news\/wp-content\/uploads\/2018\/11\/deque-developer-e1543594458465.png",600,400,false],"thumbnail":["https:\/\/michigan.it.umich.edu\/news\/wp-content\/uploads\/2018\/11\/deque-developer-200x133.png",200,133,true],"medium":["https:\/\/michigan.it.umich.edu\/news\/wp-content\/uploads\/2018\/11\/deque-developer-300x200.png",300,200,true],"medium_large":["https:\/\/michigan.it.umich.edu\/news\/wp-content\/uploads\/2018\/11\/deque-developer-768x513.png",665,444,true],"large":["https:\/\/michigan.it.umich.edu\/news\/wp-content\/uploads\/2018\/11\/deque-developer-700x467.png",600,400,true],"1536x1536":["https:\/\/michigan.it.umich.edu\/news\/wp-content\/uploads\/2018\/11\/deque-developer-e1543594458465.png",600,400,false],"2048x2048":["https:\/\/michigan.it.umich.edu\/news\/wp-content\/uploads\/2018\/11\/deque-developer-e1543594458465.png",600,400,false],"excerpt-thumbnail":["https:\/\/michigan.it.umich.edu\/news\/wp-content\/uploads\/2018\/11\/deque-developer-200x140.png",200,140,true],"themonic-thumbnail":["https:\/\/michigan.it.umich.edu\/news\/wp-content\/uploads\/2018\/11\/deque-developer-60x42.png",60,42,true],"ioslider-thumbnail":["https:\/\/michigan.it.umich.edu\/news\/wp-content\/uploads\/2018\/11\/deque-developer-658x300.png",658,300,true],"post-thumbnail":["https:\/\/michigan.it.umich.edu\/news\/wp-content\/uploads\/2018\/11\/deque-developer-665x444.png",665,444,true],"400x250-crop":["https:\/\/michigan.it.umich.edu\/news\/wp-content\/uploads\/2018\/11\/deque-developer-e1543594458465.png",375,250,false]},"uagb_author_info":{"display_name":"Darrell Williams, ITS EAS","author_link":"https:\/\/michigan.it.umich.edu\/news\/author\/willidar\/"},"uagb_comment_info":0,"uagb_excerpt":"You need not be an expert in digital or web accessibility to perform some low-threshold testing which will likely identify many high incidence issues in your EIT (electronic information technology). Technology requiring testing will include, but isn\u2019t limited to, web apps, web pages, blog posts, etc. And remember the golden rule: A little testing throughout&hellip;","_links":{"self":[{"href":"https:\/\/michigan.it.umich.edu\/news\/wp-json\/wp\/v2\/posts\/11033","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/michigan.it.umich.edu\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/michigan.it.umich.edu\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/michigan.it.umich.edu\/news\/wp-json\/wp\/v2\/users\/92"}],"replies":[{"embeddable":true,"href":"https:\/\/michigan.it.umich.edu\/news\/wp-json\/wp\/v2\/comments?post=11033"}],"version-history":[{"count":13,"href":"https:\/\/michigan.it.umich.edu\/news\/wp-json\/wp\/v2\/posts\/11033\/revisions"}],"predecessor-version":[{"id":11398,"href":"https:\/\/michigan.it.umich.edu\/news\/wp-json\/wp\/v2\/posts\/11033\/revisions\/11398"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/michigan.it.umich.edu\/news\/wp-json\/wp\/v2\/media\/11050"}],"wp:attachment":[{"href":"https:\/\/michigan.it.umich.edu\/news\/wp-json\/wp\/v2\/media?parent=11033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/michigan.it.umich.edu\/news\/wp-json\/wp\/v2\/categories?post=11033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/michigan.it.umich.edu\/news\/wp-json\/wp\/v2\/tags?post=11033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}