Topics

[webdev] Web Design Update: September 27, 2018

David Dillard
 



 [webdev] Web Design Update: September 27, 2018

 




Laura Carlson <lcarlson@d.umn.edu>

Sep 27, 2018, 7:20 AM
to webdev
+++ WEB DESIGN UPDATE.
- Volume 17, Issue 14, September 27, 2018.

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

++ISSUE 14 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: EVALUATION & TESTING.
04: EVENTS.
05: HTML.
06: JAVASCRIPT.
07: MISCELLANEOUS.
08: TOOLS.
09: TYPOGRAPHY.
10: USABILITY.


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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Exploring WCAG 2.1 - 2.3.3 Animations from Interaction
By Becky Gibson.
"Our series on the new WCAG 2.1 Success Criteria continues with the
last of the success criteria to focus on cognitive accessibility.
Level AAA success criterion 2.3.3, Animations from Interactions,
limits unexpected motion. It falls under guideline 2.3, Seizures and
Physical Reactions…"
https://knowbility.org/blog/2018/WCAG21-233Animations/

10 Things People With Disabilities Wish Online Retailers Knew
By Derek Featherstone.
"…15 percent of people worldwide have a disability that affects their
daily life, according to the United Nations, and many retailers are
unaware that their websites are not always accessible to them…"
https://www.ecommercetimes.com/story/85578.html

What Happens with aria-labelledby, aria-label and aria-describedby on
Static HTML Elements?
By David MacDonald.
David updated his article on aria-label on static content to include
aria-labelledby, aria-describedby and Talkback testing results.
http://davidmacd.com/blog/does-aria-label-override-static-text.html

Making Electronic Documents Accessible
By Minnesota IT Services (MNIT).
"These resources can help make sure your documents are accessible to everyone…"
https://mn.gov/mnit/about-mnit/accessibility/electronic-documents.jsp

Universal Design for Learning and Digital Accessibility: Compatible
Partners or a Conflicted Marriage?
By Judith Ableser and Christina Moore.
"UDL and digital accessibility's perceived tensions can be reduced
when institutions create and follow an implementation plan…Conflicts
arise, however, because accessibility accommodations can sometimes
complicate efforts to quickly disseminate flexible learning options to
a broad student population…"
https://er.educause.edu/articles/2018/9/universal-design-for-learning-and-digital-accessibility-compatible-partners-or-a-conflicted-marriage

A Plan for Accessible Charts
By Benjy Stanton.
"A list of user research findings, accessibility report findings, best
practice, resources and good ideas that I've collected over the past 2
years…"
https://www.benjystanton.co.uk/blog/a-plan-for-accessible-charts/

Accessibility Cheatsheet
By Moritz Giessmann.
"Practical approaches to Universal Design for making your
website/webapp accessible to everyone…"
https://moritzgiessmann.de/accessibility-cheatsheet/

Understanding SC 1.3.3 Sensory Characteristics
By Sathish Kumar.
"This success criterion requires that instructions or information to
understand or operate the web content do not use only visual or
auditory clues…"
https://www.digitala11y.com/understanding-sc-1-3-3-sensory-characteristics/

ADA Web Accessibility Lawsuit Report [Infographic]
By UsableNet.
"…UsableNet's research team has complied and published the below
Infographic after tracking court cases for the last 12 months…"
http://blog.usablenet.com/ada-web-accessibility-lawsuit-report-infographic

Are Automatic Captions WCAG, ADA, or 508 Compliant?
By Sofia Enamorado.
"In order to avoid litigation, it's important to make sure that your
content is captioned. But that's not all. Inaccurate and intelligible
captions are not accessible…"
https://www.3playmedia.com/2018/09/24/automatic-captions-wcag-ada-508-compliant/

What You Can Learn from Major Accessibility Lawsuits
By Samantha Sauld.
"…Read on to learn more about what your organization can learn from
recent accessibility lawsuits, and how to increase accessibility all
at the same time…"
https://www.3playmedia.com/2018/09/20/accessibility-lawsuits/


+02: CASCADING STYLE SHEETS.

All Fired Up About Specificity
By Chris Coyier.
"You never know where the next Grand Debate in front-end is going to come from…"
https://css-tricks.com/all-fired-up-about-specificity/

Responsive Images
By Mat Marquis.
"I come here not to bury img, but to praise it. Well, mostly…"
https://alistapart.com/article/responsive-images

New Tools for CSS Layout
By Rachel Andrew.
"A presentation at W3C Workshop on Digital Publication Layout and
Presentation in September 2018 in Tokyo, Japan…"
https://noti.st/rachelandrew/tJeWKI/new-tools-for-css-layout

