<p>Published on <a href="http://ift.tt/2v62Wjr">| Prototyping: From UX to Front End &mdash; Medium</a> Kenneth Larsen <img alt="" src="http://ift.tt/2uwKqn9">Photo: Christopher Gower</p>
<p>Since I started writing my series on how to improve accessibility on the web I’ve been wanting to do a short post on how to test your current site for possible errors. Thankfully, it’s really easy to get started with the tools.</p>
<h3>Automated Tools</h3>
<p>For now let’s keep it simple. I’ve picked one automated tool you can use to get an idea of how accessible your site is. The tool I recommend is called <a href="http://wave.webaim.org/">WAVE.</a> It’s made by <a href="http://webaim.org/">WebAIM</a> which is a great source of best practices for developing an inclusive web.</p>
<p>You use WAVE by entering the URL of the site you want to test. It then generates a report of errors and what to do about them.</p>
<h4>Testing a Site</h4>
<p>For this post I’ve picked a popular Danish news site for testing. The site is called <a href="http://www.eb.dk">Ekstra Bladet</a> and because of it’s popularity it seems important to have proper accessibility. Here are my findings after using WAVE:</p>
<p>WAVE has detected the following:</p>
<ul>
<li><strong>170 Errors</strong></li>
<li><strong>476 Alerts</strong></li>
<li><strong>84 Features</strong></li>
<li><strong>398 Structural Elements</strong></li>
<li><strong>0 HTML5 and ARIA</strong></li>
<li><strong>34 Contrast Errors</strong></li>
</ul>
<p>Ouch. This is not good. Let’s have a look at how to easily remove most of these errors.</p>
<h4>Alternative Text</h4>
<p>26 of the errors are related to missing alternative text. As you might now it’s best practice to always provide an alternative text when displaying an image. This is needed for screen readers to be able to make sense of the images being displayed.</p>
<p>What Ekstra Bladet is doing:</p>
<pre>&lt;img class=”fullsize” src=”<a href="http://ift.tt/2v5zMAN">http://ift.tt/2v5zMAN</a>" style=”outline: red dashed 2px;”&gt;</pre>
<p>Here’s what they should have done:</p>
<pre>&lt;img class=”fullsize” src=”<a href="http://ift.tt/2v5zMAN">http://ift.tt/2v5zMAN</a>" alt=”Tour de France” style=”outline: red dashed 2px;”&gt;</pre>
<h4>Linked Images</h4>
<p>129 of the errors are related to linked images with no alternative text. Basically what’s happening here is that images are used as links. As a user of non-assistive technology I can see the image and make sense of it and where it would lead me. However, as a user of assistive technology this would result in an empty link. This is why an alternative text is needed to provide the necessary context.</p>
<p>What Extra Bladet is doing:</p>
<pre>&lt;img class=”df-article-img” alt=”” src=”<a href="http://ift.tt/2ux1ycG">http://ift.tt/2ux1ycG</a>" title=”” width=”285" height=”231" style=”outline: red dashed 2px;”&gt;</pre>
<p>What they should be doing</p>
<pre>&lt;img class=”df-article-img” alt=”Title of the article goes right here” src=”<a href="http://ift.tt/2ux1ycG">http://ift.tt/2ux1ycG</a>" title=”” width=”285" height=”231" style=”outline: red dashed 2px;”&gt;</pre>
<h3>Conclusion</h3>
<p>Even though there’s still issues left on Ekstra Bladet 155 accessibility errors could be solved today by just adding alternative text. I believe that this is the case for most websites today. And remember — these findings were made just by visiting the frontpage. There’s a lot of pages left.</p>
<h4>Read more</h4>
<p><a href="http://ift.tt/2uugsx6">Five Minute Accessibility: Headings</a></p>
<p><a href="http://ift.tt/2tVcal8">Five Minute Accessibility: Buttons</a></p>
<p><a href="http://ift.tt/2uUO7zq">Five Minute Accessibility: Links and Hypertext</a></p>
<p>You can follow me on <a href="https://www.twitter.com/kennethlarsen">Twitter</a>.</p>
<p><img src="http://ift.tt/2v6aWAL" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2uwSTqE">Five Minute Accessibility: Testing</a> was originally published in <a href="http://ift.tt/2cAqCpx">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Five Minute Accessibility: Testing

Top Stories