Skip to content →

Category: Podcasts

Podcast Five – Advanced Accessibility

[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.  Creative Commons by Attribution 3

Leave a Comment

Podcast Four – Divide and Conquer

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

Transcript of the podcast:

[Intro music] Welcome to podcast four of Thinking Accessible. Today’s podcast is called Divide and Conquer. I will talk to you about layout versus content.

One of the keys of being successful in web standards is to divide the layout and the content.What I mean by this is that all the content related elements have to be in the HTML and everything else, like the style or the layout is in the CSS.

Your HTML code is strictly the tags that represent the content. So for example the <p> tag  is for paragraph, the <table> tag is for table, the <blockquote> tag is for big quote, etc. CSS is used to style the content. In other words, you use CSS to let’s say centre a page, make a certain <div> have a border, have a listed menu that is horizontal instead of vertical, remove or have different styles of image borders. So all it is is layout for us and it is done in the CSS.

Ok, now let’s see how this works. Please refer to thinkingaccessible.com for a textual transcript of this podcast where you can see exactly what I’m talking about.

So for example a horizontal menu. You would start by putting a <div> with an id, you can name it anything you want, but it should be something that you will recognize when you go to your CSS. I call (the id) menu. So you have your opening <div> with the id menu and then you can start your list. So it’s an unordered list and so you put the <ul> tag, and then you (place) your elements with the <li> tag, the list tag. It’s a menu so you have to put an <a href> tag with the location of that page and then you put the text, and you have the closing </a> tag, the closing </li> tag. So you repeat this as many times as your menu has items. You finish with a closing </ul> tag and the closing </div> tag.

<div id=”menu”>
<ul>
<li><a href=”home.html”>Home</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</div>

So now let’s look at the CSS of this. To start this menu id you can use a div to differentiate it from other maybe classes or you can just start with the number sign and then the name of your id. So in this case I have div, number sign, menu. And this one has padding of the menu and also the size of the font, so font-size is included in this one. The next one is the ul, because you want it to specifically target this id, the menu id, you put the ul right after this menu id. It follows the same order as in the HTML. The list-style is none, the list-style is if you want there to be a little circle beside the (text). We don’t want this in this case and it’s always a good idea to void the margin and the padding. The next one is the li tag and again you put the menu id right before it. To make this menu horizontal you have the display at inline which makes it all horizontal, you can also add some padding here for every element in your menu.

div#menu {
padding: 128px 0 0 220px;
font-size: 70%;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu li {
display: inline;
padding: 0 5px 0 4px;
}

(This is what is looks like:)

Horizontal menu list of Home About Contact
Horizontal menu list of Home About Contact

That was a simple example of how you (divide) HTML and CSS to have a better separation between the content and the layout.

[Exit music] That’s it for this podcast. I hope you found it useful. You can also see other content at my blog thinkingaccessible.com. Until next time!

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

Leave a Comment

Podcast Three – My four golden rules

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

Transcript of the podcast:

[Intro music] Welcome to podcast three of Thinking Accessible. On today’s podcast, I will talk to you about my four golden rules for web accessibility.

Rule number 1:

Provide alternative text for non-textual content. What do it mean by this? Images are non-textual content. Audio and video are non-textual content. So for each of these elements you need to provide a text alternative. So for images in the HTML code you have to write an alternative tag to it. So in the tag of IMG for image you have to add ALT. for alternative text and here you would put basically a general idea of what the image represents.For audio feed, like for example this podcast, it would be nice to put a transcript of the audio because some people might not be able to hear it. And for video, you should put obviously captions for all the text (speech) in the video. Sure these are not easy to do, there are time consuming, but in the end it is good, for one, the person that cannot hear or see you media and also for search engines, because they will actually have the textual reference for these medias. So it’s a win, win situation.

Rule number 2:

Make it simple and consistent. Making your website simple will help people with cognitive impairments, elderly people and new web users that are not used to big and elaborate websites. Consistency is also important because if you have a lack of consistency your user might be confused, won’t know what’s going on with the website, might be lost. So we want to minimize this because if a user feels frustrated in your website, they are more likely to leave that website and go somewhere else. You can make your website simple by simply (sorry for this repetition) using normal vocabulary that anybody can understand. Do not be too verbose and just be clear with what you can to express. Consistency is to basically keep the same layout through out your website and you should be fine.

Rule number 3:

Colour contrast. In order to make your website legible it is important to consider colour. For example if you want to have a black background you shouldn’t really consider a colour for the text to be dark grey because this will be illegible for a lot of people. For me this rule is just for you to use common sense. I mean if you think that the colours you have chosen for the foreground and the background are not going to be legible or not easily legible by let’s say your grandmother, then don’t use them because it won’t be legible for a lot more people.

Rule number 4:

The last rule. Respect those HTML tags. Ok, so here it is. If it’s a <p> tag, then it’s a paragraph, then use it as a paragraph. If it’s a <table> tag, then use it as a table. Tables should (only) be used for tabular data, for example a data in a spreadsheet and not for layout, not for your page layout. (Use CSS instead!)

So those are my four golden rules for web accessibility. Yes, I know, there’s more to it than that, but for just a quick rundown of the essential ideas in web accessibility, these four simple rules are a major step forward.

[Exit music] Well that’s it for today’s podcast. That was podcast three for Thinking Accessible. My name is Rocío. Until next time!

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

Leave a Comment

Podcast Two – Web Accessibility

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

Transcript of the podcast:

[Intro music] Welcome to podcast two of Thinking Accessible. On today’s podcast I will briefly talk to you about web accessibility.

The first thing I want to say about web accessibility is don’t assume that people with disabilities don’t use the Internet. (or that they won’t want to access your site.) Because they actually do use the Internet in different ways and in different capacities. Now since people with visual, auditive and some physical impairments use the Internet, then naturally you would want them to access your information. You would want the maximum amount of people to have access to your content and therefore it makes sense to not alienate any big percentage of the users, right? Right! This said the first step in doing this is by following the basic guidelines of web standards. I will be talking about several topics relating to web accessibility through this podcast. You can also check out more content at my blog at thinkingaccessible.com

I hope you can join me as I attempt to make accessibility concepts as easy to understand as possible for novice web developers and the veterans.

To start of, I would like to comment on IE6 and designing for IE6. Although IE6 is a dying browser, a lot of websites still use it and we still, as developers, have to consider the approximately 16% of users that still use IE6 (as their primary browser). Unfortunately IE6, the reason why it is not a friendly for developers is that it’s not developed considering web standards. I personally have had nightmares due to IE6 because of the layout. When I design (a website) I use Firefox as my primary browser, but usually when I go to check on IE6 (and even IE7) , the layout is off.

But if your site is accessible, then you don’t need to really worry about IE6 too much, because at least your content is there. It’s visible and accessible to everybody. Sure it’s not pretty, but at least you can now start hacking it for IE6 and IE7. By hacking, I’m referring to the comments in the (HTML) code specifically made to detect Internet Explorer.

The latest browser from Microsoft is IE8. You won’t have the same problems as in previous browsers because it has changed to respect web standards. Now that’s a relief!

[Exit music] That’s about all I wanted to talk about today. Until next time! This is Rocío for Thinking Accessible.

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

Leave a Comment

Podcast One – Web Standards

Thinking Accessible Podcast

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

[Intro Music] Welcome to the first podcast of Thinking Accessible. My name is Rocío Alvarado and on today’s podcast I will talk to you about web standards.

Web Standards are a set of guidelines developed by a group of people a while back to ensure consistency within the HTML code and CSS. There are several web standards out there, but the most wide spread is the World Wide Web Consortium that you can find at w3c.org. So these guidelines, when you go to their website they can be a little overwhelming because of their writing and the way they display things, but they are pretty straightforward and are proven to be advantageous in many regards. Notably for your maintenance of your code. So because the code is consistent any HTML coder can take up where you left off. And because there is a clear separation between layout and content. Basically, your content is your HTML code and your layout would be integrated into your CSS. Then it becomes much easier to look at things and to decipher what is what. There’s also an increase of navigation for your user. Navigation means going through your page without getting lost or your code be what it’s intended to be. For example, when it’s a paragraph you should put the <p> tag, when it’s a list you should put the <li> tag, sorry the <ul> and the <li> tags because it’s what it is, it’s a list.

Basically what web standards are, are good practices for HTML and CSS. It’s just as simple as that. You are a professional and you should follow the standards. That’s as clear as it can be.

It has also been proven to be very effective in terms of search engine optimization. Have you ever heard the term SEO? This is related obviously to Google and Google likes web standards because it’s structured and they know where to find the headers and the different parts of your pages which they are keen to look for, so it’s not just about your meta-tags.

[Exit Music] To learn more please check out my blog at thinkingaccessible.com where I also have listed some useful links. Bye for now!

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

Leave a Comment