CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebAIM: 25 Accessibility Tips to Celebrate 25 Years</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">  </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>25 Accessibility Tips to Celebrate 25 Years</h1> <p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> > <a href="/blog/">Blog</a> > 25 Accessibility Tips to Celebrate 25 Years</p> <div class="section post" id="post-2768"> <div class="entry"> <p>As WebAIM celebrates our 25 year anniversary this month, we’ve shared 25 accessibility tips on our <a href="https://www.linkedin.com/company/webaim/">LinkedIn</a> and <a href="https://x.com/webaim">Twitter/X</a> social media channels. All 25 quick tips are compiled below.</p> <h2 class="wp-block-heading">Tip #1: When to Use Links and Buttons</h2> <p><a href="https://webaim.org/techniques/hypertext/">Links</a> are about navigation. Buttons are about function. To eliminate confusion for screen reader users, use a <code><button></code> element for in-page functions, not a link.</p> <h2 class="wp-block-heading">Tip #2: Give Excel Tabs Descriptive Names</h2> <p>When you create a new <a href="https://webaim.org/techniques/excel/">Excel</a> file, there will be one blank Sheet open. Each sheet has a Tab located at the bottom of the user interface.To replace the Tab’s default label (e.g., “Sheet1”) with a name for the Sheet:</p> <ol class="wp-block-list"> <li>Right-click the Sheet’s tab.</li> <li>Select “Rename” from the menu.</li> <li>Type in text that provides a high-level description of the Sheet’s content.</li> </ol> <p>This name will be read to a screen reading software user when they open the Sheet. Descriptive sheet names help all users to navigate workbooks that have multiple sheets.</p> <h2 class="wp-block-heading">Tip #3: Test Keyboard Accessibility </h2> <p>When designing a website, be sure to test interactive elements using just the <a href="https://webaim.org/techniques/keyboard/">keyboard</a>. Many users are not able to use a mouse, so all their interaction is done through a keyboard, or a device that simulates a keyboard.</p> <p>Ensure that your website is accessible to all users by eliminating interactive elements that require a mouse.</p> <h2 class="wp-block-heading">Tip #4: Check Contrast </h2> <p><a href="https://webaim.org/articles/visual/colorblind">Color blindness</a> is very common. Be sure that you have a good contrast between your text and its background. If colors are too similar, some individuals will not be able to see the difference.</p> <p>Use <a href="https://webaim.org/resources/contrastchecker/">WebAIM’s contrast checker</a> to ensure appropriate contrast<a href="https://webaim.org/resources/contrastchecker/">.</a></p> <h2 class="wp-block-heading">Tip #5: Use Correct Headings</h2> <p>Properly tagged <a href="https://webaim.org/techniques/headings/">headings</a> allow screen reader users to “skim” a page by reading those headings. Use:</p> <ul class="wp-block-list"> <li>Heading level 1 for main headings</li> <li>Heading level 2 for subsections</li> <li>Heading level 3 for subsections under H2</li> <li>Heading level 4 for subsections under H3</li> <li>Etc.</li> </ul> <p>Distinct and clear headings help ALL users to find the information they need more easily.</p> <h2 class="wp-block-heading">Tip #6: Use Active Voice</h2> <p>Passive voice can be difficult to understand because it weakens the action of a sentence. An example of passive voice is, “The car was driven by Jim.” Active voice is much clearer and will be easily understood by a broader audience. For example, “Jim drove the car.”</p> <p>If more than 20% of your document uses passive voice, consider changing some of the passive sentences to <a href="https://webaim.org/techniques/writing/#active" data-type="link" data-id="https://webaim.org/techniques/writing/#active">active voice</a>.聽</p> <h2 class="wp-block-heading">Tip #7: Use descriptive text when creating a hyperlink</h2> <p>Links with descriptive text are not only easier for screen reader users to find, but also clearer for all users. </p> <p>For example: Your document contains a link to an external webpage with more information. Non-descriptive text is written as “Learn More” or “Click Here”. Descriptive text indicates information that the user will find by clicking on the link. Such as, “Learn More About Best Accessibility Practices” or “Register for the WebAIM Conference”. </p> <h2 class="wp-block-heading">Tip #8: Limit ARIA use</h2> <p>ARIA should only be used where native HTML falls short. If it can be built without ARIA, it should be. <a href="https://webaim.org/techniques/aria/#rules" data-type="link" data-id="https://webaim.org/techniques/aria/#rules">Using ARIA as sparingly</a> as possible is the best way to avoid accidentally creating inaccessible interactions.</p> <h2 class="wp-block-heading">Tip #9: Choose Accessible Fonts</h2> <p>Simple text is much easier to recognize and read than complex <a href="https://webaim.org/techniques/fonts/">fonts</a>. For example, cursive or script fonts are more difficult to recognize. Use complex fonts sparingly and do not use them for long sections of text. </p> <h2 class="wp-block-heading">Tip #10: How to Organize Regions to Optimize for Accessibility</h2> <p>Most web pages need four <a href="https://webaim.org/techniques/semanticstructure/#regions">regions</a> for an accessible structure.</p> <ol class="wp-block-list"> <li><strong>Header region: </strong>Everything that is shown to the user before the main content. For example, logins, settings, and top navigation.</li> <li><strong>Nav region: </strong>Use a nav region if the header has a set of links or a menu for navigating to other places on the site.</li> <li><strong>Main region: </strong>The page’s primary content. </li> <li><strong>Footer region: </strong>The content that comes after the main region at the bottom of the page. For example, links to resources, logos, and contact information.  </li> </ol> <h2 class="wp-block-heading">Tip #11: Linking Images</h2> <p>When creating an <a href="https://webaim.org/blog/alt-text-and-linked-images/">image link</a>, the image alternative text must present the content of the image AND describe the destination of the link. Make sure that the image’s alt text would be sufficient if it were the text in a regular link.</p> <h2 class="wp-block-heading">Tip #12: Accessible Website Design for Different Viewport Sizes </h2> <p>When designing, keep in mind how page information <a href="https://webaim.org/techniques/reflow/">reflows</a> in different sized viewports, such as zoomed browsers or mobile devices. You can test your content at different viewport sizes by zooming the page or using the Device Toolbar in Developer Tools. Zoom or use the Device Toolbar allows you to simulate your website on different mobile devices.</p> <h2 class="wp-block-heading">Tip #13: 7 Ways to Support Accessibility on an Organizational Level</h2> <p>Web developers and content creators can learn and use accessibility techniques, but that will not sustain accessibility over the long haul because of <a href="https://webaim.org/articles/strategicframework/">system-level issues</a>. Organizations need to recognize that accessibility is a requirement, and then actively support it. Supporting accessibility includes:</p> <ol class="wp-block-list"> <li>Integrating it into the development and QA process.</li> <li>Creating a culture of communication, coordination, and motivation that supports accessibility.</li> <li>Hiring new employees who have relevant accessibility skills.</li> <li>Building a procurement process that accounts for accessibility in code libraries, widgets, tools, & platforms.</li> <li>Providing staff with the training, time, and support to succeed.</li> <li>Testing accessibility outcomes and using the data to improve internal processes.</li> <li>Establishing policy and governance that establishes responsibility for accessibility widely.</li> </ol> <h2 class="wp-block-heading">Tip #14: Wrapping Text with Images</h2> <p>In Word documents, only images with the wrap text style “in line with text” are recognized by screen readers. This is the default wrap text style in Word.</p> <h2 class="wp-block-heading">Tip #15: Optimize a Sheet in Excel for Accessibility</h2> <p>Adding a text description directly into a sheet can benefit users in the same way that a Heading 2 functions in a Word document. Although this text description is not a requirement, it will provide a visual user with a high-level description of the sheet, the same way that the sheet’s name functions for screen reading software users. This text should be clear, succinct, and unique in the workbook.</p> <h2 class="wp-block-heading">Tip #16: Optimize Document Link Text</h2> <p>Although Office will automatically create a <a href="https://webaim.org/techniques/word/#links">hyperlink</a> from the text that resembles the address of a web resource, this link text can usually be optimized by linking more descriptive text. Effective link text is descriptive, concise, unique in the document (when possible), and visually distinct from text that is not linked.</p> <h2 class="wp-block-heading">Tip #17: Why it is Important to Make Responsive Layouts Accessible</h2> <p><a href="https://webaim.org/techniques/reflow/">Responsive layouts</a> aren鈥檛 just for touch interfaces on small devices. They are also for users who zoom content on full-size displays, and those who connect keyboards to small devices.</p> <p>Ensure that pages remain readable and usable when the viewport is narrowed down to 320 pixels wide.</p> <h2 class="wp-block-heading">Tip #18: Organizational Leadership’s Role in Accessibility Efforts</h2> <p>Having <a href="https://webaim.org/articles/strategicframework/">organizational leadership</a> actively advance accessibility is critical to moving from reacting to accessibility bugs after they’re live to addressing accessibility from the start. The leadership team needs an appropriate understanding of how accessibility fits into overall technology strategy. Doing so can advance things like policy, planning, hiring, and resource acquisition to help make accessibility an organizational norm.</p> <h2 class="wp-block-heading">Tip #19: How to Use DevTools to Find Page Elements</h2> <p>The Elements panel in <a href="https://webaim.org/articles/evaluationguide/#othertools">DevTools</a> provides an easy way to find page elements of a particular type.聽</p> <p>Here are 3 ways to find page elements:</p> <ol class="wp-block-list"> <li>Perform a search for the element or attribute name. For example: <ul class="wp-block-list"> <li><code><h2></code></li> <li><code>aria-label</code></li> </ul> </li> <li>Find elements based on their CSS selectors. For example: <ul class="wp-block-list"> <li><code>[aria-label]</code></li> </ul> </li> <li>Use the Console panel to quickly list elements. For example: <ul class="wp-block-list"> <li>Enter <code>document.querySelectorAll("button");</code> into the Console</li> <li>This will return a list of all buttons on the page.</li> <li>Then, click on an element in the list to view it in the Elements panel.</li> </ul> </li> </ol> <h2 class="wp-block-heading">Tip #20: The Difference Between aria-required and required </h2> <p>The semantics for <code>aria-required="true"</code> and the HTML <code>required</code> attribute are the same鈥攕creen readers present them identically. However, <code>aria-required</code> only indicates that <a href="https://webaim.org/techniques/forms/controls#requiredfields">a field is required</a>, whereas the <code>required</code> attribute provides a functionality change. The <code>required</code> attribute will visually inform the user that a field is required if it is bypassed without entered content and will mark the field as invalid.</p> <h2 class="wp-block-heading">Tip #21: Avoid Defining Element Height</h2> <p>Be very cautious when setting a defined height for web page elements that contain text. Text can always be customized by the end user to change the typeface, make the text larger, or to increase the letter, word, line, or paragraph spacing. This may cause text to cover or move under other page elements because it no longer fits within the defined element’s height.</p> <p>Either avoid defining element height or use relative height units to allow the element to scale with its text contents.</p> <h2 class="wp-block-heading">Tip #22: Provide Descriptive Page Titles</h2> <p>Providing a descriptive, succinct <a href="https://webaim.org/techniques/pagetitle/">page title</a> is important for accessibility.</p> <p>The page title text usually appears at the very top of the browser window or in the web page’s browser tab. WCAG 2 requires that page titles describe the page content or purpose. Because the page title is read on each page, it should be short – generally no more than a few words. The number of visible characters in the browser tab is limited, so the information that distinguishes that page content should be presented early in the title.</p> <h2 class="wp-block-heading">Tip #23: How to Test Keyboard Navigation </h2> <p>When navigating with a <a href="https://webaim.org/techniques/keyboard/">keyboard</a>, the navigation order of interactive elements should be logical and intuitive. It should generally align with the logical visual order. Further, each interactive element needs to have a visible focus indicator.</p> <p>How to test keyboard navigation:</p> <ul class="wp-block-list"> <li>Click the <kbd>Tab</kbd> key to navigate forward</li> <li>Click <kbd>Shift</kbd> + <kbd>Tab</kbd> to navigate backward</li> <li>Click <kbd>Enter</kbd> to activate a link</li> <li>Click <kbd>Enter</kbd> or <kbd>Spacebar</kbd> to activate a button</li> <li>Click <kbd>Spacebar</kbd> to check/uncheck a checkbox</li> </ul> <p><a href="http://webaim.org/techniques/keyboard">Learn more about keyboard testing techniques.</a></p> <h2 class="wp-block-heading">Tip #24: Do Not Rely on Hardware Orientation or Actuation </h2> <p>Users with <a href="https://webaim.org/articles/motor/">motor disabilities</a> may not be able to manipulate hardware or a mobile device, and certain sensor actuations and inputs may not be possible. Ensure content works in both horizontal or vertical orientation. Do not rely on motion actuation (such as shaking or panning the device) or pointer gestures (such as swiping or dragging).</p> <h2 class="wp-block-heading">Tip #25: Strive for Accessible Experiences </h2> <p>When testing for accessibility issues in screen readers, testers can sometimes get hung up on how different screen reader software can read, present, or navigate the same content in different ways. Just as users are diverse, the software and browsers they use are also diverse.</p> <p>Instead of worrying about creating an identical experience in different assistive technologies, we should strive to create an accessible experience that can be adapted by the end user.</p> <p></p> </div> </div> <div class="navigation"> <div class="floatleft"></div> <div class="floatright"></div> </div>  <div id="blogcomments">  </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/25-tips/#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>  <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='2768' 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="9942c5d071" /></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="113"/><script>document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );</script></p> </form> </div> </article>  <aside id="articlemeta"> <div id="updated">October 31, 2024<br><br> <img src="/blog/authors/1.jpg" alt="" /><br>Jared Smith<br><br> <a href="https://webaim.org/blog/25-tips/#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>