+++ WEB DESIGN UPDATE. - Volume 12, Issue 34, February 13, 2014. An email newsletter to distribute news and information about web design and development. ++ISSUE 34 CONTENTS. SECTION ONE: New references. What's new at the Web Design Reference site? http://www.d.umn.edu/itss/training/online/webdesign/ New links in these categories: 01: ACCESSIBILITY. 02: CASCADING STYLE SHEETS. 03: COLOR. 04: EVALUATION & TESTING. 05: EVENTS. 06: HTML5. 07: JAVASCRIPT. 08: MISCELLANEOUS. 09: NAVIGATION. 10: TOOLS. 11: USABILITY. 12: XML. SECTION TWO: 13: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Website Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0 By W3C. "This document provides guidance on evaluating how well websites conform to the Web Content Accessibility Guidelines (WCAG) 2.0. It describes a procedure to evaluate websites and includes considerations to guide evaluators and to promote good practice. It does not provide instructions for evaluating web content feature by feature, which is addressed by WCAG 2.0 success criteria. This document is one of a series of informative W3C/WAI resources about Evaluating Websites for Accessibility that complements the WCAG 2.0 Documents. It does not define additional WCAG 2.0 requirements nor does it replace or supersede it in any way..." http://www.w3.org/TR/WCAG-EM/ Visually Highlight Interface Components When They Receive Focus By Denis Boudreau. "Make sure active elements are highlighted when they receive keyboard focus..." http://dboudreau.tumblr.com/post/75684104222/visually-highlight-interface-components-when-they Organize Content in a Sequential Reading Order That Remains Logical By Denis Boudreau. "Make sure the reading order remains meaningful, regardless of technology..." http://dboudreau.tumblr.com/post/75899954465/organize-content-in-a-sequential-reading-order-that Making an Accessible Dialog Box By Nicholas C. Zakas. "In today's web applications, dialog boxes are about as common place as they are in desktop applications. It's pretty easy to show or hide an element that is overlayed on the page using a little JavaScript and CSS but few take into account how this affects accessibility. In most cases, it's an accessibility disaster. The input focus isn't handled correctly and screen readers aren't able to tell that something is changed. In reality, it's not all that difficult to make a dialog that's fully accessible, you just need to understand the importance of a few lines of code" http://www.nczonline.net/blog/2013/02/12/making-an-accessible-dialog-box/ Why Don't Screen Readers Always Read What's on the Screen? Part 1: Punctuation and Typographic Symbols By Paul Bohman. "...Unfortunately, screen readers don't always read what's on the screen..." http://www.deque.com/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols Three Tips to Improve the Accessibility on Your Website By Deborah Edwards-Onoro. "Yesterday I had the pleasure of speaking to our Metro Detroit WordPress group about how to improve accessibility on your website. Creating an accessible website allows everyone, no matter their application, software, hardware or other capabilities, to use your site..." http://www.lireo.com/three-tips-improve-accessibility-on-your-website/ Advocacy Group Wants Google to Rethink CAPTCHA By Global Accessibility News. "An Australian Not for Profit consumer advocacy organization has accused Google of not meeting its mission to make online information 'universally accessible' by making its reCAPTCHA service fully accessible...." http://globalaccessibilitynews.com/2014/02/06/advocacy-group-wants-google-to-rethink-captcha/ +02: CASCADING STYLE SHEETS. Floated Label Pattern with CSS Only By Jonathan Snook. "I came across Brad Frost's post about the Floated Label Pattern and instantly thought, "I think you can do this in CSS" and set out to prove it. It turned out to be a little trickier than expected but I created a quick proof of concept..." http://snook.ca/archives/html_and_css/floated-label-pattern-css UI Animation and UX - A Not-So-Secret Friendship By Val Head. "...This article uses CSS animations and transitions in the associated examples..." http://alistapart.com/article/ui-animation-and-ux-a-not-so-secret-friendship +03: COLOR. Provide Enhanced Contrasts for Large Sized Text By Denis Boudreau. "Make sure a contrast ratio of at least 4.5 to 1 exists between text and background..." http://dboudreau.tumblr.com/post/76109877158/provide-enhanced-contrasts-for-large-sized-text +04: EVALUATION & TESTING. Usability Testing for Mobile Is Easy By Raluca Budiu. "Testing phones, tablets, or other mobile devices with real users is similar to studies with regular computers, but requires special consideration for recording equipment, room setup, and even the test participants." http://www.nngroup.com/articles/mobile-usability-testing/ +05: EVENTS. WebVisions Portland May 7-9, 2014. Portland, Oregon, U.S.A. http://www.webvisionsevent.com/portland/ Society for Technical Communication Summit May 17-21, 2014. Phoenix, Arizona, U.S.A. http://summit.stc.org/ CSS Conf May 27, 2014. Amelia Island, Florida, U.S.A. http://2014.cssconf.com/ UX London 2014 May 28-30, 2014. London, England, England, United Kingdom http://2014.uxlondon.com/ International PHP Conference June 1-4, 2014. Berlin, Germany http://phpconference.com/2014se/en/ +06: HTML5. Screen Reader Support for HTML5 Sections By Leonie Watson. "HTML5 includes a handful of section elements that give documents a robust semantic structure. The header, footer, nav, article, section and aside elements give different regions of a document meaning. Amongst other things, that meaning can be understood by screen readers, and the information used to help blind and partially sighted people orient themselves and navigate around the page..." http://tink.co.uk/2013/02/screen-reader-support-for-html5-sections/ +07: JAVASCRIPT. Video - Fake Operator Overloading By Axel Rauschmayer. "I held the talk 'Fake operator overloading' at Fluent Conference, in San Francisco. The video is now publicly available..." http://www.2ality.com/2014/02/video-fake-operator-overloading.html What are Integers in JavaScript? By Axel Rauschmayer. "According to the ECMAScript specification, all numbers in JavaScript are floating-point. Yet, the notion of integer comes up occasionally. This blog post explains what it means..." http://www.2ality.com/2014/02/javascript-integers.html Choosing Vanilla JavaScript By Anthony Colangelo. "...Sometimes it makes sense to put down the power screwdriver and use some good old-fashioned elbow grease..." http://alistapart.com/blog/post/choosing-vanilla-javascript/ +08: MISCELLANEOUS. Tim Berners-Lee - We Need to Re-Decentralize The Web By Liat Clark. "The greatest danger is the emergence of a balkanized Internet..." http://arstechnica.com/tech-policy/2014/02/tim-berners-lee-we-need-to-re-decentralize-the-web/ The Early History of HTML By Sean B. Palmer. "HTML in 1990 - 1992" http://infomesh.net/html/history/early/ +09: NAVIGATION. Killing Off the Global Navigation - One Trend to Avoid By Kathryn Whitenton. "For desktop sites, demoting your main content categories into a drop-down menu makes it harder for users to discover your offerings." http://www.nngroup.com/articles/killing-global-navigation-one-trend-avoid/ Assign a ContentInfo Landmark Role to the Page's Footer Section By Denis Boudreau. "Make sure the page footer is identified using the contentinfo landmark role..." http://dboudreau.tumblr.com/post/75792790382/assign-a-contentinfo-landmark-role-to-the-pages-footer Usability Tip - Don't Make Me Search for Search By Tammy Guy. "One of the best ways to learn what works and what doesn't work when it comes to UI and usability is to look at as many samples as possible, testing out pages and evaluating how certain elements are being treated." http://uxmag.com/articles/usability-tip-dont-make-me-search-for-search +10: TOOLS. Web Accessibility - Tools and Considerations By Shaumik Daityari. "...In this roundup of some of the evaluation tools that are available to check web accessibility, we will discuss a few tools and the intended scenarios where they might be useful. Before we proceed, you could check the complete list of tools maintained by W3C..." http://www.sitepoint.com/web-accessibility-tools-considerations/ 14 Usability Testing Tools Matrix and Comprehensive Reviews By W Craig Tomlin. "...the following matrix and comprehensive review of 14 usability testing tools will help practitioners who are looking for tools for specific testing tasks..." http://www.usefulusability.com/14-usability-testing-tools-matrix-and-comprehensive-reviews/ +11: USABILITY. An Argument for Complexity Rather than Simplicity in Technical Communication By Tom Johnson. "... I'm saying that products and their related documentation should not be portrayed as being simple and easy to use when they are not. Technical writers should be truth-tellers, with a respect for the complexity of information. Certainly we communicate in a human readable way, using lists, numbered steps, subheadings, visuals, examples, and other tools to communicate ideas. These techniques make the language usable. But we don't betray the complexity of the products or processes by supposing that they are simple or that the concepts, tasks, and processes for using them can be made simple." http://idratherbewriting.com/2014/02/07/an-argument-for-complexity-rather-than-simplicity-in-technical-communication/ Web Animation at Work By Rachel Nabors. "...Animation is powerful because it can create the 'illusion of life.' This means taking into account physical things like gravity, reaction, squash, stretch, and timing..." http://alistapart.com/article/web-animation-at-work +12: XML. Scalable Vector Graphics (SVG) 2 By W3C. "This specification defines the features and syntax for Scalable Vector Graphics (SVG) Version 2, a language for describing two-dimensional vector and mixed vector/raster graphics. Although an XML serialization is given, processing is defined in terms of a DOM..." http://www.w3.org/TR/2014/WD-SVG2-20140211/ [Section one ends.] ++ SECTION TWO: +13: What Can You Find at the Web Design Reference Site? Accessibility Information. http://www.d.umn.edu/itss/training/online/webdesign/accessibility.html Association Information. http://www.d.umn.edu/itss/training/online/webdesign/associations.html Book Listings. http://www.d.umn.edu/itss/training/online/webdesign/books.html Cascading Style Sheets Information. http://www.d.umn.edu/itss/training/online/webdesign/css.html Color Information. http://www.d.umn.edu/itss/training/online/webdesign/color.html Dreamweaver Information. http://www.d.umn.edu/itss/training/online/webdesign/dreamweaver.html Evaluation & Testing Information. http://www.d.umn.edu/itss/training/online/webdesign/testing.html Event Information. http://www.d.umn.edu/itss/training/online/webdesign/events.html Flash Information. http://www.d.umn.edu/itss/training/online/webdesign/flash.html Information Architecture Information. http://www.d.umn.edu/itss/training/online/webdesign/architecture.html JavaScript Information. http://www.d.umn.edu/itss/training/online/webdesign/javascript.html Miscellaneous Web Information. http://www.d.umn.edu/itss/training/online/webdesign/misc.html Navigation Information. http://www.d.umn.edu/itss/training/online/webdesign/navigation.html PHP Information. http://www.d.umn.edu/itss/training/online/webdesign/php.html Sites & Blogs Listing. http://www.d.umn.edu/itss/training/online/webdesign/sites.html Standards, Guidelines & Pattern Information. http://www.d.umn.edu/itss/training/online/webdesign/standards.html Tool Information. http://www.d.umn.edu/itss/training/online/webdesign/tools.html Typography Information. http://www.d.umn.edu/itss/training/online/webdesign/type.html Usability Information. http://www.d.umn.edu/itss/training/online/webdesign/usability.html XML Information. http://www.d.umn.edu/itss/training/online/webdesign/xml.html [Section two ends.] ++END NOTES. + SUBSCRIPTION INFO. WEB DESIGN UPDATE is available by subscription. For information on how to subscribe and unsubscribe please visit: http://www.d.umn.edu/itss/training/online/webdesign/webdev_listserv.html The Web Design Reference Site also has a RSS 2.0 feed for site updates. + TEXT EMAIL NEWSLETTER (TEN). As a navigation aid for screen readers we do our best to conform to the accessible Text Email Newsletter (TEN) guidelines. Please let me know if there is anything else we can do to make navigation easier. For TEN guideline information please visit: http://www.headstar.com/ten + SIGN OFF. Until next time, Laura L. Carlson Information Technology Systems and Services University of Minnesota Duluth Duluth, MN U.S.A. 55812-3009 mailto:lcarlson@d.umn.edu [Issue ends.]