Plain Language Is for Everyone, Even Experts
Professionals want clear, concise information devoid of unnecessary jargon or complex terms. Plain language benefits both consumers and organizations.
ux  ux--content  wd  wd-src--nn-group 
Intriguing CSS Level 4 Selectors
CSS selectors have progressed massively over the years, giving developers far more power for targeting specific bits on their pages. The examples in this article are part of the CSS Selectors Level 4 specification. Let’s dive in and investigate seven of these intriguing selectors, some of which I guarantee you’ve yet to use in practice!
wd  wd-css  wd-css--selectors 
6 days ago
Fundamentals of Responsive Images | Lullabot
As a recovering English major, I’d like to believe words alone are enough to tell a tale on the web. A text-only page is fast: even a long article can load nearly instantly. Add photos, and the web slows down. Yet great images bring emotion, a connection with others and the world around us. They’re often worth the tradeoff in time to load a page.
wd  wd-performance  wd-images  wd-images--responsive 
6 days ago
Micromodal.js - Tiny javascript library for creating accessible modal dialogs
Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript It enables you to create WAI-ARIA guidelines compliant modal dialogs, with confidence and with minimal configuration. At just 1.9kb minified and gzipped, its a tiny library for big change.
wd  wd-accessibility  wd-css  wd-js  wd-interface  wd-interface--modal  wd-uses--github  wd-uses--npm  wd-uses--yarn 
6 days ago
An event for CSS position:sticky  |  Web  |  Google Developers
Here's a secret: You may not need scroll events in your next app. Using an IntersectionObserver, I show how you can fire a custom event when position:sticky elements become fixed or when they stop sticking. All without the use of scroll listeners. There's even an awesome demo to prove it:
wd  wd-css  wd-js  wd-interface--sticky  wd-src--google-developers 
6 days ago
Force the screen reader to announce digits | :last-child
There are times when we want the screen reader to announce individual letters in a string. This is sometimes up to the interpretation of the screen reader with an acronym, such as NASA. There are other times when we need to force the digits, for instance in a confirmation code IXbib. This page will test options for making a screen reader announce this confirmation code: IXbib
wd  wd-accessibility  wd-css 
6 days ago
UX for Lizard Brains · An A List Apart Article
Technology can make magic happen. In seconds, you can find all the blue sandals in a warehouse of millions of shoes. A million people can read the same article without killing one tree. You can undo, unsend, and even unfriend! But here’s the buzzkill: if unanticipated or unwelcome, the magic of technology is confusing, disorienting, and unintuitive—a UX designer’s worst nightmare.
ux  ux--patterns 
7 days ago
Use a Sass Variable for a Selector | CSS-Tricks
Say you need to use a certain selector in multiple places in your code. It's not tremendously common, to be sure, but stuff happens. Repeated code is typically an opportunity for abstraction. Abstracting values in Sass is easy, but selectors is slightly trickier.
wd  wd-sass  wd-sass--variables  wd-src--css-tricks 
8 days ago
CSS Grid Layout and Accessibility - CSS | MDN
Those of us who have been doing web development for more years than we care to remember might consider that CSS Grid is a little bit like using “tables for layout”. Back in the early days of web design, the way we constructed page layout was to use HTML tables, then fragment our design into the cells of those tables in order to create a layout. This had some advantages over the “CSS Positioning” that came afterwards, in that we could take advantage of the alignment and full height columns offered by table display. The biggest downside however was that it tied our design to the mark-up, often creating accessibility issues as it did so. In order to lay the design out in the table we often broke up the content in ways that made no sense at all when read out by a screen reader for example.
wd  wd-accessibility  wd-css  wd-css--grid 
9 days ago
Media Player
A tiny, totally cross browser, accessible, fully customizable media player written in plain JavaScript.
wd  wd-accessibility  wd-accessibility--interactive  wd-media  wd-media--video  wd-uses--github  wd-uses--npm 
9 days ago
Tabbed Interfaces
When you think about it, most of your basic interactions are showing or hiding something somehow. I've already covered popup menu buttons and the simpler and less assuming tooltips and toggletips. You can add simple disclosure widgets, compound "accordions", and their sister component the tabbed interface to that list. It's also worth noting that routed single-page applications emulate the showing and hiding of entire web pages using JavaScript.
wd  wd-accessibility  wd-accessibility--aria  wd-accessibility--tabindex  wd-html  wd-html--semantics  wd-css  wd-js  wd-interface  wd-interface--tabs 
9 days ago
Why the Email Confirmation Field Must Die - UX Movement
The email address is one of the most corrected form fields. It’s easy to mistype because the input contains a long string of various characters. This can lead to users submitting an incorrect email address.
ux  ux--patterns 
14 days ago
Help Your Users `Save-Data` | CSS-Tricks
The breadth and depth of knowledge to absorb in the web performance space is ridiculous. At a minimum, I'm discovering something new nearly every week. Case in point: The Save-Data header, which I discovered via a Google Developers article by Ilya Grigorik.
wd  wd-performance  wd-src--css-tricks 
15 days ago
CSS Grid PlayGround | Terminology | Mozilla
Before we dive into CSS Grid concepts, let’s cover some basic terminology.
wd  wd-css  wd-css--grid 
17 days ago
SpeedCurve | A retailer's guide to web performance
I’m at this week, having really interesting conversations with online retailers. What I love about talking with this crowd is that – like me – they're super focused on user-perceived performance. Not surprisingly, we have a lot to talk about.
wd  wd-performance 
17 days ago
The Mega HTML5 Cheatsheet – Level Up! – Medium
Guys, guys, look what I found! The Mega HTML5 Cheatsheet. As for me, I found this one extremely useful. But enough said. Please, enjoy!
wd  wd-html  wd-src--medium 
17 days ago
CSS font-display: The Future of Font Rendering on the Web — SitePoint
One of the downsides of using web fonts is that if a font is not available on a user’s device, it must be downloaded. This means that before the font becomes available the browser has to decide how to handle the display of any block of text that uses that font. And it needs to do so in a way that doesn’t significantly impact the user experience and perceived performance.
wd  wd-performance  wd-performance--perceived  wd-css  wd-typography  wd-typography--rendering  wd-src--sitepoint 
17 days ago - Accessibility is not an edge case
There's a common misconception that people using assistive technologies are an edge case. That they fall into that 1% where people disable Javascript. But, this couldn't be further from the truth.
wd  wd-accessibility 
17 days ago
Sensors For The Web!  |  Web  |  Google Developers
Today, sensor data is used in many native applications to enable use cases such as immersive gaming, fitness tracking, and augmented or virtual reality. Wouldn't it be cool to bridge the gap between native and web applications? The Generic Sensor API, For The Web!
wd  wd-js  ux  ux--device 
18 days ago
6 Ways To Make A Video Accessible To Everyone - Ai-Media
The world is full of great content, but most isn’t accessible to everyone, which is frustrating for people that are excluded. Here are 6 ways to make your video more accessible for everyone.
wd  wd-accessibility  wd-accessibility--video  wd-media  wd-media--video 
22 days ago
A11y Accordion Tabs Component
A small script (less than 1.6 KB compressed and gzipped) with zero dependencies for creating accessible accordion tabs components. Based on the accessible tabs component by @stowball. The component is an accordion on smaller screens and switches to a tab view on larger viewports.
wd  wd-accessibility  wd-interface--tabs  wd-interface--accordion  wd-uses--github  wd-uses--npm 
26 days ago
Browser Compatibility for CSS Grid Layouts with Simple Sass Mixins | CSS-Tricks
If you visit, you'll see that CSS Grid is supported in current versions of all major browsers except Opera Mini. So why not start using it? Rachel Andrew wrote extensively on the subject of if it's "safe to use" or not. It is, assuming you're OK with a fallback scenario that doesn't replicate exactly what Grid can do:
wd  wd-css  wd-css--grid  wd-src--css-tricks 
27 days ago
shiwaforce/postcss-high-contrast: Create high contrast version of your project with ease.
PostCSS High Contrast is PostCSS plugin that helps automatically convert all colors to high contrast. This Plugin gives you ability to create high contrast version of your project with ease.
wd  wd-accessibility  wd-accessibility--contrast  wd-css  wd-postcss  wd-color  wd-uses--github 
27 days ago
What’s New in WCAG 2.1 | Adrian Roselli
I field questions pretty regularly about what is coming in WCAG 2.1. I have offered links to the spec, pointers to W3C mailing list email, references to other posts (most recently David MacDonald’s post that looks at the same version as this post), but have avoided gathering them in one place on my own. Part of the reason is because they have been fluid for some time.
wd  wd-accessibility 
28 days ago
On fonts and dyslexia | atrophiedmind
One of the most frequent questions I get asked is around using special fonts for people with dyslexia. There has been a lot of stuff about dyslexia friendly fonts over the years starting with comic sans, read regular and most recently with open dyslexic and dyslexie. There are various claims made as to their efficacy.
wd  wd-accessibility  wd-typography 
29 days ago
philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them.
This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you're building a website using flexbox and something isn't working as you'd expect, you can find the solution here.
wd  wd-css  wd-css--flexbox  wd-uses--github 
4 weeks ago
A command line tool to statically analyse your page in order to generate the most optimal web font subsets, then inject them into your page. Speed up your time to first meaningful paint by reducing the web font payload and critical path to the font files.
wd  wd-typography  wd-performance  wd-uses--npm 
4 weeks ago
Resources for Eliminating Bias in Design | UX Booth
Several months ago I realized that, as designers, our work is unconsciously limited by bias. I had a dream project; one which afforded me the opportunity to improve one of my weaker skills — creating a color palette. After putting together a few different versions of the client’s site, in typical UX fashion I went out in search of feedback. I showed my designs to the guy next to me, and he flatly stated, “I don’t like it. It’s boring.”
design  ux 
4 weeks ago
Discover the Power of CSS Transforms - Heart Internet Blog - Focusing on all aspects of the web
With a single line of CSS we can completely reorient any element on our page – we can move it, rotate it, resize it, or send it into another dimension (to an extent). This all comes to us via the transform property. While it is a single property, a lot of functionality is packed into it, and it can be confusing how all its values combine to create its end result. Let’s discuss some of the basics and then dive into a handful of use cases.
wd  wd-animation  wd-css  wd-css--variables 
4 weeks ago
Optical Effects in User Interfaces (for True Nerds)
Our eyes are weird organs that often are telling lies to us. But if you know the peculiarities of human visual perception, you can build more approachable and clean designs. Not only do type designers utilize optical tricks for creating readable and well-balanced fonts, but it’s also helpful for interface designers, who build user-machine communication.
5 weeks ago
Alternate text for background images, alt text accessibility
If your image contains important information for the end user, then it should be provided in an HTML <img> tag with proper alt text. The CSS Spec says this:
wd  wd-accessibility  wd-images  wd-images--background 
5 weeks ago
HTML5 Accessibility Chops: hidden and aria-hidden | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)
As a developer and also a consultant advising developers on how to develop accessible content, it is important to have and provide up to date and practical knowledge about robust development techniques. A recent question on Stack Overflow got me thinking: What is the best method for hiding content for all users? For hiding content for some users?
wd  wd-accessibility  wd-accessibility--hiding-content  wd-html  wd-src--paciello-group 
6 weeks ago
Counterfeit or Credible? UX Design for Authenticity in China
Counterfeiting is not uncommon in China. Thus, a main concern for Chinese web shoppers is making sure that the products they see online are authentic. Some Chinese online marketplaces are assumed to contain fake products, and past negative experiences with these fakes — ink cartridges that don’t last or don’t quite print the correct color — cause consumers to be extra wary when shopping online.
wd  wd-localisation  wd-src--nn-group 
6 weeks ago
Building Skeleton Screens with CSS Custom Properties | CSS-Tricks
Designing loading states on the web is often overlooked or dismissed as an afterthought. Performance is not only a developer's responsibility, building an experience that works with slow connections can be a design challenge as well.
wd  wd-performance  wd-performance--perceived  wd-css  wd-css--variables  wd-src--css-tricks 
6 weeks ago
Gain Motion Superpowers with requestAnimationFrame – Benjamin De Cock – Medium
The seeming complexity of requestAnimationFrame unfortunately scares many designers away: as a low-level API, it doesn’t provide much by default, resulting in boilerplate code that might initially seem disproportionate for the most basic effects. But once you grasp the few fundamental concepts, you enter a whole new world of possibilities. Let’s demystify this fantastic animation tool!
wd  wd-js  wd-animation  wd-src--medium 
6 weeks ago
7 solutions for creating more accessible SVGs » Simply Accessible
We’ve been working with SVGs a lot recently, which has led our developers down a rabbithole of discovery! Here are some things to consider when it comes to SVGs and accessibility.
wd  wd-accessibility  wd-accessibility--aria  wd-accessibility--images  wd-images  wd-images--svg 
6 weeks ago
The Tiny Keyboard Problem: Do People Complete Forms on Their Phones?
Mobile devices allow you to browse online no matter whether you’re at home on the couch or out comparison shopping in the store. A phone might even be your only computer and access to the internet.
ux  ux--content 
6 weeks ago
Snugly resizes text to fit its parent container. Ideal for flexible and responsive websites.
wd  wd-js  wd-typography  wd-uses--github  wd-uses--npm 
6 weeks ago
Managing CSS & JS in an HTTP/2 World | Viget
We have been hearing about HTTP/2 for years now. We've even blogged a little bit about it. But we hadn't really done much with it. Until now. On a few recent projects, I made it a goal to use HTTP/2 and figure out how to best utilize multiplexing. This post isn't necessarily going to cover why you should use HTTP/2, but it's going to discuss how I've been managing CSS & JS to account for this paradigm shift.
wd  wd-performance 
6 weeks ago
User Interfaces for Variable Fonts · An A List Apart Article
The tools we design with have a unique effect on the way we work, constraining and empowering us while we explore, examine and create. Variable fonts give us a new, wide open typographic space with which to work. Instead of prescribing value to individual UI elements in a vacuum, we should take a hybrid and calculated approach to variable font interfaces. How do we structure our design tools to adapt to the new advantages variable fonts provide us with?
design  design--typography  wd  wd-typography  wd-src--a-list-apart 
7 weeks ago
Rules For Creating Perfect Push Notifications | UX Booth
Have you ever paid attention to the number of notifications you receive on a daily basis from various apps? How many of those notifications do you actually care about?
ux  ux--patterns 
7 weeks ago
fractures helps you bootstrap design-systems and prototypes by providing a set of non-blocking, atomic, utility classes.
wd  wd-css  wd-framework  wd-framework--css 
7 weeks ago
Designing Embraceable Change – UX Immersion: Interactions – Medium
Imagine living in the same house for 10 years. Over that period, you’ve accumulated a lot of stuff. To keep your house organized, you found places to put everything. Every place made sense to you. Most of the time, you have no trouble finding anything you want. Occasionally, there’s something you can’t find, like a tape measure, because you can’t remember where you last put it, but with a little poking around (and asking your housemates,) you come upon it and all is well.
7 weeks ago
CSS Utility Classes and "Separation of Concerns"
Over the last several years, the way I write CSS has transitioned from a very "semantic" approach to something much more like what is often called "functional CSS." Writing CSS this way can evoke a pretty visceral reaction from a lot of developers, so I'd like to explain how I got to this point and share some of the lessons and insights I've picked up along the way.
wd  wd-css  wd-approach 
7 weeks ago
A tiny module for making screen readers announce text on demand, without a visual change to the interface. Initializing and using the live region is as simple as:
wd  wd-accessibility  wd-accessibility--aria  wd-accessibility--interactive  wd-uses--npm  wd-uses--github 
7 weeks ago
Form Validation with Web Audio | CSS-Tricks
I've been thinking about sound on websites for a while now. When we talk about using sound on websites, most of us grimace and think of the old days, when blaring background music played when the website loaded. Today this isn't and needn't be a thing. We can get clever with sound. We have the Web Audio API now and it gives us a great deal of control over how we design sound to be used within our web applications.
wd  wd-media  wd-media--audio  wd-forms  wd-forms--validation  wd-src--css-tricks 
7 weeks ago
Designing for the Arab User — Basic Arabic UX for Business
As a translator with +10 years of experience (English, Arabic, and Polish), as well as former startup employee responsible for FMCG product database development, I can’t help but notice an apparent underrepresentation of the Arab World when it comes to content and user-centered design. Interestingly, it doesn’t correspond to low internet penetration in the Middle East, when compared to the rest of the world. As of March 31st, 2017, there were nearly 142 million users in the region. It means that 57.4% of its inhabitants were online — in comparison to the world average of 49.2%(1).
ux  wd  wd-localisation 
8 weeks ago
Offline-Friendly Forms | Max Böck - Frontend Web Developer
Forms on the web don't usually play nice with bad connections. If you're trying to submit a form while offline, you'll most likely just lose your input. Here's how we might fix that.
wd  wd-performance  wd-performance--offline  wd-performance--localstore  wd-js  wd-forms 
8 weeks ago
Tackling Render Blocking CSS for a Fast Rendering Website — SitePoint
I’ve always thought deciding how and when to load CSS files is something best left to browsers. They handle this sort of thing by design. Why should developers do anything more than slap a link element with rel="stylesheet" and href="style.css" inside the <head> section of the document and forget about it?
wd  wd-performance  wd-performance--conditional  wd-performance--perceived  wd-performance--prefetch  wd-css  wd-src--sitepoint 
8 weeks ago
Accessible Custom Select Dropdowns | Web Axe
In web development, creating custom select dropdowns is difficult. It requires a lot of resources to sufficiently design (annotating the interaction, etc) and develop (the Javascript is fairly complex and the ARIA isn’t easy) and then test. Additional requirements such as option groups and auto-suggest make it even more challenging and time-consuming, and usually frustrating.
wd  wd-accessibility  wd-forms  wd-forms--input 
8 weeks ago
The accessibility stack: making a better layer cake » Simply Accessible
One way to prevent avoidable issues is to approach building for accessibility the way you build a web or native app from the ground up, in a stack of technologies, where each one has its role to play. Just like you carefully consider what backend language (if any), framework language, and additional libraries you might want to use for your app before you start building, the same should be done for accessibility.
wd  wd-accessibility 
8 weeks ago
Font-size: An Unexpectedly Complex CSS Property - In Pursuit of Laziness
font-size is the worst. It’s a CSS property probably everyone who writes CSS has used at some point. It’s pretty ubiquitous. And it’s super complicated.
wd  wd-units  wd-css  wd-typography  wd-typography--rendering 
8 weeks ago
Lazy loading images using Intersection Observer | Dean Hume
If you haven’t had the chance to watch it yet, Paul Lewis put together an awesome video series that demonstrates how to build a media player alongside some of the great features of Progressive Web Apps. There are a series of videos on YouTube that take place over a couple of days as he builds each new part of the site. Watching videos of developers showcasing their work is definitely one of my favourite ways of learning new things!
wd  wd-performance  wd-performance--lazyload  wd-images  wd-images--optimization  wd-js 
8 weeks ago
Building Accessible Single Page Apps – codeburst
As JavaScript frameworks and libraries to build single page apps (SPAs) proliferate and become more ubiquitous, a new host of web accessibility concerns are created that must be addressed.
wd  wd-accessibility  wd-accessibility--aria  wd-accessibility--interactive 
8 weeks ago
This in JavaScript | Zell Liew
Are you confused by the this keyword in JavaScript? It confuses everyone in the beginning, so don’t worry about it. You’re not alone.
wd  wd-js  wd-js--this 
8 weeks ago
Preload, Prefetch And Priorities in Chrome – reloading – Medium
Today we’ll dive into insights from Chrome’s networking stack to provide clarity on how web loading primitives (like <link rel=“preload”> & <link rel=“prefetch”>) work behind the scenes so you can be more effective with them.
wd  wd-performance  wd-performance--conditional  wd-performance--perceived  wd-performance--prefetch  wd-src--medium 
8 weeks ago
Accessibility Testing with pa11y
Knowing where to start with accessibility testing can be difficult and overwhelming. In my article on Tools for Developing Accessible Websites, I mentioned 5 tools you can use to get started developing more accessible websites. More recently, I have discovered an incredibly powerful tool - pa11y
wd  wd-accessibility  wd-accessibility--tools  wd-src--bitsofcode 
9 weeks ago
Scotch Egg Navigation - Andy Beaumont
While working on a project with Richard Amos about a year ago we were pondering the static linear nature of breadcrumbs and wondering why they should always be so. The breadcrumb serves two purposes; firstly it gives users a sense of where they are in a site’s structure, helping them to never feel lost or disoriented.
ux  ux--patterns  wd  wd-interface--breadcrumb 
9 weeks ago
Performant Web Animations and Interactions: Achieving 60 FPS - Milliseconds Matter
Silky smooth interactions are critical for providing a natural-feeling application. The devil is in the details, and ill-performant web animations feel awkward, “janky”, and, above all, slow. Developers often invest quite a bit of time to reduce first page loads by even a few milliseconds, but forget to consider the impact of the interactions that follow.
wd  wd-performance  wd-animation 
9 weeks ago
Advanced SCSS, or, 16 cool things you may not have known your stylesheets could do
Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.
wd  wd-sass  wd-sass--extend  wd-sass--maps  wd-sass--media-queries  wd-sass--mixin  wd-sass--variables 
10 weeks ago
You’re Offline | Max Böck - Frontend Web Developer
A truly responsive website should adapt to all kinds of situations. Besides different viewport sizes, there are other factors to consider. A change in connectivity is one of them.
wd  wd-performance  wd-performance--offline 
10 weeks ago
How to turn your website into a PWA | Max Böck - Frontend Web Developer
A Progressive Web App, or PWA, uses modern web capabilities to deliver an app-like user experience. Any website can be a PWA - here's how to do it.
wd  wd-pwa 
10 weeks ago
This is a checklist of potential things that might want to be considered when constructing a style guide for a company or project. Currently a work in progress so please feel free to open issues or pull requests.
wd  wd-styleguide 
10 weeks ago
The Accessibility Cheatsheet
We all know that accessibility is important. The problem is, it is not always clear what exactly we can do to make our sites more accessible. The Web Accessibility Initiative created some Web Content Accessibility Guidelines (WCAG) targeted at us, web content developers, to create more accessible websites. The WCAG contain some very useful information, and so I decided to condense the very extensive guidelines and highlight some practical examples of what we can do to implement them and make our websites more accessible.
wd  wd-accessibility 
10 weeks ago
CSS Custom Properties—Dynamic Changes With Javascript
Have you ever wished you could change the value of a Sass or Less variable after your page has loaded? I have. Unfortunately, it’s not something you can do as the variables cease to be variables once the preprocessed code is compiled into CSS. You don’t have the same limitation with CSS custom properties.
wd  wd-css  wd-css--variables  wd-js 
10 weeks ago
Performance and Resilience: Stress-Testing Third Parties – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts
When building almost any website of any reasonable size, we’re highly likely to need to call on at least some third party resources: analytics, fonts, CDNs, ad providers, to name just a few.
wd  wd-performance 
10 weeks ago
The Critical Request | CSS-Tricks
Serving a website seems pretty simple: Send some HTML, the browser figures out what resources to load next. Then we wait patiently for the page to be ready. Little may you know, a lot is going on under the hood. Have you ever wondered how browser figures out which assets should be requested and in what order? Today we're going to take a look at how we can use resource priorities to improve the speed of delivery.
wd  wd-performance  wd-performance--conditional  wd-performance--prefetch  wd-performance--perceived  wd-html  wd-js  wd-css  wd-images  wd-src--css-tricks 
10 weeks ago
If you really dislike FOUT, `font-display: optional` might be your jam | CSS-Tricks
The story of FOUT is so fascinating. Browsers used to do it: show a "fallback" font while a custom font loads, then flop out the text once it has. The industry kinda hated it, because it felt jerky and could cause re-layout. So browsers changed and started hiding text until the custom font loaded. The industry hated that even more. Nothing worse than a page with no text at all!
wd  wd-css  wd-typography  wd-typography--rendering  wd-performance  wd-performance--perceived  wd-performance--lazyload  wd-src--css-tricks 
10 weeks ago
Umbrella JS
It is strongly influenced by jquery with many similar methods so you'll feel at ease developing with Umbrella.
wd  wd-js  wd-performance 
11 weeks ago
The Code4Lib Journal – A Practical Starter Guide on Developing Accessible Websites
Web accessibility is increasingly important. One reason is legal: in the US the federal government recently updated their regulation on accessibility of digital content, Section 508, incorporating the W3C’s Web Content Accessibility Guidelines 2.0 as well as harmonizing the guidelines with the EU’s information and technology communications rules (United States Access Board, 2017). While Section 508 only explicitly applies to federal departments, based on wording in other sections, such as Section 504, any federally funded program can also be held accountable in following the same guidelines.
wd  wd-accessibility 
11 weeks ago
Tooltips & Toggletips
Tooltips — affectionately misnomered as "tootlips" by my friend Steve — are a precariously longstanding interface pattern. Literally "tips for tools", they are little bubbles of information that clarify the purpose of otherwise ambiguous controls/tools. A common example is a control that is only represented by a cryptic icon, the meaning of which the user has yet to learn.
wd  wd-accessibility  wd-html  wd-html--semantics  wd-interface  wd-interface--tooltip 
11 weeks ago
Are Notifications A Dark Pattern? | Designlab
Have you ever had a nightmare where you were literally drowning in little red notification badges? I did once, and it got me thinking: what actually are notifications? And are they just another dark pattern – a form of coercion and online trickery? In this article, I explore the phenomenon of “pseudo-notifications”, and conclude with some thoughts on what the future might hold for notifications as a design pattern.
ux  ux--dark-patterns 
11 weeks ago
Effective UI Texts: Words to Avoid in Writing | Icons8 Blog
Neat, coherent, and obvious texts make interfaces more intuitive and instill confidence. Below you will find all common words to avoid in writing when you create a text for your UI.
ux  ux--content 
11 weeks ago
Checklist - 18F Accessibility Guide
This checklist helps developers identify potential accessibility issues affecting their websites or applications. It's broken down into three sections of decreasing importance: A, B and C. Please check and address these issues in the order in which they appear.
wd  wd-accessibility 
11 weeks ago
Animating with CSS Variables | Val Head
There are some really impressive and amazing examples of using CSS Variables in animation out there, like this single div accordion or this sunrise/sunset scene. How could you not want to give CSS Variables a spin in your own animation after seeing things like that? Here are 4 ways CSS Variables can be helpful for animation even if you’re not making fancy demos like these.
wd  wd-animation  wd-css  wd-css--variables 
11 weeks ago
How We Conducted User Research in The Arab Market
When I started working at UX studio as a researcher, I was lucky enough to be a member of an international design team on my very first project. We were working on a new mobile app targeted for the UAE market, which had been quite unknown to us before.
wd  wd-localisation 
11 weeks ago
« earlier      
color data design design--logos-and-branding design--objects design--terminology design--typography geography geography--china geography--japan git humor internet language law mac mac--apple-tv mac--apps mac--ios maps math psychology sociology technology technology--computer-hardware unicode-and-emoji ux ux--content ux--conversational ux--dark-patterns ux--device ux--haptic ux--ia ux--patterns ux--personas ux--states ux--testing ux--tools wd wd-accessibility wd-accessibility--aria wd-accessibility--audio wd-accessibility--contrast wd-accessibility--hiding-content wd-accessibility--images wd-accessibility--interactive wd-accessibility--tabindex wd-accessibility--tools wd-accessibility--video wd-accessibility--wcag wd-animation wd-approach wd-browser wd-browser--battery wd-browser--cookie wd-browser--notification wd-browser--support wd-browser--url wd-buildtools--grunt wd-buildtools--gulp wd-buildtools--npm wd-buildtools--webpack wd-cms wd-cms--kirby wd-cms--koken wd-cms--metalsmith wd-cms--netlify wd-cms--orchard wd-cms--wordpress wd-cms--yellow wd-color wd-css wd-css--background wd-css--borders wd-css--centering wd-css--element-query wd-css--filters wd-css--flexbox wd-css--functional wd-css--gradient wd-css--grid wd-css--layout wd-css--pseudo wd-css--selectors wd-css--variables wd-email wd-formatting wd-forms wd-forms--button wd-forms--input wd-forms--label wd-forms--password wd-forms--progress wd-forms--search wd-forms--select wd-forms--slider wd-forms--switches wd-forms--validation wd-framework wd-framework--css wd-framework--frontend wd-graphs wd-grid wd-hosting wd-html wd-html--amp wd-html--iframe wd-html--microdata wd-html--rel wd-html--semantics wd-html--web-components wd-images wd-images--background wd-images--favicon wd-images--icon wd-images--optimization wd-images--ratios wd-images--responsive wd-images--sprites wd-images--svg wd-input wd-input--drag-and-drop wd-input--keyboard wd-input--pointer wd-input--touch wd-interface wd-interface--accordion wd-interface--breadcrumb wd-interface--carousel wd-interface--coachmark wd-interface--cursor wd-interface--datepicker wd-interface--editor wd-interface--filtering wd-interface--gallery wd-interface--lightbox wd-interface--menu wd-interface--modal wd-interface--pagination wd-interface--progress wd-interface--scrolling wd-interface--slideshow wd-interface--sticky wd-interface--tabs wd-interface--tags wd-interface--thumbnail wd-interface--toc wd-interface--tooltip wd-js wd-js--angular wd-js--d3 wd-js--ember wd-js--jquery wd-js--knockout wd-js--meteor wd-js--moment wd-js--promises wd-js--raphael wd-js--react wd-js--service-workers wd-js--this wd-js--vue wd-js--zepto wd-less wd-linting wd-localisation wd-media wd-media--audio wd-media--bigscreen wd-media--embeds wd-media--print wd-media--vertical wd-media--video wd-performance wd-performance--conditional wd-performance--lazyload wd-performance--localstore wd-performance--offline wd-performance--perceived wd-performance--prefetch wd-polyfill wd-postcss wd-pwa wd-responsive wd-responsive--js wd-sass wd-sass--extend wd-sass--maps wd-sass--media-queries wd-sass--mixin wd-sass--variables wd-server wd-src--a-list-apart wd-src--adactio wd-src--bitsofcode wd-src--cloud-four wd-src--codyhouse wd-src--creative-bloq wd-src--css-tricks wd-src--google-developers wd-src--lullabot wd-src--medium wd-src--nn-group wd-src--paciello-group wd-src--quirksmode wd-src--sitepoint wd-src--sixrevisions wd-src--smashing wd-src--thenewcode wd-src--tympanus wd-src--ux-magazine wd-src--uxbooth wd-src--uxmatters wd-src--webaim wd-styleguide wd-tables wd-tables--responsive wd-tables--sorting wd-testing wd-typography wd-typography--icon-font wd-typography--modular-scale wd-typography--opentype wd-typography--rendering wd-typography--type-locks wd-units wd-uses--bower wd-uses--cdnjs wd-uses--coffeescript wd-uses--component wd-uses--github wd-uses--homebrew wd-uses--npm wd-uses--packagist wd-uses--ruby wd-uses--yarn

Copy this bookmark: