Archive for the ‘CSS’ Category


HTML 5 compliance: the next step

by Bruce Lawson and Stig Halvorsen

Ragnarök — viking browser with HTML5 parser!

Making its debut in a Labs build this week is Ragnarök, our implementation of the HTML5 Parsing algorithm. We’d love you to try to break this and give us feedback, so please grab a copy to install on your machine from one of the download links below.

The coolest HTML5 demo you’ll see this week

The Web is littered with <canvas> games, HTML5 video players, drag-and-drop whizz-bangs and other demos of HTML5 and “HTML5”. But here’s a really cool demo, probably the coolest you’ll see this week. Are you ready? Here goes:

<b><i>Yo!</b></i>

I can tell you’re impressed, so let’s dig deeper to see exactly why it is so cool. The elements are incorrectly nested: the innermost element – in this case, the <i> – should be the first one closed. What does this do to the DOM in different browsers?

We can check this out using Opera Dragonfly and its equivalents, or Ian Hickson’s DOM viewer. Internet Explorer 9 and Safari 5 result in this innerHTML:

<!DOCTYPE HTML>
<html><HEAD></HEAD><BODY>

<B><I>Yo!</I></B><I></I>
</BODY></html>

while Opera, Firefox and Chrome produce this:

<!DOCTYPE HTML>

<html><HEAD></HEAD><BODY>
<B><I>Yo!</I></B>
</BODY></html>

All the browsers have sorted out the mis-nesting, but inconsistently: note that IE and Safari have an additional empty <i> element that Opera, Firefox and Chrome don’t have. Which is correct? In an HTML4 world, both are. The HTML4 spec describes what to do with good markup, but not what to do with bad markup – and we know that 95% of the Web doesn’t validate. Therefore, browsers have traditionally been left to their own devices and forced to guess what to do with bad markup, as error-handling was never defined for HTML4.

Our simple markup above already produces very different DOMs, so imagine what would result from more real world examples of tag soup with dozens or hundreds of elements. Writing JavaScript that has to operate across browsers with such inconsistencies is a major cause of hair loss and weeping amongst web developers.

Luckily, there is now a solution to this.

The HTML5 parsing algorithm

The HTML5 specification defines a set of parsing rules for all markup, whether valid or invalid. Once all browsers have HTML5 parsers, the same markup will produce the same DOM across all conforming browsers. There are two main effects of this:

  • JavaScripters will sport cheerful grins and bouffant hair
  • Consumers can expect fewer interoperability problems when using their favourite site between browsers

So validation is a thing of the past, right?

Absolutely not. It’s still a vital QA tool, and just because the HTML5 parser will produce an interoperable DOM, it doesn’t mean it’s the DOM you actually want!

Opera’s implementation

Our old HTML parser has basically been the same since Opera began 15 years ago. It’s been continually patched to keep up with changing standards and countless different ways people came up with to not follow the specifications. After all the changes here and there, the code really started to look like a over-decorated christmas tree, and adding more stuff without knocking over the tree was getting increasingly hard.

With the decision to rewrite the entire parser came the opportunity to clean up the design significantly.

We can now proudly say that the new Ragnarök parser has a 99.9% pass-rate on an extensive test suite based on the html5lib tests for the parser part of the HTML 5 specification. The missing last 0.1% is going to be fixed before Ragnarök’s golden release. The test suite will also be publicly released once completed so that you can verify it yourself and compare Opera to the other browsers out there.

Ragnarök also scores 11 out of 11 (plus two bonus points) on the somewhat non-comprehensive (and therefore rather misleading) html5test.com. (The two bonus points are for parsing embedded SVG and MathML in HTML5.)

Memory consumption

The main reason we kept our old parser for so long was its efficient memory usage when handling bad markup. Instead of duplicating nodes like the HTML5 specification states, our parser had a intricate system of pointers that indicated which nodes should have been duplicated. This saved it from allocating memory to actually duplicating the element data, but also made the code that traversed the data structure more complex. Now we have switched to copying the nodes, it uses slightly more memory. Before the final release we will minimize that side effect — Opera has always been about memory efficiency, and working on smaller devices too.

