Added visuallyhidden styling to SVG <title> and <desc>

Author: ericwbailey

docs/index.html

@@ -17,8 +17,8 @@ <h1>Accessible HTML Content Patterns</h1>
 
 <aside id="section__project-link" role="complementary" aria-labelledby="title__project"><!-- Start of #section__project-link -->
     <a href="https://github.com/ericwbailey/accessible-html-content-patterns">
-        <title id="title__project">View project repository on GitHub</title>
-        <desc>A ribbon banner featuring a silhouette of GitHub's logo, the Octocat.</desc>
+        <title id="title__project" style="border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;">View project repository on GitHub</title>
+        <desc style="border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;">A ribbon banner featuring a silhouette of GitHub's logo, the Octocat.</desc>
         <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 250 250" fill="#ffffff" style="position: absolute; top: 0; right: 0">
             <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#000000"/>
             <path class="octo-arm" d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16" style="-webkit-transform-origin: 130px 106px; transform-origin: 130px 106px"/>