+++ WEB DESIGN UPDATE. - Volume 18, Issue 35, February 26, 2020. An email newsletter to distribute news and information about web design and development. ++ISSUE 35 CONTENTS. SECTION ONE: New references. What's new at the Web Design Reference site? https://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: TOOLS. 10: USABILITY. SECTION TWO: 11: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. One of My Favourite Accessibility Testing Tools: The Tab Key. By Manuel Matuzovic. "…The Tab key is awesome. You don't need to learn a software to get started with accessibility testing, the Tab key will tell you a lot about the quality of your website. There's more you have to check, but testing with the keyboard brings you one step closer to creating an inclusive website." https://www.matuzo.at/blog/testing-with-tab/ Authoring the Authors: Accessibility Best Practices for Content Authors By Raghavendra Satish Peri. "…Let's explore each of those WCAG 2.1 success criterion that a content author need to understand and implement…" https://www.digitala11y.com/authoring-the-authors-accessibility-best-practices-for-content-authors/ Leverage Reduced Motion for More Accessible Web Animation (Hat tip to Deborah Edwards-Onoro) By Nicole Witte. "…You can responsibly serve motion while providing users the option to turn it off with a few lines of CSS…" https://www.thinkcompany.com/2020/01/leverage-reduced-motion-for-more-accessible-web-animation/ iOS Accessibility Testing for Devs using Voice Control (Video) By Chris McMeeking. "Learn how to use the Voice Control feature in iOS 13 to quickly and easily find accessibility bugs." https://www.youtube.com/watch?v=72YySyRkRh4 Online Workshop: Learn to Author Accessible Content By Deborah Edwards-Onoro. "…In the full-day workshop, Emily Lewis will demonstrate how to solve common accessibility issues with standardized code to build faster pages for better search engine optimization (SEO)…" https://www.lireo.com/workshop-author-accessible-content/ Digital Accessibility in Government Organizations: Where Do Things Stand Right Now? By Dave Herr. "A sneak peek into the current landscape of digital accessibility in government organizations…" https://commonlook.com/digital-accessibility-in-government-organizations-where-do-things-stand-right-now/ Landmark Agreements Establish New Model For Online Accessibility in Higher Education And Business By National Association of the Deaf. "Settlement with MIT follows similar agreement with Harvard University to caption online content. Agreements represent the most comprehensive set of online accessibility requirements…" https://www.nad.org/2020/02/18/landmark-agreements-establish-new-model-for-online-accessibility-in-higher-education-and-business/ MIT to Caption Online Videos after Discrimination Lawsuit By Alanna Durkin Richer. "The Massachusetts Institute of Technology has agreed to provide captions for more of its publicly available online videos as part of a settlement announced Tuesday in a case that accused the school of discriminating against people who are deaf or hard of hearing…" https://www.pbs.org/newshour/education/mit-to-caption-online-videos-after-discrimination-lawsuit +02: CASCADING STYLE SHEETS. Styling The Good Ol' Button Element By Ahmad Shadeed. "…In this article, I will walk you through the fine details of a button element and how to style it perfectly to ensure that it works great on all browsers…" https://ishadeed.com/article/styling-the-good-old-button/ Learn CSS Positioning By Ahmad Shadeed. "Are you ready to start learning about how positioning works in CSS? This interactive article is for you…" https://ishadeed.com/article/learn-css-positioning/ When CSS Blocks By Tim Kadlec. "The other day I was auditing a site and ran into a pattern that I've seen with a few different clients now. The pattern itself is no longer recommended, but it's a helpful illustration of why it's important to be careful about how you use preload as well as a useful, real-world demonstration of how the order of your document can have a significant impact on performance…" https://timkadlec.com/remembers/2020-02-13-when-css-blocks/ Generation Style (Video) By Eric A. Meyer. "Consider, if you will, CSS generated content…" https://aneventapart.com/news/post/generation-style-aea-video Making Things Better: Redefining the Technical Possibilities of CSS (Video) By Rachel Andrew. "…Rachel Andrew looks at the things coming into browsers right now which change the way we see web design. By understanding the new medium of web design we can start to imagine the future, and even help to shape it…" https://aneventapart.com/news/post/making-things-better-aea-video +03: COLOR. Understanding Web Accessibility Color Contrast Guidelines and Ratios By Stacie Arellano. "What should you do when you get a complaint about the color contrast in your web design?…" https://css-tricks.com/understanding-web-accessibility-color-contrast-guidelines-and-ratios/ +04: EVALUATION & TESTING. Bounces vs Exits in Web Analytics (Video) By Aurora Harley. "It's important to study why users leave websites. Analytics tools give you two metrics for web pages: exit rate and bounce rate. Understanding the difference between these two numbers is essential for better UX design." https://www.nngroup.com/videos/bounces-vs-exits-analytics/ +05: EVENTS. Authoring Accessible Content Workshop March 26, 2020. Online https://knowbility.org/services/training/authoring-accessible-content/ Content by Design June 25-26, 2020. London, England, United Kingdom https://2020.contentbydesign.org/ UX Research & Insights Summit July 21-23, 2020. Boston, Massachusetts, U.S.A. https://informaconnect.com/ux-research-insights-summit/ That Conference August 3-6, 2020. Wisconsin Dells, Wisconsin, U.S.A. https://www.thatconference.com/wi Leadership Exchange in Arts and Disability (LEAD) August 3-7, 2020. Raleigh, North Carolina, U.S.A. https://www.kennedy-center.org/education/networks-conferences-and-research/conferences-and-events/lead-conference UX Measurement Bootcamp August 5, 2020. Denver, Colorado, U.S.A. https://measuringu.com/events/ux-bootcamp-2020/ UX/Usability Testing - IT Professionals with Disabilities Testing Your Product August 6, 2020. Online https://www.accessibilityassociation.org/content.asp?admin=Y&contentid=630 +06: HTML. Google's AMP HTML (Update: February 18, 2020) By Adrian Roselli. "In the post In search of the amp.dev search, two developers write about their efforts to build a search for the AMP.dev site. It is no doubt an impressive effort using AMP technologies, even if the limitations are self-imposed. The conclusion sums up the requirements…" https://adrianroselli.com/2015/10/googles-amp-html.html#update35 Semantic HTML with Bruce Lawson (Podcast) By JSJabber. "Bruce Lawson is an expert in and proponent of semantic HTML. After receiving some good natured ribbing, Bruce walks the panel through the benefits of semantic HTML. He provides several examples on how it's used and in particular how it helps with other issues like accessibility and navigability on your websites…" https://devchat.tv/js-jabber/jsj-421-semantic-html-with-bruce-lawson/ Why Supporting Unlabeled UTF-8 in HTML on the Web Would Be Problematic By Henri Sivonen. "UTF-8 has won. Yet, Web authors have to opt in to having browsers treat HTML as UTF-8 instead of the browsers Just Doing the Right Thing by default. Why? I'm writing this down in comprehensive form, because otherwise I will keep rewriting unsatisfactory partial explanations repeatedly as bug comments again and again…" https://hsivonen.fi/utf-8-detection/ Autofill on Browsers: A Deep Dive By Shanmuga Priya Pandiyan. "…In this article, we discuss how to effectively use autofill features on web forms…" https://tech.ebayinc.com/engineering/autofill-deep-dive/ +07: JAVASCRIPT. Role-up By Adrian Roselli. "… Definition of role-up. 1. To use an ARIA role on an HTML element to change its semantics and/or force it to accept an accessible name (via aria-label, aria-labelledby, or even aria-describedby). 2. To add ARIA roles everywhere without understanding, often via framework or library…" https://adrianroselli.com/2020/02/role-up.html +08: MISCELLANEOUS. Designing Without the Packaging By Gerry McGovern. "…Digital is a massive cauldron of waste and unnecessary packaging. Every year the techies give us shinier, cooler diggers so that we can shovel crap even faster. The Web is becoming a heavier, wider and deeper rubbish dump every year. It's time to clean up the mess we've made because it's costing the Earth." https://gerrymcgovern.com/designing-without-the-packaging/ +09: TOOLS. Selectors Explained By Hugo Riraudel. "Translate CSS selectors into plain English." https://hugogiraudel.github.io/selectors-explained/ +10: USABILITY. Drag-and-Drop: How to Design for Ease of Use By Page Laubheimer. "Clear signifiers and clear feedback at all stages of the interaction make drag-and-drop discoverable and easy to use." https://www.nngroup.com/articles/drag-drop/ Calculating ROI for Design Projects in 4 Steps By Kate Moran. "Prove the value of your design efforts by estimating return on investment." https://www.nngroup.com/articles/calculating-roi-design-projects/ Web Bloat By Dan Luu. "A couple years ago, I took a road trip from Wisconsin to Washington and mostly stayed in rural hotels on the way…" https://danluu.com/web-bloat/ [Section one ends.] ++ SECTION TWO: +11: What Can You Find at the Web Design Reference Site? Accessibility Information. https://www.d.umn.edu/itss/training/online/webdesign/accessibility.html Association Information. https://www.d.umn.edu/itss/training/online/webdesign/associations.html Book Listings. https://www.d.umn.edu/itss/training/online/webdesign/books.html Cascading Style Sheets Information. https://www.d.umn.edu/itss/training/online/webdesign/css.html Color Information. https://www.d.umn.edu/itss/training/online/webdesign/color.html Drupal Information. https://www.d.umn.edu/itss/training/online/webdesign/drupal.html Evaluation & Testing Information. https://www.d.umn.edu/itss/training/online/webdesign/testing.html Event Information. https://www.d.umn.edu/itss/training/online/webdesign/events.html HTML Information. https://www.d.umn.edu/itss/training/online/webdesign/html.html Information Architecture Information. https://www.d.umn.edu/itss/training/online/webdesign/architecture.html JavaScript Information. https://www.d.umn.edu/itss/training/online/webdesign/javascript.html Miscellaneous Web Information. https://www.d.umn.edu/itss/training/online/webdesign/misc.html Navigation Information. https://www.d.umn.edu/itss/training/online/webdesign/navigation.html PHP Information. https://www.d.umn.edu/itss/training/online/webdesign/php.html Sites & Blogs Listing. https://www.d.umn.edu/itss/training/online/webdesign/sites.html Standards, Guidelines & Pattern Information. https://www.d.umn.edu/itss/training/online/webdesign/standards.html Tool Information. https://www.d.umn.edu/itss/training/online/webdesign/tools.html Typography Information. https://www.d.umn.edu/itss/training/online/webdesign/type.html Usability Information. https://www.d.umn.edu/itss/training/online/webdesign/usability.html XML Information. https://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: https://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.]