[webdev] Web Design Update: July 3, 2014

Laura Carlson lcarlson at d.umn.edu
Thu Jul 3 09:38:05 CDT 2014 

+++ WEB DESIGN UPDATE.
- Volume 13, Issue 01, July 03, 2014.

An email newsletter to distribute news and information about web
design and development.

++ISSUE 01 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: DRUPAL.
05: EVENTS.
06: HTML5.
07: INFORMATION ARCHITECTURE.
08: JAVASCRIPT.
09: MISCELLANEOUS.
10: NAVIGATION.
11: TOOLS.
12: USABILITY.

SECTION TWO:
13: What Can You Find at the Web Design Reference Site?

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

The WAVE Accessibility Tool (Tutorial)
By Laura Carlson.
"...In this workshop we will take a look at submitting a page for the
WAVE's evaluation, reading a WAVE report, checking problems, and
strengths and limitations of automated tools..."
http://www.d.umn.edu/itss/training/online/wave/

Do It Yourself Transcripts and Captions
By Deborah Edwards-Onoro.
"This is part 3 in an ongoing series on transcripts and captions for
videos and podcasts..."
http://www.lireo.com/diy-transcripts-captions/	

WordPress Themes Suck at Accessibility: It's Time to Fix It
By Sarah Gooding.
"...One feature, however, sets Simone apart - a heavy emphasis on
accessibility. Rand-Hendriksen believes that the accessibility-ready
tag should be required for all WordPress themes. 'My main inspiration
for accessibility is that I want everyone, regardless of accessibility
challenges, to be able to access all content on the web in the way
they want and/or need,' he said. To that end, he has educated himself
on the requirements for making a WordPress theme accessible. He is,
however, only one among a very small minority of theme developers to
do so..."
http://wptavern.com/wordpress-themes-suck-at-accessibility-its-time-to-fix-it

An Accessible Design Maturity Continuum
By David Sloan.
"We spend an increasing amount of time helping organizations develop a
culture and practice of accessible user experience (AUX). We believe
that the chances of creating more inclusive, more effective, more
enjoyable digital resources and experiences are increased if
accessibility and diversity are integrated into the design approach
right from the start. However, this typically requires a significant
change in thinking and in practice within the organization. In order
to help make this change, it can be useful to identify an
organization's level of what we call accessible design maturity..."
http://blog.paciellogroup.com/2014/06/accessibility-maturity-continuum/

