+++ 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.]