CINXE.COM
WebAIM: Using Severity Ratings to Prioritize Web Accessibility Remediation
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebAIM: Using Severity Ratings to Prioritize Web Accessibility Remediation</title> <link rel="shortcut icon" href="/media/favicon.ico"> <link rel="home" href="/"> <link rel="search" href="/search/"> <link rel="alternate" href="https://webaim.org/blog/feed" type="application/rss+xml" title="WebAIM Blog"> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Y41PF8WV9X"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Y41PF8WV9X'); </script> <link href="/styles/main.css" rel="stylesheet" type="text/css"> <link href="/styles/print.css" rel="stylesheet" type="text/css" media="print"> <script src="/media/scripts/jquery.js"></script> <script src="/media/scripts/main.js"></script> <link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Kameron:400,700' rel='stylesheet' type='text/css'> <link href="/styles/documents.css?ver=2" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet"> <!--[if lt IE 9]> <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="headcontainer" class="clearfix" style="background-image: url(/media/banners/community.jpg)"> <header> <div id="skiptocontent"><a href="#maincontent">skip to main content</a></div> <h2><a href="/"><img src="/media/logo.png" width="315" height="83" alt="WebAIM - Web Accessibility In Mind"></a></h2> <nav> <h2 class="hidden">Main Navigation</h2> <ul> <li><a href="/services/">Services</a></li> <li><a href="/articles/">Articles</a></li> <li><a href="/resources/">Resources</a></li> <li><a href="/projects/">Projects</a></li> <li class="current"><a href="/community/">Community</a></li> </ul> </nav> <div id="search"> <form method="get" role="search" action="/search/" id="sitesearch"> <p class="search"><span><label for="q">Search:</label> <input type="text" name="q" id="q"><input type="image" src="/media/template/search.svg" alt="Submit Search"></span></p> </form> <p class="intro"><a href="/intro">Introduction to Web Accessibility</a></p> <p class="training"><a href="/services/training">WebAIM Training</a></p> </div> </header> </div> <main id="maincontainer" class="clearfix"> <article id="maincontent"> <h1>Using Severity Ratings to Prioritize Web Accessibility Remediation</h1> <p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> > <a href="/blog/">Blog</a> > Using Severity Ratings to Prioritize Web Accessibility Remediation</p> <div class="section post" id="post-2777"> <div class="entry"> <p>So, you’ve found your website’s accessibility issues using <a href="https://wave.webaim.org/">WAVE</a> or other testing tools, and by completing <a href="https://webaim.org/articles/evaluationguide/">manual testing</a> using a keyboard, a screen reader, and zooming the browser window. Now what? When it comes to prioritizing web accessibility fixes, ranking the severity of each issue is an effective way to prioritize and make impactful improvements. In WebAIM’s <a href="https://webaim.org/services/evaluation/">accessibility audits</a>, each issue we identify is assigned one of four levels of severity based on how it impacts end users. In this article, we’ll go over these severity ratings for accessibility and the types of issues that typically fall under these categories.</p> <h2 class="wp-block-heading">Critical Issues</h2> <p>Accessibility issues that fall under the critical rating cause web content or functionality to be completely inaccessible to some users. To determine if an issue is critical, consider if a group of users is completely unable to access a specific type of web content. Critical issues typically impact screen reader users and users who navigate using the keyboard. For example, when interactive elements cannot be reached using the keyboard, these users cannot perform important tasks like using navigation menus or selecting elements like buttons or custom form inputs. <a href="https://webaim.org/techniques/aria/#rules">Using native HTML elements whenever possible</a> and incorporating keyboard and screen reader testing into the development lifecycle can ensure that these issues are avoided.</p> <p>Other examples of critical issues might be videos without captions that prevent users who are deaf and hard of hearing from accessing media or content that strobes or flashes in a way that may cause seizures for users with photosensitive epilepsy.</p> <h2 class="wp-block-heading">Significant Issues</h2> <p>Accessibility issues that fall under the significant rating cause web content or functionality to be very difficult for some users to interact with or use effectively. A common example of a significant issue is missing visual focus indicators. For users who navigate using the keyboard, missing visual focus indicators make it extremely difficult to know what interactive element has keyboard focus. </p> <p>Another example of a significant issue includes empty buttons and links. Buttons and links without descriptive text make it extremely difficult for screen reader users to navigate a page, especially when tabbing between interactive elements. In these cases, users are forced to search for context elsewhere on the page, adding time and frustration to the user experience.</p> <h2 class="wp-block-heading">Moderate Issues</h2> <p>Accessibility issues that fall under the moderate rating cause users to spend unnecessary time or effort to access or use web content or functionality. An example of a moderate accessibility issue is a lack of semantic HTML elements like page regions and headings that help screen reader users navigate the page. Screen reader users will still be able to navigate a page without page regions and headings, but will not be able to navigate directly to specific page regions or headings using shortcuts built into their screen reader’s software.</p> <h2 class="wp-block-heading">Recommendations</h2> <p>Accessibility issues that fall under the recommendation rating are “nice to fix” (as in, “nice to have”), because they represent content or functionality that could be strengthened in terms of accessibility and usability. Recommendation level issues are typically related to accessibility best practices and code maintainability. For example, applying <a href="https://webaim.org/techniques/keyboard/tabindex">tabindex=”0”</a> to natively keyboard focusable elements, such as links and buttons, does not change the elements’ behavior, but may cause them to be announced redundantly as “clickable” by screen readers. Additionally, the added work of including and then removing tabindex=”0” from natively focusable HTML elements adds extra time and effort to the development process. Becoming familiar with how screen readers announce different elements and considering what information is helpful for users to hear, and what information is redundant, is a straightforward way to improve user experience and code maintenance.</p> <h2 class="wp-block-heading">Conclusion</h2> <p>The issues explained within each level above are just examples. As you perform web accessibility evaluations, applying these severity ratings can help you efficiently prioritize fixes and significantly improve your website’s accessibility.</p> </div> </div> <div class="navigation"> <div class="floatleft"></div> <div class="floatright"></div> </div> <!-- You can start editing here. --> <div id="blogcomments"> <!-- If comments are open, but there are no comments. --> </div> <div id="respond"> <h2>Leave a Comment</h2> <div class="cancel-comment-reply"> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/severity-ratings/#respond" style="display:none;">Click here to cancel reply.</a></small> </div> <form action="https://webaim.org/blog/wp-comments-post.php" method="post" id="commentform"> <div><label for="author">Name (required)</label><br /> <input type="text" name="author" id="author" value="" size="22" /> </div> <div><label for="email">Email address (will not be published) (required)</label><br /> <input type="text" name="email" id="email" value="" size="22" /> </div> <div><label for="url">Website</label><br /><input type="text" name="url" id="url" value="" size="22" /> </div> <!--<p><small><strong>XHTML:</strong> You can use these tags: <code><a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> </code></small></p>--> <div><label for="comment">Comments</label><br /> <small>You can use these tags: <a> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> </small><br /> <textarea name="comment" id="comment" style="width:80%" rows="10"></textarea></div> <p><input name="submit" type="submit" id="submit" value="Submit Comment" /> <input type='hidden' name='comment_post_ID' value='2777' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p> <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="0156304ff0" /></p><p style="display: none !important;" class="akismet-fields-container" data-prefix="ak_"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js" value="99"/><script>document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );</script></p> </form> </div> </article> <!-- --> <aside id="articlemeta"> <div id="updated">November 22, 2024<br><br> <img src="/blog/authors/12.jpg" alt="" /><br>Alaina Foust<br><br> <a href="https://webaim.org/blog/severity-ratings/#respond"><span class="comments">No Comments</span><br /></a> </div> <div class="sidebox"> <h2>Search the blog</h2> <form role="search" method="get" id="searchform" class="searchform" action="https://webaim.org/blog/"> <div> <label class="screen-reader-text" for="s">Search for:</label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Search" /> </div> </form> </div> <div class="sidebox"> <h2>Blog Archives</h2> <ul> <li><a href='https://webaim.org/blog/2024/11/'>November 2024</a></li> <li><a href='https://webaim.org/blog/2024/10/'>October 2024</a></li> <li><a href='https://webaim.org/blog/2024/09/'>September 2024</a></li> <li><a href='https://webaim.org/blog/2024/07/'>July 2024</a></li> <li><a href='https://webaim.org/blog/2024/05/'>May 2024</a></li> <li><a href='https://webaim.org/blog/2024/'>2024</a></li> <li><a href='https://webaim.org/blog/2023/'>2023</a></li> <li><a href='https://webaim.org/blog/2022/'>2022</a></li> <li><a href='https://webaim.org/blog/2021/'>2021</a></li> <li><a href='https://webaim.org/blog/2020/'>2020</a></li> <li><a href='https://webaim.org/blog/2019/'>2019</a></li> <li><a href='https://webaim.org/blog/2018/'>2018</a></li> <li><a href='https://webaim.org/blog/2017/'>2017</a></li> <li><a href='https://webaim.org/blog/2016/'>2016</a></li> <li><a href='https://webaim.org/blog/2015/'>2015</a></li> <li><a href='https://webaim.org/blog/2014/'>2014</a></li> <li><a href='https://webaim.org/blog/2013/'>2013</a></li> <li><a href='https://webaim.org/blog/2012/'>2012</a></li> <li><a href='https://webaim.org/blog/2011/'>2011</a></li> <li><a href='https://webaim.org/blog/2010/'>2010</a></li> <li><a href='https://webaim.org/blog/2009/'>2009</a></li> <li><a href='https://webaim.org/blog/2008/'>2008</a></li> <li><a href='https://webaim.org/blog/2007/'>2007</a></li> <li><a href='https://webaim.org/blog/2006/'>2006</a></li> </ul> <p><a href="/community/rss">RSS Feeds</a></p> </div> </aside> </main> <footer> <div id="footerresources"> <div class="footerblock"> <h2 id="copyright">©2024 WebAIM</h2> <p id="contact">Institute for Disability Research, Policy, and Practice<br> Utah State University<br> 6807 Old Main Hill<br> Logan, UT 84322-6807<br> <a class="phone" href="tel:4357977024">435.797.7024</a></p> <div id="checkpage"> <h2>Check Your Accessibility</h2> <form action="https://wave.webaim.org/report" novalidate> <label for="waveurl">Web site address:</label> <input type="url" id="waveurl" name="url" title="Web site address"> <input type="submit" value="WAVE"> </form> </div> </div> <div class="footerblock"> <h2 id="blog">From the Blog</h2> <ul><li><a href="/blog/severity-ratings/">Using Severity Ratings to Prioritize Web Accessibility Remediation</a></li><li><a href="/blog/25-tips/">25 Accessibility Tips to Celebrate 25 Years</a></li><li><a href="/blog/celebrating-webaims-25th-anniversary/">Celebrating WebAIM's 25th Anniversary</a></li><li><a href="/blog/introducing-ncademi/">Introducing NCADEMI: The National Center on Accessible Digital Educational Materials & Instruction </a></li></ul> </div> <div class="footerblock"> <h2 id="popular">Popular Resources</h2> <ul> <li><a href="/training/virtual">WebAIM Training</a></li> <li><a href="/standards/wcag/checklist">WCAG 2 Checklist</a></li> <li><a href="/newsletter">WebAIM Monthly Newsletter</a></li> <li><a href="/resources/contrastchecker">Color Contrast Checker</a></li> <li><a href="/resources/designers/">Web Accessibility for Designers</a></li> <li><a href="http://wave.webaim.org/">WAVE Web Accessibility Evaluation Tool</a></li> </ul> </div> <div id="footerlinks"> <ul> <li><a id="footercontact" href="/contact">Contact</a></li> <li><a id="footerabout" href="/about">About</a></li> <li><a id="footerrss" href="/community/rss">RSS Feeds</a></li> <li><a id="footertwit" href="http://twitter.com/webaim">Twitter</a></li> <li><a id="footercopyright" href="/copyright">Copyright & Terms of Use</a></li> </ul> </div> <div class="clear"></div> </div> </footer> </body> </html>