October 29, 2021: Weekly Roundup of Web Design and Development News

In this week’s web design and development news roundup, you’ll find a collection of voice and tone guides, learn about the theme.json for WordPress Full Site Editing, discover how not to use HTML to create a burger button, and more.

If you’re new to my blog, each Friday I publish a post highlighting my favorite user experience, accessibility, WordPress, CSS, and HTML posts I’ve read in the past week.

Hope you find the resources helpful in your work or projects!

Want more resources like these on a daily basis? Follow me @redcrew on Twitter.

Tweet of the Week

If you are building a website, service or app, and you think accessibility is a feature, you need to think again. Accessibility is fundamental, unless you think oxygen is a feature of a habitable planet. #accessibility #a11y

— Richard Morton (he/him) (@accessibleweb) October 28, 2021

User Experience

• Using an eye-tracking device helps UX researchers recognize usability issues sooner, providing helpful info on how people navigate a page. In Eye-Tracking in Mobile UX Research, Mariana Macedo explains the latest eye-tracking trends and how you can include eye-tracking in your research.
• Last day to submit a presentation for the 2022 Information Architecture Conference is Sunday, October 31, 2021. The conference theme is [Re]Connect. Presentations can be submitted whether you are new to the field or a long-time practitioner.
• There are three approaches to measuring a user’s prior experience with a product or interface: tenure, frequency, and depth. While you may be tempted to only use one or two measurements, using all three is best.
• Great to see another helpful collection  of articles and videos from the Nielsen Norman Group.  Their context methods: study guide focuses on ethnographic methods (field studies and diary studies). Worth bookmarking.
• Wish I knew about this collection of voice, tone, and content guides from well-known companies last month. At our September 2021 Metro Detroit WordPress meetup, we talked about style guides and voice guides. Shoutout to Marli Mesibov for sharing the link on Twitter.

Accessibility

• If you missed the September 2021 announcement, Poynter discusses The National Center of Disability and Journalism’s decision to update its style guide to focus on identity-first language.
• I don’t think you’re alone, Amy.
  

  I still have to look up how to properly use role=alert, aria-live, aria-atomic and other ARIA attributes that announce new content. Something about the syntax just doesn’t stick in my brain. #WebDevLife #a11y

  — Amy Carney (@click2carney) October 28, 2021

• Along with other disabled students, first-year student Eleanor Bolton shares her challenges and concerns about campus accessibility at the University of North Carolina.
  

  I’m not a priority here.

• The Accessibility for UK Government team is looking to improve their Web Content Accessibility Guidelines (WCAG) Primer. Share your feedback on WCAG Primer in their survey (takes less than five minutes to complete).

WordPress

• In her latest post about WordPress Full Site Editing (FSE), my friend Marcy Diaz walks you through global styles in WordPress themes using the theme.json file.
• If you use OptinMonster, make sure your site has been updated to at least the 2.6.5 version. Wordfence announced 1,000,000 OptinMonster sites were affected by vulnerabilities. Wordfence Premium users received a firewall rule to protect them on September 28, 2021.
• VaultPress is no longer under development and hasn’t been tested with the last three major WordPress versions. Jetpack users with legacy plans should consider switching to the Jetpack Backup service.
  
• Improve the performance of your Elementor site with these six optimization tips. First tip: check your font loading method, you have five options.
• WooCommerce users will be glad to learn about the release of WooCommerce Blocks 6.2.0 with the updated Cart Block, bug fixes, and two enhancements (including one to improve accessibility).

CSS and HTML

• Stephanie Eckles updated her step-by-step tutorial for creating custom styled radio buttons with pure CSS. Her solution works whether you implicitly or explicitly layout the HTML.
• Ahmad Shadeed takes a closer look at object-fit and background-size, how they work, when you want to use them, and provides helpful use cases.
• Who know there were so many bad ways to create a burger (also known as kebab, meatball, and bento) button?  Manuel Matuzović collected 16 examples (along with issues and how to fix them) of how not to use HTML to create a burger button.
• I’ve been saying this for years: move your PDFs to semantic HTML pages.
  

  Get research papers out of PDFs into well-structured HTML with linked sources

  *then* talk to me about the metaverse.

  — Erika Hall (@mulegirl) October 27, 2021

• Has it been seven years already? I remember the announcement of the recommendation. Happy 7th birthday to HTML5! 
• I don’t think he’s asking for a faster horse. Why doesn’t HTML video element work similarly to the HTML picture element? Daniel Aleksandersen raises valid points on why the HTML video element needs to go back to the drawing board.
• If you haven’t already found the Learn CSS course on web.dev, I highly recommend it. They’re adding six new modules in the coming weeks. This week they launched the lists module.

What I Found Interesting

• Have you tried Cleanup.pictures to remove objects from your photos? It’s a free online application which uses software from Samsung’s Artificial Intelligence (AI) Lab to automatically and accurately redraw areas you delete from your photo.
• Halloween arrives this weekend! Have fun with the online Trick or Treat game from Pixelhop. Will you choose to explore what the rattle of bones down the street is about?
  
• I discovered a new privacy-focused search engine this week: Neeva. For the past few years, I’ve been using Startpage and DuckDuckGo for my searches, but am giving ad-free, private Neeva a try over the next few weeks.
• If you’ve chosen not to pay for Adobe Acrobat (since you only need it a few times a year), but still need to edit PDFs, check out the Acrobat free extension for Chrome and Edge to edit PDFs in the browser.

If you like what you’ve read today, share the post with your colleagues and friends.

Want to make sure you don’t miss out on updates? Subscribe to get notified when new posts are published.

Did I miss some resources you found this week? I’d love to see them! Post them in the comments below.