Performance

It’s not obvious now, because this technical preview isn’t optimized for speed like the golden releases will be, but another advantage of the rewrite has been an increase in parser performance. Since the time taken parsing the markup of a page is relatively small compared to loading and rendering, this will not affect benchmarks dramatically, but all performance improvements are for the better, right?

Get it while it’s hot!

We have made some builds contain the new parser so that you can test it out, right now, and earn the right to brag to your friends that “Hah, I’ve been running that for quite some time now” when the final product is out in the stores in a short while.

Disclaimer: The builds are only meant as a technical preview of the new parser, and have not gone through the usual thorough testing our golden releases get, so they might be more unstable. The email client is not working properly so do not use it. The builds are not optimized for speed so don’t expect any useful results from performance benchmarks yet. Better stats will be available when the final version is out.



10 Handy Online CSS Code Generators For Web Designers

by on in
CSS is an important aspect for designers. It is not easy task for people to write a CSS code and implement a desired design. You can generate online CSS code efficiently and quickly. You can save your time and get a professional CSS code automatically. You do not an experience programmer and spend your money. There is tons of online code generators available. We tried to bring a 10 handy and useful CSS code Generator for designers. You can also suggest Code Generators to increase the code.

CSS3.0 Maker

CSS3 maker is a generator for rounded corners (Border Radius), create gradients, transformations, CSS, CSS animations, CSS or create shade transitions to boxes (Shadow Box).

CSS Type Set

SSTypeSet is a life saver. It’s incredibly simple yet quite handy. The WSIWYG editor allows you to view changes as you make them, so you can easily decide what sort of look you want. From there, just paste it to your site, without having to remember tags etc.

CSSMate

it provides to change multiple in fonts, text, color, border and list. it is a popular editor.

CSSportal

CSSportal is an editor allows you to edit an entire CSS file. You can preview CSS file in a dynamic preview. The preview will show the exact line you’re editing, and it will update as you type. Finishing, the CSS code in editor. You can validate the code with CSS Validation.

CSS Frame Generator

You have to put your XHTML code into it and CSS frame generator the CSS frame layout. It’s surely easy to use for newbies.

Telerik Visual Style Builder

It is online customized CSS tool that allows you have a work on custom skins. It is handy on ASP.NET developers. You can complete your task within a short time.

Typetester

Typetester is a useful online application that provides comparison of the fonts for the screen. It designed especially for designers make their job easier. Typesetter’s code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. But it’s only works on JavaScript background.

Grid Designer

Grid Designer is useful CSS Generator according to the name; it works on different types and provides grid layouts for designers.

CleanCSS

CleanCSS is a simple CSS formatter. it helps to make your CSS code in clean and understandable.

CSS Layout Generator

Clean Layout Generator is designed for fixed width floated columns layouts, with up to 3 columns and with header and footer. You can also specified measurements as Pixels or percentage.



Web Design Trends in 2011

Posted by Jacqueline Thomas

There is a thin line between design and development, and as we move into a new decade, this line is becoming extremely blurry. Is it enough to draw beautiful mock ups in Photoshop? Maybe 5 years ago. These days, the average internet user requires more. All beauty, with no substance, gets boring after a while. If your only goal is to impress a community of fellow designers with your flashy designs, you’ll find yourself quickly beneath the tide. 2011 is not about beauty, it’s about function. The trends for this new year and emerging decade are responsive design, constant connection and virtual reality.

How will you stay relevant as a designer in 2011? The ultimate goal of a designer is not to dazzle but to entangle. Any designer can get ‘oohs’ and ‘ahhs’ that are easily forgotten. The supreme designer is able to create an environment which charms and captivates the user to the point where he does not want to find the ‘Back’ button. Several elements come together to forge such a wonderland: harmonious color scheme, intuitive design, easily accessible information and fast response. Additionally, one can never under-estimate the power of simplicity. Of course, this has always been the case, but in 2011, you are no longer at the forgiving discretion of the desktop, or even laptop, computer. Now, your design must contend with smart phones, netbooks, tablets and the like. Are you ready?

