Search

Nalezeno "keyboard": 88

compute cuter

30.10.2020
Get that desk more cuter, fam. Amy (@sailorhg) has this perfectly cute minisite with assorted desktop backgrounds, fonts, editor themes, keyboard stuff, and other accessories. These rainbow cables are great. And speaking of fonts, we’re still plucking away at this microsite for coding fonts...

Focus management and inert

19.10.2020
Many forms of assistive technology use keyboard navigation to understand and take action on screen content. One way of navigating is via the Tab key. You may already be familiar with this way of navigating if you use it to quickly jump from input to input on a form without having to reach for your...

The :focus-visible Trick

16.10.2020
Always worth repeating: all interactive elements should have a focus style. That way, a keyboard user can tell when they have moved focus to that element. But if you use :focus alone for this, it has a side effect that a lot of people don’t like. It means that when you click (with a mouse)...

Supercharging Number Inputs

4.9.2020
Speaking of number scrubbing (i.e. adding mouse UX to number inputs), you can also add better keyboard commands to number inputs. Kilian Valkhof explains how he added up and down arrows to a number input, as well as modifier keys to change how much the keys increment the value, like Emmet does....

Number Scrubbing

29.8.2020
If you use <input type="number">, some browsers give you an input that has UI for incrementing the number, like up/down arrows (often called “spinners”). That’s a bit helpful sometimes. But people have certainly explored fancier ways of updating that number....

How to Create a “Skip to Content” Link

17.3.2020
Skip links are little internal navigation links that help users move around a page. It’s possible you’ve never actually seen one before because they’re often hidden from view and used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to...

Using the HTML title attribute

15.3.2020
 Steve Faulkner: User groups not well served by use of the title attribute • Mobile phone users.• Keyboard only users.• Screen magnifier users.• Screen reader users.• Users with fine motor skill impairments.• Users with cognitive impairments. Sounds like in 2020, the only useful thing the title...

Animated Matryoshka Dolls in CSS

27.2.2020
Here’s a fun one. How might we create a set of those cool Matryoshka dolls where they nest inside one another... but in CSS? I toyed with this idea in my head for a little while. Then, I saw a tweet from CSS-Tricks and the article image had the dolls. I took that as a sign! It was time to...

Bad accessibility equals bad quality

22.1.2020
Here’s a smart post from Manuel Matuzovic where he digs into why accessibility is so important for building websites: Web accessibility is not just about keyboard users, color contrast or screen readers. Accessibility is a perfect indicator for the quality of a website. Accessibility is strongly...

Autumn (macOS window manager)

17.1.2020
I love how nerdy this is. Autumn allows you to write JavaScript to control your windows. Get this window, move it over here. Nudge this window over. There are all sorts of APIs, like keyboard command helpers and doing things on events, like waking up from sleep. I love that it exists, but for...

Having a Little Fun With Custom Focus Styles

2.12.2019
Every front-end developer has dealt or will deal with this scenario: your boss, client or designer thinks the outline applied by browsers on focused elements does not match the UI, and asks you to remove it. Or you might even be looking to remove it yourself. So you do a little research and find...

Don’t comma-separate :focus-within if you need deep browser support

24.7.2019
I really like :focus-within. It's a super useful selector that allows you to essentially select a parent element when any of its children are in focus. Say you wanted to reveal some extra stuff when a <div> is hovered... div:hover { .extra-stuff { /* reveal it */ } } That's...

VS Code Screencast Mode

10.7.2019
VS Code has many great tools hidden deep within its settings. One of those tools is screencast mode. Screencast mode will display keyboard presses. You can

CSS :focus-within

25.6.2019
Using :hover to display additional information or elements is a very useful technique but a big drawback to using the hover pseudo-class is that they are usually not accessibility-friendly. Not everyone uses a mouse and some users have visual impairments, so they rely on screen readers or...

A11Y with Lindsey

13.6.2019
Lindsey Kopacz has a wonderful blog about accessibility. I've seen a number of her articles making the rounds lately and I was like, dang I better make sure I'm subscribed. For example: An Introduction to ARIA States 3 Simple Tips to Improve Keyboard Accessibility Create custom keyboard accessible...

The difference between keyboard and screen reader navigation

29.5.2019
There are a few differences between keyboards and screen readers and Léonie Watson highlights of them: When using the tab key, keyboard focus and screen reader focus are synchronised with each other. The rest of the time, screen reader users have an enormous range of commands at their disposal...

Everything You Ever Wanted to Know About inputmode

17.5.2019
The inputmode global attribute provides a hint to browsers for devices with onscreen keyboards to help them decide which keyboard to display when a user has selected any input or textarea element. <input type="text" inputmode="" /> <textarea inputmode="" /> Unlike changing the type...

The Thinking Behind Simplifying Event Handlers

9.5.2019
Events are used to respond when a user clicks somewhere, focuses on a link with their keyboard, and changes the text in a form. When I first started learning JavaScript, I wrote complicated event listeners. More recently, I've learned how to reduce both the amount of code I write and the number...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace