Focus management and inert

Home > Designing, Others > Focus management and inert

October 19th, 2020 admin Leave a comment Go to comments

Many forms of assistive technology use keyboard navigation to understand and take action on screen content. One way of navigating is via the Tab key. You may already be familiar with this way of navigating if you use it to quickly jump from input to input on a form without having to reach for your mouse or trackpad.

Tab will jump to interactive elements in the order they show up in the DOM. This is one of the reasons why it is so important that the order of your source code matches the visual hierarchy of your design.

The list of interactive elements that are tabbable is:

Anchors, when the href attribute is present,
and </a></code>, with an accompanying <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label">label</a>,</li> <li><code><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select"></a></code>,</li> <li><code><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details"><br /> <details></a></code>,</li> <li><code><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio"><audio></a></code> and <code><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video"><video></a></code> when controls are present,</li> <li><code><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object"></a></code>, depending on how it is used,</li> <li>any element with scroll overflow in Firefox,</li> <li>any element with the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a> attribute applied to it, and</li> <li>any element with the <code><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code> attribute applied to it (more on this one in a bit).</li> </ul> <p>An interactive element gains focus when:</p> <ul> <li>It has been navigated to via the <kbd>Tab</kbd> key, </li> <li>it is clicked on, following an anchor that links to another focusable element, </li> <li>or focus is programmatically set through <code><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus">element.focus()</a></code> in JavaScript.</li> </ul> <p>Focus is analogous to hovering over an element with your mouse cursor, in that you’re identifying the thing you want to activate. It’s also <a target="_blank" href="https://css-tricks.com/focusing-on-focus-styles/">why visually obvious focus styles are so important</a>.</p> <figure><video controls loop muted src="https://css-tricks.com/wp-content/uploads/2020/10/focus-navigation.mp4"></video><figcaption>Focus indication moving through a homepage wireframe. It starts on the logo, moves to products, then services, then careers, blog, contact, and stops on a Learn more button.</figcaption></figure> <h3>Focus management</h3> <p>Focus management is the practice of coordinating what can and cannot receive focus events. It is one of the trickier things to do in front-end development, but it is important for making websites and web apps accessible.</p> <h4>Good practices for focus management</h4> <p><strong>99% of the time, you want to leave focus order alone.</strong> I cannot stress this enough. </p> <p>Focus will just work for you with no additional effort required, provided you’re using the <code><button></code> element for buttons, the anchor element for links, the <code></code> element for user input, etc.</p> <p>There are rare cases where you might want to apply focus to something out of focus order, or make something that typically can’t receive focus events be focusable. Here are some guidelines for how to go about it in an accessible, intuitive to navigate way:</p> <div> <div> <p>? <strong>Do: learn about the <code>tabindex</code> attribute</strong></p> <p><code>tabindex</code> allows an element to be focused. It accepts an integer as a value. Its behavior changes depending on what integer is used.</p> </div> </div> <div> <div> <p>? <strong>Don’t: Apply <code>tabindex="0"</code> to things that don’t need it</strong></p> <p>Interactive elements that can receive keyboard focus (such as the <code><button></code> element) don’t need to have the <code>tabindex</code> attribute applied to them. </p> <p>Additionally, you don’t need to declare <code>tabindex</code> on non-interactive elements to ensure that they can be read by assistive technology (in fact, this is a WCAG failure if no role and accessible name is present). Doing so actually creates <a target="_blank" href="https://adrianroselli.com/2019/02/uncanny-a11y.html#Tabindex">an unexpected and difficult to navigate experience</a> for a person who uses assistive technology — they have other, expected ways to read this content.</p> </div> </div> <div> <div> <h5>? Do: Use <code>tabindex="-1"</code> for focusing with JavaScript</h5> <p><code>tabindex="-1"</code> is used to create accessible interactive widgets with JavaScript.</p> <p>A declaration of <code>tabindex="-1"</code> will make an element focusable via JavaScript or click/tap. It will not, however, let it be navigated to via the <kbd>Tab</kbd> key.</p> </div> </div> <div> <div> <h5>? Don’t: Use a positive integer as a <code>tabindex</code> value</h5> <p>This is a serious antipattern. Using a positive integer will override the expected tab order, and create a confusing and disorienting experience for the person trying to navigate your content. </p> <p>One instance of this is bad enough. Multiple declarations is a total nightmare. Seriously: don’t do it.</p> </div> </div> <div> <div> <h5>? Don’t: Create a manual focus order</h5> <p>Interactive elements can be tabbed to just by virtue of being used. You don’t need to set a series of <code>tabindex</code> attributes with incrementing values on every interactive element in the order you think the person navigating your site should use. You’ll let the order of the elements in the DOM do this for you instead.</p> </div> </div> <h3>Focus trapping</h3> <p>There may be times where you need to prevent things from being focused. A good example of this is <a target="_blank" href="https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element">focus trapping</a>, which is the act of conditionally restricting focus events to an element and its children.</p> <p>Focus trapping is not to be confused with <a target="_blank" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html">keyboard traps</a> (sometimes referred to as focus traps). Keyboard traps are situations where someone navigating via keyboard cannot escape out of a widget or component because of a nasty loop of poorly-written logic.</p> <p>A practical example of what you would use focus trapping for would be for a modal:</p> <figure><video controls loop muted src="https://css-tricks.com/wp-content/uploads/2020/10/trapped-focus.mp4"></video><figcaption>Focus indication moving through a homepage wireframe and opening a modal to demonstrate focus trapping. Inside the modal are tab stops for the modal container, a video play button, a cancel button, a purchase button, and a close button. After the modal is closed focus is returned to the button that triggered the modal.</figcaption></figure> <h4>Why is it important?</h4> <p>Keeping focus within a modal communicates its bounds, and helps inform what is and is not modal content — it is analogous to how a sighted person can see how a modal “floats” over other website or web app content. This is important information if: </p> <ul> <li>You have <a target="_blank" href="https://adrianroselli.com/2017/02/not-all-screen-reader-users-are-blind.html">low or no vision</a> and rely on screen reader announcements to help communicate the shift in interaction mode.</li> <li>You have low vision and a magnified display, where focusing outside of the bounds of the modal may be confusing and disorienting.</li> <li>You navigate solely via keyboard and could otherwise tab out of the modal and get lost on the underlying page or view trying to get back into the modal.</li> </ul> <h4>How do you do it?</h4> <p>Reliably managing focus is a complicated affair. You need to use JavaScript to:</p> <ol> <li>Determine the container elements of all focusable elements on the current page or view.</li> <li>Identify the bounds of the trapped content, including the first and last focusable item.</li> <li>Remove both interactivity and discoverability from anything identified as focusable that isn’t within that set of trapped content.</li> <li>Move focus into the trapped content.</li> <li>Listen for events that signals dismissing the trapped content (save, cancel, dismissal/hitting the <kbd>Esc</kbd> key, etc.).</li> <li>Dismiss the trapped content area when triggered by a pertinent event.</li> <li>Restore previously removed interactivity. </li> <li>Move focus back to the interactive element that triggered the trapped content. </li> </ol> <h4>Why do we do it?</h4> <p>I’m not going to lie: this is all tricky and time-consuming to do. However, focus management and a sensible, usable focus order is a <a target="_blank" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html">Web Content Accessibility Guideline</a>. It’s important enough that it’s considered part of <a target="_blank" href="https://www.w3.org/WAI/policies/">an international, legally-binding standard about usability</a>.</p> <h4>Tabbable and discoverable</h4> <p>There’s a bit of a trick to removing both discoverability <em>and </em>interactivity. </p> <p><a target="_blank" href="https://tink.uk/understanding-screen-reader-interaction-modes/">Screen readers have an interaction mode</a> that allows them to explore the page or view via a virtual cursor. The virtual cursor also lets the person using the screen reader discover non-interactive parts of the page (headings, lists, etc.). Unlike using <kbd>Tab</kbd> and focus styles, the virtual cursor is only available to people using a screen reader.</p> <p>When you are managing focus, you may want to restrict the ability for the virtual cursor to discover content. For our modal example, this means preventing someone from accidentally “breaking out” of the bounds of the modal when they’re reading it.</p> <p>Discoverability can be suppressed via a judicious application of <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute"><code>aria-hidden="true"</code></a>. However, interactivity is a little more nuanced.</p> <h3>Enter <code>inert</code></h3> <p><a target="_blank" href="https://whatpr.org/html/4288/interaction.html#the-inert-attribute">The <code>inert</code> attribute</a> is a <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">global HTML attribute</a> that would make removing, then restoring the ability of interactive elements to be discovered and focused a lot easier. Here’s an example of how it would work:</p> <pre><code><body> <div aria-labelledby="modal-title" class="c-modal" id="modal" role="dialog" tabindex="-1"> <div role="document"> <h2 id="modal-title">Save changes?</h2> <p>The changes you have made will be lost if you do not save them.<p> <button type="button">Save</button> <button type="button">Discard</button> </div> </div> <main inert>  </main> </body></code></pre> <p>I am deliberately avoiding using the <code></code> element for the modal due to <a target="_blank" href="https://www.scottohara.me/blog/2019/03/05/open-dialog.html">its many assistive technology support issues</a>.</p> <p><code>inert</code> has been declared on the <code></code> element following a save confirmation modal. What this means that all content contained within <code></code> cannot receive focus nor be clicked. </p> <p>Focus is restricted to inside of the modal. When the modal is dismissed, <code>inert</code> can be removed from the <code></code> element. This way of handling focus trapping is far easier compared to existing techniques. </p> <p><strong>Remember:</strong> A dismissal event can be caused by the two buttons inside our modal example, but also by pressing <kbd>Esc</kbd> on your keyboard. Some modals also let you click outside of the modal area to dismiss, as well.</p> <h4>Support for inert</h4> <p>The latest versions of <a target="_blank" href="https://caniuse.com/#feat=mdn-api_htmlelement_inert">Edge, Chrome, and Opera all support <code>inert</code></a> when <a target="_blank" href="https://css-irl.info/how-to-enable-experimental-web-platform-features/">experimental web platform features are enabled</a>. Firefox support will also be <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1655722">landing soon</a>! The one outlier is both desktop and mobile versions of Safari.</p> <p>I’d love to see Apple implement native support for <code>inert</code>. While <a target="_blank" href="https://github.com/WICG/inert">a polyfill is available</a>, it has <a target="_blank" href="https://www.scottohara.me/blog/2019/03/05/open-dialog.html#does-the-polyfill-help">non-trivial support issues for all the major screen readers</a>. Not great! </p> <p>In addition, I’d like to call attention to this note from <a target="_blank" href="https://github.com/WICG/inert#performance-and-gotchas">the <code>inert</code> polyfill project’s README</a>:</p> <blockquote> <p>The polyfill will be expensive, performance-wise, compared to a native <code>inert</code> implementation, because it requires a fair amount of tree-walking. </p> </blockquote> <p>Tree-walking means the JavaScript in the polyfill will potentially require a lot of computational power to work, and therefore slow down the end-user experience. </p> <p>For lower power devices, such as <a target="_blank" href="https://www.pewresearch.org/fact-tank/2019/05/07/digital-divide-persists-even-as-lower-income-americans-make-gains-in-tech-adoption/ft_17-03-21_low-incometech_smartphone/">budget Android smartphones, older laptops</a>, and more powerful devices doing computationally-intensive tasks (such as running multiple Electron apps), this might mean freezing or crashing occurs. Native browser support means this sort of behavior is a lot less taxing on the device, as it has access to parts of the browser that JavaScript doesn’t. </p> <h5>Safari</h5> <p>Personally, I am disappointed by Apple’s lack of support for <code>inert</code>. While I understand that adding new features to a browser is incredibly complicated and difficult work, <code>inert</code> seems like a feature Apple would have supported much earlier.</p> <p>macOS and iOS have historically had great support for accessibility, and assistive technology-friendly features are a common part of <a target="_blank" href="https://www.apple.com/accessibility/">their marketing campaigns</a>. Supporting <code>inert</code> seems like a natural extension of Apple’s mission, as the feature itself would do a ton for making accessible web experiences easier to develop.</p> <p>Frustratingly, Apple is also tight-lipped about what it is working on, and when we can generally expect to see it. Because of this, the future of <code>inert</code> is an open question.</p> <h5>Igalia</h5> <p><a target="_blank" href="https://www.igalia.com/">Igalia</a> is a company that works on browser features. They currently have an experiment where the public can vote on what features they’d like to see. The reasoning for this initiative is outside the scope of this article, but you can <a target="_blank" href="https://www.smashingmagazine.com/2020/07/crowdfunding-web-platform-features-open-prioritization/">read more about it on Smashing Magazine</a>.</p> <p>One feature Igalia is considering is <a target="_blank" href="https://www.igalia.com/open-prioritization/#inertwebkit">adding WebKit support for <code>inert</code></a>. If you have been looking for a way to help improve accessibility on the web, but have been unsure of how to start, <a target="_blank" href="https://opencollective.com/html-inert-in-webkit-safari">I encourage you to pledge</a>. $5, $10, $25. It doesn’t have to be a huge amount, every little bit adds up.</p> <div> <div><a target="_blank" href="https://opencollective.com/html-inert-in-webkit-safari">Pledge Now</a></div> </div> <h3>Wrapping up</h3> <p>Managing focus requires some skill and care, but is very much worth doing. The <code>inert</code> attribute can go a long way to making this easier to do. </p> <p>Technologies like <code>inert</code> also represents one of the greatest strengths of the web platform: the ability to <a target="_blank" href="https://www.w3.org/TR/html-design-principles/#pave-the-cowpaths">pave the cowpaths</a> of emergent behavior and codify it into something easy and effective.</p> <h4>Further reading</h4> <ul> <li><a target="_blank" href="https://youtu.be/Pe0Ce1WtnUM">Controlling focus with tabindex</a> (A11ycasts, Episode 04)</li> <li><a target="_blank" href="https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/">Using the tabindex attribute</a> (The Paciello Group)</li> <li><a target="_blank" href="https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element">Using JavaScript to trap focus in an element</a> (Hidde de Vries)</li> </ul> <hr> <p><small>Thank you to <a target="_blank" href="https://adrianroselli.com/">Adrian Roselli</a> and <a target="_blank" href="https://sarahmhigley.com/">Sarah Higley</a> for their feedback.</small></p> <hr> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/focus-management-and-inert/">Focus management and inert</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <p>You can support CSS-Tricks by being an <a target="_blank" href="https://css-tricks.com/product/mvp-supporter/">MVP Supporter</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div>   <script type="text/javascript" src="http://www.webmastersgallery.com/wp-content/themes/inove/js/comment.js"></script> <div id="comments"> <div id="cmtswitcher"> <a id="commenttab" class="curtab" href="javascript:void(0);" onclick="MGJS.switchTab('thecomments,commentnavi', 'thetrackbacks', 'commenttab', 'curtab', 'trackbacktab', 'tab');">Comments (0)</a> <a id="trackbacktab" class="tab" href="javascript:void(0);" onclick="MGJS.switchTab('thetrackbacks', 'thecomments,commentnavi', 'trackbacktab', 'curtab', 'commenttab', 'tab');">Trackbacks (0)</a> <span class="addcomment"><a href="#respond">Leave a comment</a></span> <span class="addtrackback"><a href="http://www.webmastersgallery.com/2020/10/19/focus-management-and-inert/trackback/">Trackback</a></span> <div class="fixed"></div> </div> <div id="commentlist">  <ol id="thecomments"> <li class="messagebox"> No comments yet. </li> </ol>   <ol id="thetrackbacks"> <li class="messagebox"> No trackbacks yet. </li> </ol> <div class="fixed"></div>  </div> </div> <div id="comment_login" class="messagebox"> You must be <a href="http://www.webmastersgallery.com/wp-login.php">logged in</a> to post a comment. </div> <div id="postnavi"> <span class="prev"><a href="http://www.webmastersgallery.com/2020/10/19/figma-vs-adobe-xd-which-is-better-for-ux-prototyping/" rel="next">Figma Vs Adobe XD: Which is Better for UX Prototyping</a></span> <span class="next"><a href="http://www.webmastersgallery.com/2020/10/19/highly-influential-art-gallery-websites-in-2020/" rel="prev">Highly Influential Art Gallery Websites in 2020</a></span> <div class="fixed"></div> </div> </div>   <div id="sidebar">  <div id="northsidebar" class="sidebar">  <div class="widget widget_feeds"> <div class="content"> <div id="subscribe"> <a rel="external nofollow" id="feedrss" title="Subscribe to this blog..." href="http://www.webmastersgallery.com/feed/"><abbr title="Really Simple Syndication">RSS</abbr></a> </div> <div class="fixed"></div> </div> </div>  <div id="text-389627311" class="widget widget_text"> <div class="textwidget"><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe for latest Updates</a></div> </div><div id="text-389629461" class="widget widget_text"> <div class="textwidget"><form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=webmastersgallery', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="webmastersgallery" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank" rel="noopener">FeedBurner</a></p></form></div> </div></div>  <div id="centersidebar">  <div id="eastsidebar" class="sidebar">  <div class="widget widget_categories"> <h3>Categories</h3> <ul> <li class="cat-item cat-item-518"><a href="http://www.webmastersgallery.com/category/affiliate-programs/">Affiliate Programs</a> </li> <li class="cat-item cat-item-147"><a href="http://www.webmastersgallery.com/category/design/">Designing</a> </li> <li class="cat-item cat-item-519"><a href="http://www.webmastersgallery.com/category/domain-names/">Domain Names</a> </li> <li class="cat-item cat-item-37"><a href="http://www.webmastersgallery.com/category/e-commerce/">E-commerce</a> </li> <li class="cat-item cat-item-509"><a href="http://www.webmastersgallery.com/category/internet-directories/">Internet Directories</a> </li> <li class="cat-item cat-item-510"><a href="http://www.webmastersgallery.com/category/message-boards/">Message Boards</a> </li> <li class="cat-item cat-item-1"><a href="http://www.webmastersgallery.com/category/uncategorized/">Others</a> </li> <li class="cat-item cat-item-506"><a href="http://www.webmastersgallery.com/category/programming/">Programming</a> </li> <li class="cat-item cat-item-511"><a href="http://www.webmastersgallery.com/category/promotion-and-marketing/">Promotion and Marketing</a> </li> <li class="cat-item cat-item-534"><a href="http://www.webmastersgallery.com/category/scripts-and-programming/">Scripts and Programming</a> </li> <li class="cat-item cat-item-513"><a href="http://www.webmastersgallery.com/category/search-engines/">Search Engines</a> </li> <li class="cat-item cat-item-135"><a href="http://www.webmastersgallery.com/category/social-media/">Social Media</a> </li> <li class="cat-item cat-item-514"><a href="http://www.webmastersgallery.com/category/softwares/">Softwares</a> </li> <li class="cat-item cat-item-515"><a href="http://www.webmastersgallery.com/category/tips-and-tutorials/">Tips and Tutorials</a> </li> <li class="cat-item cat-item-338"><a href="http://www.webmastersgallery.com/category/web-hosting/">Web Hosting</a> </li> <li class="cat-item cat-item-516"><a href="http://www.webmastersgallery.com/category/webmaster-tools/">Webmaster Tools</a> </li> <li class="cat-item cat-item-501"><a href="http://www.webmastersgallery.com/category/webmaster-resources/">Webmasters Resources</a> </li> <li class="cat-item cat-item-3"><a href="http://www.webmastersgallery.com/category/web-design/">Website Design</a> </li> </ul> </div> </div>   <div id="westsidebar" class="sidebar">  <div class="widget widget_links"> <h3>Blogroll</h3> <ul> <li><a href="http://wordpress.org/development/">Development Blog</a></li> <li><a href="http://codex.wordpress.org/">Documentation</a></li> <li><a href="http://wordpress.org/extend/plugins/">Plugins</a></li> <li><a href="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li> <li><a href="http://wordpress.org/support/">Support Forum</a></li> <li><a href="http://wordpress.org/extend/themes/">Themes</a></li> <li><a href="http://planet.wordpress.org/">WordPress Planet</a></li> </ul> </div> </div>  <div class="fixed"></div> </div>  <div id="southsidebar" class="sidebar">  <div class="widget"> <h3>Archives</h3> <ul> <li><a href='http://www.webmastersgallery.com/2024/12/'>December 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/11/'>November 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/10/'>October 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/09/'>September 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/08/'>August 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/07/'>July 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/06/'>June 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/05/'>May 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/04/'>April 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/03/'>March 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/02/'>February 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/01/'>January 2024</a></li> <li><a href='http://www.webmastersgallery.com/2023/12/'>December 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/11/'>November 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/10/'>October 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/09/'>September 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/08/'>August 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/07/'>July 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/06/'>June 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/05/'>May 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/04/'>April 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/03/'>March 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/02/'>February 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/01/'>January 2023</a></li> <li><a href='http://www.webmastersgallery.com/2022/12/'>December 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/11/'>November 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/10/'>October 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/09/'>September 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/08/'>August 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/07/'>July 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/06/'>June 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/05/'>May 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/04/'>April 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/03/'>March 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/02/'>February 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/01/'>January 2022</a></li> <li><a href='http://www.webmastersgallery.com/2021/12/'>December 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/11/'>November 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/10/'>October 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/09/'>September 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/08/'>August 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/07/'>July 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/06/'>June 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/05/'>May 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/04/'>April 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/03/'>March 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/02/'>February 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/01/'>January 2021</a></li> <li><a href='http://www.webmastersgallery.com/2020/12/'>December 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/11/'>November 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/10/'>October 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/09/'>September 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/08/'>August 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/07/'>July 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/06/'>June 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/05/'>May 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/04/'>April 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/03/'>March 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/02/'>February 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/01/'>January 2020</a></li> <li><a href='http://www.webmastersgallery.com/2019/12/'>December 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/11/'>November 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/10/'>October 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/09/'>September 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/08/'>August 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/07/'>July 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/06/'>June 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/05/'>May 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/04/'>April 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/03/'>March 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/02/'>February 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/01/'>January 2019</a></li> <li><a href='http://www.webmastersgallery.com/2018/12/'>December 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/11/'>November 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/10/'>October 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/09/'>September 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/08/'>August 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/07/'>July 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/04/'>April 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/01/'>January 2018</a></li> <li><a href='http://www.webmastersgallery.com/2017/12/'>December 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/11/'>November 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/09/'>September 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/08/'>August 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/07/'>July 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/06/'>June 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/05/'>May 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/04/'>April 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/03/'>March 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/02/'>February 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/01/'>January 2017</a></li> <li><a href='http://www.webmastersgallery.com/2016/12/'>December 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/11/'>November 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/10/'>October 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/09/'>September 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/08/'>August 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/07/'>July 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/06/'>June 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/05/'>May 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/04/'>April 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/03/'>March 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/02/'>February 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/01/'>January 2016</a></li> <li><a href='http://www.webmastersgallery.com/2015/12/'>December 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/11/'>November 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/10/'>October 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/09/'>September 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/08/'>August 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/07/'>July 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/06/'>June 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/05/'>May 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/04/'>April 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/03/'>March 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/02/'>February 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/01/'>January 2015</a></li> <li><a href='http://www.webmastersgallery.com/2014/12/'>December 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/11/'>November 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/10/'>October 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/09/'>September 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/08/'>August 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/07/'>July 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/06/'>June 2014</a></li> <li><a href='http://www.webmastersgallery.com/2013/07/'>July 2013</a></li> <li><a href='http://www.webmastersgallery.com/2013/01/'>January 2013</a></li> <li><a href='http://www.webmastersgallery.com/2012/12/'>December 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/08/'>August 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/07/'>July 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/06/'>June 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/05/'>May 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/04/'>April 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/01/'>January 2012</a></li> <li><a href='http://www.webmastersgallery.com/2011/11/'>November 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/06/'>June 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/03/'>March 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/02/'>February 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/01/'>January 2011</a></li> <li><a href='http://www.webmastersgallery.com/2010/12/'>December 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/11/'>November 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/09/'>September 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/07/'>July 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/06/'>June 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/05/'>May 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/02/'>February 2010</a></li> <li><a href='http://www.webmastersgallery.com/2009/12/'>December 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/08/'>August 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/07/'>July 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/06/'>June 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/05/'>May 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/04/'>April 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/03/'>March 2009</a></li> </ul> </div>  <div class="widget"> <h3>Meta</h3> <ul> <li><a href="http://www.webmastersgallery.com/wp-login.php">Log in</a></li> </ul> </div> </div>  </div>  <div class="fixed"></div> </div>   <div id="footer"> <a id="gotop" href="#" onclick="MGJS.goTop();return false;">Top</a> <a id="powered" href="http://wordpress.org/">WordPress</a> <div id="copyright"> Copyright © 2009-2024 Webmasters Gallery </div> <div id="themeinfo"> Theme by <a href="http://www.neoease.com/">NeoEase</a>. Valid <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">CSS 3</a>. </div> </div>  </div>  </div>  </body> </html>