+++ WEB DESIGN UPDATE. - Volume 17, Issue 27, December 26, 2018. An email newsletter to distribute news and information about web design and development. ++ISSUE 27 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: NAVIGATION. SECTION TWO: 09: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Tables and Beers By Steve Faulkner. "In the last article for the 2018 series, Steve Faulkner provides the results of one beer worth of screen reader testing of simple tables." https://www.24a11y.com/2018/tables-and-beers/ Prove You're Not A Bot: reCAPTCHA version 3 By John Sweet. "John Sweet describes how captchas have been viewed as a complete barrier to access for individuals with disabilities but with Google's latest reCaptcha solution, access has taken a major, positive leap forward." https://www.24a11y.com/2018/recaptcha/ Benefits of a Single Text Field Versus Multiple Text Fields By Michiel 'Zoë' Bijl. We often come across forms that have multiple fields for what is, in essence, a single piece of data, like a phone number or credit card number. Creating forms like that can pose some usability issues if they aren't marked up in the right way. Would it be better to ask for these chunks of data with single text fields instead? https://www.24a11y.com/2018/single-text-field-vs-multiple-text-fields/ Web Accessibility: Buzzword or Reality? By Attila Vágó. "Web Accessibility. The unexpected lovechild of Sir Tim Berners Lee, a shoddy 12" monochrome screen that went black (and never came back) and a cat that ran away with the mouse. The cat came back, but by the time we found the mouse again, Steve Jobs decided we should all be poking at our screens instead…" https://hackernoon.com/web-accessibility-buzzword-or-reality-c265ec82aa03 I Used the Web for A Day Using a Screen Reader By Chris Ashton. "A sighted user puts himself in the shoes of a non-sighted user. Chris Ashton experiences first-hand difficulties that visually impaired users face and describes what we can do as web developers to help." https://www.smashingmagazine.com/2018/12/voiceover-screen-reader-web-apps/ Part 2: Create Inclusive Design Experiences with Accessibility at a Glance Videos By Deborah Edwards-Onoro. Microsoft added 6 videos their series. https://www.lireo.com/create-accessibility-at-glance-videos-inclusive-design/ Designing Layouts for Screen Readers By Ben Robertson. "I'll walk through how to make use of these indicators to make a simple web page easy to use, navigate and read for users of assistive technology. All the example code is available on github…" https://benrobertson.io/accessibility/designing-layouts-for-screen-readers iOS Accessibility Properties: How They Relate to WCAG, and How to Correctly Use Them By Jennifer Dailey. "Jennifer Dailey explains how the iOS Accessibility Properties relate to the WCAG 2.0 success criteria 4.1.2: Name, Role, Value, and how to properly use them." https://www.24a11y.com/2018/ios-accessibility-properties/ When Empathy Isn't Enough By Shaina Garfield. "Designers need to go beyond empathy to include the disabled community as participants in design solutions." https://medium.com/frog-voices/when-empathy-isnt-enough-87ccdb6ae072 VPAT By Information Technology Industry Council. "…WCAG 2.1 has now been incorporated into the EU, WCAG, and INT editions of the VPAT…" https://www.itic.org/policy/accessibility/vpat President Trump Signs 21st Century IDEA into Law By Tajha Chappellet-Lanier. "Citizen-friendly federal websites and digital services just got a boost - President Donald Trump signed the 21st Century Integrated Digital Experience Act (IDEA) on Thursday afternoon…" https://www.fedscoop.com/president-trump-signs-21st-century-idea-law/ DOE Rescinds 'Mass Filer' Rule, Reopening Door for Web Accessibility Complaints By C.P. Hoffman. "…As a result of the rescission of the so-called 'Mass Filer' rule, web accessibility complaints against educational institutions are likely to increase significantly…" https://www.levelaccess.com/doe-rescinds-mass-filer-rule-reopening-door-web-accessibility-complaints/ Airline Fined for Separate Disabled-Accessible Website By Greg Thomson. "Offering a separate website for those with disabilities does not comply with the U.S. Department of Transportation's (DOT) website accessibility requirements, the agency made clear with a $200,000 fine to the Scandinavian Airlines System (SAS)…" https://aoda.ca/airline-fined-for-separate-disabled-accessible-website/ ADA Case Law And Statutory Updates By Cole Schotz. "…arguments were as follows: 1) websites are not places of public accommodation under Title III of the ADA; 2) the WCAG are not law and the trial court's adoption of those guidelines violated due process; 1) Winn Dixie is in compliance with the ADA because Gil had not been deprived of the full benefit of and equal access to the services and goods in Winn Dixie's stores…" https://www.jdsupra.com/legalnews/ada-case-law-and-statutory-updates-44288/ +02: CASCADING STYLE SHEETS. Styling a Select Like It's 2019 By Scott Jehl. " As it turns out, a reasonable set of styles can create a consistent and attractive select across new browsers, while remaining just fine in older ones too…" https://www.filamentgroup.com/lab/select-css.html Clip Paths Know No Bounds By Dan Wilson. "CSS Shapes are getting a lot of attention as browser support has increased for properties like shape-outside and clip-path. There are a few ways that we can use CSS Shapes, in particular with the clip-path property, that are not necessarily evident at first glance…" https://24ways.org/2018/clip-paths-know-no-bounds/ +03: EVALUATION & TESTING. Fake Metrics: Impressions are the New Hits By Gerry McGovern. "We all know that HITS stands for How Idiots Track Success. Well, IMPRESSIONS stands for Idiots Making Pretentious Resources Endlessly So Suckers In Organizations Notice Something. It's the next chapter in the endless saga of the Cult of Volume." http://gerrymcgovern.com/fake-metrics-impressions-are-the-new-hits/ Usability Testing with 5 Users: Information Foraging (Video 3 of 3) By Jakob Nielsen. "Usability testing is similar to how wild animals hunt for food: we're trying to hunt down the design flaws in the user interface and must optimize a series of studies for total gain, rather than spend too much on any one study." https://www.nngroup.com/videos/usability-testing-5-users-information-foraging/ The UX of Restaurant Websites By Jeff Sauro. "…To understand these new online offerings, we benchmarked the user experience of six popular restaurant chain websites that provide delivery to see how people are using these services and where the process can be improved…" https://measuringu.com/ux-restaurant/ Creating Personas from User Research Results By Priscilla Esser. "…Let us show you the best practices in developing these design deliverables, so your user research results can work their magic…" https://www.interaction-design.org/literature/article/creating-personas-from-user-research-results +04: EVENTS. An Accessibility Case Study by Blink UX January 9, 2019. San Francisco, California, U.S.A. https://www.meetup.com/a11ybay/events/257365652/ Clockwork: Expanding the UX Team January 10, 2019. Minneapolis, Minnesota, U.S.A. http://uxpamn.org/event-3172791 +05: HTML. The Practical Value of Semantic HTML By Bruce Lawson. "…Semantic HTML will give usability benefits to many users, help to future-proof your work, potentially boost your search engine results, and help people with disabilities use your site. And, best of all, thinking more about your HTML will stop Dull Old Web Farts like me moaning at you. What's not to love? Have a splendid holiday season, whatever you celebrate - and here's to a semantic 2019!" https://www.brucelawson.co.uk/2018/the-practical-value-of-semantic-html/ Why Isn't It Their Job By Stuart Langridge. "…The secret is: if you use semantic HTML, then they do the work, not you…" https://kryogenix.org/days/2018/12/19/why-isn-t-it-their-job/ Making the abbr Element Work for Touchscreen, Keyboard, and Mouse By Ire Aderinokun. "The element is used to denote and define an acronym. For example, if we want to write the acronym 'CSS' anywhere on a web page, we can also provide the full name 'Cascading Style Sheets' for readers unfamiliar with the acronym…" https://bitsofco.de/making-abbr-work-for-touchscreen-keyboard-mouse/ Jank-Free Image Loads By Eric Portis. "There are a few fundamental problems with embedding images in pages of hypertext; perhaps chief among them is this: text is very light and loads rather fast; images are much heavier and arrive much later…" https://24ways.org/2018/jank-free-image-loads/ +06: JAVASCRIPT. ARIA 1.1 - What's New? By Birkir Gunnarsson. "Birkir Gunnarsson tells us what's new in ARIA 1.1, the new roles and properties that excite him, and the others that disappoint, due to their lack of support." https://www.24a11y.com/2018/aria-1-1-whats-new/ Web Components Still Need to be Accessible By Eric Bailey "Eric Bailey explains why developers need to consider accessibility when creating custom web components and use semantic HTML when it makes sense, as to not needlessly reinvent the wheel." https://www.24a11y.com/2018/web-components-still-need-to-be-accessible/ +07: MISCELLANEOUS. Designing Your Site Like It's 1998 By Andy Clarke. "It's 20 years to the day since my wife and I started Stuff & Nonsense, our little studio and my outlet for creative ideas on the web. To celebrate this anniversary-and my fourteenth contribution to 24 ways- I'd like to explain how I would've developed a design for Planes, Trains and Automobiles, one of my favourite Christmas films…" https://24ways.org/2018/designing-your-site-like-its-1998/ +08: NAVIGATION. Breadcrumbs: 11 Design Guidelines for Desktop and Mobile By Page Laubheimer. "Support wayfinding by including breadcrumbs that reflect the information hierarchy of your site. On mobile, avoid using breadcrumbs that are too tiny or wrap on multiple lines." https://www.nngroup.com/articles/breadcrumbs/ [Section one ends.] ++ SECTION TWO: +09: 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.]