[podcast]http://thinkingaccessible.com/podcasts/advanced_accessibility_podcast_five.mp3[/podcast]

Transcript of the podcast:

[Intro music] Welcome to podcast five of Thinking Accessible. On today’s podcast I will talk to you about some advanced features in accessibility.

First on the menu I will talk about accesskeys. Accesskeys are keystrokes that we can trigger on the keyboard to go directly to a certain element or a certain page of your website. Accesskeys are to be combined with different HTML attributes, different HTML tags: the a, the area, the button, the input, the label, the legend, and the textarea. These are your choices for accesskeys. It’s recommended to use numbers 1 to 0 (o to 9). Don’t get carried away! As long as you have shortcuts to important links, this should suffice. For example, the UK has established standards for their accesskeys and they have a list of 11 shortcuts (that they deem important to use.) I would recommend to look at these options and choose the most appropriate ones for your web page.

For my blog, at thinkingaccessible.com, I will only need skip navigation which is the S keystroke, home page which is the 1 keystroke, search which is good and is the keystroke number 4, and accesskey details which is the page that explains the accesskeys used and this is the keystroke zero.

For every accesskey, it is a good idea to put a title with it, to explain exactly where it is redirecting the user.

For example, the accesskey 1 which will be going to the home page, you can title it: “Back to the home page. Accesskey 1″.

Ex:

<a href=”home.html” title=”Back to the home page. Accesskey 1″ accesskey=”1″>Home</a>

I got all this information through a really great article. You can check it out through a link on my blog: Article on Accesskeys

Next up, I think it’s important to discuss labelling forms. Once you get this, it’s super simple! Let’s look at a really basic example. For instance, we have a field for a name, so you type in Name for your label and then you have your input. For this example let’s say that the name attribute is “fullname”. Now for it to be accessible we need to add a label tag to the label itself. In this case, the label we have is Name:, we have to wrap it with the label tag and then we have to for attribute. This for attribute can also be called “fullname”, but remember that your input has to have an id with the same exact name. These two things work together, the for of the label and the id of the input. They work as a combination.

Like this: <label for=”fullname”>Name:</label> <input id=”fullname” name=”fullname”/ >

That’s basically it, that’s all you need to remember.

I have a link to the article in which I got this information: Article on Labelling forms.

My next topic is CSS relative font size. Why is it important to put relative font sizes? It’s for people to be able to change the size of the text in whichever browser they use. Nowadays the more modern browsers zoom the page, so this is not a big issue, but the older browsers have the old way of doing things that was to increase the size, but if this size is an absolute size then it won’t move, it won’t budge. But if it is relative size then it will relatively expand or diminish depending on what the user does. This is why it’s important to do this.

The way of implementing this is that your main body, the main text that you use at the beginning of your CSS stylesheet make it an absolute to the size you want most of your page to be that way you don’t have to worry about it in the future. Some people put 12, I like to put 14 px, pixels. But it’s really up to you. All the subsequent font sizes that you use on your CSS stylesheet, should be a relative number. Either use ems or percentages because it’s much easier to follow.

[Exit music] Well that’s it for today’s podcast. I would love to hear from you. Please come to my blog at thinkingaccessible.com and post some comments. Until next time!

Audio from ccMixter entitled “Café Connection“ by Morgantj under Creative Commons.