Putting Things on Top of Other Things
By Isabel Brison.
"…that is the gist of it: stacking contexts are caused by a variety of
properties and the main reasons for their existence are performance
concerns and ease of implementation by browsers. They are not always
related to z-index or ordering; they pop up wherever it makes sense to
have several elements all on the same layer for rendering purposes…"
http://tellthemachines.com/stacking-contexts/

Don't Use Empty or Low Content for Your Design System Grid Examples
By Chris Coyier.
"Dave and I had Jen Simmons on ShopTalk the other day. Jen was talking
about Intrinsic Web Design and how one of the core tenets of it is
grids with rows and columns that don't necessarily change at the same
rate or ones that have essentially different rules for how they
behave. "
https://css-tricks.com/putting-things-on-top-of-other-things/


+03: EVALUATION & TESTING.

Creating Personas Is Like Sorting Rocks (Video)
By Kim Flaherty.
"Analyzing data to identify meaningful segments of users is the most
difficult part of persona creation. In this video we'll discuss how to
look for similarities in various attributes using something much more
straightforward than people: rocks!"
https://www.nngroup.com/videos/creating-personas-sorting-rocks/


+04: EVENTS.

Accessibility 101 with Girl Develop It
October 2, 2018, 6:30pm Central Time.
Chicago, Illinois, U.S.A.
https://www.meetup.com/a11ychi/events/254792069/
Live Stream URL: https://www.youtube.com/watch?v=7sVrPf9fvn0
Live Captions: http://www.streamtext.net/player?event=CDA

Technica11y
October 2, 2018. (Nic Steenhout presenter)
Additional dates are listed for future presentations.
Online.
https://zoom.us/webinar/register/WN_JWCKbDSwRNOqRuByD8emvA

CascadiaJS 2018
November 15-16, 2018.
Seattle, Washington, U.S.A.
https://2018.cascadiajs.com/

Easy Accessibility Fixes
November 19, 2018.
Minneapolis, Minnesota, U.S.A.
https://www.meetup.com/Accessibility-Twin-Cities/events/253346733/

OZeWAI Conference 2018
November 21-23, 2018.
Sydney, Australia
http://ozewai.org/2018/

2018 Legal Update on Digital Access Cases with Lainey Feingold
November 29, 2018.
Online
https://www.3playmedia.com/resources/webinars/webinar-registration-11-29-2018/

TechShare Pro 2018
November 29, 2018.
London, England, United Kingdom
https://www.eventbrite.co.uk/e/techshare-pro-2018-tickets-48443414557


+05: HTML.

The State of fieldset Interoperability
By Simon Pieters.
"As part of my work at Bocoup, I recently started working with browser
implementers to improve the state of fieldset, the 21 year old feature
in HTML, that provides form accessibility benefits to assistive
technologies like screen readers…"
https://blog.whatwg.org/the-state-of-fieldset-interoperability

The State of Fieldset Interoperability - Bocoup
By Jeremy Kieth.
"…I'm a little shocked that the solution involves extending
-webkit-appearance. I think that, at this point, we should be trying
to get rid of vendor prefixes from the web once and for all, not
adding to them. Still, needs must, I suppose."
https://adactio.com/links/14366


+06: JAVASCRIPT.

WAI-ARIA Menus, and Why You Should Generally Avoid Using Them
By Marco Zehe.
"The WAI-ARIA standard defines a number of related menu roles.
However, in 99% of all cases, these should not be used."
https://www.marcozehe.de/2018/09/22/wai-aria-menus-and-why-you-should-generally-avoid-using-them/

Much Ado About ARIA
By Carie Fisher.
"…ARIA was first developed in 2008 by the Web Accessibility Initiative
(WAI) group - a subset of the overarching World Wide Web Consortium
(W3C) who govern and regulate the internet. ARIA is an acronym for
'Accessible Rich Internet Applications' and is formally called
WAI-ARIA (but many people call it by its abbreviated name)…"
https://www.deque.com/blog/much-ado-about-aria/

Tenon's Accessible React Components - Coming soon to an NPM repo near you.
By Almero Steyn.
"…Being an accessibility company, it may come as a surprise that we
are using React to build the interactive parts of our web application.
However, we embrace modern tooling, as long as it doesn't stand in the
way of accessibility. Used correctly, tools like React can expedite
the creation of complex applications by making codebases highly
maintainable and easily testable while accelerating productivity
through the reuse of solid, accessible components…"
https://blog.tenon.io/tenons-accessible-react-components-coming-soon-to-an-npm-repo-near-you/

The Costs and Benefits of Tracking Scripts - Business vs. User
By Sebastian Greger.
"…I am having a hard time seeing the business benefits weighing in
more than the user cost (at least for those many organisations out
there who rarely ever put that data to proper use). After all, keeping
the costs low for the user should be in the core interest of the
business as well…"
https://sebastiangreger.net/2018/09/the-costs-and-benefits-of-tracking-scripts-business-vs-user/