The Visual-Only Icon Problem
By Joe Dolson.
"...Font icons are awesome. They're easy, flexible, scale nicely, load
quickly (as long as you're not going crazy with them) - but they need
some support to have alternative text. Please, take that extra step to
provide it!"
https://www.joedolson.com/articles/2014/06/visual-icon-problem/

Do Not Rely on a Single Sensory Characteristic to Identify Content
By Denis Boudreau.
"Make sure indications in web pages are not depending on a single
sensory perception..."
http://dboudreau.tumblr.com/post/90650860297/do-not-rely-on-a-single-sensory-characteristic-to

Use the title Element to Notify Users of Required Fields Left Blank
By Denis Boudreau.
"Make sure users are notified of required fields left blank as soon as
the page reloads..."
http://dboudreau.tumblr.com/post/90449811047/use-the-title-element-to-notify-users-of-required

Avoid Background Sounds When Sharing Audio Files
By Denis Boudreau.
"Make sure audio files that contain speech information don't have
background sounds"
http://dboudreau.tumblr.com/post/90346259827/avoid-background-sounds-when-sharing-audio-files


+02: CASCADING STYLE SHEETS.

Keep the Focus Outline
By Adrian Roselli.
"...What's so frustrating is that the useful style is then overridden
with this harmful declaration: a:focus {outline: none;} This override
greatly decreases the usability and accessibility of the site.
Unfortunately, this practice is still common on many more sites across
the web. As a web developer, one of the simplest accessibility tests
you can do is unplug your mouse. Two quick things to review as part of
that: Can you interact with all controls with only the keyboard? Can
you tell which item has focus?..."
http://blog.algonquinstudios.com/2014/06/24/keep-the-focus-outline/

CSS Variables (video)
By Ben Schwarz.
"A head-first dive into the past, present and future of all things
variable in CSS. And if this floats your boat, you need to get along
to the Engineering Track at Web Directions 2014."
http://www.webdirections.org/resources/ben-schwarz-css-variables/


+03: COLOR.

Accessible Contrast with Less and Sass
By Mike Riethmuller.
"Contrast is a critical factor in web design, it's important to get
right because it has a strong influence on the visual aesthetic, but
it's especially important for readability and accessibility of text on
the page..."
http://blog.madebymike.com.au/accessible-contrast-ratios-with-less-sass/


+04: DRUPAL.

WAI-ARIA, Requiring Alt Text, and Other Accessibility Features Now in Drupal 8
By Amber Matz.
"On Drupal.org, Drupal 8 promotion is in full-swing. Features and
benefits are being touted and summarized right and left. One of the
categories of improvement summed up on the Drupal 8 features page is
'Accessibility.' I went digging for more information on how
accessibility improvements have been integrated in Drupal 8 and I
found a number of resources on the effort to improve accessibility in
D8. Here's the summary of what's been done according to Drupal.org..."
http://drupalize.me/blog/201406/accessibility-features-drupal-8


+05: EVENTS.

Accessing Social Media
July 17, 2014.
Washington, DC, U.S.A.
http://www.fcc.gov/events/accessing-social-media
Live stream will be at:
http://www.fcc.gov/live


+06: HTML5.

Label and Name Inputs Properly
By Google.
"Forms are hard to fill out on mobile. The best forms are the ones
with the fewest inputs. Good forms provide semantic input types. Keys
should change to match the user's input type; users pick a date in a
calendar. Keep your user informed. Validation tools should tell the
user what they need to do before submitting the form."
https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs

The time Element
By Ty Strong.
"The <time> element in HTML represents a machine-readable date, time,
or duration. It can be useful for creating event scheduling,
archiving, and other time-based functions. WordPress uses the time
element in the default theme. Reddit uses the time element as well."
http://css-tricks.com/time-element/

With Components, Google Agitates for a Revolution in Web Development
By Joab Jackson.
"At the Google I/O conference this week, the company vigorously
lobbied developers to adopt a new programming model, one that could,
the company asserted, make it radically easier to build Web
applications."
http://mobile.techworld.com/news/applications/3527786/with-components-google-agitates-for-a-revolution-in-web-development/


+07: INFORMATION ARCHITECTURE.

The Difference Between Information Architecture (IA) and Navigation
By Jennifer Cardello.
"IA is the information backbone of the site; navigation refers to
those elements in the UI that allow users to reach specific
information on the site..."
http://www.nngroup.com/articles/ia-vs-navigation/


+08: JAVASCRIPT.

Using ARIA in HTML
By Steve Faulkner.
"ARIA (WAI-ARIA if you want to be formal) is a set of attributes that
you can add to HTML elements..."
http://html5doctor.com/using-aria-in-html/

ARIA-dropeffect (Property)
By Rakesh Paladugula.
"Functionalities such as drag and drop are quite common with rich
internet applications. Accessibility of dragging an object or
component from the source region of the page and dropping them at the
target region is a tough task especially with screen readers and
keyboards."
http://www.maxability.co.in/2014/06/aria-dropeffect-property/

Building an Accessible Disclosure Button - Using Web Components
By Cedric Trevisan.
"Web components are the next step in building modern web applications
and a great way to prototype accessible widgets. Today we are going to
build a disclosure widget, by extending the native HTML button
element."
http://blog.paciellogroup.com/2014/06/accessible-disclosure-button-using-web-components/


+09: MISCELLANEOUS.

The Web Ahead Episode 74 - HTML Semantics with Bruce Lawson
By Jen Simmons.
"HTML5 brought more semantic elements to HTML. How's that going? Why
should developers use semantic HTML? Bruce Lawson join Jen Simmons to
discuss HTML, semantics, accessibility, ARIA roles, microformats,
microdata, RDFa, web components, and more."
http://5by5.tv/webahead/74


+10: NAVIGATION.

The Changing Nature of Search Behavior
By Gerry McGovern.
"Search is just one part of the jigsaw puzzle of customer behavior. It
needs to be considered in the context of the customer's task."
http://gerrymcgovern.com/new-thinking/changing-nature-search-behavior


+11: TOOLS.

Tenon.io
By Karl Groves.
"Tenon is built by developers for developers and offers
JavaScript-aware accessibility testing. We think you're going to love
it." Test it at:
http://tenon.io/#testnow

Color Contrast Analyzer for Chrome - Download Feature
By Greg Kraus.
"I just updated the Color Contrast Analyzer for Chrome with a new
feature that lets you download the resulting image analysis as a PNG
file..."
http://accessibility.oit.ncsu.edu/blog/2014/06/20/color-contrast-analyzer-for-chrome-download-feature/

W3C Spell Checker
By W3C.
"This tool allows you to check the spelling of a web page. It
currently only supports English and French..."
http://www.w3.org/2002/01/spellchecker


+12: USABILITY.

Scrolljacking and Accessibility - Are we Breaking the Web?
By Shaumik Daityari.
"...In this post, we will look at a handful of websites employing this
method and how users with assistive technologies might access them.
Accessibility is the practice of making a website features available
to users with all abilities and disabilities. People with visual,
cognitive and motor disabilities use assistive technologies (AT) to
navigate the web. As web developers, it is our duty to make sure that
our websites are compatible with these technologies. In this post, we
will use the screen reader NVDA and attempt to access the websites
through the keyboard only. The web browser used for the purpose is
Chrome 35...."
http://www.sitepoint.com/scrolljacking-accessibility/

Realistic or Flat Design? Be Style Agnostic
By Kent Eisenhuth.
"When creating a new visual design for a software user interface,
don't just adopt the popular style of the year. Instead, get to know
your audience by conducting user research, then deliver a design
that's appropriate for that audience. In this article, I'll offer some
process tips that will help you to make your next visual design
project a success...."
http://www.uxmatters.com/mt/archives/2014/06/realistic-or-flat-design-be-style-agnostic.php

What to Do When Your Boss Insists That You Use Pop-Up Banner Advertising?
By Janet M. Six.
"..."Explain the value of the more usable design and address any
objections that the stakeholder might have...More often than not
research and analysis will direct design appropriately..."
http://www.uxmatters.com/mt/archives/2014/06/what-to-do-when-your-boss-insists-that-you-use-pop-up-banner-advertising.php

Are Hollow Icons Really Harder to Recognize Than Solid Icons? A Research Study
By Curt Arledge.
"...an icon's style doesn't exist in isolation, but interacts with
other attributes like color to create compounding effects on
usability. Furthermore, less than half of the icons in my set of 20
performed better in a solid style than a hollow style. A different set
of icons would likely result in a different overall result..."
http://viget.com/inspire/are-hollow-icons-really-harder-to-recognize-a-research-study


[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

Drupal Information.
http://www.d.umn.edu/itss/training/online/webdesign/drupal.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

HTML Information.
http://www.d.umn.edu/itss/training/online/webdesign/html.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 at d.umn.edu


[Issue ends.]

More information about the Webdev mailing list