Take a gander at the top 11 trends for 2011.

1. More CSS3 + HTML5

What a gratifying sigh of relief! CSS3 and HTML5 have been on the distant horizon of web design for the past couple of years, but now, in 2011, we see an explosion of it. Designers are finally starting to let go of Flash. However you may feel about Flash, you do know that it does not play well with some of the hot, new technology available to your current and potential visitors. In 2011, you will slowly step away from Flash and embrace the magic known as HTML5. Look at the amazingly similar comparison:

Now that’s shown, please understand that Flash and HTML5 are not equal opponents. There is plenty of room for both in 2011. The problem is that designers in 2010 (and before) misused Flash. Case in point, very rarely should your entire site be made of Flash, especially these days. HTML5 alleviates some of the burden we have placed on Flash. However, HTML5 cannot (yet) replace the extraordinary design elements we can achieve through Flash.

Perhaps even more exciting is the fact that CSS3 is available to us in a real way this year. Move over Photoshop (wow, Adobe just cannot rest), because CSS3 is making short work of text shadow, border radius and image transparency. If you have not already begun, now is the time to really delve into understanding CSS3 and HTML5.

2. Simple Color Schemes

Simplicity. There’s nothing quite as impacting as an honest message on a quiet backdrop. Quiet can be interpreted several different ways. Forget black and white or shades of gray. Think of green, yellow or even red as your primary color. However, limit your palette to two or three colors. Work within the shades of each color for variety. It can be truly remarkable what a few colors can do for your message. Observe:

Shades of green create this Twitter visualization tool. Side note: this site was created with XHTML/CSS and Javascript.

Red can be jarring if done incorrectly. This site gets it right by subduing the color’s overwhelming personality with easy-to-read high contrast text.

3. Mobile Ready

Smartphones, iPads, netbooks, oh my! There’s a dizzying amount of mobile products available to the consumer in 2011. This means your web design must be responsive to multiple viewports.

Creating a mobile ready website is not simply removing the bells and whistles from your design. This can create a vacant and impersonal design. Although not impossible, distilling the magic from your original design into a pure representation of your brand is tough! Fortunately, technology is quickly removing this burden.

With the help of CSS3, primarily media queries, mobile web design has taken a big leap forward (more on this later). One of the most important advances is that you can design a whole site and allow your coding to conform to the user’s viewing medium.

It may be tempting to just create a dedicated mobile site, but that may no longer satisfy your audience. Increasingly, mobile sites include the option to visit the original site. If you do not offer this option or if your original site is not optimized to mobile standards, you are simply not ready for 2011. Forecasters predict that smartphones will outsell personal computers this year. Bulletproof your design to meet this demand.

4. Parallax Scrolling

Parallax scrolling: not just for old school video games. As aforementioned, the hot web design trend for 2011 is creating a sense of depth. What better way to create that than with parallax scrolling? The parallax effect uses layers to present the illusion of a 3 dimensional space. It can be accomplished with some simple CSS tricks or the help of jQuery plugins like Spritely. Parallax scrolling can be most effective as a secondary element on your design, for example, as a header, footer, or background. Making it an integral part of your navigation may prove frustrating for your site visitor.

The Old Pulteney Row to the Pole website uses a top down parallax scrolling effect for the background. This adds a nice subtle amount of depth and lots of interest.

5. Designing for Touch Screens, Not Mice

Technology has become much more tactile. Usability is shifting from abstract to tangible. This means that instead of navigating your mouse to remotely connect, your destination is literally at your fingertips. Tablets, most smartphones and some desktops use touchscreens. Does your design accommodate fingertip navigation?

How much of your design is mouse-oriented? As designers, we worship mice. Our links light up when the mouse hovers over. However, there’s no hovering in touchscreen. How will your design indicate links to your visitors? What about drop-down menus? That’s also a no-go in touchscreen design.

