Skip to content →

Tag: Web Standards

The deal with opening hyperlinks in a new window or tab.

The main consensus is to avoid them. Why you say? Well because it’s not necessary. If you really want to open a link in another tab or window, you can do it yourself:

In Firefox, hover over the link you want to access, right-click your mouse to get a menu and click on “Open Link in New Tab” or “Open Link in New Window”.

Firefox Right Click Menu

In Internet Explorer, hover over the link you want to access, right-click your mouse to get a menu and click on “Open in New Tab” or “Open in New Window”.

Internet Explorer Right Click Menu

I found other compelling reasons to avoid this habit on Accessify Forum. Kyle J. Lamson wrote“…Forcing new windows can confuse people when it opens behind the window and they do not realize it and it is really iritating when we are reading and it blocks our view.” He also mentions that some browsers or applications do not support multiple windows. He continues by adding “If I want to return to your site, I will… either back button or because usually I open links in new tabs. But if I am just using your site as a jump off point to somewhere else… then i do not wish to remain at your site and you should not force me to.”

I agree with Kyle, it’s all about giving choices and not forcing anything on the user.

So use the back button or get to know your browser. Simple and efficient shortcuts will help make your web browsing experience a better one.

Leave a Comment

Pushing for Web Standards

Websites dedicated to online awareness and magazines alike are pushing more and more the importance of Web Standards. Sites like A List Apart has been an advocate for Web Standards and Web Accessibility for years. WordPress, Joomla and other content management systems have embraced the principles of accessibility. Forums like Accessifyforum have also seen increased interest.

Governments and now Educational Institutions, mainly Universities are taking the matter into their hands.

Blogs like www.prettysimple.co.uk/blog and contests like at www.accessibilityinfocus.co.uk encourage and pursue the issue in terms of content, design and context. I even came across a guild for accessible web designers. It is hopeful to see that web professionals consider web standards as an important facet of the web experience.

Leave a Comment

Getting Lists right

Lists can be tricky, but as long as you keep a consistent structure and the correct sequence, lists are a piece of cake.

Here are the basics to remember:

  • Make your menus into unordered lists,
  • Place the list inside a div,
  • Have an H2 header with menu title (hide it if not need to be visible),
  • The ul has no left indentation (for browser compatibility),
  • Use display:inline for horizontal lists,
  • Breadcrumbs use nested lists,
  • Be diligent.

To read more about lists: CSS Design: Taming Lists

Leave a Comment

W3C has a new look!

The new and beautified World Wide Web Consortium website is proof that it can be done. Those of us that visit that site regularly know how extensive the site is and a task this big is daunting. Nevertheless, the improvement is welcomed.

Things to notice:

  • It’s scalable width size,
  • More breathable (meaning that there’s less content on the page therefore it’s easier to read),
  • Colours work well together,
  • Changeable views for desktop, mobile and print,
  • The skip link to jump to the main content.

Congrats!

Leave a Comment

Pretty and accessible design

It is more and more apparent that accessibility can be beautiful. I came across Accessibility in Focus, a website for an accessible web award.

There was 4 finalist, one of them was the Salford City Council. A fairly large website. Its navigation is straightforward even if at first glance the site looks overwhelming. This site is proof that the size of a website is no excuse for accessibility.

The interactive award winner uses Flash. Although Orange Project conforms to the lowest priority level of the W3C WAI standards, I still think that Flash has a long way to go. While considering the site’s probable target audience, the design is a very successful one.

2 Comments

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

SEO or web standards?

I recently read an article in the Website Magazine on SEO (Search Engine Optimization) and I was happy to see that a couple of the elements listed where directly related to web standards. Title, headers, using HTML only for content, and being clear and concise were all part of focusing on the most important thing on your site: the content.

For any starting website, content is the most important element. No matter the amount of eye-candy that your site could have, the content is what your users will come back for.Sure eye-candy is cool and with future browsers some cool features will be more accessible. But until then, keep it simple, consistent and clutter free.

Leave a Comment

No Canadian Section 508

Ok so Canada does not have the national equivalent to the United States section 508. But if you want to know what they recommend you can read their Common Look and Feel standards for the Internet documentation. Obviously the information is for government and public sector websites, but it could be useful to get another perspective on standards and accessibility. It basically lists out the main things we need to remember for guidelines and best practices.

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