[webdev] Web Design Update: May 25, 2017

David P. Dillard



Date: Thu, 25 May 2017 06:25:44 -0500
From: Laura Carlson <>
To: webdev <>
Subject: [webdev] Web Design Update: May 25, 2017


- Volume 15, Issue 48, May 25, 2017.

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


SECTION ONE: New references.

What's new at the Web Design Reference site?

New links in these categories:




04: HTML5.



07: TOOLS.




10: What Can You Find at the Web Design Reference Site?

[Contents ends.]

++ SECTION ONE: New references.


GAAD: I Wish I'd Known...

By Ian Pouncey.

"To celebrate Global Accessibility Awareness Day we've asked our
accessibility engineers for things they wish they'd known when
starting out in accessibility...

Pragmatic Accessibility: A How-To Guide for Teams (Video)

By Rob Dodson.

"...This talk will explain how to effectively review a site for
accessibility and how to build accessibility considerations into your
team process so each team member knows their role, and has the
appropriate training material. The goal is for attendees to walk away
with an actionable process which they can immediately use to assess
and improve their products' accessibility and overall user

Accessible Focus Management: Tab Order vs Focus Placement

By Mark Magennis.

"Ive been working on a video-based eLearning platform recently. We
(the client and myself) seem to have tied ourselves in knots regarding
how best to implement tab order and focus placement to give the most
efficient user experience for sighted keyboard users and screen reader
users. Having finally unravelled those knots, it all looks pretty
simple really so I thought I'd share it..."

Anatomy of an Accessible Auto Suggest

By Adem Cifcioglu.

"...These are my requirements to make an auto-suggest accessible. I've
included code snippets throughout and linked to a working codepen at
the end of the post..."

UX of Stairs: When Simple Tasks Aren't So Simple (Video)

By Greg Tarnoff.

"As a user experience professional, I work hard to consider the end
user in developing products. However, without knowing it we all bring
a bias to our work simply because we haven't experienced certain
things others have. This bias leaves our products and users
wanting...Two years ago my eyes were opened to this as I developed a
disability that changed everything in my life. 'UX of Stairs'
discusses the impact on my life this illness has had as well as how it
opened my eyes to things in the physical and digital worlds that
previously went unnoticed by me and many others...

Quick Reference Checklist for Graphic Designers (PDF)

By Tagged PDF.

"Use the checklist below to ensure you are designing (PDFs)for accessibility..."

Glacial Progress on Digital Accessibility

By Carl Straumsheim.

"Data from 700,000 classes show digital course materials have gotten
only slightly more accessible to students with disabilities over the
last five years..."

Example Legal Action Against Inaccessible Websites

By Ken Nakata.

"...Organizations continuously come under fire from accessibility
advocates, and recent litigation is targeting compliance with WCAG 2.0
Level A and AA..."


Website Accessibility in the United States: What Are Your Requirements

Under the ADA?

By Karl Groves.

"...Whether or not ADA explicitly states that Websites must be
accessible, one thing is for sure: The DOJ believes they should be and
so do a whole pile of plaintiffs. Being proactive about accessibility
turns the whole thing into a non-issue."

Miami-Dade County Public Schools Settles Digital Discrimination Lawsuit


"Consent decree guarantees hearing impaired have equal access to
closed caption video content, according to J. Courtney Cunningham,


A Very Good Time to Understand CSS Layout

By Rachel Andrew.

"I've been building a set of common UI patterns for my CSS Grid
resource site, Grid by Example..."

Gridded Headings

By Eric A. Meyer.

"In my ongoing experiments with both a realignment of meyerweb's
design and CSS Grid, I came up with an interesting
heading-and-subheading technique I'd like to share. It allows two
elements to be centered as a block, while letting them text-align with
respect to each other, while still line-wrapping if necessary."

Learn CSS Grid

By Jonathan Suh.

CSS Grid is a powerful tool that allows for two-dimensional layouts to
be created on the web.

+03: EVENTS.

Web Rebels
June 1-2, 2017.
Oslo, Norway

UX Burlington
June 9, 2017.
Burlington, Vermont, U.S.A.

Achieving Web Accessibility: Make Sure Your Online Presence Works - For Everyone
June 14, 2017.
Watertown, Massachusetts, U.S.A.

