Posts Tagged ‘html’

I have published a lot of courses on web development and programming but I don’t think I have ever done a back-to-basics beginners’ course before. That changes today the launch of my Front-End Web Development course that teaches you how to write HTML and CSS from scratch.

You’re trying to make your website accessible. Lovely stuff. But because screen reader technology is so bad, you need to add a bunch of inline span tags with the aria-label attribute on them so that you can add additional context, or, more usually, use some kind of hack to get around a screen reader bug.

This works well. However, it also splits the whole thing into separate groups. Consider the following example:

An annual subscription costs £20.00 per year.

Looks good. Except for VoiceOver on Mac and iOS, and probably other screen readers, too, will read out something like this:

Pound two zero zero zero

Oh no! It totally ignored the decimal point and now your user, if they are able to track the weird way it read out individual numbers, thinks that your product costs two thousand pounds. So, our old friend the Aria label is here to help.

An annual subscription costs <span aria-label=”twenty pounds”>£20.00</span> per year.

Hurray! It now sounds like normal language. But it’s still confusing. Now the screenreader reads them out as three separate blocks. “An annual subscription.” “Twenty pounds, group.” “Per year.” The user has to navigate through all three of them even though it is one sentence.

The fix

To fix it, we can use the role attribute. Sometimes.

If we set it to role="text" it will work in WebKit. For example:

<span role=”text”>An annual subscription costs <span aria-label=”twenty pounds”>£20.00</span> per year.</span>

Now it will read out the entire sentence as one string, but still using the Aria label.

Is role=”text” a thing?

No. That’s the drawback. it was proposed to be included in the Aria spec, but nobody could agree on whether it should be a thing or not. So, it was left out. Therefore, it is not implemented everywhere.

It is implemented in WebKit, so will fix the problem on Chrome, iOS, etc. But it won’t fix it in some other browsers. And, you might get pulled up by linting tools and validators because it is not part of any formal specification.

Where can I put it?

Anywhere you like given that it is a made up attribute.

But there are some things to be cautious of. It should only go on a block of text where you do not mind losing any of the context inside of it. If you have an element inside the paragraph, for example, that should be treated as a separate group, then leave it off.

It shouldn’t on headings because you don’t want to lose the context. Instead, put a span tag inside the heading with it on.

Also, you need to ensure you are using the aria-label attribute for anything inside. Normally, you can use an abbr tag with a title attribute and the screen reader will read out the title. However, if you wrap it in a role="text", this will only work if you use an aria-label instead/as well as the title attribute.

When you paste a link into Facebook or other social networks (which in theory you could use) it generates a preview of the website including a title, image and description.

Webmasters actually have the power to suggest content for these items. This is something I recently implemented on the Leeds Restaurant Guide.

For example, the page is structured with the site name in the title and various images on the pages. However, when you post it into Facebook, it is pretty obvious to a human what information you actually want in there. You want the name of the restaurant and the image of the restaurant itself.

To suggest to the client what information I think would be best in there, I added some meta tags based on the Open Graph Protocol. For example, here is an example from Bibis.

<meta property="og:type" content="article" />
<meta property="og:article:author" conent="Leeds Restaurant Guide" />
<meta property="og:title" content="Bibis Italianissimo review" />
<meta property="og:image" content="http://www.leedsrestaurantguide.com/images/restaurants/Bibis%20Italianissimo.jpg" />

This provides helpful information to the client, usually Facebook, as to what information it should display where, making your site more sharable. Sites like BuzzFeed are all other these sorts of tags – just view their source code to see. This is why they are always so well presented and perhaps one of the reasons why they are so successful.

If you’re using HTML5, you may well have come across templates, which are a way to create reusable code clocks. They can be used in conjunction with the Shadow DOM to create more semantic markup while still adding all the additional goodies in terms of additional CSS and HTML that you would like.

For example, lets say we want to put an email address in a fancy box into a website. The old horrible way of doing it is something like this:

<style>
    #email {
        background: url('images/at.png')
        center left no-repeat;
    }
    #email .label {
        font-size: small;
        text-transform: uppercase;
    }
</style>

<div id="email">
    <div class="outer">
        <div class="label">Email address</div>
        <div>
            john@example.com
        </div>
    </div>
</div>

