+++ WEB DESIGN UPDATE. - Volume 17, Issue 02, July 6, 2018. An email newsletter to distribute news and information about web design and development. ++ISSUE 02 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: HTML. 07: JAVASCRIPT. 08: MISCELLANEOUS. 09: NAVIGATION. 10: PHP. 11: TYPOGRAPHY. 12: USABILITY. SECTION TWO: 13: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. I Used The Web For A Day With Just A Keyboard By Chris Ashton. "Many of us are taught to make sure our sites can be used via keyboard. Why is that, and what is it like in practice? Chris Ashton did an experiment to find out…" https://www.smashingmagazine.com/2018/07/web-with-just-a-keyboard/ Artificial Intelligence for Web Accessibility - Conformance Evaluation as a Way Forward? By Shadi Abou-Zahra, Judy Brewer, and Michael Cooper. "For people with disabilities there are immense potential…However, a significant drawback of artificial intelligence for web accessibility at this time is a lack of accuracy and reliability…" https://dspace.mit.edu/handle/1721.1/116479 Revised "Inaccessibility of CAPTCHA" Draft for Review By Janina Sajka. "…Web Content Accessibility Guidelines 2.0 and 2.1 refer to the requirement for accessible CAPTCHA in Success Criterion 1.1.1 Non-Text Content. This document is an important complement to that requirement which provides more detail on how to meet these requirements, and relevant considerations in accessible authentication of Web users…" https://www.w3.org/blog/2018/07/captcha-update/ Exploring WCAG 2.1 - 2.5.3 Label in Name By Becky Gibson. "Our series of new WCAG 2.1 Success Criteria continues with the next success criterion within the new 2.5 Input Modalities guideline: 2.5.3 Label in Name…" https://knowbility.org/blog/2018/WCAG21-253LabelInName/ What's New with WCAG 2.1 (Video) By Andrew Macpherson, Drupal 8 Core Accessibility Maintainer. "The long-awaited updates to the Web Content Accessibility Guidelines (WCAG 2.1) were released in early June - but what does that mean for you and your organization?" https://www.youtube.com/watch?v=6uCCDTwpIlo How Technology Can Shut Out People with Disabilities By Simon Dermer. "If the recent, updated 2.1 release of the Web Content Accessibility Guidelines (WCAG) demonstrates anything, it's that technology is swiftly changing, and keeping up with it from an accessibility perspective is an ongoing effort. But that's only because the needs of people with disabilities typically aren't heeded from the get-go…" http://techtrends.tech/tech-trends/expert-view-how-technology-can-shut-out-people-with-disabilities/ Automated Testing is Not Enough For Web Accessibility ADA Compliance By Giacomo Petri and Christian Federici. Over 80% of WCAG 2.0 Success Criteria requires Manual Review and 100% of the new WCAG 2.1 Success Criteria will require the same…" http://blog.usablenet.com/automated-testing-is-not-enough-for-web-accessibility-ada-compliance Accessible Word Document Training By Minnesota IT Services. "This is the State of Minnesota e-Learning program on how to create accessible documents…" https://mn.gov/mnit/programs/accessibility/training/ AccessAbility: A Practical Handbook on Accessible Graphic Design (PDF) By The Association of Registered Graphic Designers of Ontario. "All design by definition promotes accessibility…" https://www.rgd.ca/database/files/library/RGD_AccessAbility_Handbook.pdf Hit Refresh - Eleventh Circuit Decision Opens Door for Copycat ADA Lawsuits By Eversheds Sutherland. "…Eleventh Circuit ruled that the private settlement of an ADA website accessibility suit and ongoing remediation efforts by the defendant pursuant to that settlement, do not bar an ADA accessibility action filed later with respect to the same website…" https://us.eversheds-sutherland.com/NewsCommentary/Legal-Alerts/212601/Legal-Alert-Hit-refreshEleventh-Circuit-decision-opens-door-for-copycat-ADA-lawsuits +02: CASCADING STYLE SHEETS. :focus-visible By Chris David Mills, Rob Dodson, et al. "The :focus-visible pseudo-class applies while an element matches the focus pseudo-class and the UA determines via heuristics that the focus should be made evident on the element…" https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible CSS Grid Level 2: Here Comes Subgrid By Rachel Andrew. "CSS Grid Level 2 is already in the process of being specified, and the main feature of this level of the spec is to bring us subgrid. In this article, Rachel Andrew explains the new features…" https://www.smashingmagazine.com/2018/07/css-grid-2/ Clearfix: A Lesson in Web Development Evolution By Jason Hoffman. "…I thought it might be fun (and fascinating) to actually follow this creative exchange all the way through. To take a look at a popular CSS trick, the clearfix, and find out exactly how a web design technique comes to be…" https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/ CSS-in-JS: FTW || WTF? (Video) By Bruce Lawson. "Here's the video of my closing keynote at CSSDay.nl…" https://www.brucelawson.co.uk/2018/css-in-js-ftw-wtf/ One-Offs By Chris Coyier. "…with the 36 flavors of CSS-in-JS. When your styles are attached to your components, all components are one-offs. Stop using that component, stop using those styles." https://css-tricks.com/one-offs/ +03: COLOR. The Science of Color Contrast - An Expert Designer's Guide By Justin Baker. "Understanding the complexity of color contrast for better design and accessibility…" https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156 +04: EVALUATION & TESTING. Anatomy of a User Research Consent Form By David Travis. "We've always treated the informed consent process seriously and we have always gained explicit consent from people that take part in our field visits and usability tests. Although I think we do a good job of gaining consent, the advent of GDPR gave us an opportunity to review what we do. We were interested if there was a way we could improve our practice." https://www.userfocus.co.uk/articles/anatomy-of-a-consent-form.html Match Between the System and the Real World: The 2nd Usability Heuristics Explained By Anna Kaley. "Systems should speak the users' language with familiar words, phrases, and concepts rather than system-oriented terms. Interfaces that follow real-world conventions and make information appear in a natural and logical order demonstrate empathy and acknowledgement for users." https://www.nngroup.com/articles/match-system-real-world/ +05: EVENTS. PHPDetroit Conference July 26-28, 2018. Livonia, Michigan, U.S.A. https://phpdetroit.io/ Hue Design Summit July 26-29, 2018. Atlanta, Georgia, U.S.A. http://huedesignsummit.com/ NEJS Conf July 27, 2018. Omaha, Nebraska, U.S.A. https://2018.nejsconf.com/ UX Camp California July 27-29, 2018. Annapolis, California, U.S.A. http://uxcamp.com/california/index.html That Conference August 6-8, 2018. Wisconsin Dells, Wisconsin, U.S.A. https://www.thatconference.com/ ConvergeSE August 8-10, 2018. Columbia, South Carolina, U.S.A. http://convergese.com/ Southeast PHP Conference August 16-17, 2018. Nashville, Tennessee, U.S.A. https://southeastphp.com/ +06: HTML. Anatomy of Accessible Forms: Errors of the ways By Raghavendra Satish Peri. "When we submit user data as in financial transactions, travel and entertainment bookings, or in filling surveys, it is quite common that we make mistakes…" https://www.digitala11y.com/anatomy-of-accessible-forms-errors-of-the-ways/ +07: JAVASCRIPT. Easy ARIA Tip #8: Use aria-roledescription to Selectively Enhance the User Experience By Maro Zehe. "In WAI-ARIA 1.1, the aria-roledescription attribute has been added to give web authors the ability to further describe the function of a widget. Here are a few tips for usage…" https://www.marcozehe.de/2018/07/05/easy-aria-tip-8-use-aria-roledescription-to-selectively-enhance-the-user-experience/ aria-roledescription (property) By Rakesh Paladugula. "Aria-roledescription property is new in ARIA 1.1 specification…" http://www.maxability.co.in/2018/07/aria-roledescription-property/ Accessible Carrousel Using ARIA By Nicolas Hoffmann. "This script will transform some Hx/contents into a nice accessible carrousel, using ARIA…" https://van11y.net/accessible-carrousel/ The Power and the Danger of WAI-ARIA: Speech Recognition Edition By Deborah Kaplan. "Use ARIA, and use it wisely…" https://deborah.dreamwidth.org/84274.html Is the new world of JavaScript confusing or intimidating? I thought so, and recorded a video course how to feel better By Christian Heilmann. "JavaScript used to be easy. Misunderstood, but easy…" https://christianheilmann.com/2018/07/03/is-the-new-world-of-javascript-confusing-or-intimidating-i-thought-so-and-recorded-a-video-course-how-to-feel-better/ The Cost Of JavaScript (Video) By Addy Osmani. "…Addy Osmani explains how and why JavaScript is the most expensive resource your site uses today-especially on mobile. Addy also shares tips for fixing JavaScript performance issues so everything loads quicker. A little discipline can help if you want your site to load and be interactive as soon as possible on mobile. Originally presented at Fluent Conf 2018 in San Jose." https://www.youtube.com/watch?v=63I-mEuSvGA +08: MISCELLANEOUS. 'I Was Devastated': Tim Berners-Lee, the Man Who Created the World Wide Web, Has Some Regrets By Katrina Brooker. "Berners-Lee has seen his creation debased by everything from fake news to mass surveillance. But he’s got a plan to fix it." https://www.vanityfair.com/news/2018/07/the-man-who-created-the-world-wide-web-has-some-regrets An Ode to Web Pages By Blake Watson. "Challenge: Make a web page. Make it about anything you want. Put it on your web server or hosting service." https://www.blakewatson.com/journal/an-ode-to-web-pages/ +09: NAVIGATION. Skip Navigation (Video) By Microsoft. "What are the accessibility requirements for allowing users to bypass blocks of content? Learn about the skip navigation link on webpages with this short video." https://www.youtube.com/watch?v=PrPPz8KbWmU +10: PHP. Improve Your PHP Performance By Upgrading To PHP 7 By Steven Bradley. "…Today I want to talk about PHP 7 and about how and why it's faster than the versions that came before it. I'm hoping to convince you to upgrade if you haven't already done so…" https://vanseodesign.com/web-design/performance-php-7/ +11: TYPOGRAPHY. Notes on Font Stacks for CJK By Jonathan Snook. "Working on a client project, we needed a font stack that would work for Chinese, Japanese, and Korean, (aka CJK) along with all the usual Latin locales…" https://snook.ca/archives/html_and_css/cjk-font-stack-notes +12: USABILITY. The Hidden Cost of Touch Screens By Amber Case. "…Serious interfaces - those that are repeatedly used by a knowledgeable professional and/or in potentially hazardous situations, should not be touchscreen based. If a touchscreen must be used, it should be embedded alongside a set of fixed, physical buttons that support muscle memory and single actions…" https://medium.com/@caseorganic/why-do-we-keep-building-cars-with-touchscreens-alt-the-hidden-lives-of-touchscreens-55faf92799bf Icon Usability and Design Best Practices By Micah Bowers. "…The ultimate aim of icon usability and design is to enhance the user experience, not confuse it. But what does that look like, and how can user interface designers ensure that the icons they make will be easily understood?…" https://www.toptal.com/designers/ui/icon-usability-and-design Order Out of Chaos: Patterns of Organization for Writing on the Job By Richard Rabil, Jr. "The meaning of what you write isn't only the the words. The sequence of information, the categories you use, the emphasis you imply through your hierarchy-all of these decisions have a huge influence on audience understanding. Richard Rabil, Jr., explains how to use foundational patterns of organization to help you convey what you mean to say." https://alistapart.com/article/order-out-of-chaos-patterns-of-organization-for-writing-on-the-job 10 Small Design Mistakes We Still Make By Eugen Eşanu. "…We should be told at least once a month about these small principles until we live and breath good design…" https://uxplanet.org/10-small-design-mistakes-we-still-make-1cd5f60bc708 The State of Transactional Email By Kate Moran. "Automated email messages are more usable than they used to be. Good transactional email should be concise, clear, and easy for users to process." https://www.nngroup.com/articles/state-transactional-email/ [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@d.umn.edu [Issue ends.]