Web Standards

I’m a bit late this week, but here’s the fourth edition of this series “Catch up-Date with Karine” aiming at fighting the information overload. Please let me know if you find it useful by leaving a comment or sending an email at karine@collegewebeditor.com.

Mobile video social networking might happen sooner than we thought

Penn State and Alcatel-Lucent will work together on a pilot project to create a mobile video social networking application (via Campus Technology).

“The increasing demands of mobile phone users require the creation of more sophisticated services such as sharing videos with friends and family through social networks. However, the physical constraints of mobile phones (e.g., small screen size, bandwidth limitations, etc.) pose challenges such as how to navigate through such social networks and retrieve and display associated video clips,” said Lee Giles, professor of information science and technology. “This project will offer valuable insights into other mobile applications, particularly those involving the concept of ‘hyperconnectivity’ or the idea that everything can be connected to produce a multifaceted quality user experience.”

Want them to share your content online? Think beyond the traditional “email this” link and switch to “share this”
According to a recent report by Forrester Research (via Share This - via Serendipity), “The Ins and Outs of Online Sharing,” young internet users use multiple channels of shared content:

• 56% of shared content is received via personal emails
• More than 50% of young users rely on instant messaging, videos from YouTube and wikis to share content
• 30% on social networks
• 41% via text messages on cell phones

The study also highlights a new group that has emerged as sharing has grown in influence. ‘Power Sharers’ are a new category defined as individuals that share content at least weekly and share with 11 or more people through at least one channel. Adult Power Sharers represented 35 percent of the online population, and Youth Power sharers make up 62 percent of the online population, showcasing how each of these groups feed the viral cycles and influence networks.

This week, in the new study release department, don’t miss the following reports and white papers

• Teens, Video Games, and Civics - 76-page PDF report by the Pew Internet and American Life Project
• The Adult Learner - 9-page PDF white paper by Eduventures

Want to learn more about Web Accessibility? Have a look at the on-demand videos of the Web Accessibility Showcase that took place last week at Texas A&M University

I had the pleasure to watch live the presentation given by Glenda Sims (thanks to Matt Herzberger working his magic with ustream) and it was very interesting.
Here’s the page where you can find the links to the video recordings.

Bryan Hantman of University of Maryland presented yesterdat a session at HighEdWebDev in Rochester titled “Setting the Standards: How Web Standards Lower Costs & Increase Accessibility.”

Dimitri Glazkov, one of the HighEdWebDev guest bloggers, enjoyed this presentation a lot. This is Dimitri’s second post.

Bryan Hantman of University of Maryland gave a good talk on Web standards. He used his experience with School of Nursing as the basis of presentation. And real-world experience beats anything in my book. The presentation slides are available on the Web.

Here’s a quick recap:

In standards-compliant worlds, the separation of content, presentation, and behavior is definite and permanent. For each facet of development, there are standards, supported by World Wide Web consortium. The separation of concerns is the Holy Grail of Web standards-based development and it offers great benefits, like:

* Simpler development and maintenance — it is easier to understand and maintan standards-supported code
* Forward compatibility — use of standards and validation promotes compatibility with the future improvement of the standards
* Faster downloading — uses less HTML. He used the classic Eric Meyer’s example, where standardization cut the size of the code by 44%
* Better accessibility — semantic HTML makes it easer for screen readers and alternative devices to interpret content
* Better search engine rankings

So, what is semantic markup?
Simply put, it is about using HTML tags according to their meaning. For instance, using H1 tag to specify heading, not “bold and ugly.” Each tag has specific meaning, and Web standards developers care about the meaning.

This leads to clean, concise markup that reflects hierarchy of information. At the same time, standards are not ugly. CSS allows to control presentation (look and feel) to a very high degree.

Bryan then gave the history highlights of his Web site.

* Old site used frames, used invalid, tag soup markup, feel apart across browsers.
* New site offers increased accessibility, lower bandwidth costs, semantic markup and better ratings in the search engines.
* The site renders picture-perfectly in IE6 and Gecko browsers (Netscape 6+, Firefox, Flock, etc.), and offers content-perfect (graceful degradatation) presentation for all other browsers.
* There is a separate stylesheet for printing.

Among accessibility features, the site has:

* access keys (cool!)
* tab indexing
* “skip to content” links