Look at all that stuff we do not need. Semantically we do not need all those divs. Crawlers don’t need to seem them. Neither do accessibility tools. It would be way nicer if we could mark the page up like this:

<div id="email">john@example.com</div>

Turns out we can! All we need is a little help from templates and the shadow DOM. Lets work from that markup, and put the additional markup into a template tag.

<template id="emailTemplate">
    <style>
        #email {
            padding: 0.5em;
            background: url('images/at.png')
            center left no-repeat;
        }
        #email .label {
            font-size: small;
            text-transform: uppercase;
        }
    </style>
    
    <div id="email">
        <div class="outer">
            <div class="label">Email address</div>
            <div>
                <content></content>
            </div>
        </div>
    </div>
</template>

You will notice that this is basically the same code as we started out with, except now it is in a template tag, and instead of having the email address in there, there is a >content> tag. This acts as a placeholder that the contents of the div will be put into when we combine it all together.

Finally, we use some JavaScript to activate the shadow DOM.

<script>
    var shadow   = document.querySelector('#email').createShadowRoot();
    var template = document.querySelector('#emailTemplate');
    var clone    = document.importNode(template.content, true);
    shadow.appendChild(clone);
</script>

This allows us to add all the additional styling that we had initially, but thanks to the shadow DOM we are able to eliminate a lot of the additional markup in the page itself that made very little sense semantically.

Recently I spent a good twenty minutes tearing my hair out over a JavaScript unit test I was trying to write. The answer turned out to be a difference in the way our Mocha-based DOM differs from how it would running JavaScript in a browser.

For example, let’s say you have a select field.

<select name="test" id="test">
	<option value="">Select an option</option>
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
</select>

In a browser, the top option would be selected by default, so if you had the following code:

jQuery('#test').val();

It would output a blank value as you would expect. However, run this in Mocha and you will get an undefined or a null. The reason is Mocha doesn’t select the top option by default unless you manually specify it to. So your HTML would have to look like:

<select name="test" id="test">
	<option value="" selected="selected">Select an option</option>
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
</select>

In which case, it would then return the value as it should.

These days, we’re all trying to do very clever things in the browser, that take up heaps of system resources. Often, your application will be doing so much that the system can barely cope – and with JavaScript being a single thread language, heavy processing can tie the UI up and make the user think the page has crashed.

Enter web workers – a background process that essentially allows you to do concurrent JavaScript. You can create a background process from a script, and then send messages back and forth between it and the page, ensuring you don’t tie up the UI.

They’re really simple to use too.

var worker = new Worker('worker.js');

worker.addEventListener('message', function(e) {
  console.log('Message from worker: ', e.data);
}, false);

worker.postMessage('Hello, World!');

Then create a simple JavaScript for your worker.

this.addEventListener('message', function(message) {
  this.postMessage(message.data);
}, false);

You can read more about web workers on HTML5 Rocks.

Well, sort of. AJaxian wrote a very interesting post about display: table CSS and how after all this time of moving away from table layouts to CSS layouts we are now putting it all into CSS so we can essentially use table layouts again. It’s about time.

We’ve all spent years moving over to CSS layouts and support has gradually been getting better but we still can’t do a lot of basic stuff that you can do with tables without lots of hacks and crazy implementations that shouldn’t be there.

Take for example creating columns. We’re still using faux background images to create the column backgrounds and then putting a clear: both div below everything which shouldn’t really be there in semantic mark-up because it has no meaning, it’s just a CSS hack. These are things we could do with ease using tables.

While I’m on the subject there is also an interesting article on TJK Design about building layouts without using floats, the site being built entirely using lists which degrades beautifully if you turn off CSS.

Shareware was never one of my favourite groups of software because I always had to find a new replacement application when the 15 day trial expired. Occasionally though a piece of software comes along which seems indispensable and even the guy who hasn’t paid for the last dozen pieces of software he has got, despite the fact he should, we shell out for a good bit of shareware.

Why? Because some applications really are good. The piece of software that got my digging deep (although it’s a phase seen as shareware is almost always very well priced) was Exactcom’s HTML to AnyCode Converter. Allowing you to insert HTML click a button and have it translated into a different language without all the complications of you having to work out how to change and update it as well as risking missing something and causing your new script to go horribly wrong.