Similarly, how will visitors peruse your site? As controversial as it may be for standard web browsing, horizontal scrolling may be more appropriate for touchscreens. Fitting nicely into this niche is a magazine-like layout where visitors virtually flip through your site.

Lastly, consider using liquid layouts as part of your commitment toward responsive design. In 2011, you are no longer dealing with screen resolution size. Visitors can change their viewing orientation from vertical to horizontal. Your design must be flexible to meet any challenge, or you will be a relic of 2010.

Baby sees the iPad Magic, Copyright Steve Paine, Flickr

6. Depth Perception in Web Design

No, we are not dealing with the aerial ‘I can see your coffee cup and keyboard on your website’ design of two years ago. Depth perception is about creating dimension in your web design, so that parts of your site looks nearer than others. It conjures a faux 3D effect when done masterfully. Remember what it felt like watching the blockbuster 3D movie, Avatar? The elements jumped off of the screen, quite literally.

Although 3D technology has no yet made it to web design, you can still replicate depth in your design.

This playful website features a rotatable, 3D planet and makes use of depth with well-placed shadows and layering.

Eye-catching and smart, this celebration of Jordan (both the man and shoe) is thoroughly entertaining. The 3D elements are crisp and simple, which what makes them so stunning.

7. Large Photographic Backgrounds

Large scale backdrops will surge in 2011. These images will be high resolution, and covering the entire site. Large photos are an instant way to grab your audience– they cannot help but to see it and have an opinion about it. The background photo must be content-appropriate. Simply having a pretty image in the background without any context will disrupt your user’s experience. Trends point to soft and slightly transparent imagery that does not over shadow your content, but harmonizes with it.

This site makes use of high-resolution photos and the predominant color is yellow throughout.

This site adds playful animation with its grand scale imagery. Warning: auto-play music.

8. Adventurous Domain Names & Integration

Although not in the strictest sense a web design issue, look forward to seeing more creative domain names. The once-coveted .com domain has lost a lot of its appeal– primarily because you have to think up words in Na’Vi in order to find a domain that has not been thought up yet. 2011 will see a more wide-spread venture away from .com and into more whimsical domains like .me or .us. Think of the possibilities and scoop it up before it’s gone.

.me is a great domain to use for personal portfolios, or blogs, especially if you want a seperate identity from your corporate brand.

Another example of .me integration.

9. QR: Quick Response

If you have noticed those square barcodes popping on business cards, magazines or else where, you may already know that they are a hot trend for 2011. How exactly does it translate into web design? Amazingly well, in fact.

The barcodes are called QR, short for Quick Response. Simply take a photo of the unique barcode with your camera phone. Like magic, your phone will call up the website associated with said barcode. The beautiful thing about QR is that you can use it in a myriad of ways. Feature your QR on your website, in order for site visitors to have a shortcut to your mobile site. You can also track your visitors through QR, by placing a special referral code on your URL. When you are leaving comments on sites such as this, use the QR as your avatar.

2011 is all about mobility and it will be smart to take advantage of this new medium.

qrcode

This is the QR for the author’s personal website. Create your own code here.

10. Thumbnail Design

The ever-enterprising folks at Google have introduced the average user to thumbnail browsing. Gone are the days of clicking through to see the content of a website. These days, you just click on the magnifying glass and hover (assuming you’re not on a touchscreen). Magically before you is a glimpse of what waits on the other side of your click.

If your design is Flash-based, that is definitely going to be a problem. The preview will not display those elements of your design.

As the average internet user becomes more surfing-savvy in 2011, expect to see more people navigating by these means. It is just too great of a temptation not to judge a site by its thumbnail.

11. Constant Connection/ Life Stream

