+++ WEB DESIGN UPDATE. - Volume 17, Issue 34, February 15, 2019. An email newsletter to distribute news and information about web design and development. ++ISSUE 34 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. 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. Uncanny A11y By Adrian Roselli. "Developers can try so hard to make sure something is accessible that the entire experience becomes weird, confusing, or downright unusable. There are generally two things that contribute to this: 1.) thinking that using code, all the code, is the best way to make something accessible, and 2.) not testing with users who have disabilities…" http://adrianroselli.com/2019/02/uncanny-a11y.html Inaccessibility of CAPTCHA Scott Hollier, Janina Sajka, and Michael Cooper, Editors. "…This document examines a number of approaches that allow systems to test for human users, and the extent to which these approaches adequately accommodate people with disabilities…" https://www.w3.org/TR/2019/WD-turingtest-20190214/ Paint the Picture, Not the Frame: How Browsers Provide Everything Users Need By Eric Bailey. "Designers want to create fully branded experiences, which often results in customized highlighting colors or pixel-perfect typography. While these design touches can enhance the experience for some, they can render the experience inaccessible for others. Designer Eric Bailey makes a case for leaving key accessibility features to the browser to ensure the most accessible experience possible." https://alistapart.com/article/paint-the-picture-not-the-frame Quick Note On High Contrast Mode By Scott O'Hara. "…HCM cares not for your ARIA roles…Background images are (mostly) ignored…" https://www.scottohara.me/blog/2019/02/12/high-contrast-aria-and-images.html Tips for Making Interactive Elements Accessible on Mobile Devices By Ire Aderinokun. "…In this article, I will cover some of the new guidelines that relate to interactive elements on a web page…" https://bitsofco.de/tips-for-making-interactive-elements-accessible-on-mobile-devices/ W3C Accessibility Guidelines for Mobile Games By Amy Wilson and Michael Crabb. "…The purpose of this work is to investigate how well current W3C accessibility guidelines support mobile game development. This paper introduces a study that was carried out to determine the current knowledge that participants have of these guidelines, along with the opinions on how important these accessibility guidelines are when creating accessible mobile game content…" https://link.springer.com/article/10.1007/s40869-018-0058-7 Web Accessibility Overlays Do Not Work By Karl Groves. "This page presents a large number of examples of inaccessible code that cannot be reliably fixed by an 'overlay' product. Each of the examples is provided along with an explanation of why it is a problem and why an overlay cannot fix it…" https://overlaysdontwork.com/ Open Source Can be Key to Web Accessibility But Only If We Do It Right (Video) By Mike Gifford. "Open source solutions have disrupted many industries in the last decade and there is hope that approaches to accessibility may be next…" https://www.youtube.com/watch?v=RwyYwpxyW3U Accessibility New Year's Resolutions - The Deadline for Implementing WCAG 2.1 By Sheri Byrne-Haber. "…If neither 1 and 2 apply to you, December 5, 2019 seems to be a reasonable and justifiable internal deadline for WCAG 2.1 Level AA compliance when creating new digital properties or updating old ones… If you don't choose one of those 3, the fourth possible outcome is you end up getting sued…" https://medium.com/@sheribyrnehaber/accessibility-new-years-resolutions-the-deadline-for-implementing-wcag-2-1-237e5beb915c Accessibility Statements Show Commitment to all Site Users By Lainey Feingold. "Check out the Accessibility Statement Generator from the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). It's part of a great new page of information titled 'Developing an Accessibility Statement'…" https://www.lflegal.com/2013/02/access-info-pages/ Writing an Accessibility Statement for Your Organization By Rakesh Paladugula. "Having an accessibility statement on the website shows your commitment towards persons with disabilities…" https://www.maxability.co.in/2019/02/writing-accessibility-statement-organization/ Flagler Pays $16,000 to Settle Website Access Suit, and Much More to Become ADA Compliant By FlaglerLive. "Flagler County government will pay $15,700 to settle a Napoleon-quoting federal lawsuit filed by a legally blind Daytona Beach man who charged that Flagler was violating the Americans With Disabilities Act by making some of the documents posted to its website inaccessible to the blind, because computer software can't read the pdfs…" https://flaglerlive.com/132763/flagler-website-suit/ +02: CASCADING STYLE SHEETS. The Dark Side of the Grid (Part 1) By Manuel Matuzovic. "This is part 1 of 3 in a series of articles about CSS Grid layout and accessibility…" https://www.matuzo.at/blog/the-dark-side-of-the-grid/ An Introduction to CSS Exclusions: The Future of Complex Web Layout By Dennis Gaebel. "…CSS exclusions is an addition to our layout arsenal that will become another game changer, assisting with whatever complicated layout scenarios we crave. In this article I'll introduce you to CSS exclusions, and explain how to raise your voice for browser adoption in order to help progress for the future…" https://webdesign.tutsplus.com/tutorials/an-introduction-to-css-exclusions-the-future-of-complex-web-layout--cms-32366 Where Do You Nest Your Sass Breakpoints? By Chris Coyier. "I love nesting my @media query breakpoints. It's perhaps the most important feature of Sass to me…" https://css-tricks.com/where-do-you-nest-your-sass-breakpoints/ Guide to Optimize CSS Delivery By Samuel Bocetta et. al. "…Here are 5 simple things you can do to optimize your CSS…" https://hostingcanada.org/css-optimization/ What's New In CSS? By Rachel Andrew. "Rachel's Fronteers W3C Meet-up slides from February 2019 in Amsterdam, Netherlands…" https://noti.st/rachelandrew/9R7PMY/what-s-new-in-css +03: EVALUATION & TESTING. Using Persona Profiles to Test Accessibility By Anika Henke. "… this method offers is a quick and easy way of finding accessibility issues early in service development." https://accessibility.blog.gov.uk/2019/02/11/using-persona-profiles-to-test-accessibility/ Considering Accessibility When Designing a Usability Test By Aaron Pearlman. "…If accessibility is a consideration for the application you are creating, then your usability test should reflect that. You're probably familiar with running usability tests for sighted/mouse users, this post will discuss considerations for accessibility for non-sighted/AT users when conducting a usability test…" https://www.deque.com/blog/considering-accessibility-when-designing-a-usability-test/ Zooming In and Zooming Out - A Significant Answer to that Statistical Question By Kelly Moran. "…Think of qualitative research (qual) as the metal detector on the sandy shores of innovation. It will detect a signal from metal of any kind in the nearby vicinity. Closer inspection can reveal more about this metal. It might be gold, it might be silver, it might just be tin. But you'll get a signal if it's there. It's your job to determine if what you've found is valuable. Qual research is a metal detector…" https://towardsdatascience.com/zooming-in-and-zooming-out-9d70e561d609 +04: EVENTS. 2019 State of Digital Accessibility February 26, 2019. Online https://levelaccess.zoom.us/webinar/register/WN_beLd5cfPT6Or0TyyqXiy4g How Accessibility Testing Actually Impacts Developers February 26, 2019. Online https://accessibility.deque.com/how-accessibility-testing-actually-impacts-developers No Bad Legos: Automated Accessibility Testing February 28, 2019. Chicago, Illinois, U.S.A. https://www.meetup.com/a11ychi/events/258965911/ Live stream: https://www.youtube.com/watch?v=5h3pc74Lpvw Live captions: http://www.streamtext.net/player?event=CDA Creative South April 11-13, 2019. Columbus, Georgia, U.S.A. https://creativesouth.com/ CodeStock April 12-13, 2019. Knoxville, Tennessee, U.S.A http://codestock.org/ Social Media Accessibility April 18, 2019. Online https://www.accessibilityassociation.org/content.asp?admin=Y&contentid=560 Confab April 23-26, 2019. Minneapolis, Minnesota, U.S.A. https://www.confabevents.com/ +05: HTML. Required Attribute Requirements By Scott O'Hara. "Introduced in HTML5, the required attribute conveys that a particular form control or grouping of controls must have a valid value on form submission…" https://developer.paciellogroup.com/blog/2019/02/required-attribute-requirements/ Errant for Attributes Screw with label Behaviour By Steve Faulkner. "…tip: remove unnecessary for attributes, if a control is a child of a label element, the forattribute is not needed and can cause issues." https://codepen.io/anon/pen/OdQJJL Accessibility: Back to the Future (Video) By Bruce Lawson. "Here's a talk I did at a lovely inclusive, anarchic, friendly conference last month called Monki Gras…" https://www.brucelawson.co.uk/2019/accessibility-back-to-the-future/ Where Do You Learn HTML & CSS in 2019? By Chris Coyier. "The topic of how accessible it is for newbies and seasoned developers alike to learn CSS has been gaining steam as the complexity of the tools around it has become skewed more toward traditional programming…" https://css-tricks.com/where-do-you-learn-html-css-in-2019/ +06: JAVASCRIPT. Make it Boring By Jeremy Wagner. "…Web developers are accustomed to starting projects with the massive overhead of JavaScript frameworks like React-not to mention all that gets installed with it-as well as ancillary packages, module bundlers, and all this... stuff. Stuff that clutters the already densely occupied space of our minds, which inevitably seems to burden the people who use what we make…" https://jeremy.codes/blog/make-it-boring/ Beginning to Demystify ARIA By Lindsey Kopacz. "…The way I like to think about ARIA is context. Sometimes you don't need additional background - the HTML is surely enough. Sometimes it could be better though, especially if it's a custom widget. I'll do more about ARIA in the future regarding specific attributes and what they do - mainly because the documentation can be a bit daunting. Cheers to that!" https://dev.to/lkopacz/beginning-to-demystify-aria-5bi5 +07: MISCELLANEOUS. Transcript of Tim Berners-Lee's talk to the LCS 35th Anniversary celebrations, Cambridge Massachusetts, 1999/April/14 (via Jeremy Keith) By Tim Berners-Lee. "…The basic ideas of the Web is that an information space through which people can communicate, but communicate in a special way: communicate by sharing their knowledge in a pool. The idea was not just that it should be a big browsing medium. The idea was that everybody would be putting their ideas in, as well as taking them out…" https://www.w3.org/1999/04/13-tbl.html A Strongly Worded Letter By Adrian Roselli. "Last week while whining about having accessibility contributions to FOSS projects dismissed, I had a Twitter conversation about when the same thing happens with clients. I have a method to deal with that, however, which I briefly outlined on Twitter. I promised to expand on it in a blog post, so here it is…" http://adrianroselli.com/2019/02/a-strongly-worded-letter.html +08: NAVIGATION. Skip Links are Important By Nicolas Steenhout. "…Skip links are important. And they are relatively easy to implement. You will improve the user experience for your visitors who rely on the keyboard for navigation. You'll also comply with WCAG 2.4.1. Bypass Blocks!" https://knowbility.org/blog/2019/skip-links/ How to Conduct Research for Customer Journey-Mapping By Kate Kaplan. "When conducting research for customer-journey maps, use qualitative methods that allow direct interaction with or observation of users, such as interviews, field studies, and diary studies." https://www.nngroup.com/articles/research-journey-mapping/ +09: TOOLS. Contrast Checker (Hat Tip to Jim Allan) By Nick Colley. "Check constrast with the new WCAG 2.1 requirements…" It checks text contrast with object background and object contrast with page background. https://contrast-checker.glitch.me/ Introducing Togglific By Scott Vinkle. "Do you find web animations distracting? Togglific provides a distraction-free web experience…Stand-alone script: For development teams to implement into their own projects and setup custom controls. This covers all animations…" https://medium.com/@svinkle/introducing-togglific-1d824708ecc1 Accessibility Testing Tools - Updated 10th February 2019 By Steve Faulkner. "Here at The Paciello Group (TPG) we have a technical accessibility testing process which does not involve the use of automated tools. The technical audit results we provide to our clients are based solely on manual testing of a web site, web application, mobile or desktop application…" https://developer.paciellogroup.com/blog/2019/02/accessibility-testing-tools-we-use/ +10: USABILITY. The Ineffectiveness of Lonely Icons By Matt Wilcox. "If your target audience is a general population, you should not be using icons alone to convey anything meaningful. By doing so, you have made assumptions that are unlikely to be appropriate to a general audience. https://mattwilcox.net/musing/the-ineffectiveness-of-icons Proper UI Hierarchy By Bradley Taunt. "The statement that flat design is inherently worse than it's predecessor is not subjective. By stripping away the visual cues that help users distinguish between interface elements you are purposely making a worse experience for them. Designers need to stop designing for other designers." https://accssible.com/2019/02/05/proper-ui-hierarchy/ Interface Copy Impacts Decision Making By Lexie Martin. "The language used in interfaces influences the decisions that our users will make. Manipulative copy nudges users towards making choices that are against their best interests." https://www.nngroup.com/articles/interface-copy-decision-making/ Perverse Incentives Create Perverse Behavior By Gerry McGovern. "…We must reward employees based on customer use. We must focus on the consumption, not on the production. We must measure customer effort, task completions rates, time-on-task." http://gerrymcgovern.com/perverse-incentives-create-perverse-behavior/ The Biggest Mistakes in User Research, Part 2 By Jim Ross. "…I'll describe eight additional mistakes and provide advice about how to avoid them." https://www.uxmatters.com/mt/archives/2019/02/the-biggest-mistakes-in-user-research-part-2.php How to Empathy Map (Video) By Sarah Gibbons. "A 5-step process for creating empathy maps that describe user characteristics at the start of a UX design process." https://www.nngroup.com/videos/empathy-map/ [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.]