+++ WEB DESIGN UPDATE. - Volume 17, Issue 24, December 5, 2018. An email newsletter to distribute news and information about web design and development. ++ISSUE 24 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: COLOR. 04: DRUPAL. 05: EVALUATION & TESTING. 06: EVENTS. 07: HTML. 08: INFORMATION ARCHITECTURE. 09: JAVASCRIPT. 10: MISCELLANEOUS. 11: USABILITY. 12: XML. SECTION TWO: 13: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Web Content Accessibility Guidelines 2.1-for People Who Haven't Read the Update By Alan Dalton. "…These new criteria make it easier than ever for us web geeks to produce work that is more accessible to people using mobile devices and touchscreens, people with low vision, and people with cognitive and learning disabilities…" https://24ways.org/2018/wcag-for-people-who-havent-read-the-update/ Web Accessibility and Autism By Rakesh Paladugula. "…Below are some guidelines from this WCAG checklist that meets the needs of people with autism…" https://www.maxability.co.in/2018/12/web-accessibility-autism/ A Guide to Creating Accessible Animations By Anna Monus. "Animated interfaces can cause headaches, nausea, dizziness, and other health problems for many people…" https://webdesign.tutsplus.com/tutorials/a-guide-to-creating-accessible-animations--cms-32038 WebAIM's Survey of Low Vision Users #2: What Do We Aake of It? By Sathish Kumar. "…The design with its visual aspects must be flexible, accommodative and allow for user customization in order to achieve the high inclusivity. Only then, we would see the high number of respondents who would proclaim that the web is inclusive and accessible. It is not only the task of the AT vendors to help achieve this…" https://www.digitala11y.com/webaims-survey-of-low-vision-users-2-what-do-we-make-of-it/ Create Custom Keyboard Accessible Checkboxes By Lindsey Kopacz. "I've seen a ton of designers make these GORGEOUS checkbox styles, but then you see them implemented and you can't even select it using your keyboard…" https://www.a11ywithlindsey.com/blog/create-custom-keyboard-accesible-checkboxes/ Instagram is Now Using AI to Describe Photos for Users with Visual Impairments By Ashley Carman. "Instagram announced today that it's rolling out new features that will make the app easier to use for people with visual impairments…" https://www.theverge.com/2018/11/28/18116323/instagram-ai-visual-impairment-description Testing, Testing, 1, 2, 3 - Large-scale Broadcast Event Usability and Accessibility By Kris Schulze. "…How do we best host a broadcast event for all 2,300 MNIT staff while planning for inclusion from the start?…" https://mn.gov/mnit/media/blog/?id=38-360595 How to Create Accessibility Statements By Shadi Abou-Zahra. "…Developing an Accessibility Statement provides guidance, a free generator tool, and examples, to help you create accessibility statements…" https://www.w3.org/blog/2018/11/how-to-create-accessibility-statements/ Playboy.com Sued by Blind Man Who Says He Can't Fully 'Enjoy' the Website By Tim Kenneally. "…Playboy.com was sued Wednesday by a legally blind man who says that the site, as well as Playboyshop.com, aren't equally accessible to the blind and visually impaired…" https://www.thewrap.com/playboy-com-sued-by-blind-man-who-says-he-cant-fully-enjoy-the-website/ DeVos' Inspector General to Audit Dismissals of Civil Rights Complaints By Annie Waldman. "The review could shed light on the Education Department's reluctance, documented by a series of ProPublica articles, to investigate alleged discrimination by school districts and colleges…" https://www.propublica.org/article/devos-inspector-general-to-audit-dismissals-of-civil-rights-complaints Ed Department Reopening Hundreds Of Disability-Related Complaints By Courtney Perkes. "The U.S. Department of Education is reversing course after being sued over changes to its handling of disability discrimination complaints in schools…" https://www.disabilityscoop.com/2018/12/03/ed-department-reopening-complaints/ +02: CASCADING STYLE SHEETS. Programming CSS By Jeremy Keith. "There's a worrying tendency 'real' programmers look down their noses at CSS…" https://adactio.com/journal/14574 Resilient CSS: 7-Part (Video) Series By Jen Simmons. "Learn to write CSS that works in every browser at the same time - old and new. You can use brand new features in CSS, while still supporting people who have old software. You just have to know how. Let me show you…" https://www.youtube.com/playlist?list=PLbSquHt1VCf1kpv9WRGMCA9_Nn4vCLZ9Y +03: COLOR. Contrast and Color Accessibility By WebAIM. "We've updated and significantly expanded our article on contrast and color usage to include testing with various tools." https://webaim.org/articles/contrast/ Updated Color Contrast Checker By WebAIM. "The popular WebAIM Color Contrast Checker has been updated to provide feedback on meeting WCAG 2.1's 3:1 contrast ratio requirements for graphical objects and user interface components." https://webaim.org/resources/contrastchecker +04: DRUPAL. Drupal Admin UX Study: What We Can Learn from Contentful, Craft CMS, Squarespace, and WordPress By Suzanne Dergacheva. "There is exciting work being done in the Drupal community to improve the Admin UI, including the JavaScript Modernization Initiative and an overhaul of the look and feel of the Seven theme. Meanwhile, I've been working with a group in the Drupal community to research what user experience improvements we should be making for content editors…" https://evolvingweb.ca/blog/drupal-admin-ux-study-what-we-can-learn-contentful-craft-cms-squarespace-and-wordpress +05: EVALUATION & TESTING. Automated Testing for Web Accessibility By Anders Fredericksen. "…some general concepts are important for organizations to understand as they undertake initiatives and adopt automated tools…" https://www.levelaccess.com/automated-testing-web-accessibility-2/ Quick Test: Large Touch Targets By Eric Bailey. "A touch target is the total area a user can click or tap on to activate an interactive element such as a link, input, or button…" https://a11yproject.com/posts/large-touch-targets/ 10 Diagrams to Help You Think Straight About UX Research By David Travis. "Some of the problems we work on as UX researchers are simple and are easily solved by getting users in front of our product. But other problems can be complex and it's hard to know how to start solving them. In situations like that, a simple 2x2 diagram can cut through the "what ifs", the "how abouts" and the edge cases and provide a simple way of looking at the problem. Here are 10 examples of 2x2 diagrams to simplify UX research discussions" https://www.userfocus.co.uk/articles/think-straight-about-UX-Research.html +06: EVENTS. Intro to Audio Description January 17, 2018. Online https://www.3playmedia.com/resources/webinars/webinar-registration-01-17-2019/ Washington DC UX Conference April 27-May 3, 2019. Washington D.C., U.S.A. https://www.nngroup.com/training/washington-dc/ Technical Communication Summit May 5-8, 2019. Denver, Colorado, U.S.A. https://summit.stc.org/ +07: HTML. The 'D' in the DOM By Anthony Jeffery. "It's within the Document Object Model (DOM) that we find one of the keys to building accessible things for the web: the document. Anthony Jeffery helps us decide what HTML elements to use to lay the foundation for an accessible document." https://www.24a11y.com/2018/the-d-in-the-dom/ Just Markup By Michael Scharnagl. "When I started working as a Front-end Developer (or rather Web designer, as people doing HTML, CSS and a bit of JavaScript were usually called back then), all the Back-end people working at the company *laughed* at me because I was 'just' doing HTML and CSS and not 'real programming'…" https://justmarkup.com/log/2018/11/just-markup/ +08: INFORMATION ARCHITECTURE. Unraveling a Complex UX Problem - How a Greek Myth Helped Me Conquer Information Architecture By Amy Rosenbaum. "…I now know that I can use patience, creative thinking, and the right UX tools to unravel even the knottiest problems." https://uxdesign.cc/unraveling-a-complex-ux-problem-how-a-greek-myth-helped-me-conquer-information-architecture-743ebd7d0ea +09: JAVASCRIPT. What, Exactly, Is the DOM? By Ire Aderinokun. "The Document Object Model, or the 'DOM', is an interface to web pages. It is essentially an API to the page, allowing programs to read and manipulate the page's content, structure, and styles. Let's break this down…" https://bitsofco.de/what-exactly-is-the-dom/ +10: MISCELLANEOUS. What Is Design Thinking, Really? (What Practitioners Say) By Sarah Gibbons. "The majority of UX and design professionals define design thinking roughly the same, regardless of industry and experience, but there's no agreement on the specifics." https://www.nngroup.com/articles/design-thinking-practitioners-say/ Giving Back to the Community By Mike Gifford. "Mike Gifford challenges us to try a new way of giving back. Not by writing an article, proposing a talk or organizing an accessibility awareness event, but by making the internet more accessible by default." https://www.24a11y.com/2018/giving-back-to-the-community/ Stories from the Trenches: What I've learned from Working as a Blind Developer for a Sighted Dev Team By Florian Beijers. "In this article, developer Florian Beijers shares his experiences with the employment process and his experiences with developer tools; the struggles as well as the positives of a blind developer." https://www.24a11y.com/2018/stories-from-the-trenches/ +11: USABILITY. Animations are Distracting! (Video) By Aurora Harley. "Moving UI elements attract attention, which often means distracting users from accomplishing their primary goals. Some types of animations are more distracting than others, and it's important to match how attention-grabbing the motion is to the context and user needs." https://www.nngroup.com/videos/distracting-animations/ The Hidden UX Lessons From Your Favourite Christmas Movie Characters By Eleanor McKenna. "…I've rounded up wisdom from nine Christmas characters as lessons you can apply to your own design process…" https://www.uxmas.com/2018/the-hidden-ux-lessons-from-your-favourite-christmas-movie-characters Three Contexts for Evaluating Organizational Usability By Morten Hertzum. "Organizational usability is about the match between the user and the system, between the organization and the system, and between the environment and the system. While the first of these matches can, to a large extent, be evaluated in the lab, the two others cannot. Organizational usability must instead be evaluated in situ, that is, while the system is used for real work…" http://uxpajournal.org/evaluating-organizational-usability/ The Mobile Checkout Experience By Anna Kaley. "Optimize the checkout experience on mobile ecommerce channels by taking into account the strengths and limitations of mobile devices. Aim to minimize the number of steps and typing, and take advantage of capabilities such as geolocation and the camera." https://www.nngroup.com/articles/mobile-checkout-ux/ The State of UX in 2019 By Fabricio Teixeira, Caio Braga. "…a holistic analysis of UX Design as a discipline: the tools we use, the methods we apply every day, the technologies we design around, the career challenges we experience, and how our community is responsible for what's happening in the world around us - the one that we, consciously or not, have helped design…" https://trends.uxdesign.cc/2019 +12: XML. Accessible SVG Icons with Inline Sprites By Marco Hengstenberg. "At a certain stage in a project someone always comes in and says: 'We need icons!' And why do people need icons? Whatever the reasoning may be, we need to make sure that people who can't see or recognize these icons can understand their purpose. Marco Hengstenberg visits the practice of using SVG icons with inline sprites, and how to ensure these icons are accessible." https://www.24a11y.com/2018/accessible-svg-icons-with-inline-sprites/ Accessible SVG: Methods for Adding Alternative Content By Carie Fisher. "Scalable Vector Graphics (SVG) are XML-based vector images…" https://webdesign.tutsplus.com/tutorials/accessible-svg-methods-for-adding-alternative-content--cms-32205 [Section one ends.] ++ SECTION TWO: +13: 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.]