<main>
  
  <h1>Arbitrary Meaningless Title Thinger</h1>
  
  <img src="https://2.bp.blogspot.com/-QPE7Uw9-6_w/TxWsiNCuYxI/AAAAAAAAB9o/9wBaUxWH7x4/s320/HTML5_Chinese.png" height="200" width="142" border="0" alt="HTML5 Logo with character for Chinese number 5." class="right">
  
  <p>
    This page is the collection of content styles I am developing for my new site. The individual chunks of styles (anchors or tables or quotes or &hellip;) are all in one <a href="https://codepen.io/collection/DBNoEr/" target="_blank">CodePen collection</a>.
  </p>
  
  <p>
    Testing anchor highlights, so this links to the <a href="#FirstList">first list</a>, this to the <a href="#FirstQuote">first quote</a>, this one to the <a href="#FirstCode">first code block</a> and this one to the <a href="#FirstTable">first table</a>. Oh, also the <a href="#FirstFigure">first figure</a>. The <a href="#LastList">last list</a> (to check the highlight).
  </p>
  
  <p>
    <a href="nerfherder"><img src="https://2.bp.blogspot.com/-7Cb-oJKZW1U/Tb7EWjVDRzI/AAAAAAAAAdw/Q4UBfWH4s_w/s320/HTML5_Logo_128.png" alt="HTML5 logo" class="left"></a>
    Sometimes a link is an image, like this one (probably to the left). But <a name="foo">this is an anchor</a> (so it should have no style). <a href="#Anchor">This is a link to an anchor</a>. Here is <small>some small text</small>, and here is <small>small text <a href="foo">that is a link</a></small>. Now <a href="foo">for <small>small text within a link</small> instead of wrapping it</a>.
  </p>
  
  <p>
    Sometimes a link appears with an acronym, <a href="nerfherder">like <abbr title="Not Safe for Work">NSFW</abbr></a>. Maybe the link has descenders, like in the <a href="nerfherder">quirky words &ldquo;thingamajiggery piddly</a> bits.&rdquo;
  </p>
  
  <p>
    Sub-script and super-script get links too, <a href="nerfherder">like H<sub>2</sub>SO<sub>4</sub> and then log<sub>n</sub></a> or <a href="nerfherder">9<sup>th</sup> and 6.022 &times; 10<sup>23</sup></a>. <a href="http://cnn.com">This link takes you off this site</a>, so I'm trying an SVG generated content icon. This is a <a href="foo.pdf">test PDF link</a>.
  </p>

  <p>
    Way back in October I noticed this <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=26942">WHATWG HTML bug (26942)</a> where someone asked <q>why do these examples of <code>&lt;html&gt;</code> lack the <code>lang</code> attribute?</q> I thought the answer from Hixie was a bit dismissive and not based on any data or real-world benefits of use, particularly in the context of screen readers:
  </p>

  <blockquote id="FirstQuote">
    <p>
      Why not? Realistically, few people include it. It just means the language is unknown.
    </p>
    <footer>
      <cite><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=26942#c1">Comment from Hixie</a></cite>
    </footer>
  </blockquote>

  <p>
    At the time, I could not get the latest archive to download from WebDevData.org (though that has changed, see below), so I fell back to <a href="https://twitter.com/aardrian/status/535237830063423488">asking for help</a> on <em>why</em> the <code>lang</code> attribute is valuable.
  </p>

  <h2>How the <code>lang</code> Attribute on <code>&lt;html&gt;</code> Is Used</h2>

  <p>
    I got lots of good bits of feedback, which <a href="https://storify.com/aardrian/lang-attribute-on-html-for-screen-readers">I collected into a Storify</a>. I've distilled all that great information to these key points:
  </p>

  <ul id="FirstList">
    <li>VoiceOver on iOS uses the attribute to auto-switche voices.</li>
    <li>VoiceOver can speak a particular language using a different accent when specified.</li>
    <li>Leaving out the <code>lang</code> attribute may require the user to manually switch to the correct language for proper pronunciation.</li>
    <li>JAWS uses it to load the correct phonetic engine / phonologic dictionary &#8212; Handy for sites with multiple languages.</li>
    <li>NVDA (Windows) uses it in the same way as VoiceOver and JAWS.</li>
    <li>When used in HTML that is used to form an ePub or Apple iBooks document, it affects how VoiceOver will read the book.</li>
    <li>Firefox, IE10, and Safari (as of a year ago) only support CSS <code>hyphens: auto</code> when the <code>lang</code> attribute is set (not from Twitter; <a href="https://www.quirksmode.org/blog/archives/2012/11/hyphenation_wor.html">source</a>).</li>
  </ul>
  
  <p>
    In the absence of setting a <code>lang</code> attribute on the <code>&lt;html&gt;</code> element, screen readers will fall back to the user's default system setting (barring any custom overrides) when speaking content.
  </p>
  
  <h2>How Many Pages Use <code>lang</code></h2>
  
  <p>
    On January 8, <a href="http://webdevdata.org/">WebDevData.org</a> (from a W3C Community Group) posted its latest archive (which did not error on download, woo!). It consists of the HTML from 87,000 web pages.
  </p>
  
  <p>
    I pulled down the 780MB file and re-taught myself the skills necessary to parse the files. For those who are regular expression geniuses, you are welcome to suggest an alternate approach, but I used the following pattern to return all the <code>&lt;html&gt;</code> elements: <code>&lt;html([^&gt;]+)&gt;</code>. It fails for any <code>&lt;html&gt;</code> with no attributes at all, but for what I am doing that's ok.
  </p>
  
  <p>
    Of the 84,054 pages I parsed (I excluded XML, ISO files, and so on), I found that 39,433 use the <code>lang</code> attribute on the <code>&lt;html&gt;</code> element. That's just about 47% (46.914% if I understand significant digits correctly).
  </p>
  
  <p>
    What that tells me is that instead of the case being that <q>few people include it,</q> nearly half the web includes it.
  </p>
  
  <p>
    There are 12,672 instances of <code>xml:lang</code>, though at a quick scan they appear alongside <code>lang</code>. If anyone with better regex skills would like to help me further parse, <a href="https://twitter.com/aardrian">please let me know</a>.
  </p>
  
  <h2>Why You Should Use the <code>lang</code> Attribute on the <code>&lt;html&gt;</code> Element</h2>
  
  <h3>Hyphens</h3>
  
  <p>
    By using <code>lang</code>, you get the benefits of hyphen support in your (modern) browser that you otherwise would not get (assuming you use <code>hyphens: auto</code> in your CSS).
  </p>
  
  <h3>Accessibility</h3>
  
  <p>
    At the very least, <code>lang</code> is a benefit for screen reader users, particularly when your user's don't have the same primary language as your site. It allows proper pronunciation and inflection when the page is spoken.
  </p>
  
  <h3>WCAG Compliance</h3>
  
  <p>
    Including the <code>lang</code> is a Level A requirement of the Web Content Accessibility Guidelines 2.0 (specifically item <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#meaning-doc-lang-id">3.1.1 Language of Page</a>). <a href="http://www.w3.org/TR/WCAG20-TECHS/H57.html">Technique H57</a> identifies the <code>lang</code> attribute specifically.
  </p>
  
  <h3>Internationalization</h3>
  
  <p>
    The W3C Internationalization (I18n) Activity has a great <a href="http://www.w3.org/International/questions/qa-lang-why">Q&amp;A on why you should use <code>lang</code></a>, which was updated less than two months ago. I'll reprint the start of the answer, but there is far more detail and I strongly recommend you go read it.
  </p>
  
  <blockquote>
    <p>
      Identifying the language of your content allows you to automatically do a number of things, from changing the look and behavior of a page, to extracting information, to changing the way that an application works. Some of language applications work at the level of the document as a whole, some work on appropriately labeled document fragments.
    </p>
    
    <p>
      We list here a few of the ways that language information is useful at the moment, however, as specifications and browsers evolve in the future there could be numerous additional applications for language information.
    </p>
    
    <footer>
      <cite><a href="http://www.w3.org/International/questions/qa-lang-why">W3C Internationalization (I18n) Activity</a></cite>
    </footer>
  </blockquote>
  
  <h2>Interesting Aside</h2>
  
  <p>
    If you go to the <a href="https://html.spec.whatwg.org/multipage/"><acronym title="">WHATWG</acronym> HTML5 specification</a> today and view the page source, you'll see the following language declaration in the code:
  </p>
  
  <p>
    <code>&lt;html class=split data-revision="$Revision: 8877 $" lang=en-GB-x-hixie&gt;</code>
  </p>
  
  <p>
    Not to be outdone, the <a href="http://www.w3.org/TR/html5/">W3C HTML5 spec</a> has the same language declaration.
  </p>
  
  <p>
    If anybody has the <code>en-GB-x-hixie</code> phonologic dictionary in his or her screen reader, I'd love to  hear it.
  </p>
  
  <p>
    While technically allowed (the <code>-x</code> puts it in the private use sub-tag category), it's bad form:
  </p>
  
  <blockquote>
    <p>
      Private-use subtags do not appear in the subtag registry, and are chosen and maintained by private agreement amongst parties.
    </p>
    
    <p>
      Because these subtags are only meaningful within private agreements and cannot be used interoperably across the Web, they should be used with great care, and avoided whenever possible.
    </p>
    
    <footer>
      <cite><a href="http://www.w3.org/International/articles/language-tags/Overview.en.php#extension">W3C, Language tags in HTML and XML</a>, further referencing <a href="http://tools.ietf.org/html/bcp47#section-2.2.7">IETF BCP 47 Section 2.2.7</a></cite>
    </footer>
  </blockquote>

  <p>
    This is some text. You can <kbd>Ctrl</kbd> + <kbd>C</kbd> and then <kbd>Ctrl</kbd> + <kbd>V</kbd>. Maybe a <kbd>Tab<span class="Unicode">↹</span></kbd> for good measure.
  </p>
  
  <pre id="FirstCode">main {
  width: 80%;
  margin: 1em auto;
  padding: 1em 2em;
  color: #000;
  background-color: rgba(255,255,255,.25);
  border: .07em solid rgba(0,0,0,.5);
  border-radius: .5em;
}  </pre>
  
  <p>
    If you've got any stake in the wonderful world of spam bots, then you've probably heard about Google's CAPTCHA update, the <a href="https://www.google.com/recaptcha/intro/index.html">No CAPTCHA reCAPTCHA</a>. Essentially a user need only check a box and Google's ground-up pixie dust automagically knows whether or not to believe you. A video overview of the update:
  </p>
  
  <iframe width="560" height="315" src="//www.youtube.com/embed/jwslDn3ImM0?rel=0" frameborder="0" allowfullscreen></iframe>
  
  <p>
    Almost as soon as the announcement, people in the accessibility community spoke up stating it was completely broken, worked well, or worked no worse than the current option. To Google's credit, walking through the source code shows an effort was made to provide accessibility hooks.
  </p>
  
  <table id="FirstTable">
    <colgroup>
      <col>
      <col>
      <col class="number">
    </colgroup>
    <thead>
      <tr>
        <th>Author</th>
        <th>Title</th>
        <th class="number">Year Published</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Homer</td>
        <td><em>Iliad</em></td>
        <td class="number">BC ~800</td>
      </tr>
      <tr>
        <td>Miguel De Cervantes</td>
        <td><em>The Ingenious Gentleman Don Quixote of La Mancha</em></td>
        <td class="number">AD 1605</td>
      </tr>
      <tr>
        <td>Mary Shelley</td>
        <td><em>Frankenstein; or, The Modern Prometheus</em></td>
        <td class="number">1818</td>
      </tr>
      <tr>
        <td>Herman Melville</td>
        <td><em>Moby-Dick; or, The Whale</em></td>
        <td class="number">1851</td>
      </tr>
      <tr>
        <td>F. Scott Fitzgerald</td>
        <td><em>The Great Gatsby</em></td>
        <td class="number">1925</td>
      </tr>
      <tr>
        <td>George Orwell</td>
        <td><em>Nineteen Eighty-Four</em></td>
        <td class="number">1948</td>
      </tr>
    </tbody>
  </table>
  
  <p>
    At the very least it may prevent embarrassing mis-haps like the <a href="http://blog.adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">broken keyboard navigation at DigitalGov</a>. At its worst it may appear that Google is turning a blind eye (pun intended) to <a href="https://www.brucelawson.co.uk/2014/on-the-accessibility-of-web-components-again/">accessibility as we've witnessed with its Web Components demos</a>.
  
  </p>
  
  <p>
    I am not an assistive technology (AT) user, so while I can fire up NVDA and try the form, I cannot truly experience it the way a day-to-day or power user would. Conveniently, both <a href="https://twitter.com/patrick_h_lauke">Patrick H. Lauke</a> and <a href="https://twitter.com/alastc">Alastair Campbell</a> made demos so that anyone can try it out for themselves (<a href="https://patrickhlauke.github.io/recaptcha/">Patrick's demo</a>, <a href="https://alastairc.ac/testing/recaptcha-test.html">Alastair's demo</a>).
  </p>
  
  <p>
    I started to<a href="https://storify.com/aardrian/recaptcha-reboot"> track the comments on Twitter in a Storify</a> (and will continue to do so), but in the interest of providing a narrative, archiving the content pending the inevitable heat death of Storify, and having a simpler format, I am embedding the tweets and links here.
  </p>
  
  <h2>Twitter Conversation</h2>
  
  <blockquote class="twitter-tweet" lang="en"><p>want to test google&#39;s new reCAPTCHA? <a href="https://twitter.com/hashtag/a11y?src=hash">#a11y</a> <a href="http://t.co/3UXl72mAHR">http://t.co/3UXl72mAHR</a> (not half bad in Chrome w/JAWS+NVDA, fairly cruddy in other combos)</p>&mdash; patrick h. lauke (@patrick_h_lauke) <a href="https://twitter.com/patrick_h_lauke/status/540286654205140993">December 3, 2014</a></blockquote>
  
  <blockquote class="twitter-tweet" data-cards="hidden" lang="en"><p>How bloody unsurprising. Google makes the web even less accessible with their new captchas: <a href="http://t.co/S5I9Zau3ME">http://t.co/S5I9Zau3ME</a> <a href="https://twitter.com/hashtag/a11y?src=hash">#a11y</a> <a href="https://twitter.com/hashtag/accessibility?src=hash">#accessibility</a> <a href="https://twitter.com/hashtag/fb?src=hash">#fb</a></p>&mdash; Sina Bahram (@SinaBahram) <a href="https://twitter.com/SinaBahram/status/540336953263390720">December 4, 2014</a></blockquote>
  
  
  
  
  <figure>
    <img src="https://4.bp.blogspot.com/-3cC0THj-mIY/VI5TOtr9HAI/AAAAAAAAGc8/Ej467d2kueA/s1600/Netscape1-about.gif" alt="Screen shot of the Netscape 1.0N browser information page.">
    <figcaption>Screen shot of the Netscape 1.0N browser information page.</figcaption>
  </figure>

  <figure class="right">
    <img border="0" src="https://3.bp.blogspot.com/-jMLWE2yk8jE/VI5TOwHSJuI/AAAAAAAAGcs/gZbVZc4m4hM/s1600/Netscape1-pulsing-N.gif" alt="The creepy pulsing N.">
  </figure>
  
  <p>
     Twenty years ago today, Netscape Communications Corporation released version 1.0 of Navigator, the browser that became synonymous with the web (for the general public). Well, really the general public (and most developers) referred to the browser as <em>Netscape</em>, not by its real name, <em>Navigator</em>.
  </p>
  
  <p>
    <img border="0" src="https://4.bp.blogspot.com/-Vi6SlDW3-4s/VI5TOoTW0iI/AAAAAAAAGco/Y26waqqu94M/s1600/Netscape1-broken-image.gif" alt="The Navigator broken image icon." class="left"> Based on Mosaic, Navigator quickly replaced the now not-so-cool Mosaic on my work and personal computer, and made Lynx look downright boring. It also presented the world with the creepy pulsing N, which was thankfully replaced pretty quickly. The first release also provided us with the familiar broken image icon that would persist until Internet Explorer's ubiquity usurped it.
  </p>
  
  <p>
    Navigator persisted for more than thirteen years after that release, through the ups and downs of the oddly-named browser wars, until it was finally scuttled by its last owner, AOL, on December 28, 2007. AOL released security updates until March 1, 2008, marking the last update Navigator would ever see.
  </p>
  
  <p>
    In honor of the browser where I cut my teeth learning all about the web, I grabbed the <a href="http://browsers.evolt.org/browsers/archive/navigator/16bit/1.0/">Navigator 1.0 release from the evolt.org browser archive</a> (Mac and Windows 16-bit only, sorry, and it's the 1.0N release) and installed it on a shaky WindowsXP virtual machine. Unsurprisingly, trying to surf anywhere with it was a mess. The browser pre-dated frames, cookies, HTML tables (support came in 1.1), JavaScript, and support for any of the robust features of HTTP.
  </p>
  
  <figure id="FirstFigure">
    <img src="https://4.bp.blogspot.com/-rE-FfxMhDwU/VI5TPJ3EIRI/AAAAAAAAGcw/laj3M4XQctg/s1600/Netscape1-wikipedia.gif" alt="Screen capture of Wikipedia in Netscape 1.0.">
    <figcaption>Screen capture of Wikipedia in Netscape 1.0.</figcaption>
  </figure>
  
  <figure>
    <img src="https://2.bp.blogspot.com/-xU1eZGZlqvc/VI5TPj6vbqI/AAAAAAAAGdA/lgn7xFdBGC4/s1600/Netscape1-yahoo.gif" alt="Screen capture of Yahoo in Netscape 1.0.">
    <figcaption>Screen capture of Yahoo in Netscape 1.0.</figcaption>
  </figure>
  
  <p>
    Interestingly, Navigator was first released as free software, only to walk it back a couple months later. The <a href="http://en.wikipedia.org/wiki/Netscape_Navigator">Wikipedia post</a> spends a couple sentences on this:
  </p>
  
  <blockquote>
    <p>
      Netscape announced in its first press release (13 October 1994) that it would make Navigator available without charge to all non-commercial users, and beta versions of version 1.0 and 1.1 were indeed freely downloadable in November 1994 and March 1995, with the full version 1.0 available in December 1994. Netscape's initial corporate policy regarding Navigator is interesting, as it claimed that it would make Navigator freely available for non-commercial use in accordance with the notion that Internet software should be distributed for free.
    </p>
    
    <p>However, within 2 months of that press release, Netscape apparently reversed its policy on who could freely obtain and use version 1.0 by only mentioning that educational and non-profit institutions could use version 1.0 at no charge.
    </p>
  </blockquote>
  
  <p>
    If the history of browser is something you find interesting, <a href="http://commons.wikimedia.org/wiki/File:Timeline_of_web_browsers.svg#mediaviewer/File:Timeline_of_web_browsers.svg">Wikipedia has this handy timeline of web browsers</a> dating back to 1990. On the plus side, this is an SVG file, so you can zoom in to read it. <a href="https://meyerweb.com/eric/browsers/timeline-structured.html">Eric Meyer has a more structured browser timeline</a>, but it doesn't start until 1996.
  </p>
  
  <figure>
    <table>
      <colgroup>
        <col>
        <col>
        <col class="number">
      </colgroup>
      <thead>
        <tr>
          <th>Author</th>
          <th>Title</th>
          <th class="number">Year Published</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Homer</td>
          <td><em>Iliad</em></td>
          <td class="number">BC ~800</td>
        </tr>
        <tr>
          <td>Miguel De Cervantes</td>
          <td><em>The Ingenious Gentleman Don Quixote of La Mancha</em></td>
          <td class="number">AD 1605</td>
        </tr>
        <tr>
          <td>Mary Shelley</td>
          <td><em>Frankenstein; or, The Modern Prometheus</em></td>
          <td class="number">1818</td>
        </tr>
        <tr>
          <td>Herman Melville</td>
          <td><em>Moby-Dick; or, The Whale</em></td>
          <td class="number">1851</td>
        </tr>
        <tr>
          <td>F. Scott Fitzgerald</td>
          <td><em>The Great Gatsby</em></td>
          <td class="number">1925</td>
        </tr>
        <tr>
          <td>George Orwell</td>
          <td><em>Nineteen Eighty-Four</em></td>
          <td class="number">1948</td>
        </tr>
      </tbody>
    </table>
    <figcaption>
      This is a list of books that I probably should have read, some of which I have read, but not all of which have I read.
    </figcaption>
  </figure>
  
  <p>
    Interestingly, I don't use Netscape Navigator (any release) at all anymore, but I do still fire up Lynx a few times a month.
  </p>
  
  
  <figure>
    <a href="https://2.bp.blogspot.com/-2O9BO-xNGWs/VGuX_gXiSgI/AAAAAAAAGbs/_zzLIH4ZyHg/s1600/digitalgov-tabindex.gif" imageanchor="1" ><img border="0" src="https://2.bp.blogspot.com/-2O9BO-xNGWs/VGuX_gXiSgI/AAAAAAAAGbs/_zzLIH4ZyHg/s1600/digitalgov-tabindex.gif"></a>
    <figcaption>Animated GIF showing the tab order on a page using the default Re-CAPTCHA, which sets a <code>tabindex</code>, forcing a keyboard user through six tab-stops to get to the <q>Skip to content</q> link.</figcaption>
  </figure>
  
  <p>
    <code>Tabindex</code> had the potential to be a useful attribute. A developer could set the order in which focus is moved on a page as a user tabs through the form (or links, or content). It became a stop-gap for forms and pages that relied too heavily on absolute positioning and didn't flow naturally. The problem is that it is often set by developers who don't have any idea of what the user expects.
  </p>
  
  <p>
    This mis-use has effectively guaranteed that using <code>tabindex</code> values greater than zero is a bad idea. If, as a developer, you have to use <code>tabindex</code> on a form, then the page itself probably isn't laid out well and will only confuse keyboard users and, more importantly, users of assistive technology.
  </p>
  
  <p>
    Browsers take any element with a positive <code>tabindex</code> value and promote it to the front of the pack for tabbing through the page. Only after a browser gets through all elements with a <code>tabindex</code> does it then fall back to source order. It doesn't matter if your <code>tabindex</code> is one million, it will still trump everything on the page that doesn't have a <code>tabindex</code>.
  </p>
  
  <p>
    This is such a well-known issue that the W3C HTML Working Group is <a href="http://lists.w3.org/Archives/Public/public-html/2014Oct/0027.html">working on new language</a> to deprecate values greater than zero. There is even a <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=27076">bug filed against the HTML specification</a> to that effect.
  </p>
  
  <p>
    For more detail I encourage you to read Léonie Watson's piece, <cite><a href="http://www.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/">Using the tabindex attribute</a></cite>.
  </p>
  
  <h2><code>Tabindex</code> Best Practices</h2>
  
  <p>
    Here are some tips to use <code>tabindex</code> properly.
  </p>
  
  <h3><code>tabindex="-1"</code></h3>
  
  <p>
    Setting <code>tabindex="-1"</code> allows you to set an element's focus with script, but <em>does not</em> put it in the tab order of the page. This is handy when you need to move focus to something you have updated via script or outside of user action.
  </p>
  
  <h3><code>tabindex="0"</code></h3>
  
  <p>
    Setting <code>tabindex="0"</code> will take an element and make it focusable. It doesn't set the element's position in the tab order, it just allows a user to focus the element in the order determined by its location with the DOM.
  </p>
  
  <h3><code>tabindex="1"</code> (or any value &gt; 0)</h3>
  
  <p>
    Do not set a <code>tabindex="1"</code> or any value greater than zero (or any positive value).
  </p>
  
  
  
  <dl id="LastList">
    <dt>Heartbleed OpenSSL Vulnerability</dt>
    <dd>Apr-09-2014 &#8212; Kris Meier, President of Station 28, Algonquin's IT partner, addresses the Heartbleed security bug for Algonquin's clients.</dd>
    <dt>Algonquin Vice-President Adrian Roselli to Speak on Accessibility at 2014 HTML5 Developer Conference</dt>
    <dd>Feb-25-2014 &#8212; Adrian Roselli has been selected as a speaker at the 2014 HTML5 Developer Conference. Adrian will be speaking about accessibility and how it relates to individuals as both current and future web users. Not intended as a deep dive into ARIA, his presentation will primer for those who aren’t sure where to start or how accessibility helps them.</dd>
    <dt>Algonquin Studios Launches Responsive Web Site for the Greater Chicago Chapter of the Association of Legal Administrators</dt>
    <dd>Dec-11-2013 &#8212; The Greater Chicago Chapter of the Association of Legal Administrators, which serves over 300 members from all major legal business disciplines, has chosen Algonquin Studios for the design, development, and hosting of the Chapter’s web site.</dd>
  </dl>
  
  <figure>
    <img border="0" src="https://4.bp.blogspot.com/-utrdGBmm86U/UtbWQX-S1pI/AAAAAAAAFgQ/1yMoSqkAOes/s1600/NetNeutrality_pricing.jpg" width="275" height="612" alt="Image showing the base price of a fake company's DSL connection, with add-on pricing for access to groups of web sites, such as streaming sites, news sites, shopping sites, etc." longdesc="http://adrianroselli.com/longdesc#NetNeutralityNews">
    <figcaption>
      Found this on the Twitters <a href="https://twitter.com/CypherTheDane/status/423175105150083072/photo/1">in @CypherTheDane's tweet</a>. Read a <a href="http://adrianroselli.com/longdesc#NetNeutralityNews">full-text version of this graphic</a>.
    </figcaption>
  </figure>
  
  <figure>
    <img border="0" src="https://4.bp.blogspot.com/-XZdCMA7l5tY/VN93mBdDslI/AAAAAAAAGjY/Lo4TVfMRVVc/s1600/Medium_comments_bug-3.png" alt="Typing the name of the bookmarklet into the address bar as it shows options from auto-complete." class="left">
    <img border="0" src="https://4.bp.blogspot.com/-SHjpR-jfLmE/VN93mNBGO6I/AAAAAAAAGjc/-8KNsUyGABw/s1600/Medium_comments_bug-4.png" alt="Once the bookmarklet fires I can see the comment replies." class="right">
    <figcaption>Typing the name of the bookmarklet into the address bar as it shows options from auto-complete (first image), then once the bookmarklet fires I can see the comment replies (second image). Both images are current version of Chrome on Android.</figcaption>
  </figure>
  
</main>