Click here to go back

Overall Score

Accessibility

50

Old Tags

90

Misc

90

Accessibility Issues

| Element is missing an alt attribute.
Element Preview 
<img>
Potential Fixes (Beta) 
<img alt="foo">
| Element is missing an alt attribute.
Element Preview 
<img>
Potential Fixes (Beta) 
<img alt="foo">
| Element is missing an alt attribute.
Element Preview 
<img>
Potential Fixes (Beta) 
<img alt="foo">
| Element is missing an alt attribute.
Element Preview 
<img src="/example/foo.png" class="large-img">
Potential Fixes (Beta) 
<img src="/example/foo.png" class="large-img" alt="foo">
| Element is missing an alt attribute.
Element Preview 
<img src="/image/this-is-a-long-path/foo.jpg" style="padding-left:2px;">
Potential Fixes (Beta) 
<img src="/image/this-is-a-long-path/foo.jpg" style="padding-left:2px;" alt="foo">

Old Tags

| Tag obsolete, use CSS
Element Preview 
<center> I'm centered text! </center>
Potential Fixes 
<div class="text-centered"><!-- elements here --></div><style>.text-centered{text-align: center;}</style>

Misc Issues

| Element is missing a lang attribute.
Element Preview 
<html><head> <!-- This is an example that it won't cut this string -->
Potential Fixes 
<html lang="en"><head> <!-- This is an example that it won't cut this string -->

HTML view

<html><head> <!-- This is an example that it won't cut this string -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>HTML checker</title>
  <meta name="description" content="REE">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" async="" href="/css/style-dist.css">
  <link rel="stylesheet" async="" href="/hs/styles/a11y-dark.css">
  <link rel="apple-touch-icon" sizes="57x57" href="/ico/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/ico/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/ico/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/ico/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/ico/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/ico/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/ico/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/ico/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/ico/apple-icon-180x180.png">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
  <link rel="icon" type="image/png" sizes="192x192" href="/ico/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/ico/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/ico/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/ico/favicon-16x16.png">
  <link rel="manifest" href="/manifest.webmanifest">
  <script src="/js/script.js"></script>
  <script src="/js/granim.min.js"></script>
  <script src="/js/jquery-3.4.1-dist.js"></script>
  <script src="/hs/highlight.pack2.js"></script>
  <script src="/hs/highlightjs-line-numbers.min.js"></script><style type="text/css">.hljs-ln{border-collapse:collapse}.hljs-ln td{padding:0}.hljs-ln-n:before{content:attr(data-line-number)}</style>
  <script>
    hljs.initHighlightingOnLoad();
    hljs.initLineNumbersOnLoad();
  </script>
 
 
<style type="text/css">/* Chart.js */
@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}</style></head>
 
