Accessibility
Of late, I've seen a lot of developers make more effort towards accessible web development. While this is not a new thing, it is gaining popularity among many developers who previously either weren't aware of the ideology behind it, or the legal implications it can have.
Accessibility has long been a subject which I've looked at, mainly because I belive in the web as a universal medium which can and should be available to everyone. This is partly the reason why my choice in career has taken me down a more server-side development route than client-side, working on complex PHP systems instead of JavaScript or Flash ones.
A large part of testing accessibility is a manual effort, like checking there are valid alternatives to audio-visual content and not just a 'sorry, you need the latest name of media player to view this content.' and making sure that content flows correctly when styles are turned off (how is software to know what you intended with the content?) This process adds so much time to development, that I can understand why so many people have been slightly reluctant to create code with this in mind.
I've been looking around for a while for decent online tests, as a means to help automate some of this work, but the best I found that was free to use was Electrums Web Site Accessibility Testing Tool. It's a failry decent tool, although the free version is pretty sparse on detailed information on what it considers errors on the site. Still at a disadvantage, I considered how much work would be entailed to create a simple testing suite myself, when I came across the Firefox Accessibility Extension, which has proved to be, I think, as essential an add-on as Firebug is for all web developers. The only drawback with it I notice so far is that it says </code> of the page; that is, the entire heading needs to exist as-is within the title. This is not something I'd have considered a major issue, and up until now, I'd not even heard about it, despite reading over various accessibility guidelines.</p></div></div><div class="post"><div class="postinfo"><span class="date">Wednesday, 20th May 2009, 2:27:00pm</span>Ashley Sheridan</div><div class="content"><h3>Front End Development</h3>
<p>There is a reason why I prefer to develop things in the back-end of a site, and that reason is because I know the setup of a server if I'm not in a position to dictate it myself. That means that everything just works! A recent dicussion on the <a href="http://marc.info/?t=124240839500007&r=1&w=1" target="_blank"><acronym title="PHP Hypertext Preprocessor">PHP</acronym> General mailing list</a> about <acronym title="Cascading Style Sheets">CSS</acronym> highlights the problem with front-end development. Essentially, websites can be viewed on a huge variety of devices, none of which behave the same. The discussion on the mailing list was generally about tables <abbr title="versus">vs</abbr> CSS for laying out pages. Now, I'm an advocate of the latter, and prefer to keep my code free of tables that shouldn't be there. I'll use tables only for tabular data, and leave it at that. The crux of the issue though, is not developers intent, but support on the part of <acronym title="User Agent">UA</acronym>'s. I won't turn this into a browser bashing rant as all browsers have their idiosyncracies, but it is well know that some have more than others. Time and again my testing period has been greatly increased because of the problems associated with browser compatibility, as each and every part has to be tested across as many platforms as possible, the sort of test which is impossible to automate.</p>
<p>A recent project I've been working on has fallen foul of browser limitations; namely that of font embedding. The site required that a specific font be used for all the headings on the page. I've mentioned this on a previous post, so I won't go into too much detail here, but even the <a href="http://www.mikeindustries.com/blog/sifr/" target="_blank">sIFR</a> library failed me, rendering the font differently across different browsers and not allowing me to adjust the kerning properly to name just a couple of problems I faced. I did have a moment of pure frustration when the op realised I'd been given the wrong font from the family, but that only helped things slightly.</p>
<p>Running out of time to learn sIFR to the level I needed it, and having no other way clear, I fell back onto a last ditch attempt at getting this right. I each character as an indivual <acronym title="Portable Network Graphic">PNG</acronym> in the largest size I needed the letters. The first task was stitching the indivual graphics together to create a single larger image which could be used as a heading. That done, I set about colouring the thing, as the original graphics were black, with alpha-transparency used to give the anti-aliasing necessary. This posed its own problems, and took a fair while to sort out, but eventually I had it done. I'll post the code for that in a day or so.</p>
<p>The whole thing has had me re-evaluating the time estimates I give for projects now, as it's all too easy to find something which has so many unforseen problems that it can seriously effect other areas of the project.</p></div></div>
<div class="blogpagelinks">Browse:
<a href="blog.php?page=0" class="grey">«</a>
<span class="current">1</span>
<a href="blog.php?page=1" class="grey">2</a>
<a href="blog.php?page=2" class="grey">3</a><a href="blog.php?page=6" class="grey">»</a></div>
</div>
</div>
<div id="rightSection">
<table id="calendar"><caption title="calendar of events for this month">July 2009</caption><thead><tr><th><abbr title="Sunday">S</abbr></th><th><abbr title="Monday">M</abbr></th><th><abbr title="Tuesday">T</abbr></th><th><abbr title="Wednesday">W</abbr></th><th><abbr title="Thursday">T</abbr></th><th><abbr title="Friday">F</abbr></th><th><abbr title="Saturday">S</abbr></th></tr></thead><tr><td></td><td></td><td></td><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr><tr><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr><tr><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr><tr><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td></td></tr></table> <div id="w3badges">
<a href="http://validator.w3.org/check?uri=referer" target="_blank">
<img src="images/valid-xhtml10-blue.png" alt="Valid XHTML 1.0 Transitional"/>
</a>
<a target="_blank" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.ashleysheridan.co.uk%2Fstyles%2Fmain.css&warning=1&profile=css21&usermedium=all">
<img src="images/valid-css2-blue.png" alt="Valid CSS!" />
</a>
<!--<a target="_blank" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.ashleysheridan.co.uk%2Fstyles%2Fmain.css&warning=1&profile=css21&usermedium=all">-->
<!--<img src="images/valid-css2-blue.png" alt="Valid CSS!" />-->
<!--</a>-->
<a href="browsers.php">
<img src="images/browsers.png" alt="Works on all browsers!" style="height: 300px; width: 200px; border: 1px solid #cccccc;"/>
</a>
</div>
<div id="style_picker">
<h3>Style Picker</h3>
<a href="?style=Pastel">Pastel</a><a href="?style=Modern">Modern</a> </div>
</div>
</div>
<div id="footer" style="clear: both;"> </div>
</div>
<script language="javascript" type="text/javascript" src="tracking.js"></script>
<noscript>
<img src="tracker.php?javascript=no" alt="" width="1" height="1"/>
</noscript>
</body>
</html>