WCAG 2.0 - Operable
June 21, 2017.
Chicago, Illinois, U.S.A.

+04: HTML5.

Google's Proprietary Fork of HTML Is Taking Over the Open Web

By Nick Heer.

"Ingrid Lunden, TechCrunch: As Google looks for ways to keep people
using its own mobile search to discover content - in competition with
apps and other services like Facebook's Instant Articles - the company
is announcing some updates to AMP, its collaborative project to speed
up mobile web pages..."


Why IA Matters for UX - A Brief History of Information Architecture

By Lucia Z.Wang.

"...A well-designed wayfinding system helps us navigate a new
environment in order to answer the following questions..."


To ARIA! The Cause of, and Solution to, All Our Accessibility Problems

By Jon Whiting.

"When WebAIM evaluates a client's website for accessibility, we often
spend more time evaluating and reporting on ARIA use than any other
issue. Almost every report we write includes a section cautioning
against ARIA abuse and outlining ARIA uses that need to be corrected
or, most often, removed. Ironically, this is often followed by a list
of issues that can only be addressed with ARIA..."

+07: TOOLS.

CADET from NCAM: Free Captioning Tool for Online Videos

By Geoff Freed.

"CADET is free, downloadable caption-authoring software that enables
anyone to produce high-quality caption files that are compatible with
any media player that supports the display of captions..."

JavaScript Bookmarklets for Accessibility Testing

By Paul J. Adam.

"Bookmarklets for Accessibility Testing use JavaScript to highlight
roles, states, and properties of accessibility elements on the page.
They are accessible to screen reader users and work on any browser
including mobile phones..."

Announcing the BarrierBreak CSS Accessibility Extension

By Shwetank Dixit.

"Happy Global Accessibility Awareness Day, 2017! We see it fitting to
announce a nifty little project we've been working on. It's a browser
extension called the BarrierBreak CSS Accessibility Extension and you
can install it in Chrome right now..."


By Zhi An ‚ÄčNG.

"ChromeLens is a Google Chrome extension that provides a suite of
tools to help with web accessibility development."


The Rules of Responsive Web Typography

By Zell Liew.

"...This article aims to provide both designers and developers with
the foundation from which to begin communication on the subject of
typography. We will cover necessary design principles and explore
practical solutions for responsive typography..."


Designing UX: Forms

By Jessica Enders.

"This is an excerpt from Chapter 5 of Jessica Enders's new book
Designing UX: Forms."

Big Pictures on Small Screens: Remove, Resize or Reorganize

By Amy Schade.

"When using large-screen images on smaller screens, remove images that
don't add information. Then, pay close attention to cropping, scaling
and placement."

Low-Hanging Fruits For Enhancing Mobile UX

By Nick Babich.

"... In today's article, I'll share seven UX design tips that I think
are key for creating really great mobile user experiences..."

Brand Vocabulary in the Context of UX: Key Terms Defined

By Sarah Gibbons.

"A cheat sheet of brand-related terms will help designers, developers,
and product managers design experiences that reflect an organization's

Your Digital Interface is Your Brand

By Gerry McGovern.

"...In the world of digital it is the digital architecture interface
that creates the first and lasting impressions. Organizations need to
take as much care of their digital buildings as they used to take of
their physical buildings."

[Section one ends.]


+10: What Can You Find at the Web Design Reference Site?

Accessibility Information.

Association Information.

Book Listings.

Cascading Style Sheets Information.

Color Information.

Drupal Information.

Evaluation & Testing Information.

Event Information.

HTML Information.

Information Architecture Information.

JavaScript Information.

Miscellaneous Web Information.

Navigation Information.

PHP Information.

Sites & Blogs Listing.

Standards, Guidelines & Pattern Information.

Tool Information.

Typography Information.

Usability Information.

XML Information.

[Section two ends.]



WEB DESIGN UPDATE is available by subscription. For information on how
to subscribe and unsubscribe please visit:

The Web Design Reference Site also has a RSS 2.0 feed for site updates.


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:


Until next time,

Laura L. Carlson

Information Technology Systems and Services

University of Minnesota Duluth

Duluth, MN U.S.A. 55812-3009

[Issue ends.]