Last, but certainly not least, is the focus on constant connection in web design. The internet is, by nature, a sterile environment, and we make it human by sharing our lives in an open forum. Expect to see more intimacy through the form of lifestreaming. Personal blogs and portfolios in 2011 will prominently feature live Twitter feeds (not just a link to the Twitter page). People will let you know where they are at any moment of the day via Foursquare. In fact, expect to see a dedicated lifestream for all of one’s online activity. 2011 will definitely bring out our inner, creepy stalker, no doubt about it.

A personal site that utilizes lifestreaming.

This is a business site that synthesizes a lot of information on one page.



Four Constants in the Ever-changing Web Design Industry

by Brian Casel via Sixrevisions.com

Four Constants in the Ever-changing Web Design Industry

The web is like a living, breathing organism. It’s constantly changing and evolving. You might say this animal has a serious caffeine addiction, considering the lightning-fast pace at which things move. Cutting-edge technologies arrive then fade away into the distant 6-month history of the medium. Apps obtain mainstream success only to be overshadowed by newer, shinier apps. Just when we started getting a grip on multi-browser compatibility, a whole slew of new platforms have emerged with the widespread adoption of mobile web devices.

But despite the highly dynamic nature of the web, some things in the web design industry never change.

We as web professionals must remain acutely aware of the age-old constants that make our businesses sustainable and allow us to thrive over the long-term. The fact that we live in an age of information-overload — coupled with the fact that we happen to work right in the center of all the noise — means we must work even harder to stay focused and recognize what’s important in the grand scheme of things.

This article highlights the few aspects of being a professional web designer that remain intact, year in, year out. These constants hold true for other fields as well. They have for a very long time, and will likely be a fact of life well into the future.

1. People Skills

A lot of our communication these days happens with a keyboard rather than our vocal chords. But that doesn’t mean we shouldn’t keep our professional interpersonal skills ready and up to task.

The web designers who keep a steady stream of paying projects are not necessarily the ones with the best portfolios. They’re the ones that clients feel most comfortable with. Usually that comfort is based in a strong relationship, which likely started with an in-person conversation, phone call or Skype call.

If it’s a prospective new client, we must rely on our people skills to really listen and understand their needs and goals, then communicate how we will solve them.

If it’s an existing client, the success of a project largely depends on our ability to walk our clients through the process, helping them understand all of the technical aspects along the way.

We must communicate things like how our design decisions relate to the user experience of their customers, or exactly how we are implementing WordPress to help them manage specific areas of their website.

How do we keep our people skills sharp? Exercise! Get out to meetups and conferences and talk to people. Have regular phone conversations or in-person meetings with your client — even if they’re comfortable communicating solely via email or IM.

Of course, written communication (like email, IM, text, snail mail) plays an important role in our people skills as well. I try and extend my authentic voice into the way I write emails, blog articles, and instant messages.

It’s important to remain clear and consistent in all forms of communication. The web can be a very impersonal place. It’s up to us to break through that barrier and reassure our clients and contacts that they’re dealing with real people.

2. Reliability

The reason clients come back for a second and third project is because of your proven reliability. What does it mean for a web designer to be reliable?

Never Miss Deadlines

It sounds easy and obvious, yet so many freelance web designers fail to meet the delivery dates that they themselves promised in the first place. Why is that? Underestimating a website’s development time, misallocation of their time, failure to plan around other projects, the list goes on. And what’s even worse than missing a deadline? Failure to communicate what caused this delay, or worse still, disappearing and avoiding the client altogether!

Be Accessible

Don’t mistake “being available” with giving your clients 24/7 access or handing out your private cell phone number. But give your clients — especially those with currently active projects — clear and consistent channels which they can use to reach you. Checking email several times throughout the day is a good idea. You might want to stay signed-in to IM during your designated business hours; that way if your client has a time-sensitive question, you can shoot back your response at your earliest convenience.

Be Consistent

Customers are loyal to a brand because it delivers the same quality experience consistently. The same is true for web design clients. They’ll stay with you because they know you deliver a quality, well-communicated project, on time, every time.

3. Experience

Out with the old, in with the new, right? Well, not always. Experience is a powerful asset, even in a cutting-edge and constantly changing industry like web design.

