+++ WEB DESIGN UPDATE. - Volume 18, Issue 33, February 12, 2020. An email newsletter to distribute news and information about web design and development. ++ISSUE 33 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: BOOKS. 03: CASCADING STYLE SHEETS. 04: EVALUATION & TESTING. 05: EVENTS. 06: HTML. 07: JAVASCRIPT. 08: MISCELLANEOUS. 09: NAVIGATION. 10: TOOLS. 11: USABILITY. SECTION TWO: 12: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. The WebAIM Million Update By WebAIM. "…A 6-month accessibility re-analysis of the top 1,000,000 home pages…The number of detectable errors decreased slightly, but the number of home pages with WCAG failures increased slightly over 6 months. It is therefore difficult to say whether these data indicate an improvement in accessibility or not. The notable and alarming increase in page complexity-with increased ARIA implementation-would, if this trend continues, likely make the web more difficult for users…" https://webaim.org/projects/million/update Higher Ed in 4k Project By 4k.pope. "An accessibility analysis of up to 100 web pages from every college and university in the United States…" https://4k.pope.tech/ W3C Workshop Report: Inclusive Design for Immersive Web Standards By W3C. "W3C held a two days workshop on bringing Inclusive Design to Immersive Web standdards in Seattle on November 5 and 6 2019, hosted by PlutoVR, Maveron, We Make Reality, Virtual World Society and the Seattle Immersive Technology Association. The workshop brought over 50 participants from a very diverse set of backgrounds…" https://www.w3.org/2019/08/inclusive-xr-workshop/report.html Mobile A11y By Rob Whitaker. "This is a personally curated list of resources I have used and think others may find helpful too…" https://mobilea11y.com/resources/ Unsure about Digital Accessibility? These (Imaginary) People Can Lead to Success By Laura Ciporen. "Accessibility doesn't just benefit those with a disability. Think of your audience in pairs…" https://www.linkedin.com/pulse/unsure-digital-accessibility-imaginary-people-can-lead-laura-ciporen/ Re: How to Test for WCAG 2.1 SC 1.4.10 Reflow - Level AA? By Alastair Campbell. "…I tend to test reflow, text-size & text-spacing at the same time: Set the window to wider than the largest breakpoint (usually 1280 wide does that). Zoom until the effective width is 320px (which is 400% from 1280). Check for horizontal scrolling. Check for text that hasn't re-sized to at least 200%. Check for any sticky headers/footers that block the view (not a fail, but we bring that up as a 'best practice' issue). Activate the text-spacing bookmarklet. Gradually zoom out looking for areas of text that have been cut off, and check that menus & complex features work…" https://lists.w3.org/Archives/Public/w3c-wai-gl/2020JanMar/0190.html Squarespace, Wix, and Weebly: Accessibility Review By Terrill Thompson. "…I created an account on each service, and got started creating some simple websites. Here's what I found…" http://terrillthompson.com/1203 The Case for Learning Sign Language as an Accessibility Engineer By Liz Certa. "…Many of us came to this profession with a desire to remove barriers between disabled people and the world. And many of us enjoy self-improving hobbies outside of our working hours, from bodybuilding to baking to ballet. Learning sign language as a hobby is a great way to remove one more of those barriers, as well as learn something new, meet neat people, and become better engineers for your trouble. And finally, if any Deaf folks attending CSUN 2020 read this, come say hi… and please finger spell slowly." https://developer.paciellogroup.com/blog/2020/02/the-case-for-learning-sign-language-as-an-accessibility-engineer/ Accessible Unethical Technology By Laura Kalbag. "…I tried to explain how I fit accessibility into my idea of ethical design, or rather how I think something can be accessible but not ethical. The following is what I wrote. It didn't make the final edit of the book, but I feel it's a vital addendum to all my work on accessibility…" https://laurakalbag.com/accessible-unethical-technology/ Online Accessibility Legal News Recap (2019) By Sean McElaney. "…Technology has become an inevitable part of everyday life for all of us, regardless of ability. As society advances it is important to keep inclusion and accessibility at the forefront of our technological advances, thereby improving the lives of everyone and not leaving anyone behind. Through the help of litigation, legislation, and education, great strides have been made in 2019 regarding disability rights and accessibility improvements. We can only hope to see this trend continue through 2020 and the coming decade." https://www.microassist.com/digital-accessibility/online-accessibility-legal-news-recap-2019/ Morgan Stanley Sued Over Website Access by Blind Woman By Vicky Ge Huang. "A legally blind woman in New York has filed a negligence and discrimination suit against Morgan Stanley alleging that its online wealth management websites are largely inaccessible to her, in violation of the Americans with Disabilities Act and the state's Human Rights Law…" https://www.advisorhub.com/morgan-stanley-sued-over-website-access-by-blind-woman/ +02: BOOKS. * Felke-Morris. Basics of Web Design: HTML5 & CSS3, 5th Edition, Pearson Education, 2019. * Felke-Morris. Web Development & Design Foundations with HTML5, 10th Edition, Addison-Wesley, 2020. +03: CASCADING STYLE SHEETS. Select an Element with a Non-Empty Attribute By Chris Coyier. "Short answer: [data-foo]:not([data-foo=""]) { }". Longer answer…" https://css-tricks.com/select-an-element-with-a-non-empty-attribute/ CSS Can Influence Screenreaders By Ben Myers. "…With CSS, there is a gray area, for better or for worse, between content and its presentation. When CSS bleeds into content, it can convey important information that might be lost to screenreader users. Browsers have gotten really smart about how they expose that information to screenreaders, but that means that our styles can change screenreader users' experience in unexpected ways. As always, be sure to test with many screenreaders on many browsers and many platforms." https://blog.benmyers.dev/css-can-influence-screenreaders/ Custom Styling Form Inputs With Modern CSS Features By Aaron Iker. "It's entirely possible to build custom checkboxes, radio buttons, and toggle switches these days, while staying semantic and accessible. We don't even need a single line of JavaScript or extra HTML elements! It's actually gotten easier lately than it has been in the past… " https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/ +04: EVALUATION & TESTING. How to Maximize Insights in User Testing: Stepped User Tasks By Kara Pernice. "You can learn the right kind of things and much more in user tests if you start with broad tasks instead of immediately leading to areas of interest. Prepare additional, focused tasks that can be used to direct users." https://www.nngroup.com/articles/user-testing-stepped-tasks/ Qualitative vs. Quantitative UX Research (Video) By Kate Moran. "Qualitative and quantitative methods both have their place in user research, but they address different issues in the UX design process. Understand the differences to pick the right method to learn what you need." https://www.nngroup.com/videos/qualitative-vs-quantitative-research/ +05: EVENTS. ABLE Summit 2020 April 2-3, 2020. University of Beirut, Lebanon https://sites.aub.edu.lb/able/ WebAIM Training April 22-23, 2020. Logan, Utah, U.S.A. https://webaim.org/training/ Global Accessibility Awareness Day May 21, 2020. Everywhere https://www.globalaccessibilityawarenessday.org/ Front May 28-29, 2020. Salt Lake City, Utah, U.S.A. https://www.frontutah.com/conference/ Digital Accessibility Trends: 2020 Update June 2, 2020. Online https://www.accessibilityassociation.org/content.asp?admin=Y&contentid=633 De-mystifying and Taming the Complexities of WCAG 2.1 June 8, 2020. Minneapolis, Minnesota, U.S.A. https://www.meetup.com/Accessibility-Twin-Cities/events/267303634/ Enterprise Experience Conference 2020 June 10-12, 2020. San Francisco, Califorina, U.S.A. https://rosenfeldmedia.com/enterprise2020/ +06: HTML. #16 alt, no wait…, aria-label, no wait…, alt By Spell. "…Avoid aria attributes when possible. The aria-label attribute on the div is redundant, because the img already has an accessible name (the value of the alt attribute)…" https://www.htmhell.dev/alt-no-aria-label-no-alt/ A Decade of Heading Backwards By Steve Faulkner. "It's actually been longer (I remember being introduced to the outline algorithm in 2007), but 10 years is a number worth signifying…" https://codepen.io/stevef/post/a-decade-of-heading-backwards Title Attribute on Images? By Patrick H. Lauke. "…It's rubbish." (It is not recommended by W3C Accessibility Guidelines.) https://webaim.org/discussion/mail_message?id=41756 +07: JAVASCRIPT. Testing aria-live Support By Zoë Bijl. "What is the current support of aria-live regions, is it support by anything? Let's find out…" https://moiety.me/research/aria-live/ JavaScript Libraries Are Almost Never Updated Once Installed By Zack Bloom. "…One conclusion is whatever libraries you publish will exist on websites forever. The underlying web platform consequently must support aged conventions indefinitely if it is to continue supporting the full breadth of the web…" https://blog.cloudflare.com/javascript-libraries-are-almost-never-updated/ Hydration By Jeremy Keith. "As you may have noticed, I'm a fan of progressive enhancement. It's not cool. It's often at odds with 'modern' web development, so I end up looking like an old man yelling at a cloud to get off my lawn. Or something. At its heart though, progressive enhancement seems fairly uncontroversial and inoffensive to me. It's an approach. A mindset…" https://adactio.com/journal/16404 +08: MISCELLANEOUS. Switching to Firefox By Brad Frost. I switched my default browser on both desktop and mobile to Firefox. It was incredibly painless to do and literally haven't noticed anything different besides the UI. https://bradfrost.com/blog/post/switching-to-firefox/ +09: NAVIGATION. Link Targets and 3.2.5 By Adrian Roselli. "Regardless of what accessibility conformance level you target, do not arbitrarily open links in a new window or tab. If you are required to do so anyway, inform users in text…" https://adrianroselli.com/2020/02/link-targets-and-3-2-5.html Dropdown Menus 2020: Menus are not Menus By Terrill Thompson. "…key takeaways from all this: 1. The APG is informative, not normative… 2. Remember the First Rule of ARIA: Don't use ARIA, if the underlying HTML is sufficient for communicating what this thing is… 3. The Link + Disclosure Widget Navigation design pattern documented by Adrian Roselli (June 2019) seems like the best fit for most web navigation menus that I deal with in a university context…" http://terrillthompson.com/1226 Do you know what an "anchor link" in HTML means? By Tim Berners-Lee. "…I used the term 'anchor' for the the thing -- document or part of document -- a link starts or ends on, because the Hypertext research community used it. E.g. Dexter Reference Model of hypertext…" https://twitter.com/timberners_lee/status/1224764306258124800 +10: TOOLS. axe Pro: Keyboard Guided Test (Video) By Deque Systems. "The keyboard guided test is designed to help raise issues around missing focus indicators, missing ARIA roles, keyboard inaccessibility, and many others." https://www.youtube.com/watch?v=fY4jm3bm_1A +11: USABILITY. Executing UX Animations: Duration and Motion Characteristics By Page Laubheimer. "Define a trigger, transformations, duration, and easing of the animation, and be mindful of accessibility issues and annoying the user." https://www.nngroup.com/articles/animation-duration/ Choice Overload Impedes User Decision-Making By Alita Joyce. "Too many offerings (e.g., products or services) on a website make it harder for users to make a decision due to analysis paralysis. Alternatively, too many options can also cause users to hastily make a decision and later regret their choice due to buyer's remorse." https://www.nngroup.com/videos/choice-overload/ Avoid These 10 UX Design Fails By Erica Martin. "…These ten UX design fails listed below prove that even top companies can sometimes drop the ball…" https://usabilitygeek.com/avoid-these-10-ux-design-fails How Can We Make URLs Readable? By Deborah Edwards-Onoro. "When Chrome removed the http and https from the start of URLs in their browser address bar, I wasn't happy…" https://www.lireo.com/make-urls-readable/ We Need More Editors By Gerry McGovern. "…We need new types of human editors, who are able to work in tandem with technology and the collective intelligence that the Web has unleashed. This is how we will achieve quality, accuracy, transparency, and clarity and simplicity of communication." https://gerrymcgovern.com/we-need-more-editors/ [Section one ends.] ++ SECTION TWO: +12: 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.]