It’s one of the new, table-less layouts. Bryan mentioned that the use of tables is purely semantic, for data only. In addition, they’ve added captions and summaries to existing and new tables, which is another accessibility bonus.

Questions from audience:

* How to create skip-links and access keys? Bryan pointed to this alistapart.com article
* Is there advantage of images in CSS? Bryan’s answer was based on performance, but I can offer another set of answers:
o Images are in presentation, and they travel with the stylesheet. You can link to the stylesheet from anywhere and the images will follow
o Redesigning the page is much easier, because you don’t have to pluck the img elements out of the markup one-by-one.
* One user pointed out the improper use of the fieldset element. Bryan humbly agreed with the semantic nit-picker.
* How to enforce XHTML strict on pages? There was a “policy” answer from audience, then another lady suggested that Contribute offers markup lock-down features. At this point, I started worrying about compliance for the sake of compliance, but we’ve moved on to another topic.
* How to develop for handheld? Brian pointed out another alistapart.com article.

Brian also demonstrated the Web Developer Toolbar extension for Firefox, a must for any Web developer.

In my opinion, this was one of the best sessions of the whole conference, offering outcomes based on specific experiences, and a great showcase of Web standards development in higher education.

Adam Finlayson from Northwestern University presented yesterday an interesting session at HighEdWebDev05 titled “Improving Accessibility with a Content Management System (CMS).”
After attending this session, Brian Phelps, who agreed to be our very-own correspondent at the conference, filed the following report.

“There are two barriers to improving Web accessibility: learning the techniques and implementing them. HTML-savvy designers and developers easily overcome these hurdles, but what about WYSIWYG-using department assistants making updates? Teaching Dreamweaver basics is challenging enough without the what, when, and why of accessibility recommendations. Learn about techniques Northwestern University uses to improve accessibility and how a content management system (CMS) makes life easy for site editors.”

Adam summarized the three types of challenges most common in web users:

• Physical, e.g., a motor skill limitation
• Technical, e.g., a slow modem
• User-defined, e.g, JavaScript disabled

Adam described basic components of a page and how, through a content management system, you can improve accessibility for impaired users to your content. He broke the document control into three components:

• Template control
• Input control
• Output control

Template Control
Adam described how first specifying the correct Doctype is essential to the disabled user and their web browsing technology, whether it be a screen reader or another technology. He recommended certain base line strategies, including using “skip links” that permit impaired readers to skip navigation to get to the main content. This means imbedding Access Keys in the content. He said that the main content should be placed at the top of the file, and navigation and header matter should come last in the code. The layout should be controlled using CSS.

Input Control
Input control means we should specify a language in the page and require users to implement certain attributes, like the ALT tag for images, the CAPTION tag for tables, and LABELs for forms.

Output Control
Output control means employing techniques or technology to validate user’s code to tidy up X/HTML, to strip unwanted FONT or other tags, and to otherwise optimize it for standard appearance on your web site.

He suggested that meaningful page TITLEs that closely match the first H1 are important. He also described a technique of “reverse bread crumbs” in the TITLE, so that users are always able to discern their location, and bookmark it accurately. He described how to use the LINK tag for navigational aides, such as “Next,” “Prev,” and “Start.” While not visible to most browsers or the users, they can be accessed by disabled users with using assistive technologies.

That being said, CMS won’t solve everything. It doesn’t prohibit users from adding “Click here” to every link, or from using undefined acronyms or abbreviations.

Daniel M. Frommelt from The University of Wisconsin - Platteville shared his experience in converting his university website to web standards and gave a few very good tips on how to proceed in a session held yesterday at HighEdWebDev05 and titled “Conversion to Web Standards: Tips, Tricks, and Methods.”
After attending this session, Brian Phelps, who agreed to be our very-own correspondent at the conference, filed the following report.

You’re sold on the “Benefits of Web Standards”: reducing file size, minimizing bandwidth, generating printer-friendly pages, optimizing search engine placement, and achieving greater accessibility. Now learn how to take a common site and walk through the conversion. This presentation walks through the methods of rebuilding a site with XHTML and CSS. We will focus on the transition of a Web site that was built with a table structure and converted to a new structure using XHTML and CSS and focus on the benefits of Web standards: reduction of markup, separate CSS files to control design, printer-friendly CSS pages, and increased accessibility. We will also discuss how to optimize a site for search engines using semantic markup, plus some general tips and tricks for making the CSS layout behave in a more predictable manner among numerous browsers. Sample files will be made available for the participants to review.