Malcom Gladwell argues in his book, Outliers, TheStoryofSuccess, that the key to success in any field is 10,000 hours of practice. I happen to believe in this theory — that hard work alone is not enough. You have to put that hard work in over and over again, for a sustained period of time in order to become the best of the best.

In web design, it’s not enough to read through a couple of tutorials or attend a lecture or two. You have to be presented with a problem many times over and come up with the same or similar solution to that problem every time for it to be ingrained in your expertise. For example, it took me at least a year of working as a front-end web developer before I truly grasped the concept of clearing floated elements in CSS.

Ever find yourself in awe of the design skills of “rockstar” designers? They didn’t always turn out work of that quality. They started somewhere — a long time ago — with amateurish experiments in HTML, just like the rest of us. Over time, with constant nurturing of their skills, they came to where they are today.

Experience comes into play when dealing with clients as well. During my first year of running my own web design business, I became very stressed about my obligations to my clients. I’d think and worry about ongoing situations with clients, even when lying in bed at night or during my free time and on vacation.

But over time, and through the experience of facing such challenges, I learned how to effectively and calmly deal with all sorts of client situations like unpaid invoices, feature creep, and website malfunctions. Today, I’m much better about separating work from relaxation, while remaining confident in my abilities to handle any situation that comes up.

4. Change

And now, to bring things full circle, there is one remaining aspect of being a professional web designer that will always remain constant: Change.

What makes our skills truly unique is our innate eagerness to learn and adapt to changing technologies, trends, styles, and business models.

It’s part of our job, and part of what our clients and bosses expect of us — to be constantly learning about new ways to improve the way we build the web. Whether that means continuously following the work of our peers, reading a healthy dose of web design blogs or attending industry conferences, our role as web professionals goes beyond the daily grind of writing code and pushing pixels. We must seek outside knowledge and inspiration then apply it to what we do on our own projects.

We are what keep this thing called the web moving forward.



6 Tips for Improving Website Accessibility

Shaun Cronin via tutsplus.com
Ideally, accessibility should be considered as part of every web project in order to increase availability to the widest possible audience. In the real world however, it can be easily overlooked. In this article we will look at easy ways that you can improve the accessibility of your site without having to make drastic or time consuming changes.


Introduction

“Unfortunately, the power and adaptability of the Web is not always fully utilised”

The World Wide Web is an incredible resource and it has opened up exciting new possibilities. Many more people are now able to access information and entertainment previously unavailable to them through traditional forms of media. The World Wide Web is especially significant for those with disabilities as the vast amount of digital information stored can be manipulated to meet differing requirements. Unfortunately, the power and adaptability of the Web is not always fully utilised and those with disabilities can find it difficult to navigate websites and have a negative experience with the Web in general.

There are numerous reasons why you should aim to improve the accessibility of your site, one of which is that it is the law in many countries. In the UK for example, web accessibility falls under the Disability Discrimination Act and if your website fails to comply, legal action could be brought against you. Legal issues aside however, why would you not want to open your site to the widest possible audience by making it accessible to everyone?

The Web Accessibility Initiative (WAI) was set up by the W3C to promote accessibility on the Web. The WAI attempts to educate people on how those with disabilities use the Web and has created guidelines for web designers and developers to follow. You will find that many of the guidelines are easy to follow and implement. Below we will discuss some easy methods that will help you meet these guidelines and improve the accessibility of your site.


Tip 01: Consider Your Colors

Improving Web Accessibility

It is estimated that around ten million men suffer from some form of color-blindness in the U.S. The most common types are Protanopia and Deuteranopia; and those who suffer from these have trouble distinguishing between red, green and similar colours. With such a high prevalence of this condition, it really is worth considering when designing and coding your website.

