Semantic Markup and Accessibility Standards – An overview

Web Standards Guideline

With growing technology and standards, I take pride in meeting new standards according to W3C, in order to achieve a highly functional site and good user experience for everyone. These standards include but aren’t limited to W3C standards, semantic markup, meeting WCAG usability standards, and Section 508 Compliance. This guide provides a medium level of understanding of accessibility standards. If anything in this article is confusing you, then I recommend you refer to Nathan’s post on Accessible Web Design for a more broad prospective.

Semantic Markup

Working with HTML and XML markup languages, it’s important for the code to be standards compliant by using tags, structure, and information that can be read and translated by all browsers. Semantic Markup is just a way of structuring code so that a browser/machine can do more work and take less off the user. For example, search engines, like Google, are heavily driven on specific tags such as Meta information, Alt tags for images, recognizable XML and HTML formatting, etc. Using meta tags for keywords, content definition, and descriptions all improve functionality for search engines and browsers.

Section 508 overview

• Software Applications and Operating Systems: includes usability for people that are visually impaired, such as alternative keyboard navigation.
• Web-based Intranet, Internet Information, and Applications: assures accessibility to web page graphics by the visually impaired using assistant technology such as screen readers and refreshable Braille displays. This is accomplished by using text labels and descriptors for graphics.
• Telecommunications Products: addresses accessibility for people who are deaf or hard of hearing. This includes technology compatibility with hearing aids, assistant listening devices, and TTYs.
• Videos or Multimedia Products: includes requirements for captioning of multimedia products such as training or informational multimedia productions. Captioning or video descriptors must be able to be turned on or off.
• Self Contained, Closed Products: products with embedded software, such as information kiosks, copiers, and fax machines, often cannot be used with assistant technology. This standard requires that access features be built into these systems.
• Desktop and Portable Computers: discusses accessibility related to mechanically operated controls such as keyboards and touch screens.

WCAG summary

The Web Content Accessiblity Guidelines (WCAG) is the only international draft for following web standards. It describes standards that may be used, should be used and must be used. The WCAG is considered the stable version of standards, but for more current standards for accessible websites you can refer to the Web Accessibility Initiative (WAI). They define standards more relevent and specific to newer Web Browsers, Operating Systems, and so forth.

There is a lot of best practices and examples defined in the WCAG and WAI, and though these standards are important, not every web developer needs to know them by heart or implement them into every site. They are mainly important for sites that provide a service, such as e-commerce, educational resource, government sites, etc. That’s why many times you’ll notice that government sites and educational sites have poor creativity, because they need to focus on delivering content to all audiences more than aesthetics. However, if you’re a web developer and interested in learning more about standards and implementing the, refer to the WCAG and the WAI and start creating hierarchy using headers, putting navigation into lists, and using Title and Alt tags appropriately.

W3C summary

The W3C is a working draft defining all aspects of markup languages and some Object Oriented Programming (OOP) languages used on the web. They define standards that are compatible across multiple browser, operating systems and languages. As web developers, we live by these standards and must know them to properly breakdown a website. These standards are a guideline that we follow in order to have our sites be dynamic and compliant for future technologies and software.

Where does your site fall according to these standards?

Below are some highlights that you should become familiar with as you populate a site with content. It’s important that if your site is developed by a professional that applies these standards, to ask for documentation on how to use functionality that may have been put into place for you, such as Meta tags, Header Tags, and Listed Links.

• Compliance across all major Operating Systems: Windows XP, Windows Vista, and Mac OS X
• Access to the visually impaired: JAWS, Window-Eyes, and Hal
• W3C & WCAG standards
• Organic Search Engine Optimization
• Meta information for pages, scrips, and images
• Alt tags for alternative text on images
• Color contrast and color schemes legible for those with color blindness or vision problems
• Em based layout and font: allowing sizes to be relevant to the browser-defined size for compatibility with mobile devices, increasing the font size in the browser, and different screen resolutions.
• Listed links for navigation hierarchy
• Header tags to establish Hierarchy and SEO

How I try and meet those standards in Web Development

As a web developer, I know the standards well. Like an electrician must know state codes and regulations, I follow standards laid out by federal law (Section 508), good practice guidelines (W3C) and usability requirements (WCAG). I also make sure to read up on other articles and refer to other professionals to practice what is most commonly needed and used, for more in depth on how to tackle accessibility as a web developer, check out Nathan’s post at redswish.