Nathan's Brain
  • Introduction
  • Incubator
  • American Sign Language
  • Art
  • Behavior Change
    • Akrasia
      • Beeminder
      • Procrastination
  • Career
  • Civil Discourse
  • Communication
  • Computer Science
    • Artificial Intelligence
  • Creativity
    • Writing
  • Design
    • Color
    • Design Process
    • Stock
    • Web Design
  • Economics
  • Engineering
  • Entrepreneurship
    • Customer Development
    • Marketing
      • Newsletter Publishing
    • Pricing
  • Environment
    • Energy
    • Transportation
  • Failure & Vulnerability
  • Freelancing
    • Estimating
  • Futurism
  • Governance & Politics
    • Representation & Voting
  • Health
  • Humane Tech
    • Phone Usage
  • Infotainment
  • Linguistics
  • Minimalism
  • Personal Finance
    • FIRE Movement
    • Investing
  • Productivity
    • Attention Management
    • Audio for Focus
    • Automation
    • Task Management
    • Time Management
  • Programming Languages
    • JavaScript
      • Snippets
    • PHP
    • Python
      • Development Environments
      • Package Management & Distribution
  • Psychology
  • Quantified Self
    • Experience Sampling Method
  • Rationality
    • Bayes' Theorem
    • Cognitive Biases
  • Religion
    • Adventism
  • Remote Work
  • Research
    • Note Taking
  • Science
  • Self-Study
    • Accessibility & Usability
    • Algorithms
    • Artificial Intelligence
    • Cryptography
    • Data Science
    • Design Patterns
    • Freelancing
    • Functional Programming
    • Game Development
    • Graphic Design
    • Grid Layout
    • Microservices
    • PWAs
    • SaaS
    • Software Craft
    • Software Management
    • Statistics
    • SVG
    • UI Design
    • Web Animation
  • Software Development
    • API Design
    • Collaboration
    • Command Line
    • git
    • Integrated Development Environments
    • Knoxville Scene
    • Paradigms
    • Refactoring
    • Self-Care
    • Testing
  • Technology History
    • People
    • Timeline
  • Web Development
    • Accessibility & Usability
    • APIs
    • Browsers
    • Content Management Systems
    • CSS
    • Email
    • Frameworks
      • React
    • Libraries
    • No Code & Low Code
    • Performance
    • Serverless
    • Static Sites
    • Testing
    • Twig
    • Type
Powered by GitBook
On this page
  • Testing
  • Touch Targets
  • Sources
  1. Web Development

Accessibility & Usability

PreviousWeb DevelopmentNextAPIs

Last updated 4 years ago

#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."

- “This checklist helps developers identify potential accessibility issues affecting their websites or applications.”

#article

- "Accessibility for Development Teams . Start building accessibility into your dev process today."

#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

#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."

#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."

Testing

Touch Targets

Sources

#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.”

- "This document set is a text-based version of part of the content covered in the . 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 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.”

#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."

- "A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece."

#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."

- "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."

#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."

#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."

- “Modals are the crutch of the inarticulate designer and developer.”

#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.”

#article - Wikipedia. "The principle of least astonishment (POLA), also called the principle of least surprise (alternatively a "law" or "rule") applies to and design. 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.""

#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."

#article - "Summary: Past experiences and repeated practice inform user expectations. Deviations from a learned routine lead to user errors."

- “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.”

#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."

- "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."

#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 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."

- "Quickly check how easy it is to find the necessary functionality or information on the page layout."

#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"

#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 ."

#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 ."

- "World Leaders in Research-Based User Experience." .

10 Usability Heuristics for User Interface Design
18F Accessibility Guide
18F Accessibility Guide Checklist
A11Y Style Guide
The Almost-Complete Guide to Cumulative Layout Shift
axe
brunopulis/awesome-a11y
Calculating Color Contrast
Color Oracle
Colour Contrast Analyser
Colour Contrast Check
Contrast
Decorative Images
Deque
Don't Reinvent the Wheel
eBay MIND Patterns
Empathy Prompts
Funkify
Google Material Design Accessibility Principles
Google Web Fundamentals: Accessibility
Udacity course on Accessibility
Hex Naw
Hostile Design
HTML5 Accessibility
HTML: The Inaccessible Parts
Inclusive Components
Inclusive Design Principles
Intro to ARIA -- A11ycasts #13
Jacob's Law
Jakob's Law of Internet User Experience
Julie Grundy – The UX of Form Design: Designing an Effective Form
Microsoft Inclusive Design Principles
ModalzModalzModalz.com
pa11y
Pixels vs. Ems: Users DO Change Font Size
Principle of least astonishment
[1]
[2]
user interface
software
[3]
[4]
Random A11y Color Palettes
tota11y
Udacity Web Accessibility course, by Google, free
Usability Heuristic 4: Consistency and Standards
Variations on Practiced Patterns Cause Mistakes
Vox Media Accessibility Guidelines Checklist
Web Accessibility by Google
Web Accessibility Tutorials
WebAIM
WebAIM Color Contrast Checker
Web Content Accessibility Guidelines (WCAG) 2.0
Accessibility Testing - Totally Tooling Tips
Lighthouse Chrome extension
One Click Test
That Time I Tried Browsing the Web Without CSS
Tap targets are not sized appropriately
Rolling out the mobile-friendly update
Touch target size
Material Design Accessibility guidelines
Nielsen Norman Group
Invidious