+++ WEB DESIGN UPDATE. - Volume 18, Issue 22, November 26, 2019. An email newsletter to distribute news and information about web design and development. ++ISSUE 22 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: INFORMATION ARCHITECTURE. 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. What is a Screen Reader? By Daniel Göransson. "A screen reader is an assistive technology, primarily used by people with vision impairments…" https://axesslab.com/what-is-a-screen-reader/ How I Made the Firefox Protection Report Screen Reader Accessible By Macro Zehe. "Firefox 70, released in October, contains a new feature called the Protection Report. It contains a graph of all the things Firefox protected you from in the last seven days. Here's how I made that screen reader accessible." https://marcozehe.de/2019/11/25/how-i-made-the-firefox-protection-report-screen-reader-accessible/ How to Make an Inaccessible Website (Video) By Ian Pouncey. "In 2019, web accessibility is mainstream, but a quick search on your social media platform of choice will reveal designers and developers who resist the idea that all websites and applications should be usable by anyone. These people are underrepresented at conferences; this is the presentation for them. Anyone who cares about their users might find something to learn as well, in this presentation that covers the best and worst of (in)accessible HTML, CSS, and JavaScript." https://www.youtube.com/watch?v=RsVxk3J0OH4 Chromium Tagged PDF Export Design Doc By Dominic Mazzoni. "Chrome currently exports untagged PDF files, in which each page is just an unordered sequence of drawing commands. Instead Chrome should be outputting a tagged PDF, which provides a structure tree for the entire PDF document…" https://docs.google.com/document/d/1ku6QNtAHEqVnRGqFzpmlMe1fowkjCX9miHj8Kx1cFlk/ Epilepsy and Digital Accessibility By Jen Hurst. "…There are special considerations developers should keep in mind, as some content may actually be dangerous to people who have epilepsy…" https://theweco.com/epilepsy-and-digital-accessibility/ Checklist to Avoid the Most Common Accessibility Errors By Bruce Lawson. "…This isn't a comprehensive guide to accessibility, but we'll look at ways to avoid the most common accessibility errors identified by the WebAIM accessibility analysis of the top 1,000,000 home pages and the HTTPArchive 2019 Web Almanac. I'm not going to get philosophical; if you're reading this, I assume you care about why, and just want some tips on how…" https://www.brucelawson.co.uk/2019/checklist-to-avoid-the-most-common-accessibility-errors/ Understanding SC 3.3.3 Error Suggestion By Raghavendra Satish Peri. "While SC 3.3.1 Error Identification talks about providing the errors in text format the SC 3.3.3 Error Suggestion is a little different & easy to follow…" https://www.digitala11y.com/understanding-sc-3-3-3-error-suggestion/ Understanding SC 3.3.4 Error Prevention (Legal, Financial, Data) By Raghavendra Satish Peri. "3.3.4 Error Prevention (Legal, Financial, Data): For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true…" https://www.digitala11y.com/understanding-sc-3-3-4-error-prevention-legal-financial-data/ Mini a11yTO Tooltip Rant (Video) By Sarah Higley. "A mini lightning talk companion to my longer tooltip article…" https://www.youtube.com/watch?v=7s_sjl4bEP8 Takeaways from How to Deliver an Accessible and Inclusive Presentation By Deborah Edwards-Onoro. "At the November 2019 Chicago Digital Accessibility and Inclusive Design meetup last night, Fen Slattery highlighted steps you can take to give an accessible, inclusive presentation…" https://www.lireo.com/deliver-accessible-inclusive-presentation/ Accessibility by Default By Susanna Laurin. "…So, what if authoring tools could provide accessibility by default? Both in a purely technical sense, but also when it comes to the human factor, this could have a great potential…" https://www.accessibilityassociation.org/content.asp?admin=Y&contentid=623 Automatic Transcription Software: Good Enough for Accessibility? A Case Study from Built Environment Education By Tharindu R. Liyanagunawardena. "…Although economical and timesaving, at present, it seems an automatically generated transcript is not yet accurate enough to be an accessibility aid for the subjects relating to built environment sector…" https://www.researchgate.net/publication/333996102_Automatic_Transcription_Software_Good_Enough_for_Accessibility_A_Case_Study_from_Built_Environment_Education Accessible Podcasts By Claire Gahler. "How one Minnesota state agency is reaching a Larger Audience…" https://mn.gov/mnit/media/blog/?id=38-410972 Getting Developers On Board with Accessibility By Dylan Barrell. "Digital accessibility - making sure your website, mobile site and apps are accessible to all users, including people with disabilities - is increasingly a DevOps requirement that can't be ignored…" https://www.devopsdigest.com/getting-developers-on-board-with-accessibility Accessibility is like homework, it's required but everyone treats it like it's above and beyond By Abigail Ruhman. "Debates have two sides, those who agree and those who don't. Accessibility shouldn't have two sides, therefore it shouldn't be a debate…" https://www.themaneater.com/stories/opinion/column-accessibility-is-like-homework-its-required-but-everyone-treats-it-like-its-above-and-beyond- Thinking of adding festive cheer to your site? Will everyone appreciate your Christmas plugin? By Graham Armfield. "…So what accessibility problems does the plugin (and others like it) cause? And can changes to the plugin be made that would save it from being a total accessibility nightmare…" https://www.hassellinclusion.com/blog/christmasify-plugin-accessibility/ Websites, Apps, Accessibility, and Extraterritoriality Under Title III of the Americans with Disabilities Act By Samuel H. Ruddy. "The federal courts are currently split as to whether websites qualify as "places of public accommodation" under Title III of the Americans with Disabilities Act. Neither side of the split, however, offers a satisfactory interpretation of Title III, especially because both sides fail to consider the potential extraterritorial implications of applying Title III to websites. This Note proposes to head off the inevitable extraterritoriality issue, and resolves the Title III split by establishing a bright-line rule: data centers- not websites or apps-are places of public accommodation under Title III of the ADA…" https://www.law.georgetown.edu/georgetown-law-journal/wp-content/uploads/sites/26/2019/10/Ruddy-Websites-Apps-Accessibility-and-Extraterritoriality-Under-Title-III-of-the-Americans-with-Disabilities-Act.pdf VPAT 2.X, The Evolution of the Accessibility Conformance Report | Part One: An Overview By Hiram Kuykendall. "Both public and private entities are now held accountable for the accessibility of all components and services that comprise an entity's 'product'…" https://www.microassist.com/digital-accessibility/vpat-2-x-evolution-of-the-accessibility-conformance-report-part-one/ Accessibility Law Backfires As Agencies Take Down Web Pages By The Press-Democrat. "A state law intended to increase accessibility to public records online has had exactly the opposite effect. California departments and agencies are taking down documents because they can't make them accessible to people with disabilities, at least not quickly and affordably. Government committed to transparency must do better…" https://www.governing.com/news/headlines/Accessibility-Law-Backfires-As-Agencies-Take-Down-Web-Pages.html +02: CASCADING STYLE SHEETS. CSS: When to Use Logical Properties By Jens Oliver Meiert. "Logical properties are great and long overdue. They are great because they solve an ugly problem of international, multi-directional web development in that directionality does not need to affect your writing and managing of CSS anymore…" https://meiert.com/en/blog/logical-properties/ Creating Complex Layouts Using CSS Grid By Sush Kelly. "This tutorial is for people who have heard of css-grid and are interested to see what it can do or perhaps are not sure how to fit it into their workflow…" https://www.sushkelly.co.uk/work/2019/11/21/creating-more-complex-layouts-using-css-grid.html Multiple-column Layout and column-span in Firefox 71 By Rachel Andrew. "…Firefox 71 implements column-span from Multiple-column Layout. In this post I'll explain what it is and a little about the progress of the Multiple-column Layout specification…" https://hacks.mozilla.org/2019/11/multiple-column-layout-and-column-span-in-firefox-71/ +03: COLOR. Firefox's Accessibility Picker By Sime Vidas. "Firefox's accessibility picker shows a contrast range when the background is multi-color. Not bad." https://twitter.com/simevidas/status/1181941591826685954 +04: EVALUATION & TESTING. Getting Set Up to Manually Test Web Accessibility By Madalyn Parker. "When I sat down with my brand new work computer, I wanted to get set up to manually test accessibility using as many browsers as I coulds…" https://www.gatsbyjs.org/blog/2019-11-13-getting-set-up-to-manually-test-web-accessibility/ How Do You Measure Delight? By Jeff Sauro. "…In this article we'll review many ways researchers have attempted to measure delight in the published literature…" https://measuringu.com/measure-delight/ Undervaluing User Research is a Deadly Disease By Jared Spool. "…When an organization undervalues research, it's a deepening, darkening, downward spiral of delivering poorly-designed products…" https://articles.uie.com/undervaluing-user-research-is-a-deadly-disease/ +05: EVENTS. Accessibility Summit May 27, 2020. Saint Louis, Missouri, U.S.A. https://2020.webaccessibilitysummit.org/ An Event Apart Boston June 29-July 1, 2020. Boston, Massachusetts, U.S.A. https://aneventapart.com/event/boston-2020 Open Source Software Conference July 13-16, 2020. Portland, Oregon, U.S.A. https://conferences.oreilly.com/oscon/oscon-or An Event Apart Minneapolis August 17-19, 2020. Minneapolis, Minnesota, U.S.A. https://aneventapart.com/event/minneapolis-2020 +06: INFORMATION ARCHITECTURE. Translating Design Wireframes into Accessible HTML/CSS (Video) By Harris Schneiderman. "…In this webinar, Harris will walk you through the process of analyzing a wireframe from an accessibility perspective, making coding decisions to optimize for accessibility, implementing that code, testing your code, and troubleshooting." https://www.youtube.com/watch?v=5gFSru8yGaU +07: JAVASCRIPT. Quick Tip: How to Sort an Array of Objects in JavaScript By Olayinka Omole and James Hibbard. "If you have an array of objects that you need to sort into a certain order, you might be tempted to reach for a JavaScript library. But before you do, remember that you can do some pretty neat sorting with the native Array.sort function." https://www.sitepoint.com/sort-an-array-of-objects-in-javascript/ Accessible Charts with ARIA By Doug Schepers. "…almost all data visualizations are hiding crucial information away from your users with visual impairments. You can fix that, and I'm writing this post to help you along…" https://blog.tenon.io/accessible-charts-with-aria Add aria-expanded to Add Semantic Value and Styling (Video) By Lindsey Kopacz. "In this lesson, we will be going over the attribute aria-expanded. Instead of using a class like .open we are going to use the aria-expanded attribute to style…" https://egghead.io/lessons/aria-add-aria-expanded-to-add-semantic-value-and-styling +08: MISCELLANEOUS. Request with Intent: Caching Strategies in the Age of PWAs By Aaron Gustafson. "Caching media files, especially images, seems like an obvious way to improve performance, but should we? To provide a more performant UX without abusing users's network connections or hard drives, Aaron Gustafson puts a spin on classic best practices, experiments with media caching strategies, and shares smart Cache API tricks." https://alistapart.com/article/request-with-intent-caching-strategies-in-the-age-of-pwas/ What the Web Still Is By Eric Bailey. "Being a pessimist is an easy thing to fall back on, and I'm trying to be better about it. As we close the year out, I thought it would be a good exercise to take stock of the state of the web and count our blessing…". https://css-tricks.com/what-the-web-still-is/ Why Constraints Are Good for Innovation By Oguz A. AcarMurat TarakciDaan van Knippenberg. "The next time you struggle with innovation, take a look at your constraints structure. Instead of blaming them, frame them as creative challenges…" https://hbr.org/2019/11/why-constraints-are-good-for-innovation The Front-End Tooling Survey 2019 - Results By Ashley Watson-Nolan. "It's been a little while coming, but the results from the 2019 Front-End Tooling Survey are now here…" https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results 10 Ways to Help Accessibility at Conferences as a Speaker By Lindsey Kopacz. "…Here are my 10 tips for what I've learned from this past month…" https://www.a11ywithlindsey.com/blog/accessibility-conferences +09: TOOLS. Fit on a Floppy By Brendon Body. "Websites are getting bigger and bigger. The internet is getting faster and faster but not everywhere at the same pace. A floppy is a physical reminder of filesize…" https://fitonafloppy.website/ +10: USABILITY. Mobile Dark Patterns By Steven Hoober. "…Dark patterns are design patterns that are effective, but evil. When they succeed, they drive users to make accidental or uninformed decisions against their best interests…" https://www.uxmatters.com/mt/archives/2019/11/mobile-dark-patterns.php 13 Design Patterns for Autocomplete Suggestions (27% Get it Wrong) By Jamie Appleseed. "…Despite search autocomplete suggestions being common, our UX benchmark also reveals that 27% of sites have an autocomplete implementation that has several and severe usability issues, so it overall performs poorly with end-users…" https://baymard.com/blog/autocomplete-design The Halo Effect in UX Design (Video) By Katie Sherwin. "The Halo Effect says that any one element in a user's experience with a company will rub off on their interpretation of other elements and their feelings about the company as a whole. Good design in one part of a website will make people like other parts better (and like the company better), but the opposite is also true." https://www.nngroup.com/videos/halo-effect/ How to Get Stakeholders to Sketch: A Magic Formula (Video) By Kate Kaplan. "In ideation and many other UX activities, we want to include stakeholders and get them to participate in sketching UI prototypes and other visuals. Here are four tactics to getting everybody to sketch in your UX workshops." https://www.nngroup.com/videos/stakeholder-sketching/ [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.]