Why Web Accessibility Matters
I would like to take a moment to thank Aaron for asking me to write for Solo Signal about Web accessibility and usability topics. In this article I would like to focus on accessible web design as it relates to good business practices. My next article will focus on the usability aspects of site design, and how it relates to businesses and individuals alike.
So, what exactly is Web Accessibility?
If you Google search “Web Accessibility” you will receive 217 million results in the search. That is a lot of information to look through to try to find the true meaning of accessible web design. You can pick through the results and find technical sites that relate to the W3C web standards, sites that offer guidance to web developers and site creators and even more results that attempt to make sense of what the true meaning of accessible web design really is.
Let’s take a look at an excerpt of the Wikipedia definition of “Web accessibility“:
Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality.
In other words, a site has to be correctly designed (usable) and developed (coded) so that all users, irregardless of ability or viewing medium, can have access to the information you are conveying and the functionality of the site. The key words here are information and functionality for all users.
Why Information is Important…
As a business owner that either has, or is looking to create a web site, your main goal is to relay information about your products or services in order to create, maintain and grow your business. You want to provide information about who you are and what you do in order to reach the most people with the least amount of effort, and cost possible. As an individual that is surfing the internet, you want to be able to quickly and easily locate the information that is important to you. Why waste the time thinking you have finally found those instructions on how to get rid of that blue screen of death, only to find that you are on a site that sells caskets?
Imagine this
If you own a traditional business store front, imagine turning away every fifth person that comes to the door to do business with you. There is no particular reason for turning them away, you don’t know them and can’t tell anything about the individual. Or, picture turning off all of your lights and painting your windows black, and then expecting your customers to find exactly what they came to your business to buy. What if you were to cram your whole warehouse of items into a small storefront that didn’t allow room for anyone to shop or move around? These scenarios aren’t going to be a positive experience for your customers. This is the type of experience that disabled users face everyday while online.
A person with a disability doesn’t have to have a severe disability in order to have problems surfing online. It could be an individual that has a vision problem and needs to make their font size larger than the default size. Can this be easily accomplished on your site? What about a person that has a developmental delay? Can they easily understand the information and content on your site, or are they confused by the terminology and extensive content that is overwhelming them? Users of your site that have dexterity issues, such as arthritis, might have a tough time using a mouse or the keyboard extensively to navigate your site. Another consideration is that a lot of internet users still are on dial-up connections. And let’s not forget about the new internet users that have their PDA or mobile device. This is a rapidly growing area that requires accessible web design and careful thought into your sites design.
About your business site
I won’t bore you with the details about how to create an accessible site, with examples of coding valid XHTML and CSS, but the basics come down to being able to still read the content (information) of any site just like it was a book. If all of the pictures, styles, colors and decorations on any site were to be turned off, would the content of the site still make sense? Would you be able to follow along with the stories and articles, or easily find your products that you came to buy? Is the navigation easy to follow and once you are on the page you are looking for, do you still know where you are? There are a few more reasons to have an accessible site.
- Reduced Bandwidth cost due to using web standards to separate content from presentation
- Ease of maintenance and scalability
- Improved Search Engine rankings
- Support for multiple browsers and devices
- Reduced legal liability
There are many other reasons for web accessibility. These are but a few of them. It all boils down to the original definition that we covered in the beginning of this article.
You want to be able to make your information available to the most users possible.
In my next article, I will discuss some of the functionality and usability issues that are encountered and how to ensure your site is easily navigated by all users. If you would like to learn more about accessible web design, feel free to contact me via my sites contact form.
Here are a few good resources also for you to check out:
- Developing a Web Accessibility Business Case for your Organization - W3C
- Web Content Accessible Guidelines
- W3C Site Validator - Validate your site here
- Introduction to Accessible Site Design - Sitepoint.com article
- Google.com
Subscribe to the RSS Feed
4 Comments - Add Yours!
- Basics of Web Usability
- Introducing Guest Blogger Elliott Cross
- 72 Essential Acronyms Related to Web Site Development
Tagged:
accessibility, CSS, elliott cross, mark up, optimization, seo, style sheets, usability, web design, web development, web standards, xhtml
Comments
Web Stack Series Part 5: HTML and Markup
How do web developers create the layouts of web pages? How do they tell the browser to arrange images around the copy in just the right fashion? How do web browsers know that one paragraph of text should be italic, while the other should be bold? The secret sauce behind all this magic is a markup language known as HTML.
HyperText Markup Language, or HTML, is probably the most ubiquitous and well known language in the world of web development. It is the language that programmers use to describe a web page’s content and structure so that web browsers can display it correctly to the end user. Marking up a web page means wrapping all of the content in descriptive tags. These tags describe the content’s purpose and how it relates structurally to the rest of the web page.
HTML is used to create headings, paragraphs, tables, block quotes, and a lot more types of content. It is also used to insert images into a web page. Here are some examples of HTML:
- Headings: <h1>H1 defines a level 1 heading</h1>, <h2>H2 defines a level 2 heading</h2>
- Paragraphs: <p>The P tag marks a block of text as a paragraph</p>
HTML is usually created after the web site mock-up has been created by the graphic designer. After the mock-up is sliced up into the appropriate images, HTML is used to arrange those images around the content of your site. If you have a dynamic web site, the business logic programming will wrap the dynamic content with HTML so that it is displayed correctly in the browser.
Good vs Bad HTML
In the early days of the Web, HTML was used to add style to a web page. It could be used to make things bold and italic, big or small, and even colorful. Once the Web started to mature and gain popularity, a bunch of smart people decided that HTML was being used incorrectly and that standards should be created. Instead of defining the style of a web site, HTML should have been defining the structure. This approach to marking up a web site according to its function rather than its form is called using semantic HTML, or marking up the content to reflect only the author’s intentional meaning. Styling the content is something that should be left up to style sheets, which we will talk about in more detail in the next installment of this series.
Good HTML is the single best ingredient for good SEO. By using semantic HTML to describe the structure of your web site’s content, you make it easier for search engine robots to parse through your site. For example, using the appropriate level of heading to segment content based on importance will help the bots know what information is most important and which information it can ignore.
Traditional HTML did not enforce much discipline on programmers. If the HTML was slightly wrong or incomplete, most web browsers would automatically correct the problem. XHTML is a more recent version of HTML that specifically adheres to the strict standards set forth by XML. This version forces programmers to be disciplined in their syntax. By requiring strict syntax, web pages are more consistent and better prepared to be consumed by applications other than web browsers. For example, if a web site’s content is marked up semantically with XHTML, it can be consumed by feed readers, mobile devices, desktop software, and many other software environments.
There are several different versions of HTML, I recommend that you require your site to be marked up with XHTML 1.0 Strict; your developer should know what this means - if they don’t, find a new developer. the W3C provides specifications for all versions and even makes available a handy validation tool to ensure that your site adheres to the rules of your chosen HTML version. When you are working with a developer, make it a requirement that all pages pass W3C validation.
Browser Wars
Unfortunately, the browser wars that continue to rage on have left many battle scars along the way. As a result, none of the current web browsers render and display HTML in exactly the same way, creating huge headaches for developers. For example, a level 2 heading in Microsoft Internet Explorer may be displayed in 14pt font while the same heading in Mozilla Firefox may be displayed using 12pt font. This is another area where style sheets come into play - they help normalize differences between browsers so that web sites look consistent regardless of the browser in which they are rendered.
Additionally, in an attempt to out do one another, some browsers have included support for proprietary HTML tags. If your web site uses a proprietary tag that is only available in one browser, the site may break or be displayed incorrectly in other browsers. It is best to just stick with plain vanilla HTML as defined by the W3C to ensure maximum cross-browser compatibility.
Educate Yourself!
HTML is a very easy language to learn and understand. I recommend picking up a basic HTML book (for example: Learning Web Design: A Beginner’s Guide to HTML, Graphics, and Beyond) or reading through some online tutorials so that you have a good understanding of how HTML works and what its capabilities are. This will further arm you when discussing your site with designers and programmers. Additionally, a good knowledge of HTML will give you a greater appreciation of the planning and work that goes into creating a good, quality web site.
In the next part of this series, we will be discussing Cascading Style Sheets. Style sheets are the icing on the HTML cake - they add style and glamour to your semantically marked-up web site. Check back soon!
Subscribe to the RSS Feed
Add Your Comments!
- Solo Signal Series: The Web Stack Explained
- Web Stack Series Part 3: The Database
- Web Stack Series Part 4: Business Logic Programming
Tagged:
CSS, html, mark up, programming, style sheets, w3c, web browser, web design, web development, xhtml



