<body onload="checkEmpty();setTimeout(function(){ document.querySelector(&quot;.page-loader&quot;).style.display = &quot;none&quot;; }, 2000);" data-gr-c-s-loaded="true" class="clickup-chrome-ext_installed">
  <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        <i class="far fa-universal-access"></i>
      </a>
 
      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
 
    <div id="navbarBasicExample" class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item">
          Home
        </a>
 
        <a class="navbar-item">
          Documentation
        </a>
 
      </div>
 
      <div class="navbar-end">
        <div class="navbar-item">
          <div class="buttons">
            <a class="button is-light">
              Log in
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <img>
  <img>
  <img>
  <div class="page-loader" style="display: none;">
    <div class="spinner">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>
 
  </div>
  <section class="hero is-info">
    <canvas id="canvas-basic" class="animate" width="2195" height="176">
    </canvas>
    <div class="hero-body">
      <div class="container">
        <h1 class="title has-text-centered">
          Results
        </h1>
 
      </div>
    </div>
  </section>
 
  <div class="container is-fluid is-small">
    <div class="notification is-link">
      Please note the animations will take some time to load smoothly, especially for longer sites
    </div>
    
    <section class="info-tile">
      <h1 class="has-text-white title-header header-b">Accessibility Issues</h1>
      <article class="info-wrapper is-child box">
        <div class="error-wrapper-alt" id="a-issues">
          <div class="issue-wrapper">
            <div class="issue-header a">
              <i class="fas fa-image"></i> | Missing alt attr
              <div class="icon-right">
                <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt" target="_blank"><i class="far fa-book"></i></a>
                <i class="fas fa-search" onclick="openModalNum(8)"></i>
                <i class="fas fa-caret-down" onclick="toggleDiv(this,'id-3k7s0du2')"></i>
              </div>
            </div>
            <div class="show-on-expand" id="div-id-3k7s0du2">
                <div class="example">
                <center> I'm centered text! </center>
 
                </div>
            </div>
          </div>
          
          
          
          
        </div>
      </article>
      <h1 class="has-text-white title-header header-a">Old Tags</h1>
      <article class="info-wrapper is-child box">
        <div class="error-wrapper-alt" id="old-issues">
          
          
          
          
          <div class="issue-wrapper">
            <div class="issue-header o">
              <i class="fas fa-code"></i> | Tag obsolete, use CSS
              <div class="icon-right">
                <a href="" target="_blank"><i class="far fa-book"></i></a>
                <i class="fas fa-search" onclick="openModalNum(2)"></i>
                <i class="fas fa-caret-down" onclick="toggleDiv(this,'id-zg92vhls')"></i>
              </div>
            </div>
            <div class="show-on-expand" id="div-id-zg92vhls">
              Element Preview
              <pre style="display:block;"><code class="language-html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> </code></pre>
              Potential Fixes
              <pre style="display:block;"><code class="language-html hljs xml"><span class="hljs-comment">&lt;!-- No solution found --&gt;</span></code></pre>
              <button class="button is-dark copy" data-copy="<!-- No solution found -->">Copy Solution</button>
            </div>
          </div>
          
          
          
          
          
          <div class="issue-wrapper">
            <div class="issue-header o">
              <i class="fas fa-code"></i> | Tag obsolete, use CSS
              <div class="icon-right">
                <a href="" target="_blank"><i class="far fa-book"></i></a>
                <i class="fas fa-search" onclick="openModalNum(5)"></i>
                <i class="fas fa-caret-down" onclick="toggleDiv(this,'id-e95p2ank')"></i>
              </div>
            </div>
            <div class="show-on-expand" id="div-id-e95p2ank">
              Element Preview
              <pre style="display:block;"><code class="language-html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">center</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">center</span>&gt;</span></code></pre>
              Potential Fixes
              <pre style="display:block;"><code class="language-html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-centered"</span>&gt;</span><span class="hljs-comment">&lt;!-- elements here --&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"><span class="hljs-selector-class">.text-centered</span>{<span class="hljs-attribute">text-align</span>: center;}</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre>
              <button class="button is-dark copy" data-copy="<div class=&quot;text-centered&quot;><!-- elements here --></div><style>.text-centered{text-align: center;}</style>">Copy Solution</button>
            </div>
          </div>
          
          
          
          <div class="issue-wrapper">
            <div class="issue-header o">
              <i class="fas fa-code"></i> | Tag obsolete, use CSS
              <div class="icon-right">
                <a href="" target="_blank"><i class="far fa-book"></i></a>
                <i class="fas fa-search" onclick="openModalNum(6)"></i>
                <i class="fas fa-caret-down" onclick="toggleDiv(this,'id-p5cqbw8y')"></i>
              </div>
            </div>
            <div class="show-on-expand" id="div-id-p5cqbw8y">
              Element Preview
              <pre style="display:block;"><code class="language-html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">center</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">center</span>&gt;</span></code></pre>
              Potential Fixes
              <pre style="display:block;"><code class="language-html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-centered"</span>&gt;</span><span class="hljs-comment">&lt;!-- elements here --&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"><span class="hljs-selector-class">.text-centered</span>{<span class="hljs-attribute">text-align</span>: center;}</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre>
              <button class="button is-dark copy" data-copy="<div class=&quot;text-centered&quot;><!-- elements here --></div><style>.text-centered{text-align: center;}</style>">Copy Solution</button>
            </div>
          </div>
          
          
          
          
          
          
        </div>
      </article>
      <h1 class="has-text-white title-header header-misc">Misc Issues</h1>
      <article class="info-wrapper is-child box">
        <div class="error-wrapper-alt" id="misc-issues">
          
          
          <div class="issue-wrapper">
            <div class="issue-header m">
              <i class="fas fa-code"></i> | Missing lang
              <div class="icon-right">
                <a href="" target="_blank"><i class="far fa-book"></i></a>
                <i class="fas fa-search" onclick="openModalNum(1)"></i>
                <i class="fas fa-caret-down" onclick="toggleDiv(this,'id-ivhlixj8')"></i>
              </div>
            </div>
            <div class="show-on-expand" id="div-id-ivhlixj8">
            </div>
          </div>
          
          
          
          
          
          <div class="issue-wrapper">
            <div class="issue-header m">
              <i class="fas fa-code"></i> | Title Is Empty
              <div class="icon-right">
                <a href="" target="_blank"><i class="far fa-book"></i></a>
                <i class="fas fa-search" onclick="openModalNum(3)"></i>
                <i class="fas fa-caret-down" onclick="toggleDiv(this,'id-jjb9lrvq')"></i>
              </div>
            </div>
            <img src="/example/foo.png" class="large-img">
            <div class="show-on-expand" id="div-id-jjb9lrvq">
                
            </div>
          </div>
          
          
          
          
          
          
          
          
          
          
        </div>
      </article>
    </section>
    
  </div>
  <div class="modal is-dark">
    <div class="modal-background"></div>
    <div class="modal-card" style="width:70% !important;">
      <img src="/image/this-is-a-long-path/foo.jpg" style="padding-left:2px;">
      <header class="modal-card-head">
        <p class="modal-card-title">HTML view</p>
        <button class="delete" aria-label="close" onclick="closeModal()"></button>
      </header>
      <section class="modal-card-body">
        <pre><code class="html hljs xml"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>  </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">  <span class="hljs-tag">&lt;<span class="hljs-name">center</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">center</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">  <span class="hljs-tag">&lt;<span class="hljs-name">center</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">center</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"this is a test"</span>&gt;</span></td></tr></tbody></table></code></pre>
      </section>
      <footer class="modal-card-foot">
        <button class="button" onclick="closeModal()">Close</button>
      </footer>
    </div>
  </div>
  <div class="container is-fluid is-small">
    
    <h1 class="has-text-white title-header header-a">Data</h1>
    <article class="info-wrapper is-child is-data box"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
      <div class="buttons is-centered has-addons">
        <button class="button is-success is-selected">Bar Graph View</button>
        <button class="button">Pie Chart View</button>
      </div>
      
      <canvas id="myChart" width="3174" height="3174" style="color: white; display: block; height: 1814px; width: 1814px;" class="chartjs-render-monitor"></canvas>
    </article>
    
  </div>
 
  <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ["Div"],
        datasets: [{
          label: 'Types of elems',
          data: [1],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        },
        legend: {
            labels: {
                // This more specific font property overrides the global property
                fontColor: 'white'
            }
        }
      }
    });
  </script>
  <input type="text" style="display: none;" id="copyText">
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('/sw.js').then(function (registration) {
          // Registration was successful
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function (err) {
          // registration failed :(
          console.log('ServiceWorker registration failed: ', err);
        });
      });
    }
    let lineNum = 0
    let hover = false
    function hNumber(number) {
      a.style.backgroundColor = "blue"
      a.scrollIntoView();
      lineNum = number;
    }
 
    function closeModal() {
      document.querySelector(".modal").classList.remove("is-active")
      if (lineNum != 0) {
      }
    }
 
    function checkEmpty() {
      let goodString =
      let aIssues = $("#a-issues")
      let miscIssues = $("#misc-issues")
      let oldIssues = $("#old-issues")
      if (oldIssues.children().length === 0) {
        oldIssues.append(goodString)
      }
      if (aIssues.children().length === 0) {
        aIssues.append(goodString)
      }
      if (miscIssues.children().length === 0) {
        miscIssues.append(goodString)
      }
    }
 
    function openModal() {
      document.querySelector(".modal").classList.add("is-active")
    }
 
    function openModalNum(number) {
      document.querySelector(".modal").classList.add("is-active")
      hNumber(number)
    }
 
    function hoverMe(id1, id2, t) {
 
      a.style.display = "none";
      b.classList.remove('slide-bottom');
    }
    var granimInstance = new Granim({
      element: '#canvas-basic',
      direction: 'left-right',
      states: {
        "default-state": {
          gradients: [
            ['#9D50BB', '#6E48AA'],
            ['#4776E6', '#8E54E9']
          ]
        }
      }
    });
 
    function copy(elem) {
      let copyText = document.getElementById("copyText");
      copyText.setAttribute("value", elem.getAttribute("data-copy"));
      let elemText = elem.innerText
      copyText.style.display = "block"
      copyText.select();
      copyText.setSelectionRange(0, 99999);
 
      document.execCommand("copy");
      elem.innerHTML = "Copied!"
      setTimeout(function () {
        elem.innerHTML = elemText
      }, 4000);
      copyText.style.display = "none"
    }
    animateCSSClass('.animate', 'fadeIn')
    document.querySelectorAll(".copy").forEach(elem =>
      elem.addEventListener("click", function () {
        copy(elem)
      }))
 
    /*
    animateCSSClass('.slideInLeft', 'slideInLeft')
    animateCSSClass('.slideInTop', 'slideInDown')
    animateCSSClass('.slideInRight', 'slideInRight')
    */
  </script>
 
 
</body></html>

HTML Tags spread (not error related)