diff --git a/css/styles.css b/css/styles.css
index 2c89671..926b872 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -21,6 +21,9 @@
 .is-active {
   display: initial;
 }
+.is-active span {
+  color: #1c51a6;
+}
 
 .cent {
   display: block;
@@ -84,14 +87,13 @@
   box-shadow: 0 10px 16px rgba(0, 0, 0, 0.13), 0 6px 6px rgba(0, 0, 0, 0.19);
 }
 
-
 .has-same-height .card {
   height: 350px;
   overflow: hidden;
 }
 
 .skills-content .media + .media {
-  margin-top: .5rem;
+  margin-top: 0.5rem;
 }
 
 .skills-content .progress {
@@ -103,8 +105,8 @@
 }
 
 .info-tiles {
-  margin: .75rem auto;
-  padding: 0 .75rem;
+  margin: 0.75rem auto;
+  padding: 0 0.75rem;
 }
 
 .button.is-primary.is-alt {
@@ -118,7 +120,7 @@
 .post {
   margin: 1rem;
   padding-bottom: 1rem;
-  border-bottom: 1px solid #E6EAEE;
+  border-bottom: 1px solid #e6eaee;
 }
 .post:last-child {
   padding-bottom: 0;
@@ -126,10 +128,9 @@
 }
 
 .forum-list li {
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 
-
 @media screen and (max-width: 1087px) {
   .navbar-menu {
     background-color: #888;
@@ -175,4 +176,112 @@ li {
   width: 40px;
   height: 40px;
   background-size: contain;
-}
\ No newline at end of file
+}
+
+a {
+  color: #1c51a6;
+}
+
+.is-contrast-danger {
+  color: #ad0023;
+}
+
+.is-contrast-success {
+  color: #0f612c;
+}
+
+.tag.is-contrast-danger {
+  background-color: #ad0023;
+  color: #fff;
+}
+
+.tag.is-contrast-success {
+  background-color: #0f612c;
+  color: #fff;
+}
+
+.tag.is-contrast-primary {
+  background-color: #004d40;
+  color: #fff;
+}
+
+fieldset {
+  border: none;
+}
+
+*:focus {
+  outline: 2px solid blue !important;
+}
+
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  /* clip-path: inset(50%); */
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  position: absolute;
+}
+
+.visually-hidden:focus {
+  height: auto;
+  width: auto;
+  clip: auto;
+  color: #fff;
+  background-color: #ff0000;
+  padding: 5px;
+}
+
+.skip-link {
+  position: absolute;
+  height: auto;
+  width: auto;
+  padding: 8px;
+  left: 25%;
+  color: #fff;
+  background-color: #ff0000;
+  transform: translateY(-100%);
+  transition: transform 0.3s;
+}
+
+.skip-link:focus {
+  transform: translateY(0%);
+}
+
+.my-button-footer {
+  border: none;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  box-sizing: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  color: #1c51a6;
+  background-color: #fff;
+  padding: 0.75rem;
+  border-right: 1px solid #dbdbdb;
+}
+
+.burger-hidden {
+  border: 0;
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  color: transparent;
+  background-color: transparent;
+}
+
+.breadcrumb {
+  display: flex;
+  padding: 20px;
+}
+.breadcrumb a {
+  color: #1b4fa1;
+}
+.breadcrumb a:hover {
+  text-decoration: underline;
+}
+.breadcrumb a.current {
+  text-decoration: none;
+  pointer-events: none;
+  color: #000000;
+}
diff --git a/index.html b/index.html
index fa627dd..fa172b4 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Web Accessibility 2019 Q1 BY</title>
   <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css'>
@@ -10,49 +11,53 @@
 </head>
 
 <body>
-  <div class="hero hero-bg is-fullheight">
+  <a href="#main-content" class="visually-hidden">Skip to Main content</a>
+  <header class="hero hero-bg is-fullheight">
     <div class="hero-head">
       <div class="navbar">
         <div class="container">
           <div class="navbar-brand">
-            <a class="navbar-item logo-link">
-              <img src="https://www.epam.com/content/dam/epam/global/logo_white-blue.svg">
+            <a href="index.html" class="navbar-item logo-link">
+              <img src="https://www.epam.com/content/dam/epam/global/logo_white-blue.svg" alt="epam home page">
             </a>
             <span class="navbar-burger burger" data-target="navbarMenu">
-              <span></span>
-              <span></span>
-              <span></span>
+              <button class='burger-hidden' tabindex="0" aria-haspopup="true">Click here to open the menu</button>
+                <nav id="navigation">
+                      <span></span>
+                      <span></span>
+                      <span></span>
+                </nav>
             </span>
           </div>
 
-          <div id="navbarMenu" class="navbar-menu">
+          <nav aria-label="navigation bar" id="navbarMenu" class="navbar-menu" role="menu">
             <div class="navbar-end">
-              <span class="navbar-item">
-                <a class="button is-white is-outlined">
+              <span class="navbar-item" role="menuitem">
+                <a href="#" class="button is-white is-outlined">
                   <span class="icon">
                     <i class="fa fa-home"></i>
                   </span>
                   <span>Home</span>
                 </a>
               </span>
-              <span class="navbar-item">
-                <a class="button is-white is-outlined">
+              <span class="navbar-item" role="menuitem">
+                <a href="#" class="button is-white is-outlined">
                   <span class="icon">
                     <i class="fab fa-superpowers"></i>
                   </span>
                   <span>Examples</span>
                 </a>
               </span>
-              <span class="navbar-item">
-                <a class="button is-white is-outlined">
+              <span  role="menuitem" class="navbar-item">
+                <a href="#" class="button is-white is-outlined">
                   <span class="icon">
                     <i class="fa fa-book"></i>
                   </span>
                   <span>Documentation</span>
                 </a>
               </span>
-              <span class="navbar-item">
-                <a class="button is-white is-outlined">
+              <span role="menuitem" class="navbar-item">
+                <a href="#" class="button is-white is-outlined">
                   <span class="icon">
                     <i class="fab fa-github"></i>
                   </span>
@@ -60,7 +65,7 @@
                 </a>
               </span>
             </div>
-          </div>
+          </nav>
         </div>
       </div>
     </div>
@@ -75,22 +80,35 @@
           <div class="box">
             <div class="field is-grouped">
               <p class="control is-expanded">
-                <input class="input">
+                <label hidden for="notify-me-input">get news</label>
+                <input class="input" id="notify-me-input">
               </p>
               <p class="control">
-                <a class="button is-info">Notify Me</a>
+                <button class="button is-link">Notify Me</button>
               </p>
             </div>
           </div>
         </div>
       </div>
     </div>
+  </header>
+  
+  <main id="main-content">
+    
+  <div id="breadcrumbs">
+    <nav class="breadcrumb is-centered is-medium" role="breadcrumb">
+      <ul>
+        <li><a href="./" class="current" aria-current="page">MainPage</a><span></span></li>
+        <li><a href="index.html#nav">Pictures</a><span></span></li>
+        <li><a href="index.html#services-section">Services</a></li>
+      </ul>
+    </nav>
   </div>
 
-  <div class="section" id="about">
+  <section class="section" id="about" aria-labelled="about-section">
     <div class="section-heading has-text-centered">
-      <div class="title is-2">About Us</div>
-      <div class="subtitle is-5">We of all trades, master of "some"</div>
+      <h2 class="title is-2" id="about-section">About Us</h2>
+      <h5 class="subtitle is-5">We of all trades, master of "some"</h5>
       <div class="container">
         <p>Web developers with more than <b>4 years</b> of well-rounded experience with a degree in the
           field of
@@ -102,9 +120,9 @@
     </div>
 
     <div class="content container">
-      <div class="is-1 title">Hello World</div>
-      <p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>
-      <div class="is-2 title">Second level</div>
+      <h1 class="is-1 title">Hello World</h1>
+      <p>Lorem ipsum<sup><a href="#"><span class="visually-hidden">footnotes</span>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>
+      <h2 class="is-2 title">Second level</h2>
       <p>Curabitur accumsan turpis pharetra <b>augue tincidunt</b> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
       <ul>
         <li>- In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
@@ -112,8 +130,8 @@
         <li>- Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
         <li>- Ut non enim metus.</li>
       </ul>
-      <div class="is-3 title">Third level</div>
-      <p>Quisque ante lacus, malesuada ac auctor vitae, congue <a>non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.</p>
+      <h3 class="is-3 title">Third level</h3>
+      <p>Quisque ante lacus, malesuada ac auctor vitae, congue <a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.</p>
       <ol class="ol-list">
         <li>Donec blandit a lorem id convallis.</li>
         <li>Cras gravida arcu at diam gravida gravida.</li>
@@ -135,7 +153,7 @@
         <dd>A technology to make HTML look better</dd>
       </dl>
       <p>Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.</p>
-      <div class="is-4 title">Fourth level</div>
+      <h4 class="is-4 title">Fourth level</h4>
       <p>Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.</p>
       <pre>
           &lt;!DOCTYPE html&gt;
@@ -151,9 +169,10 @@
           </pre>
       <p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>
       <table>
+        <caption class="visually-hidden">Lorem ipsum dolor.</caption>
         <tr>
-          <td>Header</td>
-          <td>Header</td>
+          <th scope="col">Header</th>
+          <th scope="col">Header</th>
         </tr>
         <tr>
           <td>cell</td>
@@ -177,26 +196,26 @@
         </tr>
       </table>
       <p>Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.</p>
-      <div class="is-5 title">Fifth level</div>
+      <h5 class="is-5 title">Fifth level</h5>
       <p>Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.</p>
       <figure>
-        <img src="./img/photo-1572958731731-2b7fdb0a9818.jpg">
-        <img src="./img/photo-1574281852611-b2f04c86a520.jpg">
-        <img src="./img/photo-1575023615386-1554d895d09d.jpg">
+        <img src="./img/photo-1572958731731-2b7fdb0a9818.jpg" alt="image of a forest">
+        <img src="./img/photo-1574281852611-b2f04c86a520.jpg" alt="black and white image of hands ">
+        <img src="./img/photo-1575023615386-1554d895d09d.jpg" alt="image of baubels">
         <figcaption>
           Figure 1: Some beautiful placeholders
         </figcaption>
       </figure>
-      <div class="is-6 title">Sixth level</div>
+      <h6 class="is-6 title">Sixth level</h6>
       <p>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.</p>
     </div>
-  </div>
+  </section>
 
-  <div class="hero has-background-grey-light">
+  <section class="hero has-background-grey-light" aria-labelled="features-section">
     <div class="container features">
       <div class="section-heading has-text-centered">
-        <div class="title is-2">Three key features</div>
-        <div class="subtitle is-5">We don't hide what we do</div>
+        <h2 class="title is-2" id="features-section">Three key features</h2>
+        <h5 class="subtitle is-5 has-text-black">We don't hide what we do</h5>
       </div>
 
       <div class="columns">
@@ -209,7 +228,7 @@
               <div class="content">
                 <div>Tristique senectus et netus et.</div>
                 <p>Purus semper eget duis at tellus at urna condimentum mattis. Non blandit massa enim nec. Integer enim neque volutpat ac tincidunt vitae semper quis. Accumsan tortor posuere ac ut consequat semper viverra nam.</p>
-                <p><a>Learn more</a></p>
+                <p><a href="#">Learn more</a></p>
               </div>
             </div>
           </div>
@@ -225,7 +244,7 @@
                 <div>Tempor orci dapibus ultrices in.</div>
                 <p>Ut venenatis tellus in metus vulputate. Amet consectetur adipiscing elit pellentesque. Sed arcu non odio euismod lacinia at quis risus. Faucibus turpis in eu mi bibendum neque egestas cmonsu songue. Phasellus vestibulum lorem
                   sed risus.</p>
-                <p><a>Learn more</a></p>
+                <p><a href="#">Learn more</a></p>
               </div>
             </div>
           </div>
@@ -240,38 +259,38 @@
               <div class="content">
                 <div> Leo integer malesuada nunc vel risus. </div>
                 <p>Imperdiet dui accumsan sit amet nulla facilisi morbi. Fusce ut placerat orci nulla pellentesque dignissim enim. Libero id faucibus nisl tincidunt eget nullam. Commodo viverra maecenas accumsan lacus vel facilisis.</p>
-                <p><a>Learn more</a></p>
+                <p><a href="#">Learn more</a></p>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
+  </section>
 
-  <div class="hero is-info">
+  <div class="hero is-info has-background-link">
     <div class="hero-body">
       <div class="container">
-        <div class="title">List of topics</div>
-        <div class="subtitle">We are always in touch we the outside world</div>
+        <h2 class="title">List of topics</h2>
+        <h5 class="subtitle">We are always in touch we the outside world</h5>
       </div>
     </div>
     <div class="tabs is-boxed is-centered main-menu" id="nav">
       <ul>
-        <li data-target="pane-1" id="1" class="is-active">
-          <a>
+        <li data-target="pane-1" id="1" class="is-active" tabindex="0" role="none">
+          <a role="menuitem">
             <span class="icon is-small"><i class="fa fa-image"></i></span>
             <span>Pictures</span>
           </a>
         </li>
-        <li data-target="pane-3" id="3">
-          <a>
+        <li data-target="pane-3" id="3" tabindex="0" role="none">
+          <a role="menuitem">
             <span class="icon is-small"><i class="fab fa-superpowers"></i></span>
             <span>Team</span>
           </a>
         </li>
-        <li data-target="pane-4" id="4">
-          <a>
+        <li data-target="pane-4" id="4" tabindex="0" role="none">
+          <a role="menuitem">
             <span class="icon is-small"><i class="fa fa-film"></i></span>
             <span>Video</span>
           </a>
@@ -288,14 +307,14 @@
             <div class="card">
               <div class="card-image">
                 <div class="image is-4by3">
-                  <img src="./img/tab-1.jpg" class="modal-button" data-target="modal-image1">
+                  <img src="./img/tab-1.jpg" class="modal-button" data-target="modal-image1" alt="image of a remote control">
                 </div>
               </div>
               <div class="card-content">
                 <div class="content">
                   <div>Click on image above</div>
                   <p>Purus semper eget duis at tellus at urna condimentum mattis. Non blandit massa enim nec. Integer enim neque volutpat ac tincidunt vitae semper quis. Accumsan tortor posuere ac ut consequat semper viverra nam.</p>
-                  <span class="button is-link modal-button" data-target="modal-image1">Image modal</span>
+                  <button class="button is-link modal-button" data-target="modal-image1">Image modal</button>
                 </div>
               </div>
             </div>
@@ -304,7 +323,7 @@
             <div class="card">
               <div class="card-image">
                 <div class="image is-4by3">
-                  <img src="./img/tab-2.jpg">
+                  <img src="./img/tab-2.jpg" alt="image of bungalows on the beach">
                 </div>
               </div>
               <div class="card-content">
@@ -312,7 +331,7 @@
                   <div>Tempor orci dapibus ultrices in.</div>
                   <p>Ut venenatis tellus in metus vulputate. Amet consectetur adipiscing elit pellentesque. Sed arcu non odio euismod lacinia at quis risus. Faucibus turpis in eu mi bibendum neque egestas cmonsu songue. Phasellus vestibulum lorem
                     sed risus.</p>
-                  <span class="button is-link modal-button" data-target="modal-card">Modal Card</span>
+                  <button class="button is-link modal-button" data-target="modal-card">Modal Card</button>
                 </div>
               </div>
             </div>
@@ -321,14 +340,14 @@
             <div class="card">
               <div class="card-image">
                 <div class="image is-4by3">
-                  <img src="./img/tab-3.jpg" class="modal-button" data-target="modal-image2">
+                  <img src="./img/tab-3.jpg" class="modal-button" data-target="modal-image2" alt="image of a sea after rain">
                 </div>
               </div>
               <div class="card-content">
                 <div class="content">
                   <div>Click anywhere on card</div>
                   <p>Imperdiet dui accumsan sit amet nulla facilisi morbi. Fusce ut placerat orci nulla pellentesque dignissim enim. Libero id faucibus nisl tincidunt eget nullam. Commodo viverra maecenas accumsan lacus vel facilisis.</p>
-                  <span class="button is-link modal-button" data-target="modal-image2">Image modal</span>
+                  <button class="button is-link modal-button" data-target="modal-image2">Image modal</button>
                 </div>
               </div>
             </div>
@@ -347,7 +366,7 @@
             <div class="media-content">
               <div class="content">
                 <p>
-                  <a><b>Dominic Ipsum</b></a>
+                  <a href="#"><b>Dominic Ipsum</b></a>
                   <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
                 </p>
               </div>
@@ -360,7 +379,7 @@
             <div class="media-content">
               <div class="content">
                 <p>
-                  <a><b>Cassie Ipsum</b></a>
+                  <a href="#"><b>Cassie Ipsum</b></a>
                   <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
                 </p>
               </div>
@@ -375,7 +394,7 @@
             <div class="media-content">
               <div class="content">
                 <p>
-                  <a><b>Avery Ipsum</b></a>
+                  <a href="#"><b>Avery Ipsum</b></a>
                   <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
                 </p>
               </div>
@@ -388,7 +407,7 @@
             <div class="media-content">
               <div class="content">
                 <p>
-                  <a><b>io Ipsum</b></a>
+                  <a href="#"><b>io Ipsum</b></a>
                   <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
                 </p>
               </div>
@@ -401,7 +420,7 @@
     <div class="tab-pane" id="pane-4">
       <div class="columns is-centered">
         <div class="column is-three-quarters">
-          <div class="title has-text-centered">Inspired video</div>
+          <h2 class="title has-text-centered">Inspired video</h2>
           <div class="embed-container image">
             <iframe src="https://player.vimeo.com/video/261794608" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
           </div>
@@ -410,42 +429,42 @@
     </div>
   </div>
 
-  <div class="section has-background-grey-lighter">
+  <section class="section has-background-grey-lighter" aria-labelled="events-section">
     <div class="container has-text-centered">
         <div class="section-heading has-text-centered">
-          <div class="title is-2">Upcoming events</div>
-          <div class="subtitle is-5">Outcoming dates for the best options</div>
+          <h2 class="title is-2" id="events-section">Upcoming events</h2>
+          <h5 class="subtitle is-5">Outcoming dates for the best options</h5>
         </div>
 
       <div class="tile is-ancestor">
         <div class="tile is-parent">
           <div class="tile is-child box">
             <div class="image">
-              <img src="./img/web-access-summit-eventbrite.jpg">
+              <img src="./img/web-access-summit-eventbrite.jpg" alt="web accessibility summit">
             </div>
-            <p class="title">New York</p>
-            <p class="subtitle">Fri 27 Nov 2016</p>
-            <a class="button">Buy Tickets</a>
+            <h2 class="title">New York</h2>
+            <h4 class="subtitle">Fri 27 Nov 2016</h4>
+            <button class="button">Buy Tickets</button>
           </div>
         </div>
         <div class="tile is-parent">
           <div class="tile is-child box">
             <div class="image">
-              <img src="./img/access.jpg">
+              <img src="./img/access.jpg" alt="summit">
             </div>
-            <p class="title">Los Angeles</p>
-            <p class="subtitle">Fri 27 Nov 2016</p>
-            <a class="button">Buy Tickets</a>
+            <h2 class="title">Los Angeles</h2>
+            <h4 class="subtitle">Fri 27 Nov 2016</h4>
+            <button class="button">Buy Tickets</button>
           </div>
         </div>
         <div class="tile is-parent">
           <div class="tile is-child box">
             <div class="image">
-              <img src="./img/dotcss-2019.jpg">
+              <img src="./img/dotcss-2019.jpg" alt="dot css">
             </div>
-            <p class="title">Mexico</p>
-            <p class="subtitle">Fri 27 Nov 2016</p>
-            <a class="button">Buy Tickets</a>
+            <h2 class="title">Mexico</h2>
+            <h4 class="subtitle">Fri 27 Nov 2016</h4>
+            <button class="button">Buy Tickets</button>
           </div>
         </div>
       </div>
@@ -454,57 +473,57 @@
         <div class="tile is-parent">
           <div class="tile is-child box">
             <div class="image">
-              <img src="./img/images.jpg">
+              <img src="./img/images.jpg" alt="access accessability">
             </div>
-            <p class="title">Paris</p>
-            <p class="subtitle">Fri 27 Nov 2016</p>
-            <a class="button">Buy Tickets</a>
+            <h2 class="title">Paris</h2>
+            <h4 class="subtitle">Fri 27 Nov 2016</h4>
+            <button class="button">Buy Tickets</button>
           </div>
         </div>
         <div class="tile is-parent">
           <div class="tile is-child box">
             <div class="image">
-              <img src="./img/mid_300_33455472_313632022502906_5761920685983137792_n.png">
+              <img src="./img/mid_300_33455472_313632022502906_5761920685983137792_n.png" alt="css minsk js">
             </div>
-            <p class="title">Minsk</p>
-            <p class="subtitle">Fri 27 Nov 2016</p>
-            <a class="button">Buy Tickets</a>
+            <h2 class="title">Minsk</h2>
+            <h4 class="subtitle">Fri 27 Nov 2016</h4>
+            <button class="button">Buy Tickets</button>
           </div>
         </div>
         <div class="tile is-parent">
           <div class="tile is-child box">
             <div class="image">
-              <img src="./img/access.jpg">
+              <img src="./img/access.jpg" alt="photo of summit">
             </div>
-            <p class="title">London</p>
-            <p class="subtitle">Fri 27 Nov 2016</p>
-            <a class="button">Buy Tickets</a>
+            <h2 class="title">London</h2>
+            <h4 class="subtitle">Fri 27 Nov 2016</h4>
+            <button class="button">Buy Tickets</button>
           </div>
         </div>
       </div>
     </div>
-  </div>
+  </section>
 
-  <div class="section">
+  <section class="section" aria-labelled="services-section">
     <div class="section-heading has-text-centered">
-      <div class="title is-2">Services</div>
-      <div class="subtitle is-5">What can I do for you?</div>
+      <h2 class="title is-2" id="services-section">Services</h2>
+      <h5 class="subtitle is-5">What can I do for you?</h5>
     </div>
     <div class="container">
       <div class="columns">
-        <div class="column">
-          <a class="box">
+        <div class="column" aria>
+          <a href="#" class="box">
             <div class="content">
-              <div class="title is-5">Front End Web Development</div>
+              <h5 class="title is-5">Front End Web Development</h5>
               Develop Front End using latest standards with HTML5/CSS3 with added funtionality using JavaScript and
               Vue.js.
             </div>
           </a>
         </div>
         <div class="column">
-          <a class="box">
+          <a href="#" class="box">
             <div class="content">
-              <div class="title is-5">Back End Web Development</div>
+              <h5 class="title is-5">Back End Web Development</h5>
               Develop Back End application/service using Node.js or ASP .NET and SQL server or Mongo DB databases.
             </div>
           </a>
@@ -513,30 +532,30 @@
 
       <div class="columns">
         <div class="column">
-          <a class="box">
+          <a href="#" class="box">
             <div class="content">
-              <div class="title is-5">Front End Web Development</div>
+              <h5 class="title is-5">Front End Web Development</h5>
               Develop Front End using latest standards with HTML5/CSS3 with added funtionality using JavaScript and
               Vue.js.
             </div>
           </a>
         </div>
         <div class="column">
-          <a class="box">
+          <a href="#" class="box">
             <div class="content">
-              <div class="title is-5">Back End Web Development</div>
+              <h5 class="title is-5">Back End Web Development</h5>
               Develop Back End application/service using Node.js or ASP .NET and SQL server or Mongo DB databases.
             </div>
           </a>
         </div>
       </div>
     </div>
-  </div>
+  </section>
 
-  <div class="section has-background-grey-lighter">
+  <section class="section has-background-grey-lighter" aria-labelled="photos-section">
     <div class="container">
       <div class="section-heading has-text-centered">
-        <div class="title is-2">Photos from past events</div>
+        <h2 class="title is-2" id="photos-section">Photos from past events</h2>
       </div>
 
       <div class="container portfolio-container">
@@ -547,22 +566,22 @@
                 <p class="card-header-title">
                   <span>Admin <small>(Light)</small></span>
                   <span class="is-pulled-right">
-                    <a>
+                    <a rel="tag">
                       <span class="tag is-default">v0.7.2</span>
                     </a>
                     <span class="tag is-default">Desktop</span>
-                    <span class="tag is-danger">WIP</span>
+                    <span class="tag is-contrast-danger">WIP</span>
                   </span>
                 </p>
               </div>
               <div class="card-content">
                 <div class="image">
-                  <img src="./img/ev-1.jpeg">
+                  <img src="./img/ev-1.jpeg" alt="photo from js conf family lecture">
                 </div>
               </div>
               <div class="card-footer">
-                <a class="card-footer-item">Preview</a>
-                <a class="card-footer-item">Source Code</a>
+                <button class="card-footer-item my-button-footer">Preview</button>
+                <button class="card-footer-item my-button-footer">Source Code</button>
               </div>
             </div>
           </div>
@@ -572,7 +591,7 @@
                 <p class="card-header-title">
                   <span>Cards</span>
                   <span class="is-pulled-right">
-                    <a>
+                    <a rel="tag">
                       <span class="tag is-default">v0.7.2</span>
                     </a>
                     <span class="tag is-default">Desktop</span>
@@ -582,12 +601,12 @@
               </div>
               <div class="card-content">
                 <div class="image">
-                  <img src="./img/ev-2.jpeg">
+                  <img src="./img/ev-2.jpeg" alt="photo of developers with laptops">
                 </div>
               </div>
               <div class="card-footer">
-                <a class="card-footer-item">Preview</a>
-                <a class="card-footer-item">Source Code</a>
+                <button class="card-footer-item my-button-footer">Preview</button>
+                <button class="card-footer-item my-button-footer">Source Code</button>
                 </div>
             </div>
           </div>
@@ -597,7 +616,7 @@
                 <p class="card-header-title">
                   <span>Forum</span>
                   <span class="is-pulled-right">
-                    <a>
+                    <a rel="tag">
                       <span class="tag is-default">v0.7.2</span>
                     </a>
                     <span class="tag is-default">Desktop</span>
@@ -607,12 +626,12 @@
               </div>
               <div class="card-content">
                 <div class="image">
-                  <img src="./img/ev-3.jpeg">
+                  <img src="./img/ev-3.jpeg"  alt="photo of making photo">
                 </div>
               </div>
               <div class="card-footer">
-                <a class="card-footer-item">Preview</a>
-                <a class="card-footer-item">Source Code</a>
+                <button class="card-footer-item my-button-footer">Preview</button>
+                <button class="card-footer-item my-button-footer">Source Code</button>
               </div>
             </div>
           </div>
@@ -624,7 +643,7 @@
                 <p class="card-header-title">
                   <span>InstaAlbum</span>
                   <span class="is-pulled-right">
-                    <a>
+                    <a rel="tag">
                       <span class="tag is-default">v0.7.2</span>
                     </a>
                     <span class="tag is-default">Desktop</span>
@@ -634,12 +653,12 @@
               </div>
               <div class="card-content">
                 <div class="image">
-                  <img src="./img/ev-4.jpeg">
+                  <img src="./img/ev-4.jpeg"  alt="photo of a confirence">
                 </div>
               </div>
               <div class="card-footer">
-                <a class="card-footer-item">Preview</a>
-                <a class="card-footer-item">Source Code</a>
+                <button class="card-footer-item my-button-footer">Preview</button>
+                <button class="card-footer-item my-button-footer">Source Code</button>
               </div>
             </div>
           </div>
@@ -649,7 +668,7 @@
                 <p class="card-header-title">
                   <span>Landing</span>
                   <span class="is-pulled-right">
-                    <a>
+                    <a rel="tag">
                       <span class="tag is-default">v0.7.2</span>
                     </a>
                     <span class="tag is-default">Desktop</span>
@@ -659,12 +678,12 @@
               </div>
               <div class="card-content">
                 <div class="image">
-                  <img src="./img/ev-5.jpeg">
+                  <img src="./img/ev-5.jpeg"  alt="choose the appropriate technology event">
                 </div>
               </div>
               <div class="card-footer">
-                <a class="card-footer-item">Preview</a>
-                <a class="card-footer-item">Source Code</a>
+                <button class="card-footer-item my-button-footer">Preview</button>
+                <button class="card-footer-item my-button-footer">Source Code</button>
               </div>
             </div>
           </div>
@@ -674,7 +693,7 @@
                 <p class="card-header-title">
                   <span>Marketing</span>
                   <span class="is-pulled-right">
-                    <a>
+                    <a rel="tag">
                       <span class="tag is-default">v0.7.2</span>
                     </a>
                     <span class="tag is-default">Desktop</span>
@@ -684,38 +703,38 @@
               </div>
               <div class="card-content">
                 <div class="image">
-                  <img src="./img/ev-6.jpeg">
+                  <img src="./img/ev-6.jpeg"  alt="lecture">
                 </div>
               </div>
               <div class="card-footer">
-                <a class="card-footer-item">Preview</a>
-                <a class="card-footer-item">Source Code</a>
+                <button class="card-footer-item my-button-footer">Preview</button>
+                <button class="card-footer-item my-button-footer">Source Code</button>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-    </div>
   </div>
+  </section>
 
-  <div class="section">
+  <section class="section" aria-labelled="forum-section">
     <div class="container">
       <div class="section-heading has-text-centered">
-        <div class="title is-2">Forum</div>
-        <div class="subtitle is-5">Discuss any topic with no leaving this page</div>
+        <h2 class="title is-2" id="forum-section">Forum</h2>
+        <h5 class="subtitle is-5">Discuss any topic with no leaving this page</h5>
       </div>
 
       <div class="columns">
         <div class="column is-3">
-          <a class="button is-primary is-block is-alt is-large">New Post</a>
+          <button class="button is-primary is-block is-alt is-large">New Post</button>
           <div class="menu">
             <ul class="menu-list forum-list">
-              <li><span class="tag is-primary is-medium">Dashboard</span></li>
+              <li><span class="tag is-contrast-primary is-medium">Dashboard</span></li>
               <li><span class="tag is-link is-medium">Customers</span></li>
-              <li><span class="tag is-light is-danger is-medium">Authentication</span></li>
+              <li><span class="tag is-contrast-danger is-medium">Authentication</span></li>
               <li><span class="tag is-dark is-medium">Payments</span></li>
-              <li><span class="tag is-success is-medium">Transfers</span></li>
+              <li><span class="tag is-contrast-success is-medium">Transfers</span></li>
               <li><span class="tag is-warning is-medium">Balance</span></li>
               <li><span class="tag is-medium ">Question</span></li>
             </ul>
@@ -728,7 +747,7 @@ <h4>How do you center a button in a box?</h4>
               <div class="media">
                 <div class="media-left">
                   <p class="image is-32x32">
-                    <img src="https://source.unsplash.com/random/64x64/?sig=300">
+                    <img src="https://source.unsplash.com/random/64x64/?sig=300" alt="avatar image" >
                   </p>
                 </div>
                 <div class="media-content">
@@ -740,7 +759,7 @@ <h4>How do you center a button in a box?</h4>
                   </div>
                 </div>
                 <div class="media-right">
-                  <span class="has-text-grey-light"><i class="fa fa-comments"></i> 1</span>
+                  <span class="has-text-grey-dark"><i class="fa fa-comments"></i> 1</span>
                 </div>
               </div>
             </div>
@@ -750,7 +769,7 @@ <h4>How can I make a button go full width?</h4>
               <div class="media">
                 <div class="media-left">
                   <p class="image is-32x32">
-                    <img src="https://source.unsplash.com/random/64x64/?sig=301">
+                    <img src="https://source.unsplash.com/random/64x64/?sig=301" alt="avatar image">
                   </p>
                 </div>
                 <div class="media-content">
@@ -762,7 +781,7 @@ <h4>How can I make a button go full width?</h4>
                   </div>
                 </div>
                 <div class="media-right">
-                  <span class="has-text-grey-light"><i class="fa fa-comments"></i> 0</span>
+                  <span class="has-text-grey-dark"><i class="fa fa-comments"></i> 0</span>
                 </div>
               </div>
             </div>
@@ -772,7 +791,7 @@ <h4>TypeError: Data must be a string or a buffer when trying touse tabs</h4>
               <div class="media">
                 <div class="media-left">
                   <p class="image is-32x32">
-                    <img src="https://source.unsplash.com/random/64x64/?sig=302">
+                    <img src="https://source.unsplash.com/random/64x64/?sig=302" alt="avatar image">
                   </p>
                 </div>
                 <div class="media-content">
@@ -784,7 +803,7 @@ <h4>TypeError: Data must be a string or a buffer when trying touse tabs</h4>
                   </div>
                 </div>
                 <div class="media-right">
-                  <span class="has-text-grey-light"><i class="fa fa-comments"></i> 13</span>
+                  <span class="has-text-grey-dark"><i class="fa fa-comments"></i> 13</span>
                 </div>
               </div>
             </div>
@@ -794,7 +813,7 @@ <h4>How to vertically center elements?</h4>
               <div class="media">
                 <div class="media-left">
                   <p class="image is-32x32">
-                    <img src="https://source.unsplash.com/random/64x64/?sig=303">
+                    <img src="https://source.unsplash.com/random/64x64/?sig=303" alt="avatar image">
                   </p>
                 </div>
                 <div class="media-content">
@@ -806,7 +825,7 @@ <h4>How to vertically center elements?</h4>
                   </div>
                 </div>
                 <div class="media-right">
-                  <span class="has-text-grey-light"><i class="fa fa-comments"></i> 2</span>
+                  <span class="has-text-grey-dark"><i class="fa fa-comments"></i> 2</span>
                 </div>
               </div>
             </div>
@@ -816,7 +835,7 @@ <h4>I'm trying to use hamburger menu on css, but it doesn't work. What is wrong?
               <div class="media">
                 <div class="media-left">
                   <p class="image is-32x32">
-                    <img src="https://source.unsplash.com/random/64x64/?sig=304">
+                    <img src="https://source.unsplash.com/random/64x64/?sig=304" alt="avatar image">
                   </p>
                 </div>
                 <div class="media-content">
@@ -828,7 +847,7 @@ <h4>I'm trying to use hamburger menu on css, but it doesn't work. What is wrong?
                   </div>
                 </div>
                 <div class="media-right">
-                  <span class="has-text-grey-light"><i class="fa fa-comments"></i> 2</span>
+                  <span class="has-text-grey-dark"><i class="fa fa-comments"></i> 2</span>
                 </div>
               </div>
             </div>
@@ -838,7 +857,7 @@ <h4>How to make tiles wrap with CSS?</h4>
               <div class="media">
                 <div class="media-left">
                   <p class="image is-32x32">
-                    <img src="https://source.unsplash.com/random/64x64/?sig=305">
+                    <img src="https://source.unsplash.com/random/64x64/?sig=305" alt="avatar image">
                   </p>
                 </div>
                 <div class="media-content">
@@ -850,7 +869,7 @@ <h4>How to make tiles wrap with CSS?</h4>
                   </div>
                 </div>
                 <div class="media-right">
-                  <span class="has-text-grey-light"><i class="fa fa-comments"></i> 2</span>
+                  <span class="has-text-grey-dark"><i class="fa fa-comments"></i> 2</span>
                 </div>
               </div>
             </div>
@@ -858,91 +877,101 @@ <h4>How to make tiles wrap with CSS?</h4>
         </div>
       </div>
     </div>
-  </div>
+  </section>
 
-  <div class="section has-background-light">
+  <section class="section has-background-light" aria-labelledby="contact-us-section">
     <div class="container">
       <div class="section-heading has-text-centered">
-        <div class="title is-2">Contact us</div>
-        <div class="subtitle is-5">Don't hesitate, ask anything</div>
+        <h2 class="title is-2" id="contact-us-section">Contact us</h2>
+        <h5 class="subtitle is-5">Don't hesitate, ask anything</h5>
       </div>
 
-      <form class="column is-half is-offset-one-quarter box">
-        <div class="field">
-          <label class="label">Name</label>
-          <div class="control">
-            <input class="input" type="text" placeholder="Text input">
+      <form aria-label="contact" class="column is-half is-offset-one-quarter box">
+        <fieldset>
+          <legend hidden>contact information</legend>
+          <div class="field">
+            <label for="name-input" class="label">Name</label>
+            <div class="control">
+              <input class="input" type="text" placeholder="Text input" id="name-input">
+            </div>
           </div>
-        </div>
 
-        <div class="field">
-          <label class="label">Username</label>
-          <div class="control has-icons-left has-icons-right">
-            <input class="input is-success" type="text">
-            <span class="icon is-small is-left">
-              <i class="fas fa-user"></i>
-            </span>
-            <span class="icon is-small is-right">
-              <i class="fas fa-check"></i>
-            </span>
+          <div class="field">
+            <label for="username-input" class="label">Username</label>
+            <div class="control has-icons-left has-icons-right">
+              <input id="username-input" class="input is-success" type="text">
+              <span class="icon is-small is-left">
+                <i class="fas fa-user"></i>
+              </span>
+              <span class="icon is-small is-right">
+                <i class="fas fa-check"></i>
+              </span>
+            </div>
+            <p class="help is-contrast-success">This username is available</p>
           </div>
-          <p class="help is-success">This username is available</p>
-        </div>
 
-        <div class="field">
-          <label class="label">Email</label>
-          <div class="control has-icons-left has-icons-right">
-            <input class="input is-danger" type="email" placeholder="Email input" value="hello@">
-            <span class="icon is-small is-left">
-              <i class="fas fa-envelope"></i>
-            </span>
-            <span class="icon is-small is-right">
-              <i class="fas fa-exclamation-triangle"></i>
-            </span>
+          <div class="field">
+            <label for="email-input" class="label">Email</label>
+            <div class="control has-icons-left has-icons-right">
+              <input id="email-input" class="input is-danger" type="email" placeholder="Email input" value="hello@">
+              <span class="icon is-small is-left">
+                <i class="fas fa-envelope"></i>
+              </span>
+              <span class="icon is-small is-right">
+                <i class="fas fa-exclamation-triangle"></i>
+              </span>
+            </div>
+            <p class="help is-contrast-danger">This email is invalid</p>
           </div>
-          <p class="help is-danger">This email is invalid</p>
-        </div>
+        </fieldset>
 
-        <div class="field">
-          <label class="label">Subject</label>
-          <div class="control">
-            <div class="select">
-              <select>
-                <option>Select dropdown</option>
-                <option>With options</option>
-              </select>
+        <fieldset>
+          <legend hidden>your message</legend>
+          <div class="field">
+            <label for="subject-option" class="label">Subject</label>
+            <div class="control">
+              <div class="select">
+                <select id="subject-option">
+                  <option>Select dropdown</option>
+                  <option>With options</option>
+                </select>
+              </div>
             </div>
           </div>
-        </div>
 
-        <div class="field">
-          <label class="label">Message</label>
-          <div class="control">
-            <textarea class="textarea" placeholder="Textarea"></textarea>
+          <div class="field">
+            <label for="textarea" class="label">Message</label>
+            <div class="control">
+              <textarea id="textarea" class="textarea" placeholder="Textarea"></textarea>
+            </div>
           </div>
-        </div>
+        
+        </fieldset>
 
-        <div class="field">
-          <div class="control">
-            <label class="checkbox">
-              <input type="checkbox">
-              I agree to the <a>terms and conditions</a>
-            </label>
+        <fieldset>
+          <legend hidden>agreement</legend>
+          <div class="field">
+            <div class="control">
+              <label for="agree-checkbox" class="checkbox">
+                <input id="agree-checkbox" type="checkbox">
+                I agree to the <a href="#" alt="terms and conditions">terms and conditions</a>
+              </label>
+            </div>
           </div>
-        </div>
 
-        <div class="field">
-          <div class="control">
-            <label class="radio">
-              <input type="radio" name="question">
-              Yes
-            </label>
-            <label class="radio">
-              <input type="radio" name="question">
-              No
-            </label>
+          <div class="field">
+            <div class="control">
+              <label for="yes-radio" class="radio">
+                <input id="yes-radio" type="radio" name="question">
+                Yes
+              </label>
+              <label for="no-radio" class="radio">
+                <input id="no-radio" type="radio" name="question">
+                No
+              </label>
+            </div>
           </div>
-        </div>
+        </fieldset>
 
         <div class="field is-grouped">
           <div class="control">
@@ -954,7 +983,7 @@ <h4>How to make tiles wrap with CSS?</h4>
         </div>
       </form>
     </div>
-  </div>
+  </section>
 
   <!-- <div class="section">
     <div class="container">
@@ -1065,56 +1094,58 @@ <h1 class="title is-size-4">Components</h1>
     </div>
   </div> -->
 
-  <div class="footer">
+</main>
+
+  <footer class="footer">
     <div class="container">
       <div class="columns">
         <div class="column is-3 is-offset-2">
-          <div class="is-3 title"><b>Lessons</b></div>
+          <h3 class="is-3 title"><b>Lessons</b></h3>
           <ul>
-            <li><a>Lorem ipsum dolor sit amet</a></li>
-            <li><a>Vestibulum errato isse</a></li>
-            <li><a>Lorem ipsum dolor sit amet</a></li>
-            <li><a>Aisia caisia</a></li>
-            <li><a>Murphy's law</a></li>
-            <li><a>Flimsy Lavenrock</a></li>
-            <li><a>Maven Mousie Lavender</a></li>
+            <li><a tabindex="0">Lorem ipsum dolor sit amet</a></li>
+            <li><a tabindex="0">Vestibulum errato isse</a></li>
+            <li><a tabindex="0">Lorem ipsum dolor sit amet</a></li>
+            <li><a tabindex="0">Aisia caisia</a></li>
+            <li><a tabindex="0">Murphy's law</a></li>
+            <li><a tabindex="0">Flimsy Lavenrock</a></li>
+            <li><a tabindex="0">Maven Mousie Lavender</a></li>
           </ul>
         </div>
         <div class="column is-3">
-          <div class="is-3 title"><b>News</b></div>
+          <h3 class="is-3 title"><b>News</b></h3>
           <ul>
-            <li><a>Labore et dolore magna aliqua</a></li>
-            <li><a>Kanban airis sum eschelor</a></li>
-            <li><a>Modular modern free</a></li>
-            <li><a>The king of clubs</a></li>
-            <li><a>The Discovery Dissipation</a></li>
-            <li><a>Course Correction</a></li>
-            <li><a>Better Angels</a></li>
+            <li><a tabindex="0">Labore et dolore magna aliqua</a></li>
+            <li><a tabindex="0">Kanban airis sum eschelor</a></li>
+            <li><a tabindex="0">Modular modern free</a></li>
+            <li><a tabindex="0">The king of clubs</a></li>
+            <li><a tabindex="0">The Discovery Dissipation</a></li>
+            <li><a tabindex="0">Course Correction</a></li>
+            <li><a tabindex="0">Better Angels</a></li>
           </ul>
         </div>
         <div class="column is-4">
-          <div class="is-3 title"><b>Help</b></div>
+          <h3 class="is-3 title"><b>Help</b></h3>
           <ul>
-            <li><a>Objects in space</a></li>
-            <li><a>Playing cards with coyote</a></li>
-            <li><a>Goodbye Yellow Brick Road</a></li>
-            <li><a>The Garden of Forking Paths</a></li>
-            <li><a>Future Shock</a></li>
+            <li><a tabindex="0">Objects in space</a></li>
+            <li><a tabindex="0">Playing cards with coyote</a></li>
+            <li><a tabindex="0">Goodbye Yellow Brick Road</a></li>
+            <li><a tabindex="0">The Garden of Forking Paths</a></li>
+            <li><a tabindex="0">Future Shock</a></li>
           </ul>
         </div>
       </div>
 
       <div class="content has-text-centered">
         <div class="soc">
-          <a><i class="fab fa-github-alt fa-2x"></i></a>
-          <a><i class="fab fa-youtube fa-2x"></i></a>
-          <a><i class="fab fa-facebook fa-2x"></i></a>
-          <a><i class="fab fa-twitter fa-2x"></i></a>
+          <a href="#"><i class="fab fa-github-alt fa-2x"><span class="visually-hidden">to github</span></i></a>
+          <a href="#"><i class="fab fa-youtube fa-2x"><span class="visually-hidden">to youtube</span></i></a>
+          <a href="#"><i class="fab fa-facebook fa-2x"><span class="visually-hidden">to facebook</span></i></a>
+          <a href="#"><i class="fab fa-twitter fa-2x"><span class="visually-hidden">to twitter</span></i></a>
         </div>
-        <p>The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.</p>
+        <p>The source code is licensed <a href="http://opensource.org/licenses/mit-license.php" target="_blank" rel="noopener noreferre">MIT <sup><i class="fa fa-external-link-alt"></i></sup></a>.</p>
       </div>
     </div>
-  </div>
+  </footer>
 
   <div id="modal-card" class="modal modal-fx-3dSlit">
     <div class="modal-background"></div>
@@ -1122,19 +1153,19 @@ <h1 class="title is-size-4">Components</h1>
       <div class="card">
         <div class="card-image">
           <div class="image is-4by3">
-            <img src="https://source.unsplash.com/random/?sig=2">
+            <img src="https://source.unsplash.com/random/?sig=2" alt="random image">
           </div>
         </div>
         <div class="card-content">
           <div class="media">
             <div class="media-left">
               <div class="image is-48x48">
-                <img src="http://www.radfaces.com/images/avatars/linda-barret.jpg">
+                <img src="http://www.radfaces.com/images/avatars/linda-barret.jpg" alt="random image">
               </div>
             </div>
             <div class="media-content">
-              <div class="title is-4">Jane Doe</div>
-              <div class="subtitle is-6">@jane_doe</div>
+              <h4 class="title is-4">Jane Doe</h4>
+              <h6 class="subtitle is-6">@jane_doe</h6>
             </div>
           </div>
           <div class="content">
@@ -1151,23 +1182,23 @@ <h1 class="title is-size-4">Components</h1>
         </div>
       </div>
     </div>
-    <button class="modal-close is-large"></button>
+    <button class="modal-close is-large"><span class="visually-hidden">close modal</span></button>
   </div>
 
   <div id="modal-image1" class="modal modal-fx-3dSlit">
     <div class="modal-background"></div>
     <div class="modal-content is-huge is-image">
-      <img src="https://source.unsplash.com/random/?sig=1">
+      <img src="https://source.unsplash.com/random/?sig=1" alt="random image">
     </div>
-    <button class="modal-close is-large"></button>
+    <button class="modal-close is-large"><span class="visually-hidden">close modal</span></button>
   </div>
 
   <div id="modal-image2" class="modal modal-fx-superScaled">
     <div class="modal-background"></div>
     <div class="modal-content  is-image">
-      <img src="https://source.unsplash.com/random/?sig=3">
+      <img src="https://source.unsplash.com/random/?sig=3" alt="random image">
     </div>
-    <button class="modal-close is-large"></button>
+    <button class="modal-close is-large"><span class="visually-hidden">close modal</span></button>
   </div>
 
   <script src="https://unpkg.com/bulma-modal-fx/dist/js/modal-fx.min.js"></script>