It’s a very simple application, once launched it has a title image and 3 tabs below this in which control all its function. Clicking the first tab allows you to enter your code and the language you want it to be converted to. You can also load in a source file in which will then automatically populate the code box for you – just in case you are too lazy to cut and paste; a problem which often haunts me.

One click on the convert button and suddenly your code has been transformed into the language of your choice, the default being JavaScript. The code is even wrapped in <script> tags so you can copy and paste straight into your page. These are automatically removed if you save the file so you can immediately include it into your page.

A nice help tabs also backs up the application with some information on how to use the application, how to register it, about Exactcom and contact details if you are having any problems with it – their support is good too. There is a final tab for registering the application though this disappears once done.

Although the default pages which the open file looks for are .htm and .html, all formats can be selected and imported. The code is rich text too so all your code is fully colour coded – it might be the next step up from Notepad as a web editor. It seems that they have thought of everything!

The only one complaint I would have against it is the image at the top still has a big “Buy it now!” slogan on despite the fact that I purchased and registered it many moons ago. That’s not really a problem though and if they happen to change it in later versions; I have free upgrades for life so I am not worried. Free upgrades are another good reason for shareware – most applications come with it.

Twice I have asked them for support and both times I got a prompt response. The first was when I lost my registration code (wasn’t my fault, well, maybe a little bit) and the second time was one of their new versions had an error in the JavaScript output, which the solved and made a new version available in around a day. Should you be worried that there was an error? I don’t think so, after all its shareware not a huge corporate developing the software, and free upgrades mean all bug fixes are yours.

Though its functions are not huge I find them very useful – I have used it for around a year now and I have hardy ever used it for anything other than converting my HTML text into JavaScript – long story which I will tell shortly. I have hardy scratched the surface of the conversions to ASP, PHP, Perl and JSP.

My main use for the application is for stories on one of my websites. Back in the olden days when I was getting started with Microsoft Access I did not know how to fit all my HTML in a text field with a maximum character amount of 255 – luckily for Exactcom I had not discovered the memo field type and so my solution was to convert the stories into JavaScript, give them a file named based on their ID in the database and include them dynamically that way.

That made HTML to AnyCode Converter vital to my operation though – but that doesn’t make it vital to yours. Exactcom make some great software and HTML to AnyCode is the best converter around. But the use of converting code is not a wide market. Overall, if you need converting done then this software is the only buy. But if you don’t need this function then it’s a product you will sadly not want to register.

You can easily add CSS styles to your text. All you need to do is add a <p> style.

p {color: #000099; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif
}

Now whenever you have text inside the paragragh tag, it will use the above style. You can also add special headings.

p.h {color: #CC0000; font-size: large; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif
}

To use this in your text just add the code:

<p class="h">Some Headline</p>

You need to use CSS Styles for your texr as the W3C are cutting out the <font> tag from XHTML 1.0 Strict upwards. Although you can still use it in XHTML 1.0 Transitional, we think this will not be the case in later versions.

You can also use CSS to change the font of other tags such as your links. These include rollover, hit and visited pages. Take a look at this code that can be copied and pasted staight into your HTML pages.

<Style>
<!-- A {text-decoration: none}
A:hover {text-decoration: underline; color: #0DC450} -->
</Style>

This produces the blue to green underlined rollovers on this page.

There are 3 ways to add CSS into your web pages:

* External Style Sheets
* Internet Style Sheets
* Style Tags

External Style Sheets

These are style sheets saved as .css. You then link these into your page using the following tag.

<link href="global.css" type="text/css" rel="stylesheet" />

This style sheet is then included in your page when its in the browser.

Internal Style Sheets

This used a style tag, as you may have seen in serveral tutorials. Here is one we have for image rollovers.

<style type="text/css">
<!-- A {text-decoration: none}
A:hover {text-decoration: underline; color: #0DC450} -->
</style>

They are seperate from everything else but are included in the heag tag of your web page.

Style Tags

These are included inside your actual element. For instance if you wanted to change the border, of just one table, you could use the following code:

style='BORDER-BOTTOM: #84B953 1px solid'

This would just be included in the actual tag of your HTML element. Eg:

<table style='BORDER-BOTTOM: #84B953 1px solid'>...</table>