Accessibility & Usability
10 Usability Heuristics for User Interface Design #article - "Summary: Jakob Nielsen's 10 general principles for interaction design. They are called "heuristics" because they are broad rules of thumb and not specific usability guidelines."
18F Accessibility Guide Checklist - “This checklist helps developers identify potential accessibility issues affecting their websites or applications.”
The Almost-Complete Guide to Cumulative Layout Shift #article
axe - "Accessibility for Development Teams . Start building accessibility into your dev process today."
Calculating Color Contrast #article - “Some websites and services allow you to customize your profile by uploading pictures, changing the background color or other aspects of the design. As a customer, this personalization turns a web app into your little nest where you store your data. As a designer, letting your customers have free rein over the layout and design is a scary prospect. So what happens to all the stock text and images that are designed to work on nice white backgrounds? Even the Mac only lets you choose between two colors for the OS, blue or graphite! Opening up the ability to customize your site’s color scheme can be a recipe for disaster unless you are flexible and understand how to find maximum color contrasts.” #javascript #php #color #accessibility
Decorative Images #article - "Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive."
Don't Reinvent the Wheel #article - "If you’re trying to create an innovative car that will expand for extra passengers or cargo and shrink when you want to park it between a couple of enormous SUVs, you don’t need to reinvent the wheel. You might decide to modify the frame or axles in some way, but it’s already generally established that a round, rubber wheel is the best way to get around on American roads. The same principle applies to designing digital content: be deliberate about when you use well-established tools and when you design in a new way."
Funkify #chrome #extension - “Funkify is a brand new extension for Chrome that helps you experience the web and interfaces through the eyes of extreme users with different abilities and disabilities.”
Google Material Design Accessibility Principles
Google Web Fundamentals: Accessibility - "This document set is a text-based version of part of the content covered in the Udacity course on Accessibility. Rather than a direct transcription of the video course, it is meant to be a more concise treatment of accessibility principles and practices, using the course's original content as a base."
Hostile Design - “Hostile designs are designs against humanity. They are made specifically to exclude, harm or otherwise hinder the freedom of a human being. Quite often they aim to remove a certain section of a community from a public space.”
HTML: The Inaccessible Parts #article - "I’m going to start rounding up those HTML shortfalls in this here post as a little living document that I can personally reference every time I write some HTML."
Inclusive Components - "A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece."
Intro to ARIA -- A11ycasts #13 #video - "Here on a11ycasts I always try to encourage developers to use native controls rather than roll their own mainly because you get semantics and keyboard functionality for free. But there are situations where you need to build something and there's no native analog in the platform. For these occasions when you need to go offroad and build your own control, the Web Content Accessibility Initiatives Accessible Rich Internet Applications spec (WAI-ARIA) can help you add in the semantics your new custom control is missing. Today on the show I'll cover what ARIA is from a high level and show off some of the features and relationships ARIA let's you take advantage of."
Jacob's Law - "Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know."
Jakob's Law of Internet User Experience #video - "Summary: Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Design for patterns for which users are accustomed."
Julie Grundy – The UX of Form Design: Designing an Effective Form #video - "Forms are critical user’s experience. We have clear guidelines to follow, yet these guidelines are often are overlooked. Come to this talk to hear clear, practical tips on what to do, and what is new in the world of form design with research-backed best practices from Julie, Senior UX Designer at Oracle+Bronto. Attendees will leave with an understanding of what makes a well designed form and why."
Microsoft Inclusive Design Principles
ModalzModalzModalz.com - “Modals are the crutch of the inarticulate designer and developer.”
Pixels vs. Ems: Users DO Change Font Size #article - “The question was “How many users browse the main Internet Archive site with a default font size other than the common value of 16 pixels?” By knowing this, we would determine how many users would be affected by sizing with relative units like rems/ems. Using the methodology I describe below, we found that the answer is 3.08% of our users. That’s a pretty big number, higher than most counts of the market share of browsers like Internet Explorer, Edge, or Opera Mini.”
Principle of least astonishment #article - Wikipedia. "The principle of least astonishment (POLA), also called the principle of least surprise (alternatively a "law" or "rule")[1][2] applies to user interface and software design.[3] A typical formulation of the principle, from 1984, is: "If a necessary feature has a high astonishment factor, it may be necessary to redesign the feature."[4]"
Udacity Web Accessibility course, by Google, free
Usability Heuristic 4: Consistency and Standards #video - "Summary: No. 4 of the top 10 UX design heuristics is to stick to UI conventions and follow existing standards, so that users know what to expect and how to operate the interface."
Variations on Practiced Patterns Cause Mistakes #article - "Summary: Past experiences and repeated practice inform user expectations. Deviations from a learned routine lead to user errors."
Vox Media Accessibility Guidelines Checklist - “Making work accessible creates a better experience across the board. Use this checklist to help build accessibility into your process no matter your role or stage in a project.”
Web Accessibility by Google #course - Free. "In this course you’ll get hands-on experience making web applications accessible. You’ll understand when and why users need accessibility. Then you’ll dive into the "how": making a page work properly with screen readers, and managing input focus (e.g. the highlight you see when tabbing through a form.) You’ll understand what "semantics" and "semantic markup" mean for web pages and add ARIA markup to enable navigating the interface with a range of assistive devices. Finally, you’ll learn styling techniques that help users with partial vision navigate your pages easily and reliably."
Web Accessibility Tutorials - "This collection of tutorials shows you how to develop web content that is accessible to people with disabilities, and that provides a better user experience for everyone."
Web Content Accessibility Guidelines (WCAG) 2.0
Testing
Accessibility Testing - Totally Tooling Tips #video - "In this episode, Addy chats with Rob Dodson, a developer advocate on the Chrome team, about his workflow for accessibility testing. They also discuss some of the important considerations when making edits to the design of your website for improved accessibility."
Lighthouse Chrome extension - "Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps. When auditing a page, Lighthouse runs a barrage of tests against the page, and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app."
One Click Test - "Quickly check how easy it is to find the necessary functionality or information on the page layout."
That Time I Tried Browsing the Web Without CSS #article - "Why, you might ask? Are there any non-masochistic reasons for turning off CSS? Heydon Pickering once tweeted that disabling CSS is a good way to check some accessibility standards"
Touch Targets
Tap targets are not sized appropriately #article - "Tap targets are interactive elements, like buttons or links, that users frequently tap. Appropriately-sized tap targets make pages more mobile-friendly and accessible. Google Search started boosting the ranking of mobile-friendly pages on mobile search results back in 2015. See Rolling out the mobile-friendly update."
Touch target size #article - "Any on-screen element that someone can click, touch, or otherwise interact with should be large enough for reliable interaction. Consider making sure these elements have a width and height of at least 48dp, as described in the Material Design Accessibility guidelines."
Sources
Nielsen Norman Group - "World Leaders in Research-Based User Experience." Invidious.
Last updated