Michael Spellacy (Spell) - Web developer and accessibility specialist

<!DOCTYPE html> <html class="no-js" lang="en-US"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, viewport-fit=cover" name="viewport"> <meta content="summary_large_image" name="twitter:card"> <meta content="@Spellacy" name="twitter:creator"> <meta content="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=600" name="twitter:image"> <meta content="The author wearing his toy space helmet." name="twitter:image:alt"> <meta content="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=600" property="og:image"> <meta content="The author wearing his toy space helmet." property="og:image:alt"> <meta content="Michael Spellacy (Spell) - Web developer and accessibility specialist" property="og:title"> <meta content="Michael Spellacy (Spell) - Web developer and accessibility specialist" name="twitter:title"> <meta content="Spell is a web developer, designer and digital accessibility specialist living in beautiful Allentown, PA. In his spare time, he can be found restoring retro arcade machines." name="description"> <meta content="Spell is a web developer, designer and digital accessibility specialist living in beautiful Allentown, PA. In his spare time, he can be found restoring retro arcade machines." property="og:description"> <meta content="Spell is a web developer, designer and digital accessibility specialist living in beautiful Allentown, PA. In his spare time, he can be found restoring retro arcade machines." name="twitter:description"> <meta content="#3E1D62" name="theme-color"> <link href="/css/global.css" rel="stylesheet"> <link href="/manifest.json" rel="manifest"> <link href="https://michaelspellacy.com/" rel="canonical"> <link href="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.ico?s=32" rel="icon"> <link href="/rss.xml" rel="alternate" title="Michael Spellacy - RSS Feed" type="application/rss+xml"> <link href="https://indieauth.com/auth" rel="authorization_endpoint"> <link href="https://tokens.indieauth.com/token" rel="token_endpoint"> <link href="https://michaelspellacy-com.herokuapp.com/micropub/main" rel="micropub"> <link href="https://aperture.p3k.io/microsub/367" rel="microsub"> <link href="https://webmention.herokuapp.com/api/webmention" rel="webmention"> <title>Michael Spellacy (Spell) - Web developer and accessibility specialist - Michael Spellacy</title> </head>  <body id="index"> <div id="page"> <a href="#content" id="skip-nav">Skip to main content</a> <a href="https://indieweb.org/Webmention-faq" id="webmentions-logo"><img src="/img/webmention.png" alt="This site uses Webmentions! Learn More!"></a> <header id="banner"> <a class="h-card" href="https://michaelspellacy.com" rel="me"> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=200" alt="Michael Spellacy"> </a> <nav id="primary-navigation" aria-label="primary"> <ul> <li><a href="/about/">About</a></li> <li><a href="/articles/">Articles</a></li> <li><a href="/bookmarks/">Bookmarks</a></li> <li><a href="/notes/">Notes</a></li> </ul> </nav> </header> <main id="content"> <h1>Michael "Spell" Spellacy <span>Front-end developer, designer and accessibility specialist in Allentown, PA</span></h1> <div class="article-group"> <h2>Thursday, January 4, 2024</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/a11y-info-update/">A11y.Info Update</a></h2> <time datetime="2024-01-04 16:11">January 04, 2024</time> <p>Hi all! I am faced with having to make a hard decision about a11y.info. The costs for it are rising and I am currently paying $30 dollars a month to keep it going. I was...</p> </div> </article> <h2>Friday, October 30, 2020</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/46380/">Re: Anchors</a></h2> <time datetime="2020-10-30 08:53">October 30, 2020</time> <p>I never realized that about anchors. You learn something new everyday. Thanks Adrian! </p> </div> </article> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/45960/"></a></h2> <time datetime="2020-10-30 08:46">October 30, 2020</time> <p> </p> </div> </article> <h2>Wednesday, September 23, 2020</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/pt-cashier-flexible/">PT - Cashier - Flexible at Brox BEM Site</a></h2> <time datetime="2020-09-23 21:09">September 23, 2020</time> <p> </p> </div> </article> <h2>Thursday, July 23, 2020</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/6360/"></a></h2> <time datetime="2020-07-23 21:46">July 23, 2020</time> <p> </p> </div> </article> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/6240/"></a></h2> <time datetime="2020-07-23 21:44">July 23, 2020</time> <p> </p> </div> </article> <h2>Tuesday, March 3, 2020</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/2760/"></a></h2> <time datetime="2020-03-03 19:46">March 03, 2020</time> <p>This is a note, not an article. Notes are like Facebook wall posts…or something. </p> </div> </article> <h2>Tuesday, February 11, 2020</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/htmspell-on-htmhell/">HTMSpell on HTMHell</a></h2> <time datetime="2020-02-11 11:32">February 11, 2020</time> <p>Some bad HTML I discovered on Disney Plus' web app is featured here. This is a fun site, too. Lots to learn. </p> </div> </article> <h2>Tuesday, February 4, 2020</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/pushing-buttons/">Pushing Buttons</a></h2> <time datetime="2020-02-04 09:45">February 04, 2020</time> <p>Buttons vs. Links Understanding Roles Keyboard Benefits Hyperlink Suppression Solutions Example Support Buttons vs. Links Hopefully by now, most of us understand when we should be using button and a elements in our work. If...</p> </div> </article> <h2>Wednesday, January 29, 2020</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/49140/"></a></h2> <time datetime="2020-01-29 08:39">January 29, 2020</time> <p> </p> </div> </article> <h2>Monday, January 20, 2020</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/16080/"></a></h2> <time datetime="2020-01-20 23:28">January 20, 2020</time> <p>This is great, Nic! Can you cite an example of disclosure menu that uses hover and click? Remarkably, I still have trouble with these! Thanks! </p> </div> </article> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/58800/"></a></h2> <time datetime="2020-01-10 11:20">January 10, 2020</time> <p>Oh, I like this. WCAG for the non-techs in the audience. </p> </div> </article> <h2>Tuesday, December 3, 2019</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/14280/"></a></h2> <time datetime="2019-12-03 22:58">December 03, 2019</time> <p> </p> </div> </article> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/45060/"></a></h2> <time datetime="2019-12-03 07:31">December 03, 2019</time> <p> </p> </div> </article> <h2>Saturday, November 23, 2019</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/65161/"></a></h2> <time datetime="2019-11-23 13:06">November 23, 2019</time> <p> </p> </div> </article> <h2>Tuesday, November 12, 2019</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/48660/"></a></h2> <time datetime="2019-11-12 08:31">November 12, 2019</time> <p> </p> </div> </article> <h2>Saturday, November 9, 2019</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/65160/"></a></h2> <time datetime="2019-11-09 13:06">November 09, 2019</time> <p>Wonderful overview of implmenting escape key functionality in your work. By Sarah Higley </p> </div> </article> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/64560/"></a></h2> <time datetime="2019-11-09 12:56">November 09, 2019</time> <p> </p> </div> </article> <h2>Friday, November 8, 2019</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/accessibility-is-an-opportunity-not/">Accessibility is an opportunity, not a burden</a></h2> <time datetime="2019-11-08 09:51">November 08, 2019</time> <p>Good read on VentureBeat regarding the benefits of embracing a more inclusive process within your company. Not news to me, but may be for you. </p> </div> </article> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/accessibility-testing/">Accessibility Testing Statistic</a></h2> <time datetime="2019-11-07 09:30">November 07, 2019</time> <p>This is an amazing statistic: When testing a website for WCAG compliance, only 18% of criteria can be tested automatically, 31% auto+manual verification, and 47% manual only. via @KarlGroves #a11y #wcag #testing – @webaxe </p> </div> </article> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/50591/"></a></h2> <time datetime="2019-11-07 09:03">November 07, 2019</time> <p>Wasn't Aria the name of a character in Game of Thrones? Should have went with "Aria Bark". Oh well. #missedopportunities </p> </div> </article> <h2>Tuesday, November 5, 2019</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/12000/"></a></h2> <time datetime="2019-11-05 22:20">November 05, 2019</time> <p> </p> </div> </article> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/11340/"></a></h2> <time datetime="2019-11-05 22:09">November 05, 2019</time> <p>Great job, Spell! </p> </div> </article> <h2>Sunday, November 3, 2019</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/6780/"></a></h2> <time datetime="2019-11-03 20:53">November 03, 2019</time> <p>Well, I think that is very interesting. Yes sir. </p> </div> </article> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/5760/"></a></h2> <time datetime="2019-11-03 20:36">November 03, 2019</time> <p>Just testing to see if webmentions are working properly on the site now. I’d listen to Spell. He is a smart fellow. :-) </p> </div> </article> <h2>Saturday, November 2, 2019</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/8340/"></a></h2> <time datetime="2019-11-02 22:19">November 02, 2019</time> <p>Cool. Trying to figure out webmentions myself. Lots to learn! </p> </div> </article> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/8100/"></a></h2> <time datetime="2019-11-02 22:15">November 02, 2019</time> <p>Testing webmentions. I think they are cool. </p> </div> </article> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/70980/"></a></h2> <time datetime="2019-11-02 15:43">November 02, 2019</time> <p>Hi! Came across your site in the IndieWeb ring. Just trying replies. Could you please reply back? Thanks! Glad you fixed your disposal! </p> </div> </article> <h2>Thursday, June 27, 2019</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/13680/"></a></h2> <time datetime="2019-06-27 23:48">June 27, 2019</time> <p>“QA testers: you are incredibly important. You are the last stop before a product lands in front of the user. All users are different. As with dev and design, as the web evolves, so must...</p> </div> </article> <h2>Tuesday, May 14, 2019</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/4800/"></a></h2> <time datetime="2019-05-14 21:20">May 14, 2019</time> <p>Nice post here about “sticky” navigations and prefers-reduced-motion, which I have also been using more and more often. In addition to CSS, don’t forget that you can do it in JavaScript, too. const mediaQuery =...</p> </div> </article> <h2>Wednesday, May 1, 2019</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/the-last-word-on-opening-new-windows/">The Last Word (Maybe) on Opening New Windows</a></h2> <time datetime="2019-05-01 11:11">May 01, 2019</time> <p>From time to time, the question surrounding the opening of new windows (tabs) to external sites...pops up. (Sorry.) I thought I would share a few thoughts as to why we may want to think real...</p> </div> </article> <h2>Wednesday, April 10, 2019</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/building-a-better-video-banner/">Building A Better Video Banner</a></h2> <time datetime="2019-04-10 15:48">April 10, 2019</time> <p>So I made this thing. Clients and colleagues often ask me for "video hero banners". I guess they are really sexy and engaging or something. While desktop is never usually an issue, I have often...</p> </div> </article> <h2>Tuesday, October 18, 2016</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/how-to-host-an-infographic/">How To Host An Infographic</a></h2> <time datetime="2016-10-18 18:28">October 18, 2016</time> <p>I have seen colleagues get a little confused while attempting to create infographics, so this is an effort to clear things up and also improve upon the accessibility of them, which is almost always forgotten....</p> </div> </article> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/how-to-host-an-infographic-html-fallback/">How To Host An Infographic (HTML Fallback)</a></h2> <time datetime="2016-10-18 18:25">October 18, 2016</time> <p>This is the text based fallback version of our infographic. Some infographics can be very design heavy, so fallbacks are meant to simply convey the same information locked within them, to assistive technology users and...</p> </div> </article> <h2>Saturday, March 28, 2015</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/ssl-101-understanding-asset-loading-within-a-secure-environment/">SSL 101: Understanding Asset Loading Within a Secure Environment</a></h2> <time datetime="2015-03-28 14:32">March 28, 2015</time> <p>In my experience, I have found that there is generally a lot of confusion surrounding the loading of assets within a web page that exists within a secure environment. To help eliminate that confusion, here...</p> </div> </article> <h2>Tuesday, December 30, 2014</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/linktravaganza-cloaking-without-the-cloak/">Linktravaganza: Cloaking Without the Cloak</a></h2> <time datetime="2014-12-30 12:54">December 30, 2014</time> <p>Linktravaganza: The process of adding unnecessary links to your web page or application for the sole purpose of pleaseing search engines. Often also refred to as "Link Farms", these steps are often taken to legitimize...</p> </div> </article> <h2>Thursday, October 9, 2014</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/rethinking-social-media-plugins/">Rethinking Social Media Plugins</a></h2> <time datetime="2014-10-09 19:56">October 09, 2014</time> <p>In our endeavors on the web, it is easy, for those who have a hand in contributing to it, to reach for the low hanging fruit. Social plugins are a popular example of this. They...</p> </div> </article> <h2>Friday, September 5, 2014</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/accessibility-is-a-constant/">Accessibility is a Constant</a></h2> <time datetime="2014-09-05 23:45">September 05, 2014</time> <p>Congratulations on the launch of your awesome new site! Hearty handshakes and back slaps all around! You launched on time (and under budget) and have met all of your client's business requirements, one of which...</p> </div> </article> <h2>Wednesday, March 12, 2014</h2> <article class="h-entry h-post"> <div> <img src="https://www.gravatar.com/avatar/89e429d4a3effa9601cd19a851c0003e.jpg?s=50" alt=""> </div> <div> <h2><a href="/pushing-it-forward-the-web-turns-25/">Pushing It Forward: The Web Turns 25</a></h2> <time datetime="2014-03-12 15:20">March 12, 2014</time> <p>The World Wide Web turns 25 today. That is a long time, and yet, relatively speaking, it is but a drop in the bucket. The web is still in its infancy and yet it has...</p> </div> </article> </div>  </main> <footer> <ul id="social"> <li><a href="mailto:spell@spellacy.net" rel="me"><i class="fas fa-envelope"></i> Email</a></li> <li><a href="https://github.com/michaelspellacy/" rel="me"><i class="fab fa-github"></i> Github</a></li> <li><a href="https://www.instagram.com/michael.spellacy/" rel="me"><i class="fab fa-instagram"></i> Instagram</a></li> <li><a href="https://www.linkedin.com/in/spellacy/" rel="me"><i class="fab fa-linkedin"></i> LinkedIn</a></li> <li><a href="https://a11y.info/@spellacy" rel="me"><i class="fab fa-mastodon"></i> Mastodon</a></li> <li><a href="/rss.xml"><i class="fas fa-rss-square"></i> RSS</a></li> </ul> <p><i class="fab fa-creative-commons"></i> <small>Except where otherwise noted, content on this site is licensed under <a href="https://creativecommons.org/licenses/by/4.0/" rel="license">Creative Commons Attribution 4.0 International</a>. The <a href="https://github.com/michaelspellacy/michaelspellacy.github.io">source code</a> for this site may be found on Github.</small></p> <nav id="indiewebring" aria-label="IndieWeb Webring"> <ul> <li><a href="https://xn--sr8hvo.ws/%F0%9F%8D%BC%F0%9F%88%B2%F0%9F%91%A3/previous" aria-label="Previous Website">←</a></li> <li><a href="https://xn--sr8hvo.ws/" aria-label="An IndieWeb Webring">💍</a></li> <li><a href="https://xn--sr8hvo.ws/%F0%9F%8D%BC%F0%9F%88%B2%F0%9F%91%A3/next" aria-label="Next Website">→</a></li> </ul> </nav> <p><small>How's my coding? Feel free to <a href="mailto:spell@spellacy.net">contact me</a> if you spot any issues with my site. You can even <a href="https://github.com/michaelspellacy/michaelspellacy.github.io/issues">open an issue</a> on Github.</small></p> </footer> </div> <script src="/js/global.js"></script> </body> </html>

CINXE.COM

Michael Spellacy (Spell) - Web developer and accessibility specialist - Michael Spellacy