small tweaks for HTML validation

shannawalsh · Jun 10, 2024 · f6128e4 · f6128e4
1 parent d544b10
commit f6128e4
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/css/main.css b/css/main.css
@@ -353,7 +353,7 @@ textarea {
     border: none;
     outline: none;
     background-color: #f4bedc; 
-    opacity: 0.6;
+    opacity: 0.7;
     color: #351d77;
     cursor: pointer;
     padding: 15px;
@@ -365,6 +365,19 @@ textarea {
     color: white;
   }
 
+  .visually-hidden {
+    /* Hides the text for the anchor link in the icons while making it accessible to screen readers */
+    display: inline-block;
+    position: absolute;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+  }
+
   /* -----Mobile Styles ----- */
 
   /* Portfolio */

diff --git a/index.html b/index.html
@@ -45,7 +45,7 @@ <h2>I'm a Full Stack Developer and Air Force veteran with an insatiable curiosit
   </div>
   </header>
   <main>
-    <article id="portfolio">
+    <div id="portfolio">
       <section id="work">
         <div class="content-wrapper">
           <h3 class="portfolio-header">Projects</h3>
@@ -109,7 +109,7 @@ <h4>Dog Image Gallery</h4>
               <figure>
                 <a href="https://unplugged.shannawalsh.com/index.html" target="_blank"><img src="img/unplugged.png" alt="unplugged project screeshot"></a>
               </figure>
-              <h4>Uplugged</h4>
+              <h4>Unplugged</h4>
               <p class="project-description">A multi-page responsive website coded from a design comp using Flexbox. This versatile design has several sections and adapts to mobile, tablet, and desktop screens. This includes a Cards design pattern that can easily be repurposed for different sites.</p>
               <p><span>Languages: </span>HTML5, CSS3 & Flexbox</p>
               <p><span>Skills: </span>Media Queries & Responsive Typography</p>
@@ -147,7 +147,7 @@ <h4>Tech Stack</h4>
           </div>
         </div>
       </section>
-    </article>
+    </div>
     <section id="about">
       <div class="content-wrapper">
         <div class="about-content-wrapper">
@@ -177,9 +177,9 @@ <h4 class="contact-title">Hire me</h4>
         <div class="contact-info follow-section">
           <h4 class="contact-title">Follow me</h4>
           <ul class="social-icons">
-            <li><a href="https://www.linkedin.com/in/shanna-walsh/" target="_blank" alt="LinkedIn account link"><i class="fa-brands fa-linkedin-in"></i></a>
+            <li><a href="https://www.linkedin.com/in/shanna-walsh/" target="_blank"><span class="visually-hidden">LinkedIn account link</span><i class="fa-brands fa-linkedin-in"></i></a>
             </li>
-            <li><a href="https://github.com/shannawalsh" target="_blank" alt="GitHub account link" ><i class="fa-brands fa-github"></i></a>
+            <li><a href="https://github.com/shannawalsh" target="_blank"><span class="visually-hidden">GitHub account link</span><i class="fa-brands fa-github"></i></a>
             </li>
           </ul>
         </div>