+07: MISCELLANEOUS.

How to Build a Low-tech Website?
By Kris De Decker.
"Our new blog is designed to radically reduce the energy use
associated with accessing our content…Thanks to a low-tech web design,
we managed to decrease the average page size of the blog by a factor
of five compared to the old design - all while making the website
visually more attractive (and mobile-friendly). Secondly, our new
website runs 100% on solar power…"
https://solar.lowtechmagazine.com/2018/09/how-to-build-a-lowtech-website/

A Short Guide to Minimal Web Development
By Jens Oliver Meiert.
"There's an art and even a bit of magic around simple frontend code…"
https://meiert.com/en/blog/minimal-web-development/

Inclusive Design: Unlearning to Include and Innovate (Video)
By Jutta Treviranus.
"Jutta will present two assumptions that have become so central to our
daily practice that we are no longer conscious of them. These two
assumptions - tied to research methods, design, data analytics, AI and
even our world views - have scaled and infused all of our thinking and
practices, especially our foundational ideas about design, innovation
and business. Every dilemma we are facing today can be traced back to
these assumptions. She proposes turning these assumptions
upside-down…"
https://www.youtube.com/watch?v=uE543v8kj50

Interview with Mike Gifford, Drupal 8 Core Accessibility Maintainer
By Ana.
"…This week we talked with Mike Gifford. Read about what his company
is striving to achieve, where he thinks has been a lot of movement in
the last 2 years regarding Drupal and what contribution to open source
is he proud of…"
https://www.agiledrop.com/blog/interview-mike-gifford-drupal-8-core-accessibility-maintainer

Episode #139 (Video)
Interview with Patrick Lauke when he was at the CSSMinsk conference.
https://www.youtube.com/watch?time_continue=1844&v=aZP_ZigqM1k
Patrick's WAI-ARIA CSSMinsk slides.
https://patrickhlauke.github.io/aria/presentation/

Web Design Legends: Where Are They Now?
By Marko Bijelic.
"In 2004, Cameron Moll posted a cult list of 'who is who' in web
design. Where are those people today?…"
https://medium.com/hipinspire/web-design-legends-where-are-they-now-becfa4f481ff


+08: TOOLS.

What Has Focus? (Bookmarklet)
By Scott Vinkle.
"When something recieves keyboard focus via Tab key, the current
element will be logged to the JavaScript console so you can determine
which element currently has focus! This will come in handy when
debugging accessibility issues with somebody else's code or a
third-party library."
https://codepen.io/svinkle/pen/WgYRxq

ColorBox
By Lyft Design.
"Colorbox is a tool to produce color sets open-sourced by Lyft's design team."
https://www.colorbox.io/


+09: TYPOGRAPHY.

CSS Fonts Module Level 3
John Daggett, Myles C. Maxfield, and Chris Lilley, Editors (W3C).
"This CSS3 module describes how font properties are specified and how
font resources are loaded dynamically. The contents of this
specification are a consolidation of content previously divided into
CSS3 Fonts and CSS3 Web Fonts modules. The description of font load
events was moved into the CSS Font Loading module…"
https://www.w3.org/TR/css-fonts-3/

State of the Web: Web Fonts (Video)
By Deborah Edwards-Onoro.
"…Check out this 11-minute State of the Web video with Rick Viscomi
and Dave Crossland to discover how you can use Google Fonts
effectively, what's new with Google Fonts, and where you can go to
learn more…"
https://www.lireo.com/state-of-the-web-web-fonts-video/


+10: USABILITY.

Usability in the Physical World vs. on the Web (Video)
By Jakob Nielsen.
"In the real world, you can get away with causing customers a small
amount of difficulty, but on a website, visitors will leave at the
smallest obstacle."
https://www.nngroup.com/videos/usability-physical-world-vs-web/

Change Blindness in UX: Definition
By Raluca Budiu.
"Significant changes in a web page can remain unnoticed when they lack
strong cues, due to the limitations of human attention."
https://www.nngroup.com/articles/change-blindness-definition/

The UX of Banking Websites
By Jeff Sauro.
"…To understand the current state of the banking user experience, we
benchmarked the desktop user experience of six top personal banking
websites…"
https://measuringu.com/banking-ux/

A Framework for Web Performance
By Jeremy Keith.
"Here at Clearleft, we've recently been doing some front-end
consultancy. That prompted me to jot down thoughts on design
principles and performance…"
https://adactio.com/journal/14355


[Section one ends.]


++ SECTION TWO:

+11: 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@d.umn.edu


[Issue ends.]

Preview YouTube video Speaker Series: Inclusive Design

Preview YouTube video Episode #139