For the most part, there are no radical measures that need to be taken when designing with color-blindness in mind – as is the case with the majority of the suggestions within this article. A well designed website will generally not cause any major problems for color-blind users. It is worth taking extra consideration however, when designing interactive or call-to-action elements. For example; a simple text link, styled red with no other decoration may be impossible to see if it is within a block of grey or black text. No one is suggesting that you need to stick with default link styling, but it is helpful to use more than one type of decoration such as an underline or background-color.

A useful tool for designers can be found at colorfilter.wickline.org which provides several different filters that mimic how different types of color-blind users would perceive a website. Simply type in the URL of a website and select the filter you wish to use – it does take a bit of time to load however so you will have to be patient.

It is also worth taking into account the level of contrast between foreground and background elements of your website. A high level of contrast will benefit everyone, not just those who are visually impaired. The Web Accessibility Guidelines suggest a minimum contrast ratio of 4.5:1 and an ideal ratio of 7:1 for standard sized body text. Obviously the safest option is always black text on a white background or vice versa.

You can check the contrast ratio of multiple elements on a site using Juicy Studio’s Color Contrast Analyser Firefox extension. It will analyse each element on the page and provide a report on whether or not it conforms to the WAI’s guidelines.


Tip 02: Contextual Links

Those who use screen readers will often have the option to navigate a web page by skipping through the links to find something of interest. In the case of text links, the user would simply hear the word in isolation, regardless of the content that surrounds it. It is therefore extremely unhelpful when all that the user hears is ‘click here’ or ‘more’ – these types of links provide no information of where they direct the user or to what they are referring to.

A much better option is to provide a more descriptive link. A link that takes the user to the complete article on a blog could read ‘learn more about S.E.O’ or ‘click here for the full article on S.E.O’.


Tip 03: Alternative Content

Improving Web Accessibility

One of the core principles of the Web Accessibility Initiative is to make content on the web available to all regardless of any disability they may have. There are a number of techniques, such as the ones discussed in this article, which will help towards the WAI’s goal. There will always be some types of content however, that cannot be made accessible to some users, such as audio to those who are deaf. In this scenario, you should always provide alternative content where possible.

Web Content Accessibility Guideline 1.1:

Provide text alternatives for any non-text content so that it can be changed into other forms people need such as large print, Braille, symbols or simpler language.

For example, if you have a video of an interview on your site, you could consider including a transcript of the conversation for users to download or read on the site. Another method is to add captioning to the video – a method that YouTube is experimenting with using speech recognition software.

An even more complete approach is to provide a link to a text-only version of your website. This method will also make your site a lot more accessible to those with slow internet connections such as those still using a dial-up connection or browsing for a mobile device.


Tip 04: Tab Indexes

The Tab Index basically establishes the order of elements that a user will cycle through when using the ‘Tab’ key. In the majority of cases, if a page design follows a logical order and establishes a strong hierarchy using headings, sub-headings etc. then you need not worry about this too much. It is with the use of forms however that this function is really valuable.

Forms can incorporate many small elements such as checkboxes and radio buttons that can require precise movement and clicks of the mouse. Someone with a motor disability may not have the control needed to perform such precise actions. With a correct Tab Index established a user will be able to cycle through and interact with each form element using simple presses on the keyboard. A Tab Index will also benefit those who do not have access to a mouse and rely solely on the user of a keyboard to navigate a website.


Tip 05: Proper Use of the Alt Attribute

Improving Web Accessibility

We all know about alt text. It’s that text that we need to add to images in order for our site to validate. Everyone uses them right? Actually there are plenty of websites that don’t and those that do often use them incorrectly. In fact, there is much debate about the correct use of the alt attribute.

The alt attribute serves three main purposes:

  • Assistive technologies such as screen readers use alt text and read it aloud to the user.
  • Alt text is displayed instead of the image when images have been disabled by those with a slow internet connection or those using a text-only browser.
  • Search engines also use alt text to store information about the page as they cannot read the content of images.

“The truth is that alternative text for images depends on the context in which it is placed”

So essentially alt text is the text equivalent of an image or other media source and it is used when the image cannot be accessed for various reasons. So what information exactly do we use for the alt attribute? Some people place detailed descriptions of the image while others load it up with keywords in an effort to help their search rankings. The truth is that alternative text for images depends on the context in which it is placed.