Daniel described some of the standards affecting accessibility and the benefits of implementing accessible web pages. He demonstrated how, without altering the layout of a sample universities home page, he reduced the total HTTP requests from 51 to 25, and total size of the page from 113.3kb to 58kb.

Much of this was accomplished by putting images into the CSS, which is then cached by all browsers. HTML, which is fetched repeatedly with each HTTP get, was reduced to 8.9kb from 45kb, and HTML images were reduced to 25.2kb from 65kb.

He showed how he used advanced features of CSS to enhance accessibility, including image replacement and list items, to accomplish this feat. For example, he marked an H1 tag with a margin left of -999em, and added a background GIF in its place. He showed how to use list items for any time two or more like items are listed and how they could be successfully manipulated the home page to appear correctly in a browser and degrade successfully on devices liked PDAs, cell phones, and other readers.

Yesterday at HighEdWebDev 05 in Rochester, Richard Ells from The University of Washington offered interesting insights about web accessibility for higher ed websites and shared his experience on integrating the famous Section 508 requirements and the W3 standards into website management workflow in a session titled “Building Accessibility Into The Workflow”.
After attending this session, Brian Phelps, who agreed to be our very-own correspondent at the conference, filed the following report.

By comparing the Section 508 and W3C-WAI accessible design requirements with Web site management workflow patterns, we will identify where in the Web management process the decision and action points are for accessibility. The objective is to make in-depth accessible design an inherent and efficient part of the creation and maintenance of a Web site, whether it is maintained by hand, with a Web programming language and database such as PHP and MySQL, or with a content management system. Including non-HTML content such as PDF and scripting in the process will also be discussed.

Richard illustrated some of the challenges inherent in designing accessible web pages. He cited 16 discrete criteria outlined in Section 508 1194.22 standards that define accessibility.

He then described several attempts to create systems that would produce web content meeting these standards, like a Decision Tree, Basic Publication Workflow, and Opportunistic Reuse Workflow.

He sorted the requirements into groups that could be satisfied by specific roles in the production process:

• Alternative and associative text
• Technologies
• Graphics and color
• Usable design
• Alternative pages with equivalent information and functionality

Richard briefed the crowd on the success he had in breaking the content production workflow into a Decision Tree by Roles and Swimlanes, which assigned certain individuals responsibility for specific kinds of content and accessibility responsibilities.

Again referring to the 16 discrete criteria outlined in standard 1194.22, he outlined how by thinking through the CMS process, the participants could focus on Elements and Attributes, Technologies, Table Structure, Templates and Stylesheets, and Other.

He concluded by advocating that it is important to build in accessibility by thinking about content as components, e.g., graphics, tables, scripts, CSS, or color, and how each component needs to be made accessible by some means.

Is it accessible to students, faculty or staff with disabilities?

The Americans with Disabilities Act (ADA) of 1990 and the Rehabilitation Act of 1973 spelled out some specific requirements for higher education institutions.

As quoted in a pamphlet about Auxiliary Aids and Services for Postsecondary Students with Disabilities from the US Department of Education, section 504 of the Rehabilitation Act of 1973 states that:

“No otherwise qualified individual with a disability in the United States . . . shall, solely by reason of her or his disability, be excluded from the participation in, be denied the benefits of, or be subjected to discrimination under any program or activity receiving federal financial assistance . . . . “

As a consequence, any colleges or universities receiving federal financial assistance (and their websites) should be accessible to students, faculty, staff or alums with disabilities.

That’s where the guidelines for section 508 of the Rehabilitation Act Amendments of 1998 can be very helpful.

Even if higher education institutions are not required - per se - to comply with section 508 (the law only applies to federal and other governmental agencies), these guidelines are a good start to make sure their websites are accessible to people with disabilities.

Penn State’s IT Services have built a very good introduction/tutorial titled “Creating Accessible Websites,” where you can also find a Quick Accessibility Checklist.

And, if you want to find out whether or not you should worry about this at all, you can just run your homepage and secondary pages through Bobby, a free online validator.