For example, it is common for a relevant image to accompany a blog post, such as a typewriter for an article about freelance writing. The article itself makes no reference to the image so therefore it is pretty superfluous. Some people may give the alt attribute the value of ‘typewriter’ or ‘image of a typewriter’ or perhaps they would give the value of the title of the article. All of these methods are wrong however. Let us see why.

Firstly we need to imagine that we cannot see the image. So if the value of the alt attribute was ‘typewriter’ we would see the title of the blog post, the word ‘typewriter’ on its own then the main text of the article – this makes no sense when viewed as text and it would be even more confusing if you were using a screen reader and randomly heard ‘typewriter’.

As a general rule, it is best that you do not use phrases such as ‘an image of’ or ‘a picture of’ when providing alt attribute values. The alt attribute will only benefit those who cannot see the image for various reasons so therefore telling these users that there is an image there offers no real value other than clearing up some of confusion caused by the above method.

Lastly, giving the alt attribute the value of the title of the blog post would only result in the title being displayed twice as text or repeated twice when using screen readers. Alt text should not repeat any information that is already provided as text, it is simply unnecessary and potentially confusing.

The best option in this scenario is simply to provide a blank alt attribute value. A blank value ensures no potentially confusing or irrelevant information is communicated and there is no detriment to the understanding of the article as the image is not essential to this. Some may argue that since the image is purely aesthetic, then it is not content and therefore does not belong in the HTML and should be displayed using CSS, there are differing views on this however.

As you can see, providing correct alt attribute values can be tricky and very much depends on the situation. The best advice is to asses each scenario individually, deciding on whether the image is required for understanding and use your best judgement.


Tip 06: Access Keys

Improving Web Accessibility

Like Tab Indexes, Access Keys are a valuable feature for those users who rely on a keyboard to navigate a website. Unfortunately, Access Keys are one of the least used HTML elements, primarily because a lot of people are not aware of them and those who are choose not to implement them despite it being extremely simple.

Access Keys are basically keyboard shortcuts that help a keyboard user navigate to certain sections of a website quickly. Access Keys can be used by holding down a function key (usually Alt on Windows or Ctrl on Macs) and pressing a specific letter or number key that corresponds to a section of the site.

As I mentioned earlier, Access Keys are incredibly simple to implement. All it involves is a simple piece of HTML code added to the navigation anchor tags of your site –

  1. <a href=“index.html” accesskey=“1”>Home</a>

Simple.

A problem with Access Keys is that there is no universal set of assigned keys that users can expect to be utilised and combined with no real standard of informing users of the ones that have actually been used results in Access Keys being pretty ineffective.

The UK government does however have a set of recommended Access Keys to assign, they are as follows:

  • S – Skip navigation
  • 1 – Home Page
  • 2 – News/Updates
  • 3 – Site Map
  • 4 – Search
  • 5 – Frequently Asked Questions (F.A.Q)
  • 6 – Help
  • 7 – Complaints Procedure
  • 8 – Terms and Conditions
  • 9 – Feedback Form
  • 10 – Access Key Information

Final Thoughts

As you can see, many of the above methods are very easy to implement and only require a basic knowledge of HTML. Making your website more accessible need not be time consuming, require massive modification or be detrimental to the appeal of a website.

I believe it is important for designers as well as developers to be knowledgeable about accessibility and consider it within the various stages of building a website. The earlier in the design process that attention and thought are paid to accessibility, the easier it will be to incorporate these methods and achieve better results.

It is also important to remember that the majority of the methods detailed above will not only help those with disabilities, but will benefit all users of your website. Some of the tips may even improve your rankings with search engines.

We have discussed just a few tips that will make your website more accessible, but if you are really committed, you may want to check out how you can conform to the full list of Web Content Accessibility Guidelines.




Articles

Categories

Connect

Web Hosting Specials

Partners