Search completed in 1.10 seconds.
498 results for "keyboard":
Your results are loading. Please wait...
KeyboardEvent.initKeyboardEvent() - Web APIs
the keyboardevent.initkeyboardevent() method initializes the attributes of a keyboard event object.
... syntax kbdevent.initkeyboardevent(typearg, canbubblearg, cancelablearg, viewarg, chararg, keyarg, locationarg, modifierslistarg, repeat) parameters typearg the type of keyboard event; this will be one of keydown, keypress, or keyup.
KeyboardEvent - Web APIs
keyboardevent objects describe a user interaction with the keyboard; each event describes a single interaction between the user and a key (or combination of a key with modifier keys) on the keyboard.
... the event type (keydown, keypress, or keyup) identifies what kind of keyboard activity occurred.
... note: keyboardevent events just indicate what interaction the user had with a key on the keyboard at a low level, providing no contextual meaning to that interaction.
...And 49 more matches
Keyboard API - Web APIs
the keyboard api provides methods for working with a physical keyboard that is attached to a device running a browser.
...keyboard mapping provides an interface for retrieving the string generated by particular physical key on a keyboard to correctly identify that key to a user.
... keyboard locking enables a web page to capture keys that are normally reserved by the user agent or the underlying operating system.
...And 19 more matches
Keyboard Shortcuts - Archive of obsolete content
« previousnext » you could use keyboard event handlers to respond to the keyboard.
... creating a keyboard shortcut xul provides methods in which you can define keyboard shortcuts.
... you might want to set up more general keyboard shortcuts however.
...And 18 more matches
Example and tutorial: Simple synth keyboard - Web APIs
this article presents the code and working demo of a video keyboard you can play using the mouse.
... the keyboard allows you to switch among the standard waveforms as well as one custom waveform, and you can control the master gain using a volume slider beneath the keyboard.
... the video keyboard html there are three primary components to the display for our virtual keyboard.
...And 16 more matches
KeyboardEvent() - Web APIs
the keyboardevent() constructor creates a new keyboardevent.
... syntax event = new keyboardevent(typearg, keyboardeventinit); values typearg is a domstring representing the name of the event.
... keyboardeventinitoptional is a keyboardeventinit dictionary, having the following fields: "key", optional and defaulting to "", of type domstring, that sets the value of keyboardevent.key.
...And 14 more matches
KeyboardEvent.key - Web APIs
WebAPIKeyboardEventkey
the keyboardevent interface's key read-only property returns the value of the key pressed by the user, taking into consideration the state of modifier keys such as shift as well as the keyboard locale and layout.
... if the keyboardevent represents the press of a dead key, the key value must be "dead".
... some specialty keyboard keys (such as the extended keys for controlling media on multimedia keyboards) don't generate key codes on windows; instead, they trigger wm_appcommand events.
...And 13 more matches
Desktop mouse and keyboard controls - Game development
previous overview: control mechanisms next now when we have our mobile controls in place and the game is playable on touch-enabled devices, it would be good to add mouse and keyboard support, so the game can be playable also on desktop.
... pure javascript approach let's think about implementing pure javascript keyboard/mouse controls in the game first to see how it would work.
... we could write our own keycode object containing the key codes, for example: var keyboardhelper = { left: 37, up: 38, right: 39, down: 40 }; that way instead of using the codes to compare the input in the handler functions we could do something like this, which is arguably easier to remember: if(event.keycode == keyboardhelper.left) { leftpressed = true; } note: you can also find a list if the different keycodes and what keys they relate to in the keycode reference page.
...And 12 more matches
KeyboardEvent.code - Web APIs
the keyboardevent.code property represents a physical key on the keyboard (as opposed to the character generated by pressing the key).
... in other words, this property returns a value that isn't altered by keyboard layout or the state of the modifier keys.
... if the input device isn't a physical keyboard, but is instead a virtual keyboard or accessibility device, the returned value will be set by the browser to match as closely as possible to what would happen with a physical keyboard, to maximize compatibility between physical and virtual input devices.
...And 10 more matches
Keyboard - Accessibility
to be fully accessible, a web page must be operable by someone using only a keyboard to access and control it.
... this includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for input whenever possible.
... focusable elements should have interactive semantics if an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option).
...And 10 more matches
Keyboard-navigable JavaScript widgets - Accessibility
these widgets are typically composed of <div> and <span> elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do.
... this document describes techniques to make javascript widgets accessible with the keyboard.
...when set to 0, the element becomes focusable by keyboard and script.
...And 9 more matches
nsIBidiKeyboard
widget/public/nsibidikeyboard.idlscriptable this interface lets the application detect bidirectional writer users, and do some magic for them.
... a user is a bidirectional writer if they have keyboard layouts in both left-to-right and right-to-left directions (that is users who use arabic, iranian (persian), or israel (hebrew) keyboard layout, beside an us (english) layout.) inherits from: nsisupports last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) method overview boolean islangrtl(); void setlangfrombidilevel(in pruint8 alevel); attributes attribute type description havebidikeyboards boolean indicates whether or not the system has at least one keyboard for each direction (left-to-right and right-to-left) installed.
... methods islangrtl() determines if the current keyboard language is right-to-left.
...And 8 more matches
KeyboardLayoutMap - Web APIs
the keyboardlayoutmap interface of the the keyboard api is a map-like object with functions for retrieving the string associated with specific physical keys.
... a list of valid keys is found in the ui events keyboardevent code values specification.
... properties keyboardlayoutmap.entries read only returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
...And 8 more matches
Keyboard - Web APIs
WebAPIKeyboard
the keyboard interface of the the keyboard api provides functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.
... a list of valid code values is found in the ui events keyboardevent code values spec.
... methods keyboard.getlayoutmap() returns a promise that resolves with an instance of keyboardlayoutmap which is a map-like object with functions for retrieving the strings associated with specific physical keys.
...And 6 more matches
KeyboardEvent.location - Web APIs
the keyboardevent.location read-only property returns an unsigned long representing the location of the key on the keyboard or other input device.
... dom_key_location_left 1 the key was the left-hand version of the key; for example, the left-hand control key was pressed on a standard 101 key us keyboard.
... this value is only used for keys that have more than one possible location on the keyboard.
...And 6 more matches
KeyboardEvent.initKeyEvent() - Web APIs
the keyboardevent.initkeyevent() method is used to initialize the value of an event created using document.createevent("keyboardevent").
... events initialized in this way must have been created with the document.createevent("keyboardevent") method.
... do not use this method anymore, use the keyboardevent() constructor instead.
...And 5 more matches
Keyboard.getLayoutMap() - Web APIs
the getlayoutmap() method of the keyboard interface returns a promise that resolves with an instance of keyboardlayoutmap which is a map-like object with functions for retrieving the strings associated with specific physical keys.
... syntax var promise = keyboard.getlayoutmap() parameters none.
... return value a promise that resolves with an instance of keyboardlayoutmap.
...And 2 more matches
Keyboard.lock() - Web APIs
WebAPIKeyboardlock
the lock() method of the keyboard interface returns a promise after enabling the capture of keypresses for any or all of the keys on the physical keyboard.
... syntax var promise = keyboard.lock([keycodes[]]) parameters keycodes optional an array of one or more key codes to lock.
...a list of valid code values is found in the ui events keyboardevent code values spec.
...And 2 more matches
Keyboard.unlock() - Web APIs
WebAPIKeyboardunlock
the unlock() method of the keyboard interface unlocks all keys captured by the keyboard.lock() method and returns synchronously.
... syntax keyboard.unlock() parameters none.
... return value undefined specifications specification status comment keyboard mapthe definition of 'keyboard' in that specification.
...And 2 more matches
KeyboardEvent: code values - Web APIs
code values code values on windows this table shows the windows scan codes representing keys and the keyboardevent.code values which correspond to those hardware keys.
... keyboardevent.code value code firefox chrome 0x0000 "unidentified" "" 0x0001 "escape" "escape" 0x0002 "digit0" "digit0" 0x0003 "digit1" "digit1" 0x0004 "digit2" "digit2" 0x0005 "digit3" "digit3" 0x0006 "digit4" "digit4" 0x0007 "digit5" "digit5" 0x0008 "digit6" "digit6" 0x0009 "digit7" "digit7" 0x000a "digit8" "digit8" 0x000b "digit9" "digit9" 0x000c "minus" "minus" 0x000d "equal" "equal" 0x000e "backspace" "backspace" 0x000f "tab" "tab" 0x0010 "keyq"...
... "f19" 0x0067 "f16" "f20" 0x0068 "f17" "f21" 0x0069 "f18" "f22" 0x006a "f19" "f23" 0x006b "f20" "f24" 0x006c "f21" "" 0x006d "f22" "" 0x006e "f23" "" 0x006f "unidentified" "" 0x0070 "kanamode" "" 0x0071 (hanja key without korean keyboard layout) "lang2" "" 0x0072 (han/yeong key without korean keyboard layout) "lang1" "" 0x0073 "intlro" "" 0x0074, 0x0075 "unidentified" "" 0x0076 "f24" "" 0x0077, 0x0078 "unidentified" "" 0x0079 "convert" "" 0x007a "unidentified" "" 0x007b "nonconvert"...
...And 2 more matches
KeyboardEvent.keyCode - Web APIs
the deprecated keyboardevent.keycode read-only property represents a system and implementation dependent numerical code identifying the unmodified value of the pressed key.
...instead, you should use keyboardevent.code, if it's implemented.
... example window.addeventlistener("keydown", function (event) { if (event.defaultprevented) { return; // should do nothing if the default action has been cancelled } var handled = false; if (event.key !== undefined) { // handle the event with keyboardevent.key and set handled true.
...And 2 more matches
KeyboardEvent.metaKey - Web APIs
the keyboardevent.metakey read-only property returning a boolean that indicates if the meta key was pressed (true) or not (false) when the event occurred.
... note: on macintosh keyboards, this is the ⌘ command key.
... on windows keyboards, this is the windows key (⊞ windows).
...And 2 more matches
KeyboardLayoutMap.get() - Web APIs
the get() method of the keyboardlayoutmap interface returns the element with the given key.
... a list of valid keys is found in the ui events keyboardevent code values spec.
... syntax var value = keyboardlayoutmap.get(key) parameters key the key of the item to return from the map.
...And 2 more matches
KeyboardEvent.getModifierState() - Web APIs
the keyboardevent.getmodifierstate() method returns the current state of the specified modifier key: true if the modifier is active (that is the modifier key is pressed or locked), otherwise, false.
...the value must be one of the keyboardevent.key values which represent modifier keys, or the string "accel" .
...fn key on mac keyboard doesn't cause this active.
...event.getmodifierstate("accel") returns true when at least one of keyboardevent.ctrlkey or keyboardevent.metakey is true.
KeyboardLayoutMap.forEach() - Web APIs
the foreach() method of the keyboardlayoutmap interface executes a provided function once for each element of the map.
... syntax keyboardlayoutmap.foreach(function callback(currentvalue[, index[, array]]) { //your iterator }[, thisarg]); parameters callback the function to execute for each element, taking three arguments: currentvalue the value of the current element being processed.
... array optional the keyboardlayoutmap that foreach() is being called on.
... specifications specification status comment keyboard mapthe definition of 'foreach()' in that specification.
KeyboardLayoutMap.has() - Web APIs
the has() method of the keyboardlayoutmap interface returns a boolean indicating whether the object has an element with the specified key.
... a list of valid keys is found in the ui events keyboardevent code values spec.
... syntax var aboolean = keyboardlayoutmap.has(key) parameters key the key of an element to search for in the map.
... example specification status comment keyboard mapthe definition of 'has()' in that specification.
KeyboardEvent.altKey - Web APIs
the keyboardevent.altkey read-only property is a boolean that indicates if the alt key (option or ⌥ on os x) was pressed (true) or not (false) when the event occured.
... syntax var altkeypressed = instanceofkeyboardevent.altkey return value boolean examples <html> <head> <title>altkey example</title> <script type="text/javascript"> function showchar(e){ alert( "key keydown: " + string.fromcharcode(e.charcode) + "\n" + "charcode: " + e.charcode + "\n" + "alt key keydown: " + e.altkey + "\n" ); } </script> </head> <body onkeydown="showchar(event);"> <p> press any character key, with or without holding down the alt key.<br /> you can also use the shift key together with the alt key.
... </p> </body> </html> specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.altkey' in that specification.
KeyboardEvent.isComposing - Web APIs
the keyboardevent.iscomposing read-only property returns a boolean value indicating if the event is fired within a composition session, i.e.
... syntax var bool = event.iscomposing; example var kbdevent = new keyboardevent("synthetickey", false); console.log(kbdevent.iscomposing); // return false specifications specification status comment ui eventsthe definition of 'keyboardevent.prototype.iscomposing' in that specification.
... working draft document object model (dom) level 3 events specificationthe definition of 'keyboardevent.prototype.iscomposing' in that specification.
KeyboardEvent.keyIdentifier - Web APIs
the deprecated keyboardevent.keyidentifier read-only property returns a "key identifier" string that can be used to determine what key was pressed.
... its non-deprecated replacement is keyboardevent.key.
...this property was part of an old draft of the dom level 3 events specification, but it was removed in later drafts in favor of keyboardevent.key.
KeyboardEvent.which - Web APIs
the which read-only property of the keyboardevent interface returns the numeric keycode of the key pressed, or the character code (charcode) for an alphanumeric key pressed.
...please see keyboardevent.charcode and keyboardevent.keycode for more details.
... \n" + "keycode property: " + evt.keycode + "\n" + "which property: " + evt.which + "\n" ); } </script> </head> <body onkeypress="showkeypress(event);" onkeydown="keydown(event);" > <p>please press any key.</p> </body> </html> specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.which' in that specification.
KeyboardLayoutMap.entries - Web APIs
the entries read-only property of the keyboardlayoutmap interface returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
... syntax keyboardlayoutmap.entries() value an array of the given keyboardlayoutmap object's own enumerable property [key, value] pairs.
... specifications specification status comment keyboard mapthe definition of 'entries' in that specification.
KeyboardLayoutMap.keys - Web APIs
the keys read-only property of the keyboardlayoutmap interface returns a new array iterator object that contains the keys for each index in the array.
... syntax iterator = keyboardlayoutmap.keys value an iterator.
... specifications specification status comment keyboard mapthe definition of 'keys' in that specification.
KeyboardLayoutMap.size - Web APIs
the size read-only property of the keyboardlayoutmap interface returns the number of elements in the map.
... syntax var size = keyboardlayoutmap.size() value a number.
... specifications specification status comment keyboard mapthe definition of 'size' in that specification.
KeyboardLayoutMap.values - Web APIs
the values read-only property of the keyboardlayoutmap interface returns a new array iterator object that contains the values for each index in the map.
... syntax var iterator = keyboardlayoutmap.values value an iterator.
... specifications specification status comment keyboard mapthe definition of 'values' in that specification.
Navigator.keyboard - Web APIs
the keyboard read-only property of the navigator interface returns a keyboard object which provides access to functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.
... syntax var keyboard = navigator.keyboard value a keyboard object.
... specifications specification status comment keyboard mapthe definition of 'keyboard' in that specification.
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
WebHTMLElementkbd
the html keyboard input element (<kbd>) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.
... html <p>you can also create a new document using the keyboard shortcut <kbd><kbd>ctrl</kbd>+<kbd>n</kbd></kbd>.</p> this wraps the entire key sequence in an outer <kbd> element, then each individual key within its own, in order to denote the components of the sequence.
... result the output looks like this without a style sheet applied: with custom styles we can make more sense of this by adding some css: css we add a new style for <kbd> elements, key, which we can apply when rendering keyboard keys: kbd.key { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } html then we update the html to use this class on the keys in the output to be presented: <p>you can also create a new document by pressing <kbd><kbd class="key">ctrl</kbd>+<kbd class="key">n</kbd></kbd>.</p> result the result is just what we want!
Paddle and keyboard controls - Game development
it's time to implement some keyboard controls.
...add the following lines just above the setinterval() line at the bottom of your javascript: document.addeventlistener("keydown", keydownhandler, false); document.addeventlistener("keyup", keyuphandler, false); when the keydown event is fired on any of the keys on your keyboard (when they are pressed), the keydownhandler() function will be executed.
All keyboard shortcuts - Firefox Developer Tools
this page lists all keyboard shortcuts used by the developer tools built into firefox.
...before firefox 55, the keyboard shortcut was ctrl + shift + q (cmd + opt + q on a mac).
KeyboardEvent.charCode - Web APIs
the charcode read-only property of the keyboardevent interface returns the unicode value of a character key pressed during a keypress event.
... specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.charcode' in that specification.
KeyboardEvent.ctrlKey - Web APIs
the keyboardevent.ctrlkey read-only property returns a boolean that indicates if the control key was pressed (true) or not (false) when the event occured.
... syntax var ctrlkeypressed = instanceofkeyboardevent.ctrlkey return value a boolean example <html> <head> <title>ctrlkey example</title> <script type="text/javascript"> function showchar(e){ alert( "key pressed: " + e.key + "\n" + "ctrl key pressed: " + e.ctrlkey + "\n" ); } </script> </head> <body onkeypress="showchar(event);"> <p>press any character key, with or without holding down the ctrl key.<br /> you can also use the shift key together with the ctrl key.</p> </body> </html> specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.ctrlkey' in that specification.
KeyboardEvent.repeat - Web APIs
the repeat read-only property of the keyboardevent interface returns a boolean that is true if the given key is being held down such that it is automatically repeating.
... syntax var repeat = event.repeat; return value boolean specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.repeat' in that specification.
KeyboardEvent.shiftKey - Web APIs
the keyboardevent.shiftkey read-only property is a boolean that indicates if the shift key was pressed (true) or not (false) when the event occurred.
... syntax var shiftkeypressed = instanceofkeyboardevent.shiftkey return value a boolean example <html> <head> <title>shiftkey example</title> <script type="text/javascript"> function showchar(e){ alert( "key pressed: " + string.fromcharcode(e.charcode) + "\n" + "charcode: " + e.charcode + "\n" + "shift key pressed: " + e.shiftkey + "\n" + "alt key pressed: " + e.altkey + "\n" ); } </script> </head> <body onkeypress="showchar(event);"> <p>press any character key, with or without holding down the shift key.<br /> you can also use the shift key together with the alt key.</p> </body> </html> specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.shiftkey' in that speci...
KeyboardShortcut
attribute astring keyboardshortcut; see also nsiaccessible.defaultkeybinding nsiaccessible.getkeybindings() ...
nsITextInputProcessor
nsidomwindowutils has provided the methods which dispatched keyboard events and composition events almost directly.
... therefore they sometimes caused impossible scenarios in automated tests (what's tested with such events?) and js-ime and/or js-keyboard on firefox os or add-ons may dispatch events with wrong rules.
... createinstance(components.interfaces.nsitextinputprocessor); next, you need to get the rights to create composition or dispatch keyboard events with begininputtransaction() or begininputtransactionfortests(): if (!tip.begininputtransaction(window, callback)) { return; } if begininputtransaction() or begininputtransactionfortests() returns false, it means that another instance of nsitextinputprocessor has composition on the window or is dispatching an event.
...And 54 more matches
Key Values - Web APIs
learn how to use these key values in javascript using keyboardevent.key special values | modifier keys | whitespace keys | navigation keys | editing keys | ui keys | device keys | ime and composition keys | function keys | phone keys | multimedia keys | audio control keys | tv control keys | media controller keys | speech recognition keys | document keys | application selector keys | browser control keys | numeric keypad keys special values values of key which have special meanings other than identifying a specific key or character.
... keyboardevent.key value description virtual keycode windows mac linux android "unidentified" the user agent wasn't able to map the event's virtual keycode to a specific key value.
... keyboardevent.key value description virtual keycode windows mac linux android "alt" [5] the alt (alternative) key.
...And 52 more matches
Index - Web APIs
WebAPIIndex
653 compositionevent.locale api, compositionevent, deprecated, locale, property, reference the locale read-only property of the compositionevent interface returns the locale of current input method (for example, the keyboard layout locale if the composition is associated with ime).
...if the popup was opened via the keyboard, the popup node may be set to null.
... 993 document: keydown event api, dom, document, event, keyboardevent, reference, keydown the keydown event is fired when a key is pressed.
...And 48 more matches
XUL accessibility guidelines - Archive of obsolete content
guidelines keyboard access keyboard access is important to users who can't use a mouse.
... many screen reader users and those with physical disabilities rely on the keyboard as their primary input tool.
... these users require easy, predictable, and well-documented keyboard control.
...And 35 more matches
Handling common accessibility problems - Learn web development
when we say accessibility in the context of web technology, most people immediately think of making sure websites/apps are usable by people with disabilities, for example: visually impaired people using screen readers or magnification/zoom to access text people with motor function impairments using the keyboard (or other non-mouse features) to activate website functionality.
... using native keyboard accessibility certain html features can be selected using only the keyboard — this is default behavior, available since the early days of the web.
... you can try this out using our native-keyboard-accessibility.html example (see the source code) — open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements; the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused.
...And 25 more matches
Gecko Keypress Event
that is, when the currently selected keyboard layout produces a unicode character (according to the current state of capslock and numlock), the charcode property contains that character.
... when the accel key is down, the charcode of a keypress event may be replaced with a character from a latin keyboard layout only when the original character is not an ascii character.
...if gecko doesn't replace the charcode with an ascii character, the web application developers would need to consider all non-latin keyboard layouts (arabic, greek, hebrew, russian, etc.).
...And 14 more matches
Operable - Accessibility
guideline 2.1 — keyboard accessible: make all functionality available from a keyboard this guideline covers the necessity of making core website functionality available via a keyboard in addition to other means (e.g.
... mouse), so that users that rely on keyboard controls can access them.
... success criteria how to conform to the criteria practical resource 2.1.1 keyboard (a) all functionality should be accessible using keyboard controls, unless it cannot be done using the keyboard (e.g.
...And 13 more matches
How to build custom form controls - Learn web development
we require our control to be usable with a mouse as well as with a keyboard, and comprehensible to a screen reader, just like any native control.
... the control was active and the user moves the focus to another control using the keyboard (e.g.
...if you consider that the active state and the open state are completely different, the answer is again "nothing will happen" because we did not define any keyboard interactions for the opened state.
...And 8 more matches
Index - Archive of obsolete content
1340 popupkeys xul, xul popup guide when using a menupopup element, a keyboard listener is attached to the window that will handle keypresses for the menu.
...the following table lists the keys that are checked, and what the menu keyboard listener does in response: 1341 positioning xul, xul popup guide there are several ways in which the location of a popup on screen may be controlled.
... 1706 xul accesskey faq and policies xul an accesskey is an underlined letter in a web page, menu or dialog that indicates to a user a quick, keyboard method of simulating a click on that element.
...And 7 more matches
CSS and JavaScript accessibility best practices - Learn web development
something should definitely happen when states change, and you shouldn't get rid of the pointer cursor or the outline — both are very important accessibility aids for those using keyboard controls.
...for example, in our tabbed info box example (see source code) we have three panels of information, but we are positioning them on top of one another and providing tabs that can be clicked to show each one (it is also keyboard accessible — you can alternatively use tab and enter/return to select them).
... we also looked at an example of how to use javascript to build in functionality where it is missing — see building keyboard accessibility back in.
...And 7 more matches
Accessibility in React - Learn web development
previous overview: client-side javascript frameworks next in our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in react, which can improve usability and reduce confusion for both keyboard-only and screenreader users.
... objective: to learn about implementing keyboard accessibility in react.
... including keyboard users at this point, we've accomplished all of the features we set out to implement.
...And 7 more matches
CSUN Firefox Materials
in fact, the same keyboard commands are still available, so users can become comfortable and productive right away.
...firefox on linux currently boasts the best onscreen keyboard support in the industry via gok, the gnome onscreen keyboard.
...keyboard support "mozilla firefox is a web-browser with superior keyboard support.
...And 7 more matches
Software accessibility: Where are we today?
type on a standard keyboard.
...some examples of these assistive devices and software include: screen reading software, which speaks text displayed on the screen using hardware or software text-to-speech, and which allows a blind person to use the keyboard to simulate mouse actions alternate input devices, which allow people with physical disabilities to use alternatives to a keyboard and mouse voice recognition software, which allows a person to simulate typing on a keyboard or selecting with a mouse by speaking into the computer screen magnification software, which allows a low-vision computer user to more easily read portions of the screen...
...if you're physically disabled, you may not be able to type on a regular keyboard or use a mouse.
...And 7 more matches
Accessible Toolkit Checklist
the work when implementing a new toolkit it's important to: implement standard keyboard behavior, which can vary from platform to platform.
...since the individual widgets predominately come from the operating system, they already implement standard keyboard commands and follow the operating system's visual theme.
...these toolkits need to have accessibility implemented from the ground up, and get nothing for free in terms of keyboard, api or os-theme support.
...And 7 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
609 popupkeys xul, xul popup guide when using a menupopup element, a keyboard listener is attached to the window that will handle keypresses for the menu.
...the following table lists the keys that are checked, and what the menu keyboard listener does in response: 610 positioning xul, xul popup guide there are several ways in which the location of a popup on screen may be controlled.
... 975 xul accesskey faq and policies xul an accesskey is an underlined letter in a web page, menu or dialog that indicates to a user a quick, keyboard method of simulating a click on that element.
...And 6 more matches
HTML: A good basis for accessibility - Learn web development
for example, a control button to play a video on your site could be marked up like this: <div>play video</div> but as you'll see in greater detail later on, it makes sense to use the correct element for the job: <button>play video</button> not only do html <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate between buttons using the tab key and activate their selection using return or enter.
... one key aspect of the accessibility of ui controls is that by default, browsers allow them to be manipulated by the keyboard.
... you can try this out using our native-keyboard-accessibility.html example (see the source code).
...And 6 more matches
HTML: A good basis for accessibility - Learn web development
for example, a control button to play a video on your site could be marked up like this: <div>play video</div> but as you'll see in greater detail later on, it makes sense to use the correct element for the job: <button>play video</button> not only do html <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate between buttons using the tab key and activate their selection using return or enter.
... one key aspect of the accessibility of ui controls is that by default, browsers allow them to be manipulated by the keyboard.
... you can try this out using our native-keyboard-accessibility.html example (see the source code).
...And 6 more matches
WAI-ARIA basics - Learn web development
enhancing keyboard accessibility: there are built-in html elements that have native keyboard accessibility; when other elements are used along with javascript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result.
... note: also, try to make sure you test your site with a variety of real users — non-disabled people, people using screenreaders, people using keyboard navigation, etc.
... enhancing keyboard accessibility as discussed in a few other places in the module, one of the key strengths of html with respect to accessibility is the built-in keyboard accessibility of features such as buttons, form controls, and links.
...And 6 more matches
Index
MozillaTechXPCOMIndex
actions are needed more for ats that assist the mobility impaired, such as on-screen keyboards and voice command software.
... 253 defaultkeybinding provides localized string of global keyboard accelerator for default action, such as ctrl+o for open file (ctrl + o).
... 269 getkeybindings this method provides array of localized string of global keyboard accelerator for the given action index supported by accessible.
...And 6 more matches
ARIA: application role - Accessibility
any sort of special interpretation of html structures and widgets should be suspended, and control should be completely handed over to the browser and web application to handle mouse, keyboard, or touch interaction.
... in this mode, the web author is completely responsible for handling any and all keyboard input, focus management, and other interactions and cannot assume assistive technologies would do any processing on their end.
...a keyboard interaction model is generated that is very similar to a word processor where users can read line by line, sentence by sentence, or paragraph by paragraph.
...And 6 more matches
Accessibility Features in Firefox
in fact, the same keyboard commands are still available, so users can become comfortable and productive right away.
... firefox on linux currently boasts the best onscreen keyboard support in the industry via gok, the gnome onscreen keyboard.
... keyboard support "mozilla firefox is a web-browser with superior keyboard support." alan cantor, cantor access consulting firefox includes keyboard access to all of its amazing features: browse with caret allows users to select arbitrary content with the keyboard and move through content as if inside a read-only editor.
...And 5 more matches
Mozilla’s UAAG evaluation report
checkpoint title status notes/plans 1.1 full keyboard access.
... (p1) vg we have some remaining bugs, and some keyboard usability issues, but in general mozilla now has keyboard equivalents for almost everything.
... most browsers do not allow the user to select text with the keyboard alone.
...And 5 more matches
nsIDOMWindowUtils
ay, in long abutton, in long ascrollflags, in long adelta, in long amodifiers); obsolete since gecko 17.0 void sendwheelevent(in float ax, in float ay, in double adeltax, in double adeltay, in double adeltaz, in unsigned long adeltamode, in long amodifiers, in long alineorpagedeltax, in long alineorpagedeltay, in unsigned long aoptions); void sendnativekeyevent(in long anativekeyboardlayout, in long anativekeycode, in long amodifierflags, in astring acharacters, in astring aunmodifiedcharacters); void sendnativemouseevent(in long ascreenx, in long ascreeny, in long anativemessage, in long amodifierflags, in nsidomelement aelement); nsiquerycontenteventresult sendquerycontentevent(in unsigned long atype, in unsigned long aoffset, in unsigned long alength, in...
... deprecated since gecko 38.0 key_flag_not_synthesized_for_tests 0x0002 key_flag_location_standard 0x0010 location attrubute of the sending key event by sendkeyevent() returns keyboardevent.dom_key_location_standard if this is specified to the aadditionalflags.
... deprecated since gecko 38.0 key_flag_location_left 0x0020 location attrubute of the sending key event by sendkeyevent() returns keyboardevent.dom_key_location_left if this is specified to the aadditionalflags.
...And 5 more matches
ARIA: dialog role - Accessibility
additionally, the following needs to be done: the dialog must be properly labeled keyboard focus must be managed correctly the sections below describe how these two requirements can be met.
... required javascript features focus management a dialog has particular requirements for how keyboard focus should be managed: dialogs should always have at least one focusable control.
... when the dialog appears on the screen, keyboard focus (whose control depends upon the dialogs purpose) should be moved to the default focusable control inside the dialog.
...And 5 more matches
An overview of accessible web applications and widgets - Accessibility
see also live regions keyboard navigation often times developers overlook support for the keyboard when they create custom widgets.
... to be accessible to a variety of users, all features of a web application or widget should also be controllable with the keyboard, without requiring a mouse.
... traditionally, keyboard navigation on the web has been limited to the tab key.
...And 5 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
to respond to mouse and keyboard inputs in html, the onclick event handler is typically used to respond to mouse clicks, and the onkeypress event handler for keyboard input.
... keyboard shortcuts to implement keyboard shortcuts (pressing a key while holding down modifier keys like control or shift.) in a dhtml-based interface, you need a script that will intercept keyboard inputs.
... in xul, you can define keyboard shortcuts simply by using the key element, as shown in listing 19.
...And 4 more matches
The HTML5 input types - Learn web development
you can also use the multiple attribute in combination with the email input type to allow several email addresses to be entered in the same input (separated by commas): <input type="email" id="email" name="email" multiple> on some devices — notably, touch devices with dynamic keyboards like smart phones — a different virtual keypad might be presented that is more suitable for entering email addresses, including the @ key.
... see the firefox for android keyboard screenshot below for an example: note: you can find examples of the basic text input types at basic input examples (see the source code also).
...additionally, on devices with dynamic keyboards, the keyboard's enter key may read "search", or display a magnifying glass icon.
...And 4 more matches
IME handling guide
ime is used by chinese, japanese, korean and taiwan users for inputting chinese characters because the number of them is beyond thousands and cannot be input from the keyboard directly.
...this capsules the logic to dispatch widgetcompositionevent and widgetkeyboardevent for making the behavior on each platform exactly same.
... for example, if widgetkeyboardevent should be dispatched when there is a composition is managed by this class in xp level.
...And 4 more matches
Rhino Debugger
you may move backward and forward through the history list by pressing the up/down arrow keys on the keyboard.
... controlling execution the debugger provides the following facilities for you to control the execution of scripts you are debugging: step into to single step entering any function calls, you may do any of the following: select the debug->step into menu item on the menu bar press the step into button on the toolbar press the f11 key on the keyboard execution will resume.
... step over to single step to the next line in the current function, you may do any of the following: select the debug->step over menu item on the menu bar press the step over button on the toolbar press the f7 key on the keyboard execution will resume but control will return to the debugger at the next line in the current function or top-level script.
...And 4 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
in this article, we'll make use of information introduced in the previous articles in our webxr tutorial series to construct an example which animates a rotating cube around which the user can move freely using a vr headset, keyboard, and/or mouse.
...the code looks like this: const xrotationdegreespersecond = 25; const yrotationdegreespersecond = 15; const zrotationdegreespersecond = 35; const enablerotation = true; const allowmouserotation = true; const allowkeyboardmotion = true; const enableforcepolyfill = false; //const session_type = "immersive-vr"; const session_type = "inline"; const mouse_speed = 0.003; xrotationdegreespersecond the number of degrees of rotation to apply around the x axis per second.
... allowkeyboardmotion if true, the w, a, s, and d keys move the viewer forward, left, backward, and to the right, while the up and down arrow keys move up and down.
...And 4 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.
...looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.
...the focus can also cause dynamic keyboards to display on some touch devices.
...And 4 more matches
inputmode - HTML: Hypertext Markup Language
it can have the following values: none no virtual keyboard.
... for when the page implements its own keyboard input control.
... text (default value) standard input keyboard for the user's current locale.
...And 4 more matches
Building accessible custom components in XUL - Archive of obsolete content
we still have no way to focus individual cells, nor do we have a way to navigate the spreadsheet with the keyboard.
... <caption>cells really get focus</caption> further reading key-navigable custom dhtml widgets on mozilla.org adding keyboard navigation download stage-4.zip install stage-4.xpi true accessibility requires complete keyboard navigability.
...other compound controls such as lists and treeviews support two-phased keyboard navigation.
...And 3 more matches
key - Archive of obsolete content
ArchiveMozillaXULkey
« xul reference home [ examples | attributes | properties | methods | related ] the key element defines a window-global keyboard shortcut and must be placed inside a keyset element.
...valid keys are listed at keyboard shortcuts.
... keytext type: string a label for the keyboard shortcut.
...And 3 more matches
tabbox - Archive of obsolete content
label="last tab"/> </tabs> <tabpanels> <tabpanel><!-- tabpanel first elements go here --></tabpanel> <tabpanel><!-- tabpanel second elements go here --></tabpanel> <tabpanel><button label="click me"/></tabpanel> <tabpanel><!-- tabpanel fourth elements go here --></tabpanel> </tabpanels> </tabbox> attributes eventnode type: one of the values below indicates where keyboard navigation events are listened to.
...thus, if this attribute is not used, the tabbox or an element inside it must have the focus for the keyboard navigation to apply.
... parent keyboard navigation is captured at the parent of the tabbox.
...And 3 more matches
-ms-accelerator - Archive of obsolete content
the -ms-accelerator css property is a microsoft extension that sets or retrieves a string indicating whether the object represents a keyboard shortcut.
... initial valuefalseapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete syntax /* the object is not a keyboard shortcut (the default) */ -ms-accelerator: false /* the object is a keyboard shortcut */ -ms-accelerator: true values false the object is not a keyboard shortcut.
... true the object is a keyboard shortcut.
...And 3 more matches
Index - Game development
30 implementing game control mechanisms controls, desktop, gamepad, games, javascript, laptop, mobile, keyboard, mouse, touch one of html5's main advantages as a game development platform is the ability to run on various platforms and devices.
...in this series of articles we will show you how you can approach building a game that can be played using touchscreen smartphones, mouse and keyboard, and also less common mechanisms such as gamepads.
... 32 desktop mouse and keyboard controls controls, desktop, games, javascript, keyboard, mouse ok, we've dealt with touch, keyboard and mouse controls.
...And 3 more matches
Mobile accessibility - Learn web development
there are some exceptions that need special consideration for mobile; the main ones are: control mechanisms — make sure interface controls such as buttons are accessible on mobiles (i.e., mainly touchscreen), as well as desktops/laptops (mainly mouse/keyboard).
... hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to type it.
... for each character, hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to select it.
...And 3 more matches
Index - Learn web development
7 html: a good basis for accessibility at, accessibility, article, beginner, buttons, codingscripting, forms, html, learn, links, a11y, assistive technology, keyboard, screenreader, semantics you should now be well-versed in writing accessible html for most occasions.
... at, accessibility, article, beginner, css, codingscripting, html, javascript, learn, tools, users, assistive technology, keyboard, screan reader, screenreader this article should have given you a useful high-level overview of accessibility, shown you why it's important, and looked at how you can fit it into your workflow.
... 262 handling common accessibility problems accessibility, article, beginner, css, codingscripting, html, javascript, learn, testing, tools, cross browser, keyboard hopefully this article has given you a good grounding in the main accessibility problems you might encounter, and how to test and overcome them.
...And 3 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
objective: learn some advanced svelte techniques involving solving reactivity issues, keyboard accessibility problems to do with component lifecycle, and more.
... from inside todos.svelte, where the component is called: <moreactions {todos} on:checkall={e => checkalltodos(e.detail)} on:removecompleted={removecompletedtodos} /> working with the dom: focusing on the details now that we have completed all of the app's required functionality, we'll concentrate on some accessibility features that will improve the usability of our app for both keyboard-only and screenreader users.
... in its current state our app has a couple of keyboard accessibility problems involving focus management.
...And 3 more matches
Inputs and input sources - Web APIs
most commonly, these inputs are from keyboards and mice, but you could also use non-xr gamepad devices, network inputs, or other sources of data to simulate user controls.
... using keyboard and mouse events capturing input from the keyboard and mouse is done just like it is in any web application.
...because we are managing the avatar's position as defined by the keyboard and mouse in addition to anything the xr hardware might be doing, we need to maintain that information separately and apply it as a transform before rendering the avatar (or the world from the avatar's point of view).
...And 3 more matches
Accessibility documentation index - Accessibility
the position of each cell is significant and can be focused using keyboard input.
... 93 keyboard-navigable javascript widgets accessibility, dom, needsupdate web applications often use javascript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels.
... these widgets are typically composed of <div> and <span> elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do.
...And 3 more matches
Event reference
ressed submit the submit button is pressed printing events event name fired when beforeprint the print dialog is opened afterprint the print dialog is closed text composition events event name fired when compositionstart the composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).
... clipboard events event name fired when cut the selection has been cut and copied to the clipboard copy the selection has been copied to the clipboard paste the item from the clipboard has been pasted keyboard events event name fired when keydown any key is pressed keypress any key (except shift, fn, or capslock) is in a pressed position (fired continuously).
... compositionstart compositionevent dom l3 the composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).
...And 3 more matches
User input and controls - Developer guides
modern web user input goes beyond simple mouse and keyboard: think of touchscreens for example.
... user input and controls workflow the following diagram illustrates the typical workflow for implementing user input mechanisms: first of all, you need to decide which input mechanisms you want to cover in your application out of mouse, keyboard, finger touch and so on.
... you should always be mindful of keyboard accessibility where appropriate — many web users only use keyboard to navigate web sites and apps, and locking them out of your functionality is a bad idea.
...And 3 more matches
tabindex - HTML: Hypertext Markup Language
the tabindex global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the tab key, hence the name).
... it accepts an integer as a value, with different results depending on the integer's value: a negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation, but could be focused with javascript or visually by clicking with the mouse.
...the user won't be able to focus any element with a negative tabindex using the keyboard, but a script can do so by calling the focus() method.
...And 3 more matches
eventnode - Archive of obsolete content
« xul reference home eventnode type: one of the values below indicates where keyboard navigation events are listened to.
...thus, if this attribute is not used, the tabbox or an element inside it must have the focus for the keyboard navigation to apply.
... parent keyboard navigation is captured at the parent of the tabbox.
...And 2 more matches
Menus - Archive of obsolete content
the menu can also be opened by using the keyboard.
... this item will be highlighted, and will do certain functions depending on the kind of item it is, and the way in which it has been activated, whether via the keyboard or mouse.
... if it has been activated via navigation with the up or down arrow on the keyboard, then pressing the return key or right arrow key will open the menu.
...And 2 more matches
Focus management with Vue refs - Learn web development
the last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility.
...this can be disorienting for keyboard and non-visual users.
...on; editbuttonref.focus(); } next, add a call to this.focusoneditbutton() at the end of the itemedited() and editcancelled() methods: itemedited(newitemname) { this.$emit("item-edited", newitemname); this.isediting = false; this.focusoneditbutton(); }, editcancelled() { this.isediting = false; this.focusoneditbutton(); }, try editing and then saving/cancelling a to-do item via your keyboard.
...And 2 more matches
Strategies for carrying out testing - Learn web development
consider the following example (see the source code, and also the example running live): test criteria for this feature could be written like so: a and b grade: button should be activatable by the user's primary control mechanism, whatever it is — this should include mouse, keyboard, and touch.
... you might also notice that the button isn't usable using only the keyboard — this also needs to be remedied.
... maybe we could use some javascript to implement a keyboard control for the toggle, or use some other method entirely?
...And 2 more matches
Gecko info for Windows accessibility vendors
the base of our support for these products is msaa (microsoft active accessibility), external readonly dom support, and the keyboard api/user interface.
... iaccessible methods that we support: get_accparent get_accchildcount get_accchild get_accname get_accvalue get_accdescription get_accrole get_accstate get_accfocus get_accdefaultaction acclocation accselect acchittest accdodefaultaction accnavigate get_acckeyboardshortcut msaa support: iaccessible events and unique id's what msaa events do we support?
...ext/plain hresult get_doctype (/* [out] */ bstr *doctype); // from the <!doctype ..> hresult get_namespaceuriforid( // translate namespace id's from isimpledomnode /* [in] */ unsigned short namespaceid, // calls into the actual namespace uri's /* [out] */ bstr *namespaceuri); hresult put_alternateviewmediatypes(/* [in] */ bstr * commaseparatedmediatypes); // for example "aural, braille" keyboard user interface and api fortunately, gecko uses the standard keyboard api's for each supported platform.
...And 2 more matches
Mozilla Plugin Accessibility
see the plugin keyboard navigation proposal to see how the largest problems can be solved.
...all browser keys unavailable when plugin has focus focused plugins currently have no choice but to consume all keyboard events.
...this will allow keyboard users to still access menus, close the current page, scroll, move back and forward in history, etc.
...And 2 more matches
nsIAccessible
keyboard shortcuts some actions on accessibles can be performed by keyboard shortcuts.
... following methods are used to get them nsiaccessible.defaultkeybinding(), nsiaccessible.getkeybindings(), nsiaccessible.keyboardshortcut.
...layout oriented methods nsiaccessible.getchildatpoint() to get child accessible from point nsiaccessible.getaccessibletoleft(), nsiaccessible.getaccessibletoright(), nsiaccessible.getaccessibleabove() or nsiaccessible.getaccessiblebelow() to get left, right, top or below placed accessible methods getkeybindings provides array of localized string of global keyboard accelerator for the given action index supported by accessible.
...And 2 more matches
ARIA: grid role - Accessibility
the position of each cell is significant and can be focused using keyboard input.
...even though both data grids and layout grids employ the same aria roles, states, and properties, differences in their content and purpose surface factors that are important to consider in keyboard interaction design.
... if the grid is used as an interactive widget, keyboard interactions need to be implemented.
...And 2 more matches
ARIA: button role - Accessibility
keyboard interactions key function enter activates the button.
... required javascript features required event handlers buttons can be operated by mouse, touch, and keyboard users.
... onkeydown handles the event raised when the button is activated using the enter or space key on the keyboard.
...And 2 more matches
Viewport concepts - CSS: Cascading Style Sheets
body > header { position: fixed; top: 0; } body > footer { position: fixed; bottom: 0; } we got the 800 x 533 measurement when we zoomed in using the keyboard.
...what if a dynamic keyboard pops open on a phone?
...when the user pinch-zooms the page, pops open a dynamic keyboard, or when a previously hidden address bar becomes visible, the visual viewport shrinks but the layout viewport is unchanged.
...And 2 more matches
accesskey - HTML: Hypertext Markup Language
the accesskey global attribute provides a hint for generating a keyboard shortcut for the current element.
... the attribute value must consist of a single printable character (which includes accented and other characters that can be generated by the keyboard).
... safari n/a opera 15+ alt + key control + alt + key opera 12 shift + esc opens a contents list which are accessible by accesskey, then, can choose an item by pressing key accessibility concerns in addition to poor browser support, there are numerous concerns with the accesskey attribute: an accesskey value can conflict with a system or browser keyboard shortcut, or assistive technology functionality.
...And 2 more matches
Global attributes - HTML: Hypertext Markup Language
list of global attributes accesskey provides a hint for generating a keyboard shortcut for the current element.
...the browser should use the first one that exists on the computer keyboard layout.
... inputmode provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.
...And 2 more matches
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
8 accesskey global attributes, html, reference, accesskey the accesskey global attribute provides a hint for generating a keyboard shortcut for the current element.
... the attribute value must consist of a single printable character (which includes accented and other characters that can be generated by the keyboard).
... 31 tabindex global attributes, html, reference the tabindex global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the tab key, hence the name).
...And 2 more matches
OpenClose - Archive of obsolete content
there isn't a means of replicating this action with the keyboard, so you should always provide an alternate means of accessing the functionality of the menu.
... this can be done by either placing alternate commands elsewhere in the user interface, or by providing a keyboard shortcut to open the menu.
... once the menu is open, the keyboard can be used to navigate and select items as usual.
...on windows, the context menu can also be opened by pressing the menu key on the keyboard (the key on many keyboards next to control with a menu image) or by pressing shift+f10.
Accessibility/XUL Accessibility Reference - Archive of obsolete content
column see grid columns see grid command see keyboard shortcut tutorial commandset see keyboard shortcut tutorial deck only the currently selected deck layer can be focused.
... image <image src="images/img.xbm" tooltiptext='<!--image label-->'/> key see keyboard shortcut tutorial keyset see keyboard shortcut tutorial listbox <label control='listid'><!--label text--></label> <listbox id="listid"> <listitem value="val" label="<!--item text-->"/> </listbox> <label control='listid2' value='<!--list label-->' /> <listbox rows="5" id='listid2'> <listcols> <listcol/> <listcol/> <listcol/> </listcols> ...
... <label value="<!--label text-->" control="comboid" /> <menulist id="comboid"> <menupopup> <menuitem label="<!--option1-->" /> <menuitem label="<!--option2-->" selected="true" /> <menuitem label="<!--option3-->" /> </menupopup> </menulist> menupopup see menulist and menubar popup see popupset popupset be careful regarding keyboard access of popups.
...--male-->" /> </treerow> <treechildren> <treeitem> <treerow> <treecell label="<!--aramis-->" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="<!--fergus-->" /> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree> there is no keyboard access to the column picker (the widget visually to the right of the column headers) or the column headers themselves (for sorting by column).
Unconventional controls - Game development
using a tv remote to control the game ended up being surprisingly easy, because the events fired by the controller are emulating conventional keyboard keys.
... captain rogers had the keyboard controls implemented already: this.cursors = this.input.keyboard.createcursorkeys(); //...
...the cursors are the four directional arrow keys on the keyboard, and these have exactly the same key codes as the arrow keys on the remote.
...we next add these lines after all the event listeners for keyboard and mouse, but before the draw method: var todegrees = 1 / (math.pi / 180); var horizontaldegree = 0; var verticaldegree = 0; var degreethreshold = 30; var grabstrength = 0; right after that we use the leap's loop method to get the information held in the hand variable on every frame: leap.loop({ hand: function(hand) { horizontaldegree = math.round(hand.roll() * todegrees); ...
UI pseudo-classes - Learn web development
by being tabbed to via the keyboard).
...while it is being clicked on, or when the return/enter key is being pressed down in the case of a keyboard activation).
... note: to enter an invalid/out-of-range value, you'll have to actually focus the form and type it in using the keyboard.
... the :focus-visible pseudo-class matches focused elements that received focus via keyboard interaction (rather than touch or mouse) — useful if you want to show a different style for keyboard focus compared to mouse (or other) focus.
Use JavaScript within a webpage - Learn web development
make all functionality accessible from the keyboard.
... if you use pointer events (like mouse events or touch events), duplicate the functionality with keyboard events.
... test your site using a keyboard only.
...it takes extra time to navigate with the keyboard or hear content read out.
Beginning our React todo list - Learn web development
add a task using the mouse or keyboard.
... mark any task as completed, using the mouse or keyboard.
... delete any task, using the mouse or keyboard.
... edit any task, using the mouse or keyboard.
Mozilla's Section 508 Compliance
here are the section 508 requirements and how far along mozilla seamonkey rv1.8a4 is with each one: requirement windows linux/unix mac os requirement windows linux/unix mac os (a) when software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually.
... caveats: 1) although sidebar cannot be customized without a mouse, all sidebar functions that come with the browser are available through other means 2) java and in-page plugins cannot be used with the keyboard, so they must not be installed for keyboard-only users additional features for the keyboard: 1) find as you type allows for quick navigation to links and convenient text searching 2) browse with caret (f7 key toggles) allows users to select arbitrary content with the keyboard and move through content as if inside a readonly editor.
...inadequate attention paid to mac keyboard bugs.
...all input technologies that go through the keyboard driver work with mozilla -- including sticky keys, filter keys, on screen keyboards, etc.
Using the Browser API
MozillaGeckoChromeAPIBrowser APIUsing
when you tap the url bar, you can enter a url using the built-in firefox os keyboard (although note that we haven't implemented anything sophisticated in this app, like autofilling the http://, etc.).
... when you press the keyboard's return button, the 'submit' event is fired, which we handle like this: urlform.addeventlistener('submit',function(e) { e.preventdefault(); browser.src = urlbar.value; urlbar.blur(); }); we first call preventdefault() to stop the form just submitting and reloading the page — which is really not what we want.
...finally, we call blur() on the url bar to stop focusing it, so the keyboard moves off the screen, allowing us to get our full screen view back.
... that when it is submitted, the htmliframeelement.findall() method is used to do a search for the string entered into the search input element (searchbar) within the text of the current page (the second parameter can be changed to 'case-insensitive' if you want a case-insensitive search.) we then enable the previous and next buttons, set searchactive to true, and blur() the search bar to make the keyboard disappear and stop taking up our screen once the search is submitted.
AT APIs Support
but in the meantime it more up-to-date and contains more details than existed analogues for at-spi and msaa this documentation explains how makers of screen readers, voice dictation packages, onscreen keyboards, magnification software and other assitive technologies can support gecko-based software.
... keyboard user interface and api fortunately, gecko uses the standard keyboard api's for each supported platform.
... the mozilla keyboard shortcuts for content are similar to what is used in other browsers.
... here is a list of firefox keyboard shortcuts.
Index - Firefox Developer Tools
10 all keyboard shortcuts tools, l10n:priority this page lists all keyboard shortcuts used by the developer tools built into firefox.
... 79 page inspector keyboard shortcuts these shortcuts work while the node picker is active.
... 116 debugger keyboard shortcuts debugger, keyboard, shortcuts 1.
... 155 web console keyboard shortcuts these shortcuts apply when you're in the command line interpreter.
Basic animations - Web APIs
if we wanted to make a game, we could use keyboard or mouse events to control the animation and use settimeout().
...tion emit(t) { key.keydown(t) } function touch(t) { t.classlist.toggle("off"), document.getelementsbyclassname("keypress")[0].classlist.toggle("hide") } var t = new date + "", d = void 0, cc = document.getelementsbytagname("canvas")[0], c = cc.getcontext("2d"); key = {}, key.keydown = function (t) { var e = document.createevent("keyboardevent"); object.defineproperty(e, "keycode", { get: function () { return this.keycodeval } }), object.defineproperty(e, "key", { get: function () { return 37 == this.keycodeval ?
..."arrowright" : "arrowdown" } }), object.defineproperty(e, "which", { get: function () { return this.keycodeval } }), e.initkeyboardevent ?
... e.initkeyboardevent("keydown", !0, !0, document.defaultview, !1, !1, !1, !1, t, t) : e.initkeyevent("keydown", !0, !0, document.defaultview, !1, !1, !1, !1, t, 0), e.keycodeval = t, e.keycode !== t && alert("keycode mismatch " + e.keycode + "(" + e.which + ")"), document.dispatchevent(e) }; var o, s, h = innerheight, w = innerwidth, fw = 60, fa = []; window.onkeydown = function (t) { var e = t.key; (e.search("arrow") > -1 || "1" == e) && (d = t.key), "i" != e && "i" != e || (console.log("inc"), fw -= 10), "d" != e && "d" != e || (console.log("dec"), fw += 10) }, init(); output other examples a basic ray-caster a good example of how to do animations using keyboard controls.
ARIA Test Cases - Accessibility
as such, they are used to test a variety of features, such as styling, behavior, mouse, and keyboard interactions, to name few.
... a screen magnifier should move the current view to the alert or open a new panel with the alert information optional, but desired: if there are widgets within the alert, their role and any keyboard mnemonic (accesskey) should be spoken.
...if the drag and drop operation caused a menu to open, focus should be tracked in that menu, and the user should be able to complete further interaction via the keyboard as usual.
... zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - other test cases application simple application with inner document with grid and menubar expected at behavior: if at supports virtual buffers (probably all windows screen readers), this should be automatically turned off and the user should interact via the keyboard commands built into the web app.
:focus-visible - CSS: Cascading Style Sheets
keyboard).
...compare what happens when you click on the different controls with a mouse, versus when you tab through them using a keyboard.
...only"><br> <button class="focus-visible-only">:focus-visible only</button> input, button { margin: 10px; } .focus-only:focus { outline: 2px solid black; } .focus-visible-only:focus-visible { outline: 4px dashed darkorange; } selectively showing the focus indicator a custom control, such as a custom element button, can use :focus-visible to selectively apply a focus indicator only on keyboard-focus.
...stom-button:focus { /* provide a fallback style for browsers that don't support :focus-visible */ outline: none; background: lightgrey; } custom-button:focus:not(:focus-visible) { /* remove the focus indicator on mouse-focus for browsers that do support :focus-visible */ background: transparent; } custom-button:focus-visible { /* draw a very noticeable focus style for keyboard-focus on browsers that do support :focus-visible */ outline: 4px dashed darkorange; background: transparent; } polyfill you can polyfill :focus-visible using focus-visible.js.
<input type="password"> - HTML: Hypertext Markup Language
WebHTMLElementinputpassword
specifics of how the entry process works may vary from browser to browser; mobile devices, for example, often display the typed character for a moment before obscuring it, to allow the user to be sure they pressed the key they meant to press; this is helpful given the small size of keys and the ease with which the wrong one can be pressed, especially on virtual keyboards.
... <label for="userpassword">password: </label> <input id="userpassword" type="password" required> <input type="submit" value="submit"> specifying an input mode if your recommended (or required) password syntax rules would benefit from an alternate text entry interface than the standard keyboard, you can use the inputmode attribute to request a specific one.
...mobile devices with virtual keyboards, for example, may opt to switch to a numeric keypad layout instead of a full keyboard, to make entering the password easier.
... the inputmode is set to numeric to encourage devices with virtual keyboards to switch to a numeric keypad layout for easier entry.
<input type="tel"> - HTML: Hypertext Markup Language
WebHTMLElementinputtel
mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard.
...this information is used to decide what kind of label to use on the enter key on the virtual keyboard.
... custom keyboards one of the main advantages of <input type="tel"> is that it causes mobile browsers to display a special keyboard for entering phone numbers.
... examples of custom keyboards on mobile devices.
<select>: The HTML Select element - HTML: Hypertext Markup Language
WebHTMLElementselect
warning: the mechanism for selecting multiple non-contiguous items via the keyboard described below currently only seems to work in firefox.
... keyboard users can select multiple contiguous items by: focusing on the <select> element (e.g.
... keyboard users can select multiple non-contiguous items by: focusing on the <select> element (e.g.
...the "focused" select option is highlighted with a dotted outline, in the same way as a keyboard-focused link.
x-ms-acceleratorkey - HTML: Hypertext Markup Language
the x-ms-acceleratorkey attribute accessibly declares that an accelerator key has been assigned to an element: the element is activated via javascript when the key(s) are pressed on a keyboard.
... to provide a keyboard shortcut for an element that does not need javascript, use the accesskey attribute.
... "ctrl+; then k" for a shortcut similar to fogbugz’s old keyboard mode.
... this approach is more complicated, but does not override existing keyboard shortcuts provided by the user’s browser or operating system.
Adding sidebars - Archive of obsolete content
they also have shortcuts to open or close them using the keyboard.
...keyboard shortcuts are an essential feature of firefox, and you can add your own into your extensions, which is also great.
... the problem is that choosing the right keyboard shortcuts is very, very hard, as explained by the creator of adblock plus, and the mozilla keyboard reference.
ContextMenus - Archive of obsolete content
on windows, the context menu can also be opened by pressing the menu key on the keyboard (the key on many keyboards next to control with a menu image) or by pressing shift+f10.
...when using the keyboard, the context is the element in the window that is currently focused.
...however, even when using the keyboard, there will still be a node (the context) that the menu applies to, which will be the element that is currently focused.
MenuItems - Archive of obsolete content
in reality, the keyboard shortcut is handled by the key element, however, the menu item will display the shortcut next to its label.
... although there isn't usually a need to do so, you can also set a custom label for the keyboard shortcut on the menu using the acceltext attribute.
... <menuitem label="first window" acceltext="1"/> here the keyboard shortcut label will be '1', however you will need to write code to handle the key as well.
PopupKeys - Archive of obsolete content
handling keys within menus when using a menupopup element, a keyboard listener is attached to the window that will handle keypresses for the menu.
...the following table lists the keys that are checked, and what the menu keyboard listener does in response: cursor up/down move the highlight within the menu up or down, wrapping around if necessary.
... focus in popups a menu does not take the keyboard focus.
Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
the section on keyboard shortcuts provides more information.
... accel the user must press the special modifier key that is usually used for keyboard shortcuts on their platform.
...if we were creating a real implementation of these clipboard keyboard shortcuts, we would probably use the real clipboard interface and handle the current selection as well.
command - Archive of obsolete content
for example, a clipboard paste operation can be invoked from the edit menu, a context menu and by pressing a keyboard shortcut.
...in addition, disabling the command will automatically disable the menu items and keyboard shortcuts.
...this occurs when a user selects a menu item or presses a keyboard shortcut attached to the command.
textbox - Archive of obsolete content
the value may still be adjusted with the keyboard.
..., dropping the rest of the text replacewithcommas pastes the text with the newlines replaced with commas replacewithspaces pastes the text with newlines replaced with spaces strip pastes the text with the newlines removed stripsurroundingwhitespace pastes the text with newlines and adjacent whitespace removed onblur type: script code this event is sent when a textbox loses keyboard focus.
... onfocus type: script code this event is sent when a textbox receives keyboard focus.
Implementing game control mechanisms - Game development
in this series of articles we will show you how you can approach building a game that can be played using touchscreen smartphones, mouse and keyboard, and also less common mechanisms such as gamepads.
... in the following articles we will show how to implement various different control mechanisms for captain rogers to support different platforms — from touch on mobile, through keyboard/mouse/gamepad on desktop, to more unconventional ones like tv remote, shouting to or waving your hand in front of the laptop, or squeezing bananas.
... desktop mouse and keyboard controls — when playing on a desktop/laptop computer, providing keyboard and mouse controls is essential to provide an acceptable level of accessibility for the game.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
you can also use them in place of other characters that are difficult to type with a standard keyboard.
...in the world of computers, it can be anything from a keyboard, a joystick, a screen or a program.
...the visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page.
Accessible multimedia - Learn web development
images, videos, <canvas> elements, flash movies, etc., aren't as easily understood by screenreaders or navigated by the keyboard, and we need to give them a helping hand.
...it looks like so in firefox and chrome: however, there are problems with these controls: they are not keyboard accessible in most browsers, i.e.
... you can however make sure that such an app has good enough color contrast and clear presentation so it is perceivable to those with low vision/color blindness, and also make it keyboard accessible.
What is accessibility? - Learn web development
the way this usually affects web development work is the requirement that controls be accessible by the keyboard — we'll discuss keyboard accessibility in later articles in the module, but it is a good idea to try out some websites using just the keyboard to see how you get on.
...you can find more details about keyboard controls in our cross browser testing using native keyboard accessibility section.
... are my ui buttons accessible using the keyboard and on touch interfaces?
What is accessibility? - Learn web development
keyboard capacity let the user tab into/out of a video, play it, and pause it without being trapped in it.
... make sure all users can operate graphical interfaces (like unfolding menus) solely with a keyboard (e.g., with tab and the return key).
... make sure that a user can navigate to all widgets on a page solely with the keyboard, without getting trapped.
Information for External Developers Dealing with Accessibility
in addition, here is a list of official keyboard ui guidelines for each desktop: windows keys: guidelines on keyboard ui design and on implementing keyboard shortcuts: an excellent resource from microsoft.
... mac keys: keyboard shortcuts quick reference for mac os x complete reference on keyboard for mac os x: this document list all functions of specified keys, known keyboard shortcuts, explains how to create keyboard shortcuts, explains appropriate use for the arrow keys, how to move the insertion point with keys, how to extent text selection with keys, functions of function keys, what are reserved keyboard shortcuts, how to create your own keyboard shortcuts, keyboard focus and navigation, type-ahead and key-repeat, etc.
... gnome keys: keyboard documentation for gnome 2.2: still seeking developer guidelines for keyboard.
Information for users
> help contents f1 > accessibility features) which describe any special features and keyboard shortcuts designed to help users with disabilities.
...features include assistive technology support on windows (like window-eyes, jaws, etc.), firefox keyboard support, available accessibility extensions like fire vox and other extensions.
... assistive technology compatibility this is a wiki page which users can edit to provide up to date information on any issues related to compatibility with assistive technologies such as screen readers, screen magnifiers, voice input software and on screen keyboards.
Adding a new event
a dom event which represents a native event like a user action such as keyboard or mouse input.
... textevents.h this header file should be used for defining input events from keyboard or ime and also other text edit related events like querying focused content information.
...for example, keyboardevent which is defined in dom level 3 events should be implemented as mozilla::dom::keyboardevent.
IAccessibleAction
actions are needed more for ats that assist the mobility impaired, such as on-screen keyboards and voice command software.
...there is no need to implement this method for single action controls since that would be redundant with the standard msaa programming practice of getting the mnemonic from get_acckeyboardshortcut.
... an at such as an on screen keyboard might not expose these bindings but provide alternative means of activation.
GetKeyBindings
« nsiaccessible page summary this method provides array of localized string of global keyboard accelerator for the given action index supported by accessible.
...return values returns array of localized string of global keyboard accelerator.
...see also nsiaccessible.defaultkeybinding nsiaccessible.keyboardshortcut ...
Accessibility Inspector - Firefox Developer Tools
keyboardshortcut — any keyboard shortcut that is available to activate the element, as specified in an accesskey attribute.
... keyboard controls the accessibility tab is fully keyboard-accessible: you can tab between the turn off accessibility features button and left and right panels.
...the available menu items include: none — don't show the possible list of issues all issues — check for all types of issues contrast — check for issues with visual contrast keyboard — check for issues with navigating via a keyboard text labels — check for issues with missing text labels when you one of the menu items, firefox scans your document for the type of issues you selected.
DevTools API - Firefox Developer Tools
a method that is called when the keyboard shortcut for the tool is activated while the tool is the active tool.
...the key used for keyboard shortcut.
...modifiers for the keyboard shortcut.
Examine and edit HTML - Firefox Developer Tools
the breadcrumbs bar has its own keyboard shortcuts.
... note: there are some useful keyboard shortcuts that can be used in the html tree — see the html pane keyboard shortcuts list.
... from firefox 44, pressing the keyboard shortcut s will also scroll the selected node into view.
Detecting device orientation - Web APIs
ationincludinggravity, those axes correspond to the following: x: represents the axis from west to east y: represents the axis from south to north z: represents the axis perpendicular to the ground for rotationrate, the situation is a bit different; the information corresponds to the following in each case: alpha: represents a rotation rate along the axis perpendicular to the screen (or keyboard for desktop).
... beta: represents a rotation rate along the axis going from left to right of the plane of the screen (or keyboard for desktop).
... gamma: represents a rotation rate along the axis going from bottom to top of the plane of the screen (or keyboard for desktop).
Element: keydown event - Web APIs
bubbles yes cancelable yes interface keyboardevent event handler property onkeydown the keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered.
... keyboard events are only generated by <inputs>, <textarea> and anything with the contenteditable attribute or with tabindex="-1".
...to ignore all keydown events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keydown", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keydown example this example logs the keyboardevent.code value whenever you press down a key inside the <input> element.
GlobalEventHandlers.onkeydown - Web APIs
the keydown event fires when the user presses a keyboard key.
...the function receives a keyboardevent object as its sole argument.
... example this example logs the keyboardevent.code value whenever you press down a key inside the <input> element.
GlobalEventHandlers.onkeypress - Web APIs
the keypress event should fire when the user presses a key on the keyboard.
...the function receives a keyboardevent object as its sole argument.
... examples basic example this example logs the keyboardevent.code value whenever you press a key inside the <input> element.
ARIA: timer role - Accessibility
keyboard interactions keyboard interaction is xxx.
... required javascript features keypress used to handle keyboard input and control the focus click, touch handle as appropriate for your widget as well changing attribute values aria-activedescendant is used to manage the focus inside the application container.
... set in response to keyboard or other application events that change focus or point of interaction.
ARIA: document role - Accessibility
assistive technologies should switch context back to document mode, possibly intercepting from controls rewired for the parent's dynamic context, re-enabling the standard input events, such as up or down arrow keyboard events, to control the reading cursor.
... keyboard interactions the element should be made focusable by setting the tabindex="0" attribute / value pair on it.
...however, when the keyboard focus is set on the starting heading on a single conversation that contains the subject of the conversation, the screen reader user can use the reading mode commands to read through the messages, expand or collapse them, and manipulate them.
ARIA: feed role - Accessibility
to ensure good user experience, avoid inserting or removing articles in the middle of a feed, load new articles before the user has reached the end of the feed, and provide keyboard commands for moving focus among articles so that keyboard users can navigate through your feed.
... see keyboard interactions below.
... keyboard interaction supporting the following, or a similar, interface is recommended when focus is inside the feed: page down: move focus to next article.
ARIA: Region role - Accessibility
screen readers use landmark roles to provide keyboard navigation to important sections of a page.
... keyboard interactions none.
...this is done to allow keyboard-only users to scroll regions with overflow text.
ARIA: checkbox role - Accessibility
since a checkbox is an interactive control, it must be focusable and keyboard accessible.
...the expected keyboard shortcut for activating a checkbox is the space key.
... keyboard interactions key function space activates the checkbox required javascript required event handlers onclick handle mouse clicks that will change the state of the checkbox by changing the value of the aria-checked attribute and the appearance of the checkbox so it appears checked or unchecked to the sighted user onkeypress handle the case where the user presse...
ARIA: listbox role - Accessibility
it is highly recommended to use the html select element, or a group of radio buttons if only one item can be selected, or a group of checkboxes if multiple items can be selected, because there is a lot of keyboard interactivity to manage focus for all the descendants, and native html elements provide this functionality for you for free.
... (for further details and a full list of aria states and properties see the aria listbox (role) documentation.) keyboard interactions when a single-select listbox receives focus: if none of the options are selected before the listbox receives focus, the first option receives focus.
... best practices to be keyboard accessible, authors should manage focus of all descendants of this role.
ARIA - Accessibility
for instance, native elements have built-in keyboard accessibility, roles and states.
... aria for scripted widgets writing keyboard-navigable javascript widgets built-in elements like <input>, <button> etc have built-in keyboard accessibility.
... if you 'fake' these with <div>s and aria, you must ensure your widgets are keyboard accessible.
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
msaa decision-making guide use msaa whenever you have created custom controls where you're handling the drawing, mouse and keyboard accessibility in your own code.
... get_acckeyboardshortcut: what is the keyboard shortcut for this iaccessible (underlined alt+combo mnemonic) get_accfocus: which child is focused?
...where your application's keyboard commands will be solely used to navigate.
Accessibility Information for Web Authors - Accessibility
how-to's key-navigable custom dhtml widgets in mozilla & ie this document discusses how to use tabindex, element.focus() and onkeypress to make custom dhtml widgets such as menus or tree views keyboard accessible.
...these widgets are usually not even keyboard focusable.
... this document tackles such difficulties and shows several interactive desktop-style widgets such as tree views, menu bars and spreadsheets which are accessible both with the keyboard and assistive technologies such as screen readers, screen magnifiers and alternative input devices.
Perceivable - Accessibility
an alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means.
... use native <button>s to provide accessible keyboard controls, as shown in video player styling basics.
... times the font size spacing following paragraphs to at least 2 times the font size letter spacing (tracking) to at least 0.12 times the font size word spacing to at least 0.16 times the font size understanding text spacing 1.4.13 content on hover or focus (aa) added in 2.1 while additional content may appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met: dismissable (can be closed/removed) hoverable (the additional content does not disappear when the pointer is over it) persistent (the additional content does not disappear without user action) understanding content on hover or focus note: also see the wcag description for guideline...
-moz-user-focus - CSS: Cascading Style Sheets
you can stop the textbox from taking keyboard focus by setting its tab index to -1, and from taking mouse focus by preventing the default action of mousedown events.
... syntax values ignore the element does not accept the keyboard focus and will be skipped in the tab order.
... normal the element can accept the keyboard focus.
Ordering Flex Items - CSS: Cascading Style Sheets
flexbox and the keyboard navigation disconnect html source order vs css display order the responsive order conflict for keyboard focus use cases for order there are sometimes places where the fact that the logical and therefore reading order of flex items is separate from the visual order, is helpful.
...when doing so take care that you are not reordering items that could be accessed by the keyboard as a user is tabbing around.
... especially when using newer layout methods you should ensure that your browser testing includes testing the site using keyboard only, rather than a mouse or touchscreen.
<input type="submit"> - HTML: Hypertext Markup Language
WebHTMLElementinputsubmit
adding a submit keyboard shortcut keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard.
... to add a keyboard shortcut to a submit button — just as you would with any <input> for which it makes sense — you use the accesskey global attribute.
...in order to avoid conflicts with the user agent's own keyboard shortcuts, different modifier keys are used for access keys than for other shortcuts on the host computer.
Media - Progressive web apps (PWAs)
there are five special selectors: selector selects e:hover any e element that has the pointer over it e:focus any e element that has keyboard focus e:active the e element that is involved in the current user action e:link any e element that is a hyperlink to a url that the user has not visited recently e:visited any e element that is a hyperlink to a url that the user has visited recently note: the information that can be obtained from the :visited selector is restricted in gecko 2.0.
...see the actual pointer shapes in your browser: selector selects pointer indicating a link wait indicating that the program cannot accept input progress indicating that the program is working, but can still accept input default the default (usually an arrow) an outline property creates an outline that is often used to indicate keyboard focus.
...button active">click me</button></td> </tr> <tr style="line-height:25%;"> <td>&nbsp;</td> </tr> <tr style="font-style:italic;"> <td>disabled</td> <td>normal</td> <td>active</td> </tr> </tbody> </table> live sample a fully functional button also has a dark outline around the entire button when it is the default, and a dotted outline on the face of the button when it has keyboard focus.
hotkeys - Archive of obsolete content
for example, this add-on defines two hotkey combinations, to show and hide a panel: // define keyboard shortcuts for showing and hiding a custom panel.
... accel: the key used for keyboard shortcuts on the user's platform, which is control on windows and linux, and command on mac.
Dialogs and Prompts - Archive of obsolete content
this will: handle a few keyboard events (enter/esc and more), which is good for keyboard accessibility.
... be sure to use ondialog* attributes on dialog element instead of putting oncommand on the button with dlgtype, because button's oncommand is executed only when the button is pressed, and ondialog* handlers are executed for keyboard and other events too.
Adding Events and Commands - Archive of obsolete content
for a button, it represents the action of the user clicking on it, or focusing it with the keyboard and then pressing the enter key.
...used when an element receives or loses focus when the user is navigating with the keyboard.
Adding windows and dialogs - Archive of obsolete content
focus and tabbing moving through all input controls in a window using only the keyboard is an accessibility requirement.
... in general, there's nothing you need to do in order to have good keyboard focus management.
modifiers - Archive of obsolete content
« xul reference home modifiers type: space-separated list of the values below a list of modifier keys that should be pressed to invoke the keyboard shortcut.
... accel: the key used for keyboard shortcuts on the user's platform, which is control on windows and linux, and command on mac.
reserved - Archive of obsolete content
example here, the command to open a new browser window is reserved: <command id="cmd_newnavigator" oncommand="openbrowserwindow()" reserved="true"/> if the keyboard shortcut for that is accel-t, then this code will not work as expected, as compared to when it is run from web content: document.addeventlistener("keydown", handlekey, true); function handlekey(event) { // listen for the "new tab" shortcut if (event.metakey && (event.key == "t")) { // log a message console.log("intercepted accel-t"); // prevent the default browser action ...
...in future releases, the event handler will never be called for the given keyboard shortcut.
Adding Event Handlers - Archive of obsolete content
xul does have a click event, but it only responds to mouse clicks, not to keyboard usage.
...by using this handler, the user will be able to close the window by clicking the menu item with the mouse or by selecting it with the keyboard.
Focus and Selection - Archive of obsolete content
platform specific behaviors mac os x there is a preference called "full keyboard access" (fka).
...this means that when the fka preference is off, only textboxes and lists/trees are focusable with the keyboard, as well as from your code using focus().
Localization - Archive of obsolete content
access keys and keyboard shortcuts for example.
... the access keys and keyboard shortcuts have also been translated into entities because they will likely be different in a different locale.
XUL Accesskey FAQ and Policies - Archive of obsolete content
an accesskey is an underlined letter in a web page, menu or dialog that indicates to a user a quick, keyboard method of simulating a click on that element.
...file bugs under the keyboard navigation component, and make meta bug 129179 dependent on them.
menupopup - Archive of obsolete content
a context menu may be opened by right-clicking the element, or by pressing the menu key on the keyboard.
... <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> <label value="right click for popup" context="clipmenu"/> attributes ignorekeys type: boolean if true, keyboard navigation between items in the popup is disabled.
panel - Archive of obsolete content
ArchiveMozillaXULpanel
if a panel has one or more text fields, this attribute should not be set, otherwise ime or on-screen keyboard popups will appear incorrectly.
... norestorefocus type: boolean if false, the default value, then when the panel is hidden, the keyboard focus will be restored to whatever had the focus before the panel was opened.
toolbarbutton - Archive of obsolete content
relevant accessbility guidelines all toolbar functionality should be duplicated elsewhere in the application where possible, provide keyboard alternatives.
...this occurs when a user selects a menu item or presses a keyboard shortcut attached to the command.
Mozilla XForms User Interface - Archive of obsolete content
tabindex - defines the keyboard navigation sequence between controls.
... accesskey - keyboard shortcut for moving focus to an xforms element.
2D maze game with device orientation - Game development
now we will add the ability to control the ball with the keyboard on the desktop devices, and then we will move to the implementation of the device orientation api.
... let’s focus on the keyboard first by adding the following to the create() function : this.keys = this.game.input.keyboard.createcursorkeys(); as you can see there’s a special phaser function called createcursorkeys(), which will give us an object with event handlers for the four arrow keys to play with: up, down, left and right.
Screen reader - MDN Web Docs Glossary: Definitions of Web-related terms
desktop/laptop screen reader users navigate websites with a keyboard or other non-pointing device.
... just like keyboard navigation without voiceover, you can navigate through interactive elements using the tab key and the arrow keys: next interactive element: tab previous interactive element: shift + tab next radio button in a same named-group: right or down arrow previous radio button in a same named-group: left or up arrow navigating through the content of a page is done with the tab key and a series of other keys along with control + option keys next heading: control + option + h next list: control + option + x next graphic: control + option + g next table: control + option + t down an html hierarchical order control + option + right arrow previous heading: shift + control + option + h previous list: shift + control + option + x...
Assessment: Accessibility troubleshooting - Learn web development
the show/hide comment control the show/hide comment control button is not current keyboard-accessible.
... can you make it keyboard accessible, both in terms of focusing it using the tab key, and activating it using the return key?
Beginner's guide to media queries - Learn web development
this feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.
...the value none means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands.
Getting started with CSS - Learn web development
this has different states depending on whether it is unvisited, visited, being hovered over, focused via the keyboard, or in the process of being clicked (activated).
...or they might be using a screenreader, which reads out the content of the document, or they may need to use much larger text, or be navigating the site using the keyboard only.
Styling links - Learn web development
focus: a link when it has been focused (for example moved to by a keyboard user using the tab key or similar, or programmatically focused using htmlelement.focus()) — this is styled using the :focus pseudo class.
... focused links have an outline around them — you should be able to focus on the links on this page with the keyboard by pressing the tab key (on mac, you'll need to use option + tab, or enable the full keyboard access: all controls option by pressing ctrl + f7.) active links are red (try holding down the mouse button on the link as you click it.) interestingly enough, these default styles are nearly the same as they were back in the early days of browsers in the mid-1990s.
Your first form - Learn web development
it also causes a more appropriate keyboard layout for entering email addresses (e.g.
... with an @ symbol by default) to appear on devices with dynamic keyboards, like smartphones.
Add a hitmap on top of an image - Learn web development
to keep keyboard navigation intuitive, make sure the source order of <area> elements corresponds to the visual order of hotspots.
...try following links with your keyboard alone.
Introduction to events - Learn web development
the user chooses a key on the keyboard.
... window.onkeypress, window.onkeydown, window.onkeyup — the color changes when a key is pressed on the keyboard.
Test your skills: Events - Learn web development
events 2 now we'll look at keyboard events.
... to pass this assessment you need to build an event handler that moves the circle around the provided canvas when the wasd keys are pressed on the keyboard.
Getting started with Ember - Learn web development
there are a couple of github issues open about this on the todomvc family of projects: add keyboard access to demos re-enable outline on focusable elements ember has a strong commitment to being accessible by default and there is an entire section of the ember guides on accessibility on what it means for website / app design.
...lly, find app.css, located at app/styles/app.css, and paste in the following: :focus, .view label:focus, .todo-list li .toggle:focus + label, .toggle-all:focus + label { /* !important needed because todomvc styles deliberately disable the outline */ outline: #d86f95 solid !important; } this css overrides some of the styles provided by the todomvc-app-css npm package, therefore allowing keyboard focus to be visible.
Understanding client-side JavaScript frameworks - Learn web development
accessibility in react in our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in react, which can improve usability and reduce confusion for both keyboard-only and screen reader users.
...the last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility.
Introduction to cross browser testing - Learn web development
people with disabilities, who use the web with the aid of assistive technologies like screenreaders, or don't use a mouse (some people use only the keyboard).
... do some lo-fi accessibility testing, such as trying to use your site with only the keyboard, or using your site via a screen reader to see if it is navigable.
Accessibility API cross-reference
supported for anything that's not a menu is poor n/a n/a aria-haspopup the item can get the keyboard focus focusable focusable focusable tabindex attribute with value of 0 or more the item has focus for text input.
... for other kinds of keyboard operation, e.g.
Accessibility Information for Core Gecko Developers
these widgets are often not even keyboard focusable, and assistive technologies do not understand these widgets.
... this document shows several interactive desktop-style widgets that are accessible by keyboards and assistive technologies, and outlines a plan being developed by ibm, mozilla, and the wai protocols and formats working group (pfwg) to address the issue of dhtml accessibility.
Accessibility information for UI designers and developers
see also: understanding sc 1.4.3: contrast the focus indicator users who navigate by keyboard (or other specialised input methods), rely on focus styles to see where they are on the page.
...on desktop with a keyboard, it lets people type a character, say ‘k’, to jump directly to options starting with ‘k’.
Accessibility and Mozilla
in fact, the same keyboard commands are still available, so users can become comfortable and productive right away.accessibility information for core gecko developersboth end users and developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility.
...> help contents f1 > accessibility features) which describe any special features and keyboard shortcuts designed to help users with disabilities.
Gecko events
is supported: no event_focus an object has received the keyboard focus.
... is supported: no event_accelerator_change an object's keyboard shortcut has changed.
XForms Accessibility
or you may be guided by toolkit checklist to check keyboard navigation for xforms controls.
... you can try the following link to test xforms accessibility: visual xforms elements in xhtml document at bugzilla.mozilla.org visual xforms elements in xul document at bugzilla.mozilla.org you can see xforms sample tests at mozilla xforms project there are set of tests at beaufour.dk w3c's xforms test at w3.org keyboard navigation issues navigation sequence though xforms spec declares navindex attribute to define the navigation sequence (see 1.0 specs or 1.1 specs) but rich schwerdtfeger (distinguished engineer, swg accessibility architect/strategist chair, ibm accessibility architecture review board) gave some clarification about navindex.
DefaultKeyBinding
« nsiaccessible page summary provides localized string of global keyboard accelerator for default action, such as ctrl+o for open file (ctrl + o).
... attribute astring defaultkeybinding; see also nsiaccessible.getkeybindings() nsiaccessible.keyboardshortcut ...
nsIAccessibleEvent
event_focus 0x8005 0x0008 0x0005 an object has received the keyboard focus.
... event_accelerator_change 0x0011 0x000e an object's keyboard shortcut has changed.
nsIIdleService
widget/nsiidleservice.idlscriptable the idle service lets you monitor how long the user has been 'idle', that is they have not used their mouse or keyboard.
... example example 1 var idleservice = components.classes["@mozilla.org/widget/idleservice;1"] .getservice(components.interfaces.nsiidleservice) settimeout(function() { alert(idleservice.idletime) }, 1000) // if you don't use the mouse or the keyboard after running this snippet, // you'll see a number around 1000 alerted.
3D view - Firefox Developer Tools
controlling the 3d view there are keyboard shortcuts and mouse controls available for the 3d view.
... function keyboard mouse zoom in/out + / - scroll wheel up/down rotate left/right a / d mouse left/right rotate up/down w / s mouse up/down pan left/right ← / → mouse left/right pan up/down ↑ / ↓ mouse up/down reset zoom level 0 resets the zoom level to the default focus on selected node f makes sure the currently selected node is visible reset view r resets zoom, rotation, and panning to the default hide current node x makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured use cases for the 3d view there are a variety of ways the 3d view is useful: if you have broken html ...
DOM Inspector internals - Firefox Developer Tools
in order for dom inspector to be useful with its host application, though, there should be a way to launch dom inspector within it, e.g., by a menu item and an optional keyboard shortcut such as ctrl+shift+i (or cmd+shift+i).
... either the host applications must provide these themselves (usually bundling dom inspector with the application, too), or dom inspector must explicitly support them by providing its own menu items and keyboard shortcuts with host-integration overlays.
Browser Console - Firefox Developer Tools
from the keyboard: press ctrl+shift+j (or cmd+shift+j on a mac).
... like the web console, the command line interpreter enables you to evaluate javascript expressions in real time:also like the web console's command line interpreter, this command line supports autocomplete, history, and various keyboard shortcuts and helper commands.
Style Editor - Firefox Developer Tools
it also supports a number of keyboard shortcuts.
... keyboard shortcuts source editor shortcuts this table lists the default shortcuts for the source editor.
Toolbox - Firefox Developer Tools
see also keyboard shortcuts.
... keyboard shortcuts these shortcuts work whenever the toolbox is open, no matter which tool is active.
Web Console - Firefox Developer Tools
keyboard shortcuts shortcut reference.
... opening the web console you open the web console from a menu or with a keyboard shortcut: choose web console from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on mac os x) press the ctrl+shift+k (command+option+k on os x) keyboard shortcut.
Firefox Developer Tools
the core tools you can open the firefox developer tools from the menu by selecting tools > web developer > toggle tools or use the keyboard shortcut ctrl + shift + i or f12 on windows and linux, or cmd + opt + i on macos.
... download firefox developer edition connecting the developer tools if you open the developer tools using keyboard shortcuts or the equivalent menu items, they'll target the document hosted by the currently active tab.
Document: keydown event - Web APIs
bubbles yes cancelable yes interface keyboardevent event handler property onkeydown the keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered.
...to ignore all keydown events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keydown", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keydown example this example logs the keyboardevent.code value whenever you press down a key.
Document: keypress event - Web APIs
interface keyboardevent bubbles yes cancelable yes default action varies: keypress event; launch text composition system; blur and focus events; domactivate event; other event examples addeventlistener keypress example this example logs the keyboardevent.code value whenever you press a key.
... <p>press inside this iframe first to focus it, then try pressing keys on the keyboard.</p> <p id="log"></p> const log = document.getelementbyid('log'); document.addeventlistener('keypress', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeypress equivalent document.onkeypress = logkey; specifications specification status ui events working draft ...
Document: keyup event - Web APIs
bubbles yes cancelable yes interface keyboardevent event handler property onkeyup the keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered.
...to ignore all keyup events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples this example logs the keyboardevent.code value whenever you release a key.
Element: keyup event - Web APIs
bubbles yes cancelable yes interface keyboardevent event handler property onkeyup the keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered.
...to ignore all keyup events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keyup example this example logs the keyboardevent.code value whenever you release a key inside the <input> element.
Event.type - Web APIs
WebAPIEventtype
example this example logs the event type whenever you press a keyboard key or click a mouse button.
... html <p>press any key or click the mouse to get the event type.</p> <p id="log"></p> javascript function geteventtype(event) { const log = document.getelementbyid('log'); log.innertext = event.type + '\n' + log.innertext; } // keyboard events document.addeventlistener('keydown', geteventtype, false); // first document.addeventlistener('keypress', geteventtype, false); // second document.addeventlistener('keyup', geteventtype, false); // third // mouse events document.addeventlistener('mousedown', geteventtype, false); // first document.addeventlistener('mouseup', geteventtype, false); // second document.addeventlistener('click', geteventtype, false); // third result specifications specification status comment domthe definition of 'event.type' i...
Event - Web APIs
WebAPIEvent
clicking the mouse button or tapping keyboard, or generated by apis to represent the progress of an asynchronous task.
...event audioprocessingevent beforeinputevent beforeunloadevent blobevent clipboardevent closeevent compositionevent cssfontfaceloadevent customevent devicelightevent devicemotionevent deviceorientationevent deviceproximityevent domtransactionevent dragevent editingbeforeinputevent errorevent fetchevent focusevent gamepadevent hashchangeevent idbversionchangeevent inputevent keyboardevent mediastreamevent messageevent mouseevent mutationevent offlineaudiocompletionevent overconstrainederror pagetransitionevent paymentrequestupdateevent pointerevent popstateevent progressevent relatedevent rtcdatachannelevent rtcidentityerrorevent rtcidentityevent rtcpeerconnectioniceevent sensorevent storageevent svgevent svgzoomevent timeevent touchevent trackevent tr...
GlobalEventHandlers.onkeyup - Web APIs
the function receives a keyboardevent object as its sole argument.
... example this example logs the keyboardevent.code value whenever you release a key inside the <input> element.
HTMLAnchorElement - Web APIs
htmlelement.blur() removes the keyboard focus from the current element.
... htmlelement.focus() gives the keyboard focus to the current element.
HTMLElement - Web APIs
htmlorforeignelement.blur() removes keyboard focus from the currently focused element.
... htmlorforeignelement.focus() makes the element the current keyboard focus.
HTMLOrForeignElement - Web APIs
a-*) set on the element.nonce the nonce property of the htmlorforeignelement interface returns the cryptographic number used once that is used by content security policy to determine whether a given fetch will be allowed to proceed.tabindexthe tabindex property of the htmlorforeignelement interface represents the tab order of the current element.methodsblur()the htmlelement.blur() method removes keyboard focus from the current element.focus()the htmlelement.focus() method sets focus on the specified element, if it can be focused.
... the focused element is the element which will receive keyboard and similar events by default.
MouseEvent.getModifierState() - Web APIs
see the document of keyboardevent.getmodifierstate() for details.
...the value must be one of the keyboardevent.key values which represent modifier keys or "accel".
MouseEvent.metaKey - Web APIs
note: on macintosh keyboards, this key is the command key (⌘).
... on windows keyboards, this key is the windows key (⊞).
Selection - Web APIs
WebAPISelection
as the user changes the selection using the mouse or the keyboard, the anchor does not move.
...as the user changes the selection using the mouse or the keyboard, the focus is the end of the selection that moves.
TouchEvent.metaKey - Web APIs
note: on macintosh keyboards, this is the ⌘ command key.
... on windows keyboards, this is the windows key (⊞).
Visual Viewport API - Web APIs
the visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page.
...user-interface features like the on-screen keyboard (osk) can shrink the visual viewport without affecting the layout viewport.
WebXR Device API - Web APIs
other input devices such as keyboards, mice, and gamepads are not presented as xrinputsource instances.
... making it interactive movement, orientation, and motion: a webxr example in this example and tutorial, we use information learned throughout the webxr documentation to create a scene containing a rotating cube which the user can move around using both vr headset and keyboard and mouse.
Web Audio API - Web APIs
rk, to help you make informed decisions while designing how audio is routed through your app.controlling multiple parameters with constantsourcenodethis article demonstrates how to use a constantsourcenode to link multiple parameters together so they share the same value, which can be changed by simply setting the value of the constantsourcenode.offset parameter.example and tutorial: simple synth keyboardthis article presents the code and working demo of a video keyboard you can play using the mouse.
... the keyboard allows you to switch among the standard waveforms as well as one custom waveform, and you can control the master gain using a volume slider beneath the keyboard.
XRPose - Web APIs
WebAPIXRPose
ion and orient the node to provide the desired viewing position and angle: viewerpose = xrframe.getviewerpose(adjreferencespace); here, adjreferencespace is a reference space which has been updated using the base frame of reference for the frame and any adjustments needed to position the viewer based on movement or rotation which is being supplied from a source other than the xr device, such as keyboard or mouse inputs.
...if any component of the transform is computed or created artificially (such as by using mouse or keyboard controls to move through space), this value is instead true, indicating that the transform is in part emulated in software.
Using the link role - Accessibility
native <a> elements also support keyboard and focus requirements by default, without need for additional customization.
...this includes javascript to grab the location and handle navigating to the new location using window.open() via clicking, and using keyboard, css to give the desired visuals of a link, the tabindex="0" attribute to make it keyboard-focussable, and role="link" to make it recognised as a link by assistive technology.
ARIA: banner role - Accessibility
associated aria roles, states, and properties none keyboard interactions none required javascript features none examples here's a fake simple banner with a skip to navigation link, a logo, a title and a subtitle.
... <div role="banner"> <a href="#nav" id="skiptomenu" class="skiptocontent">skip to keyboard navigation</a> <img src="images/w3c.png" alt="w3c logo"> <h1>aria landmarks</h1> <p>identifying page subsections for easy navigation</p> </div> we could also have written the above with the html header element: <header> <a href="#nav" id="skiptomenu" class="skiptocontent">skip to keyboard navigation</a> <img src="images/w3c.png" alt="w3c logo"> <h1>aria landmarks</h1> <p>identifying page subsections for easy navigation</p> </header> best practices while it is best to use the header element and ensure it is not a descendant of any subsection of the page, sometimes you don't have access ...
ARIA: figure role - Accessibility
for example, make sure it is perceivable by users of assistive technology, navigable by keyboard as well as mouse, and so on.
... keyboard interactions no role specific keyboard interactions.
ARIA: Navigation Role - Accessibility
screen readers use landmark roles to provide keyboard navigation to important sections of a page.
... keyboard interactions none.
ARIA: switch role - Accessibility
since a switch is an interactive control, it must be focusable and keyboard accessible.
...the expected keyboard shortcut for toggling the value of a switch is the space key.
ARIA: tab role - Accessibility
associated roles and attributes aria-selected boolean aria-controls id of element with tabpanel role id content keyboard interaction key action tab when focus is outside of the tablist moves focus to the active tab.
... if focus is on the active tab moves focus to the next element in the keyboard focus order, ideally the active tab's associated tabpanel.
ARIA: heading role - Accessibility
keyboard interactions this role does not require any special keyboard navigation.
... as with any heading, giving it an id ensures it can be referenced from anchor links, making it accessible via the keyboard.
Cognitive accessibility - Accessibility
if the tab order jumps around, especially in a way that does not match the visual order when navigating with a keyboard, users can become disoriented.
... focused elements should be visibly focused when a user navigates using a keyboard, the ui should make it obvious which element currently has focus.
Understandable - Accessibility
however, the title contents are not accessible via keyboard, nor are they reliably read out by screenreaders.
...also see building keyboard accessibility back in for some useful implementation ideas.
Accessibility
keyboard-navigable javascript widgets until now, web developers who want to make their styled <div> and <span> based widgets accessible have lacked the proper techniques.
... keyboard accessibility is part of the minimum accessibility requirements which a developer should be aware of.
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
this means that someone navigating using the keyboard could be tabbing through links on your site and suddenly find themselves jumping from the top to the bottom of the document due to a reordered item being next in line.
... as a way to start thinking about these issues, as you use css grid layout i would suggest reading flexbox & the keyboard navigation disconnect from léonie watson.
Audio and Video Delivery - Developer guides
you may detect click, touch and/or keyboard events to trigger actions such as play, pause and scrubbing.
... it's often important to remember keyboard controls for user convenience and accessibility.
Orientation and motion data explained - Developer guides
the z axis is perpendicular to the screen or keyboard, and is positive extending outward from the screen.
...on a laptop computer, the orientation is considered in relation to the keyboard.
HTML attribute reference - HTML: Hypertext Markup Language
accesskey global attribute keyboard shortcut to activate or add focus to the element.
... enterkeyhint <textarea>, contenteditable the enterkeyhint specifies what action label (or icon) to present for the enter key on virtual keyboards.
<input type="button"> - HTML: Hypertext Markup Language
WebHTMLElementinputbutton
adding keyboard shortcuts to buttons keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard.
... to add a keyboard shortcut to a button — just as you would with any <input> for which it makes sense — you use the accesskey global attribute.
<input type="search"> - HTML: Hypertext Markup Language
WebHTMLElementinputsearch
mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard.
...this information is used to decide what kind of label to use on the enter key on the virtual keyboard.
<input type="text"> - HTML: Hypertext Markup Language
WebHTMLElementinputtext
mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard.
...this information is used to decide what kind of label to use on the enter key on the virtual keyboard.
<input type="url"> - HTML: Hypertext Markup Language
WebHTMLElementinputurl
mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard.
...this information is used to decide what kind of label to use on the enter key on the virtual keyboard.
autocapitalize - HTML: Hypertext Markup Language
(all letters default to lowercase) on or sentences: the first letter of each sentence defaults to a capital letter; all other letters default to lowercase words: the first letter of each word defaults to a capital letter; all other letters default to lowercase characters: all letters should default to uppercase the autocapitalize attribute doesn’t affect behavior when typing on a physical keyboard.
... instead, it affects the behavior of other input mechanisms, such as virtual keyboards on mobile devices and voice input.
panel - Archive of obsolete content
scrolling using keyboard doesn't work properly (bug 1001914) globals constructors panel(options) creates a panel.
lang/functional - Archive of obsolete content
this could be useful, for example, if we are checking the user's keyboard input, and want to wait until they've paused in their typing before we do so.
Miscellaneous - Archive of obsolete content
example for firefox: services.startup.quit(services.startup.eforcequit|services.startup.erestart); mouse and keyboard detecting mouse wheel events when scrolling the mouse wheel on an element, the dommousescroll event fires.
The Essentials of an Extension - Archive of obsolete content
access keys are the shortcuts that allow you to quickly navigate a menu using only the keyboard.
XUL user interfaces - Archive of obsolete content
using this knowledge, add a rule to the stylesheet that makes the background of the date box pale blue when it has keyboard focus (but white when keyboard focus is somewhere else).
List of Mozilla-Based Applications - Archive of obsolete content
raries chromeless browser with html-based interface classilla mozilla browser for mac os 9 clines a clone of color lines (game) standalone version cloud web operating system cloud browse iphone/ipad/ipod touch browser seems to be firefox running remotely on servers that people access through device conkeror keyboard-oriented browser convertigo enterprise mashup server server tool for transactional web scraping and for web clipping cometbird another firefox mod modified version of firefox correo email couac (fr) web-based email and jabber app couchdb document-oriented database uses spidermonkey courtanet benefit (fr) ...
Bookmark Keywords - Archive of obsolete content
to file this bookmark open the "bookmarks" menu in the browser and select "add bookmark," or by of use the keyboard equivalent (e.g., <tt>cmd-d</tt> on macintosh).
FAQ - Archive of obsolete content
an access key is a keyboard shortcut to access something.
Documentation for BiDi Mozilla - Archive of obsolete content
nsibidikeyboard widget/public/nsibidikeyboard.idl widget/src/%platform%/nsbidikeyboard.cpp sets and queries the directionality of the current keyboard language.
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
keycode keycode for keyboard events, this is a number representing the key that was pressed.
Venkman Introduction - Archive of obsolete content
venkman's keyboard shortcuts are the same as leading visual debugging environments, and gdb users should be familiar with venkman's /break, /step, /next, /finish, /frame, and /where commands.
norestorefocus - Archive of obsolete content
« xul reference home norestorefocus type: boolean if false, the default value, then when the panel is hidden, the keyboard focus will be restored to whatever had the focus before the panel was opened.
hidespinbuttons - Archive of obsolete content
the value may still be adjusted with the keyboard.
ignorekeys - Archive of obsolete content
« xul reference home ignorekeys type: boolean if true, keyboard navigation between items in the popup is disabled.
keycode - Archive of obsolete content
valid keys are listed at keyboard shortcuts.
keytext - Archive of obsolete content
« xul reference home keytext type: string a label for the keyboard shortcut.
oncommand - Archive of obsolete content
this occurs when a user selects a menu item or presses a keyboard shortcut attached to the command.
panel.level - Archive of obsolete content
if a panel has one or more text fields, this attribute should not be set, otherwise ime or on-screen keyboard popups will appear incorrectly.
setfocus - Archive of obsolete content
« xul reference home setfocus type: boolean if true or omitted, the focus will be given to the first element in the corresponding tabpanel when the tabs are navigated via the keyboard.
textbox.onblur - Archive of obsolete content
« xul reference home onblur type: script code this event is sent when a textbox loses keyboard focus.
textbox.onfocus - Archive of obsolete content
« xul reference home onfocus type: script code this event is sent when a textbox receives keyboard focus.
XUL Events - Archive of obsolete content
once an element has the focus, keyboard events are sent to it.
Extensions - Archive of obsolete content
if the keyboard was used to open a context menu, this will be the focused element.
MenuButtons - Archive of obsolete content
when using the keyboard, pressing the down key will open the menu while the button is focused.
PopupEvents - Archive of obsolete content
an overview of these is listed below: contextmenu this event is fired when a request is made to open a context menu, whether by the keyboard or mouse.
Positioning - Archive of obsolete content
if a context menu was opened via the keyboard only, the menu will appear at the top left corner of the document, or underneath the currently selected item if a list is focused.
Popup Guide - Archive of obsolete content
it displays items in a list, can display submenus, and provides keyboard navigation between the items.
eventNode - Archive of obsolete content
« xul reference eventnode type: eventtarget indicates the node where keyboard navigation events listener is set up.
Broadcasters and Observers - Archive of obsolete content
we would need to disable the back command on the menu, the back button on the toolbar, the keyboard shortcut (alt+left for example) and any back commands on popup menus.
Commands - Archive of obsolete content
for instance, you might have a menu item, a toolbar button and a keyboard shortcut all for the same operation.
Introduction - Archive of obsolete content
some elements that can be created are: input controls such as textboxes and checkboxes toolbars with buttons or other content menus on a menu bar or pop up menus tabbed dialogs trees for hierarchical or tabular information keyboard shortcuts the displayed content can be created from the contents of a xul file or with data from a datasource.
More Button Features - Archive of obsolete content
example 5 : source view <button type="menu" label="device"> <menupopup> <menuitem label="printer"/> <menuitem label="mouse"/> <menuitem label="keyboard"/> </menupopup> </button> in this example, the user may click the button to pop up a menu containing three items.
More Event Handlers - Archive of obsolete content
next, we'll find out how to add keyboard shortcuts.
Popup Menus - Archive of obsolete content
also note that it is possible to open context menus without using the mouse, for example by pressing the menu key on a keyboard.
Styling a Tree - Archive of obsolete content
current this property is set if the keyboard cursor is at the row.
Trees - Archive of obsolete content
ArchiveMozillaXULTutorialTrees
the user can select the treeitems by clicking on them with the mouse, or by highlighting them with the keyboard.
XBL Example - Archive of obsolete content
some keyboard shortcuts could be used for the previous and next buttons, (say backspace and the enter key).
XUL Structure - Archive of obsolete content
in addition, keyboard shortcuts for each command are also defined, because they may be different for each language.
XUL Tutorial - Archive of obsolete content
e button features the box model the box model element positioning box model details groupboxes adding more elements more layout elements stacks and decks stack positioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus scrolling menus events and scripts adding event handlers more event handlers keyboard shortcuts focus and selection commands updating commands broadcasters and observers document object model document object model modifying a xul interface manipulating lists box objects xpcom interfaces xpcom examples trees trees more tree features tree selection custom tree views tree view details tree box objects rdf and templates introduction to rdf templates tree...
button - Archive of obsolete content
event handlers can be used to trap mouse, keyboard and other events.
datepicker - Archive of obsolete content
however, as described in mozilla bug #799219, a change event handler may encounter erratic behavior when the date is changed using the keyboard instead of the mouse.
menulist - Archive of obsolete content
this occurs when a user selects a menu item or presses a keyboard shortcut attached to the command.
radio - Archive of obsolete content
ArchiveMozillaXULradio
the user can switch which radio button is turned on by selecting it with the mouse or keyboard.
richlistbox - Archive of obsolete content
you can click on any richlistitem element and use the keyboard to move the selection around.
tab - Archive of obsolete content
ArchiveMozillaXULtab
this occurs when a user selects a menu item or presses a keyboard shortcut attached to the command.
tabs - Archive of obsolete content
ArchiveMozillaXULtabs
setfocus type: boolean if true or omitted, the focus will be given to the first element in the corresponding tabpanel when the tabs are navigated via the keyboard.
timepicker - Archive of obsolete content
however, as described in mozilla bug #799219, a change event handler may encounter erratic behavior when the time is changed using the keyboard instead of the mouse.
tree - Archive of obsolete content
ArchiveMozillaXULtree
relevant accessbility guidelines provide alternative access (for example, via menus) to column picker and for header behaviors like sorting (these have no default keyboard access).
2006-09-22 - Archive of obsolete content
summary: mozilla.dev.i18n - feb 2nd - sep 22nd, 2006 announcements testing a dummy greek bon echo nsis installer bug #69230: accelerators should not be affected by keyboard group/level proposal of code changes for l10n in firefox 3 discussions thai language support: how can we add thai as an official localized build?
NPN_SetValue - Archive of obsolete content
in windowless mode all the browser to plugin communications related to drawing, mouse, and keyboard input are accomplished via npp_handleevent.
Scratchpad - Archive of obsolete content
keyboard shortcuts command windows macos linux open the scratchpad shift + f4 shift + f4 shift + f4 run scratchpad code ctrl + r cmd + r ctrl + r run scratchpad code, display the result in the object inspector ctrl + i cmd + i ctrl + i run scratchpad code, insert the result as a comment ctrl + l cmd + l ctrl + l ...
-ms-ime-align - Archive of obsolete content
in the case of -ms-ime-align: after, an ime might adjust the candidate window and keyboard input behavior to provide a better user experience, such as using a horizontal candidate list and allowing some keys to be sent to the app for suggestion list navigation.
-ms-scroll-chaining - Archive of obsolete content
for keyboard input the scroll does not chain regardless of the –ms-scroll-chaining value, and for mouse input the scroll will always chain up to the nearest scrollable ancestor element.
-ms-scroll-snap-points-x - Archive of obsolete content
starting with windows 8.1, this property is also supported for mouse, keyboard, and touchpad interaction.
-ms-scroll-snap-points-y - Archive of obsolete content
starting with windows 8.1, this property is also supported for mouse, keyboard, and touchpad interaction.
-ms-scroll-snap-x - Archive of obsolete content
starting with windows 8.1, this property is also supported for mouse, keyboard, and touchpad interaction.
-ms-scroll-snap-y - Archive of obsolete content
starting with windows 8.1, this property is also supported for mouse, keyboard, and touchpad interaction.
-ms-scroll-translation - Archive of obsolete content
this property has no effect on keyboard interaction.
-ms-touch-select - Archive of obsolete content
this property has no effect on mouse, keyboard, or touchpad interaction.
CSS - Archive of obsolete content
ArchiveWebCSS
it only works on mac os x.-ms-acceleratorthe -ms-accelerator css property is a microsoft extension that sets or retrieves a string indicating whether the object represents a keyboard shortcut.-ms-block-progressionthe -ms-block-progression css property is a microsoft extension that specifies the block progression and layout orientation.-ms-content-zoom-chainingthe -ms-content-zoom-chaining css property is a microsoft extension specifying the zoom behavior that occurs when a user hits the zoom limit during page manipulation.-ms-content-zoom-limitthe -ms-content-zoom-limit css s...
XForms Input Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding special inputmode - not supported for this control incremental - supported.
XForms Label Element - Archive of obsolete content
attributes ui common accesskey - used to specify the keyboard shortcut for focusing the parent form control.
XForms Output Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding special value - xpath expression whose evaluation result is used as the output's value.
XForms Range Element - Archive of obsolete content
accesskey - used to specify the keyboard shortcut for focusing this control.
XForms Secret Element - Archive of obsolete content
accesskey - used to specify the keyboard shortcut for focusing this control.
XForms Select Element - Archive of obsolete content
accesskey - used to specify the keyboard shortcut for focusing this control.
XForms Select1 Element - Archive of obsolete content
accesskey - used to specify the keyboard shortcut for focusing this control.
XForms Submit Element - Archive of obsolete content
accesskey - used to specify the keyboard shortcut for focusing this control.
XForms Textarea Element - Archive of obsolete content
accesskey - used to specify the keyboard shortcut for focusing this control.
XForms Trigger Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding type restrictions the trigger element can be bound to a node containing data of any type.
XForms Upload Element - Archive of obsolete content
accesskey - used to specify the keyboard shortcut for focusing this control.
2D collision detection - Game development
green means collision, blue means no collision.</p> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script> crafty.init(200, 200); var dim1 = {x: 5, y: 5, w: 50, h: 50} var dim2 = {x: 20, y: 10, w: 60, h: 40} var rect1 = crafty.e("2d, canvas, color").attr(dim1).color("red"); var rect2 = crafty.e("2d, canvas, color, keyboard, fourway").fourway(2).attr(dim2).color("blue"); rect2.bind("enterframe", function () { if (rect1.x < rect2.x + rect2.w && rect1.x + rect1.w > rect2.x && rect1.y < rect2.y + rect2.h && rect1.h + rect1.y > rect2.y) { // collision detected!
Building up a basic demo with A-Frame - Game development
the controls are already working: you can use the mouse for looking around and the keyboard for movement (try the w, a, s, and d keys.) there's even an "enter vr mode" button in the bottom right corner of the screen, to allow you to shift to full screen, stereoscopic image viewing if you have the necesary vr hardware set up and ready.
Desktop gamepad controls - Game development
shoottext = 'a to shoot,\ny for controls'; } else { movetext = 'arrow keys\nor wasd to move'; shoottext = 'x or space\nto shoot'; } } else { movetext = 'tap and hold to move'; shoottext = 'tap to shoot'; } } when on desktop, we can check if the controller is active and show the gamepad controls — if not, then the keyboard controls will be shown.
Mobile touch controls - Game development
summary that covers adding touch controls for mobile; in the next article we'll see how to add keyboard and mouse support.
Implementing controls using the Gamepad API - Game development
it will launch the game in the super turbo mode and you'll be able to control the fridge with the keyboard: a and d for turning the turret left and right, w for shooting and arrow keys for movement.
Bounce off the walls - Game development
in the fourth chapter we'll look at implementing a controllable paddle — see paddle and keyboard controls.
Mouse controls - Game development
we have already added keyboard controls, but we could easily add mouse controls too.
2D breakout game using pure JavaScript - Game development
lesson details all the lessons — and the different versions of the mdn breakout game we are building together — are available on github: create the canvas and draw on it move the ball bounce off the walls paddle and keyboard controls game over build the brick field collision detection track the score and win mouse controls finishing up starting with pure javascript is the best way to get a solid knowledge of web game development.
Entity - MDN Web Docs Glossary: Definitions of Web-related terms
you can also use them in place of other characters that are difficult to type with a standard keyboard.
I18N - MDN Web Docs Glossary: Definitions of Web-related terms
(the w3c definition) among other things, i18n requires support for multiple character sets (usually via unicode) units of measure (currency, °c/°f, km/miles, etc.) time and date formats keyboard layouts text directions learn more general knowledge i18n on wikipedia technical reference i18n on w3c i18n on gala-global.org learn about it i18n material on i18nguy.com ...
Input method editor - MDN Web Docs Glossary: Definitions of Web-related terms
input method editors are used in many situations: to enter chinese, japanese, or korean text using a latin keyboard to enter latin text using a numeric keypad to enter text on a touch screen using handwriting recognition ...
Internationalization - MDN Web Docs Glossary: Definitions of Web-related terms
internationalization includes support for multiple character sets (usually via unicode), units of measure (currency, °c/°f, km/miles, etc.), date and time formats, keyboard layouts, and layout and text directions.
UI - MDN Web Docs Glossary: Definitions of Web-related terms
in the world of computers, it can be anything from a keyboard, a joystick, a screen or a program.
Visual Viewport - MDN Web Docs Glossary: Definitions of Web-related terms
the visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page.
Test your skills: CSS and JavaScript accessibility - Learn web development
we'd like you to add to the html and javascript to make it keyboard acessible too.
Test your skills: WAI-ARIA - Learn web development
here, we are starting with a mouse- and keyboard-accessible version.
Accessibility - Learn web development
sites should be accessible to keyboard, mouse, and touch screen users, and any other way users access the web, including screen readers and voice assistants like alexa and google home.
Pseudo-classes and pseudo-elements - Learn web development
:focus — only applies if the user focuses the element using keyboard controls.
How do you make sure your website works properly? - Learn web development
=44 time=148.741 ms 64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms 64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms 64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms ^c --- mozilla.org ping statistics --- 4 packets transmitted, 4 packets received, 0.0% packet loss round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms just keep in mind a handy keyboard shortcut: ctrl+c.
What HTML features promote accessibility? - Learn web development
<a href="inept.html" title="why i'm rubbish at writing link text: an explanation and an apology.">click here</a> to find out more.</p> access keys access keys provide easier navigation by assigning a keyboard shortcut to a link, which will usually gain focus when the user presses alt or ctrl + the access key.
What are browser developer tools? - Learn web development
three ways: keyboard: ctrl + shift + i, except internet explorer and edge: f12 macos: ⌘ + ⌥ + i menu bar: firefox: menu ➤ web developer ➤ toggle tools, or tools ➤ web developer ➤ toggle tools chrome: more tools ➤ developer tools safari: develop ➤ show web inspector.
What are hyperlinks? - Learn web development
tap or click a link to activate it, or if you use a keyboard, press tab until the link is in focus and hit enter or spacebar.
Styling web forms - Learn web development
borders and backgrounds, and redefine their padding and margin: input, textarea { font : 1.4em/1.5em "handwriting", cursive, sans-serif; border : none; padding : 0 10px; margin : 0; width : 80%; background : none; } when one of these fields gains focus, we highlight them with a light grey, transparent, background (it is always important to have focus style, for usability and keyboard accessibility): input:focus, textarea:focus { background : rgba(0,0,0,.1); border-radius: 5px; } now that our text fields are complete, we need to adjust the display of the single and multiple line text fields to match, since they won't typically look the same using the defaults.
Advanced text formatting - Learn web development
<kbd>: for marking up keyboard (and other types of) input entered into the computer.
Creating hyperlinks - Learn web development
note: a link title is only revealed on mouse hover, which means that people relying on keyboard controls or touchscreens to navigate web pages will have difficulty accessing title information.
Images in HTML - Learn web development
no access to keyboard users).
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
only if isover is true, remove the keydown event listener using removeeventlistener() so that once the winning press has happened, no more keyboard input is possible to mess up the final game result.
Video and Audio APIs - Learn web development
another big issue is that the native controls in most browsers aren't very keyboard-accessible.
Adding features to our bouncing balls demo - Learn web development
setcontrols() this method will add an onkeydown event listener to the window object so that when certain keyboard keys are pressed, we can move the evil circle around.
React interactivity: Editing, filtering, conditional rendering - Learn web development
our next article rounds things off for our react tutorials by looking at including focus management in react, which can improve usability and reduce confusion for both keyboard-only and screenreader users.
React resources - Learn web development
focus management is essential in client-side routing — without it, keyboard users can be trapped in focus limbo, and screen-reader users may have no idea that they have moved to a new page.
TypeScript support in Svelte - Learn web development
in this case, if you run npm run validate (either in the vs code console or terminal) you will get the following error: even better, if you run it from the vs code integrated terminal (you can open it with the ctrl + ` keyboard shortcut), cmd/ctrl + clicking on the file name will take you to the line containing the error.
Vue conditional rendering: editing existing todos - Learn web development
the last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility.
Setting up your own test automation environment - Learn web development
add this line to the bottom of quick_test.js now: driver.get('http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html'); interacting with the document now we've got a document to test, we need to interact with it in some way, which usually involves first selecting a specific element to test something about.
Embedding API for Accessibility
setboolpref("browser.accept.timed_events", accepttimedevents); no timer speed setintpref("timer.relative_speed", percent); /* 100 corresponds to normal speed, 200 to double speed */ no allow cycling in lists and links setboolpref("keyboardnav.allow_cycling", allowcycling); no mouse pointer moves with keyboard focus setboolpref("keyboardnav.mouse_follows_keyboard_focus", mousefollows); /* if this pref is set, the mouse pointer will always be move to the 0,0 pixel of the current keyboard focus frame */ no browse with caret ...
Information for Assistive Technology Vendors
keyboard documentation this lists mozilla's keyboard docs in a single long document.
ZoomText
cannot customize the sidebar with the keyboard only.
Creating Custom Events That Can Pass Data
for example, if you want firefox to perform an action whenever something happens (i.e., something other than the standard mouse/keyboard events) and, depending on the data passed along with this event, you want firefox to react differently.
Eclipse CDT
keyboard shortcuts regarding key bindings (keyboard shortcuts), the bindings given below are the defaults.
Experimental features in Firefox
nightly 75 no developer edition 75 no beta 75 no release 75 no preference name layout.css.conic-gradient.enabled and gfx.webrender.all pseudo-class: :focus-visible allows focus styles to be applied to elements like buttons and form controls, only when they are focused using the keyboard (e.g.
Multiple Firefox profiles
windows 8/8.1/10 press "windows + r" on your keyboard.
Roll your own browser: An embedding how-to
(screenshot) light: very simple non-bloated gtk+ interface, familiar netscape 4.x keyboard shortcuts, context menus, etc.
How to get a stacktrace with WinDbg
(the keystroke for a pipe character on us keyboards is shift+\) submit the log file on a bug or via the support site, even if nothing seems to happen during the debug process start debugging now that firefox is opened in the debugger, you need to configure your windbg to download symbols from the mozilla symbol server.
Internationalized Domain Names (IDN) Support in Mozilla Browsers
original document information author(s): katsuhiko momoi last updated date: 03 jul 2003 learn moreedit general knowledge emoji keyboard online ...
source-editor.jsm
keys array an array of objects defining custom keyboard bindings.
Application Translation with Mercurial
by pressing the windows key and r on the keyboard or by calling the "run..." command from the windows "start" button, and then typing cmd and pressing the enter key.
Localizing with Pontoon
info menu gives important information, like the anticipated project timeline and a list of keyboard shortcuts.
Localization sign-off reviews
access key changes we ensure that when access keys are changed that they are consistent with the keyboard layout for that particular locale and not blended between two or more distinct layouts.
Reporting a Performance Problem
using the keyboard shortcuts is often more convenient than using the mouse to interact with the ui: ctrl+shift+1 - start/stop the profiler ctrl+shift+2 - take a profile and launch the viewer to view it capturing and sharing a profile while the profiler is recording, reproduce the performance problem.
accessibility.tabfocus
note: on mac os x, if this preference is not set, the full keyboard access setting in system preferences > keyboard is honored.
Midas editor module security preferences
this functionality is completely removed since 2013-12-14 18:23 pst, see: bugs 38966 and 913734 note: if you've reached this page from a message box in firefox or another mozilla product, try using keyboard shortcuts for the cut, copy, and paste commands: copy: ctrl+c or ctrl+insert (command+c on mac) paste: ctrl+v or shift+insert (command+v on mac) cut: ctrl+x or shift+delete (command+x on mac) the information on the rest of this page is for web developers and advanced users.
Midas
this is similar to the delete button on the keyboard.
Index
this argument makes it possible to use hardware-generated seed values or manually create a value from the keyboard.
NSS Sample Code Utilities_1
tderr, "\r|"); /* turn off echo on stdin & return on 1 char instead of nl */ fd = fileno(stdin); tcgetattr(fd, &tio); orig_lflag = tio.c_lflag; orig_cc_min = tio.c_cc[vmin]; orig_cc_time = tio.c_cc[vtime]; tio.c_lflag &= ~echo; tio.c_lflag &= ~icanon; tio.c_cc[vmin] = 1; tio.c_cc[vtime] = 0; tcsetattr(fd, tcsaflush, &tio); /* get random noise from keyboard strokes */ count = 0; while (count < rsize) { c = getc(stdin); if (c == eof) { rv = secfailure; break; } *(rbuf + count) = c; if (count == 0 || c != *(rbuf + count -1)) { count++; fprintf(stderr, "*"); } } rbuf[count] = '\0'; fprintf(stderr, "\n\nfinished.
Utilities for nss samples
tderr, "\r|"); /* turn off echo on stdin & return on 1 char instead of nl */ fd = fileno(stdin); tcgetattr(fd, &tio); orig_lflag = tio.c_lflag; orig_cc_min = tio.c_cc[vmin]; orig_cc_time = tio.c_cc[vtime]; tio.c_lflag &= ~echo; tio.c_lflag &= ~icanon; tio.c_cc[vmin] = 1; tio.c_cc[vtime] = 0; tcsetattr(fd, tcsaflush, &tio); /* get random noise from keyboard strokes */ count = 0; while (count < rsize) { c = getc(stdin); if (c == eof) { rv = secfailure; break; } *(rbuf + count) = c; if (count == 0 || c != *(rbuf + count -1)) { count++; fprintf(stderr, "*"); } } rbuf[count] = '\0'; fprintf(stderr, "\n\nfinished.
PKCS11 FAQ
MozillaProjectsNSSPKCS11FAQ
why does firefox require users to authenticate themselves by entering a pin at the keyboard?
NSS tools : certutil
this argument makes it possible to use hardware-generated seed values or manually create a value from the keyboard.
NSS Tools certutil
this argument makes it possible to use hardware-generated seed values and unnecessary to manually create a value from the keyboard.
certutil
this argument makes it possible to use hardware-generated seed values or manually create a value from the keyboard.
Gecko Roles
role_ime an object which is used to allow input of characters not found on a keyboard, such as the input of chinese characters on a western keyboard.
Accessibility API Implementation Details
at apis supportthis documentation explains how makers of screen readers, voice dictation packages, onscreen keyboards, magnification software and other assitive technologies can support gecko-based software.
Observer Notifications
user-interaction-active nsidomwindow null sent once every 5000ms while this chrome document sees some kind of user activity (for example, keyboard or mouse events), and at the exact moment of the state transition from idle to active.
nsIAccessibleRole
role_ime 110 an object which is used to allow input of characters not found on a keyboard, such as the input of chinese characters on a western keyboard.
nsIClipboard
orlist, in unsigned long alength, in long awhichclipboard); void setdata(in nsitransferable atransferable, in nsiclipboardowner anowner, in long awhichclipboard); boolean supportsselectionclipboard(); boolean supportsfindclipboard(); constants most clipboard operations in firefox use kglobalclipboard, which is the one also used by the typical control-c/control-v keyboard shortcuts.
nsIDOMXULElement
docommand() generates and dispatches a basic command event, as if the element was clicked with no keyboard modifiers.
nsIMenuBoxObject
openedwithkey boolean true if the menubar was opened using the keyboard; otherwise false.
nsIPromptService
inherits from: nsisupports last changed in gecko 1.7.5 you can define access keys (or keyboard shortcuts) for buttons by including an ampersand ("&") in front of the character that should be the access key for that button.
nsIPropertyBag
es obtained from window.navigator are: appcodename:"mozilla" appname:"netscape" appversion:"5.0 (windows)" battery:batterymanager buildid:"20140529161749" cookieenabled:true donottrack:"yes" geolocation:geolocation language:"en-us" mimetypes:mimetypearray mozalarms:null mozapps:xpcwrappednative_nohelper mozcameras:cameramanager mozconnection:mozconnection mozcontacts:contactmanager mozid:null mozkeyboard:xpcwrappednative_nohelper mozpay:null mozpermissionsettings:null mozphonenumberservice:phonenumberservice mozpower:mozpowermanager moztcpsocket:null online:true oscpu:"windows nt 5.1" platform:"win32" plugins:pluginarray product:"gecko" productsub:"20100101" useragent:"mozilla/5.0 (windows nt 5.1; rv:30.0) gecko/20100101 firefox/30.0" vendor:"" vendorsub:"" __proto__:navigatorprototype from here...
nsISelection
selectionlanguagechange() modifies the cursor bidi level after a change in keyboard direction.
nsITreeView
toggleopenstate() called on the view when an item is opened or closed, e.g., by clicking the twisty, keyboard access, et cetera.
XPCOM Interface Reference
treamnsiasyncoutputstreamnsiasyncstreamcopiernsiasyncverifyredirectcallbacknsiauthinformationnsiauthmodulensiauthpromptnsiauthprompt2nsiauthpromptadapterfactorynsiauthpromptcallbacknsiauthpromptprovidernsiauthpromptwrappernsiautocompletecontrollernsiautocompleteinputnsiautocompleteitemnsiautocompletelistenernsiautocompleteobservernsiautocompleteresultnsiautocompletesearchnsibadcertlistener2nsibidikeyboardnsibinaryinputstreamnsibinaryoutputstreamnsiblocklistpromptnsiblocklistservicensiboxobjectnsibrowserboxobjectnsibrowserhistorynsibrowsersearchservicensicrlinfonsicrlmanagernsicachensicachedeviceinfonsicacheentrydescriptornsicacheentryinfonsicachelistenernsicachemetadatavisitornsicacheservicensicachesessionnsicachevisitornsicachingchannelnsicancelablensicategorymanagernsichannelnsichanneleventsinkn...
XPCOM Interface Reference by grouping
d nsicommandline nsicommandlinehandler nsicommandlinerunner component nsicomponentmanager preferences nsicontentprefobserver nsicontentprefservice nsicomponentregistrar internationalization nsibidikeyboard nsilocale io filesystem nsidirectoryenumerator nsidirectoryiterator nsidirectoryservice nsidirectoryserviceprovider nsidirectoryserviceprovider2 nsidirindex nsidirindexlistener nsidirindexparser nsifile nsilocalfile ...
Plug-in Basics - Plugins
with the plug-in api, you can create dynamically loaded plug-ins that can: register one or more mime types draw into a part of a browser window receive keyboard and mouse events obtain data from the network using urls post data to urls add hyperlinks or hotspots that link to new urls draw into sections on an html page communicate with javascript/dom from native code you can see which plug-ins are installed on your system and have been properly associated with the browser by consulting the installed plug-ins page.
DOM Property Viewer - Firefox Developer Tools
opening the dom property viewer once enabled, you can open the dom property viewer by selecting "dom" from the web developer submenu in the firefox menu panel (or tools menu if you display the menu bar or are on macos), or by pressing its ctrl + shift + w keyboard shortcut.
Set event listener breakpoints - Firefox Developer Tools
so if we choose to log keyboard events, for example, the code no longer pauses as each event is fired: instead, we can then switch to the console, and whenever we press a key we are given a log of where related events were fired.
The Firefox JavaScript Debugger - Firefox Developer Tools
set a logpoint set watch expressions reference keyboard shortcuts source map errors ...
Eyedropper - Firefox Developer Tools
keyboard shortcuts command windows macos linux select the current color enter return enter dismiss the eyedropper esc esc esc move by 1 pixel arrow keys arrow keys arrow keys move by 10 pixels shift + arrow keys shift + arrow keys shift + arrow keys ...
Examine and edit CSS - Firefox Developer Tools
editing keyboard shortcuts you can use the arrow and page up/down keys (along with others) to increase/decrease numeric rules while editing: the up arrow increments values by 1 — for example, "1px" changes to "2px".
Open the Inspector - Firefox Developer Tools
there are two main ways to open the inspector: choose tools > web developer > inspector from the menu bar or the equivalent keyboard shortcut.
Select an element - Firefox Developer Tools
click an element in the html pane to select it: you can also use the arrow keys to move around the dom with the keyboard.
Select and highlight elements - Firefox Developer Tools
click an element in the html pane to select it: you can also use the arrow keys to move around the dom with the keyboard.
Page Inspector - Firefox Developer Tools
and edit the box model inspect and select colors reposition elements in the page edit fonts visualize transforms use the inspector api select an element examine and edit css examine event listeners work with animations edit css filters edit css shapes view background images use the inspector from the web console examine css grid layouts examine css flexbox layouts reference keyboard shortcuts settings ...
Responsive Design Mode - Firefox Developer Tools
from the developer tools toolbox: press the responsive design mode button in the toolbox's toolbar: from the keyboard: press ctrl + shift + m (or cmd + opt + m on macos).
Storage Inspector - Firefox Developer Tools
opening the storage inspector you can open the storage inspector by selecting "storage inspector" from the web developer submenu in the firefox menu panel (or tools menu if you display the menu bar or are on macos), or by pressing its shift + f9 keyboard shortcut.
Tips - Firefox Developer Tools
change the keyboard bindings to vim, emacs or sublime text if you're used to different shortcuts.
View Source - Firefox Developer Tools
to access go to line from the keyboard, press control + option + l on macos, or alt + shift + l on windows or linux.
Rich output - Firefox Developer Tools
click on the triangle, and the object will be expanded to show its contents: starting with firefox 67 (available now in firefox developer) you can use the arrow keys on your keyboard to navigate through objects displayed in the console.
Web Console UI Tour - Firefox Developer Tools
note: you can clear the contents of the console by entering the keyboard command ctrl + shift + l (windows, macos, and linux) or cmd + k on macos.
Hit regions and accessibility - Web APIs
focus rings when working with the keyboard, focus rings are a handy indicator to help navigating on a page.
CompositionEvent.locale - Web APIs
the locale read-only property of the compositionevent interface returns the locale of current input method (for example, the keyboard layout locale if the composition is associated with ime).
CompositionEvent - Web APIs
compositionevent.locale read only returns the locale of current input method (for example, the keyboard layout locale if the composition is associated with ime).
Document.createEvent() - Web APIs
event module standard event object gecko also supports text event module textevent textevents keyboard event module keyboardevent keyevents basic events module event events specifications specification status comment domthe definition of 'document.createevent' in that specification.
Document.execCommand() - Web APIs
(internet explorer and edge support only heading tags h1–h6, address, and pre, which must be wrapped in angle brackets, such as "<h1>".) forwarddelete deletes the character ahead of the cursor's position, identical to hitting the delete key on a windows keyboard.
Document.popupNode - Web APIs
if the popup was opened via the keyboard, the popup node may be set to null.
Document - Web APIs
WebAPIDocument
keyboard events keydown fired when a key is pressed.
Element: keypress event - Web APIs
interface keyboardevent bubbles yes cancelable yes default action varies: keypress event; launch text composition system; blur and focus events; domactivate event; other event examples addeventlistener keypress example this example logs the keyboardevent.code value whenever you press a key after focussing the <input> element.
Element - Web APIs
WebAPIElement
keyboard events keydown fired when a key is pressed.
Using files from web applications - Web APIs
note that in this case the input element must not be hidden using display: none (nor visibility: hidden), otherwise the label would not be keyboard-accessible.
GlobalEventHandlers.onfocus - Web APIs
for onfocus to fire on non-input elements, they must be given the tabindex attribute (see building keyboard accessibility back in for more details).
HTMLButtonElement - Web APIs
htmlbuttonelement.accesskey is a domstring indicating the single-character keyboard key to give access to the button.
HTMLElement: change event - Web APIs
bubbles yes cancelable no interface event event handler property onchange depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment: when the element is :checked (by clicking or using the keyboard) for <input type="radio"> and <input type="checkbox">; when the user commits the change explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input type="file">, etc.); when the element loses focus after its value was changed, but not commited (e.g., after ...
HTMLInputElement - Web APIs
inputmode provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.
HTMLElement.blur() - Web APIs
the htmlelement.blur() method removes keyboard focus from the current element.
HTMLElement.focus() - Web APIs
the focused element is the element which will receive keyboard and similar events by default.
The HTML DOM API - Web APIs
event handlers for document events defined by the html standard to allow access to mouse and keyboard events, drag and drop, media control, and more.
Drag Operations - Web APIs
instead, the user must hold down the alt key to select text with the mouse, or use the keyboard.
InputDeviceCapabilities - Web APIs
this allows, for example, touchscreen keyboards and physical keyboards to be represented the same way when they produce the same input.
MIDIMessageEvent - Web APIs
a midimessage event is fired every time a midi message is sent from a device represented by a midiinput, for example when a midi keyboard key is pressed, a knob is tweaked, or a slider is moved.
Media Session action types - Web APIs
description a media session action may be generated by any media session action source; these sources include anything from ui widgets within the browser itself to media control keys on the user's keyboard to buttons on the user's headset or earbuds.
MediaSessionActionDetails - Web APIs
description a media session action may be generated by any media session action source; these sources include anything from ui widgets within the browser itself to media control keys on the user's keyboard to buttons on the user's headset or earbuds.
MouseEvent.altKey - Web APIs
WebAPIMouseEventaltKey
note: on macintosh keyboards, this key is also known as the option key.
MouseEvent.button - Web APIs
WebAPIMouseEventbutton
some pointing devices only have one button and use keyboard or other input mechanisms to indicate main, secondary, auxilary, etc.
MouseEvent.ctrlKey - Web APIs
note: on macintosh keyboards, this key is the control key.
MouseEvent.mozInputSource - Web APIs
moz_source_keyboard 6 the event was generated by a keyboard.
MouseEvent - Web APIs
see the keyboardevent.getmodifierstate() for details.
MutationObserverInit.attributeFilter - Web APIs
this lets the code, for example, reflect changes to users' nicknames, or to mark them as away from keyboard (afk) or offline.
MutationObserverInit.attributeOldValue - Web APIs
this lets the code, for example, reflect changes to users' nicknames, or to mark them as away from keyboard (afk) or offline.
MutationObserverInit.attributes - Web APIs
this lets the code, for example, reflect changes to users' nicknames, or to mark them as away from keyboard (afk) or offline.
Navigator.mediaSession - Web APIs
an internet radio app, for example, can use setactionhandler() to let fhe media controls on a keyboard or elsehwere on the user's device be used to control the app's media playback.
Navigator - Web APIs
WebAPINavigator
navigator.keyboard read only returns a keyboard object which provides access to functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.
Payment Request API - Web APIs
accessibility: as the browser controls the input elements of the payment sheet, it can assure consistent keyboard and screen reader accessibility on every website without developers needing to do anything.
Selection.anchorNode - Web APIs
this can be visualized by holding the shift key and pressing the arrow keys on your keyboard.
Selection.focusNode - Web APIs
this can be visualized by holding the shift key and pressing the arrow keys on your keyboard to modify the current selection.
Selection.setBaseAndExtent() - Web APIs
note: if the focus position appears before the anchor position in the document, the direction of the selection is reversed — the caret is placed at the beginning of the text rather the end, which matters for any keyboard command that might follow.
Using Touch Events - Web APIs
today, most web content is designed for keyboard and mouse input.
sourceCapabilities - Web APIs
for example, many user agents allow a window to be resized with a mouse or a keyboard, but this detail is not exposed to the web platform in any way, and so the sourcecapabilities of a resize event will typically be null.
UIEvent - Web APIs
WebAPIUIEvent
several interfaces are direct or indirect descendants of this one: mouseevent, touchevent, focusevent, keyboardevent, wheelevent, inputevent, and compositionevent.
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
checkglerror(`setting viewport for eye: ${view.eye}`); myrenderscene(gl, view, scenedata, deltatime); } } } the callback begins by calling a custom function, applypositionoffsets(), which takes a reference space and applies to its transform matrix any changes that need to be made to take into account things such as user inputs from devices not controlled by webxr, such as the keyboard and mouse.
Geometry and reference spaces in WebXR - Web APIs
this comes in especially handy when implementing support for using non-xr devices such as keyboards or mice to move the player's avatar through the world.
Rendering and the WebXR frame animation callback - Web APIs
the third and final type of input is the traditional non-xr input device such as keyboards, mice, trackpads, touch screens, and non-xr gamepads and joysticks.
Using the Web Speech API - Web APIs
this is mainly to hide the keyboard on firefox os.
Privileged features - Web APIs
there will be no context menu defined by default and none of the standard keyboard shortcuts will work.
XRPose.emulatedPosition - Web APIs
any such data is taken from other sources, such as keyboard or mouse inputs or game controllers.
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
in order to use mouse, keyboard, or other input devices to move or otherwise transform objects in the 3d space—or to allow the user to move through the space—you'll need to write some code to read the inputs and move perform the movements.
XRReferenceSpace - Web APIs
*/ }); the other situation in which you may need to acquire a new reference space is if you need to move the origin to a new position; this is commonly done, for example, when your project allows the user to move through the environment using input devices such as the keyboard, mouse, touchpad, or game controls that are not connected through the xr device.
XRSession.inputSources - Web APIs
keyboards, gamepads, and mice are not considered webxr input sources.
XRView - Web APIs
WebAPIXRView
the createteleporttransform() function returns the transform needed to move and rotate an object whose current situation is described by the reference space refspace to a new position and orientation which is computed using previously recorded mouse and keyboard input data which has generated offsets for yaw, pitch, and position along all three axes.
XRViewerPose - Web APIs
this view can represent anything from the point-of-view of a user's xr headset to the viewpoint represented by a player's movement of an avatar using mouse and keyboard, presented on the screen, to a virtual camera capturing the scene for a spectator.
Web APIs
WebAPI
efile idbobjectstore idbobjectstoresync idbopendbrequest idbrequest idbtransaction idbtransactionsync idbversionchangeevent idbversionchangerequest iirfilternode idledeadline imagebitmap imagebitmaprenderingcontext imagecapture imagedata index inputdevicecapabilities inputevent installevent installtrigger intersectionobserver intersectionobserverentry interventionreportbody k keyboard keyboardevent keyboardlayoutmap keyframeeffect keyframeeffectoptions l largestcontentfulpaint layoutshift layoutshiftattribution linearaccelerationsensor linkstyle localfilesystem localfilesystemsync localmediastream location lock lockmanager lockedfile m midiaccess midiconnectionevent midiinput midiinputmap midimessageevent midioutputmap mscandidatewindowhide mscandidatewindowsho...
Using the alert role - Accessibility
the element that the alert role is used on does not have to be able to receive focus, as screen readers will automatically announce the alert regardless of where keyboard focus is currently located.
Using the article role - Accessibility
possible effects on user agents and assistive technology when the user navigates an element assigned the role of article, assistive technologies that typically intercept standard keyboard events should switch to document browsing mode, as opposed to passing keyboard events through to the web application.
Using the slider role - Accessibility
keyboard and focus the slider should be keyboard focusable and operable.
ARIA: tabpanel role - Accessibility
the aria tabpanel role indicates description an element with the tabpanel role associated roles and attributes aria- keyboard interaction key action tab → ← delete required javascript features include note about semantic alternatives to using this role or attribute.
ARIA: article role - Accessibility
keyboard interactions this role does not support any specific keyboard interaction.
ARIA: cell role - Accessibility
keyboard interactions none required javascript features the first rule of aria use is if you can use a native feature with the semantics and behavior you require already built in, instead of repurposing an element and adding an aria role, state or property to make it accessible, then do so.
ARIA: form role - Accessibility
keyboard interactions no role specific keyboard interactions required javascript features onsubmit the onsubmit event handler handles the event raised when the form is submitted.
ARIA: List role - Accessibility
keyboard interactions none.
ARIA: Listitem role - Accessibility
keyboard interactions none.
ARIA: Main role - Accessibility
screen readers use landmark roles to provide keyboard navigation to important sections of a page.
ARIA: img role - Accessibility
an aria-label attribute keyboard interactions required javascript features examples star rating role="img" example specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'img' in that specification.
ARIA: row role - Accessibility
keyboard interactions none required javascript features none.
ARIA: rowgroup role - Accessibility
keyboard interactions none required javascript features none.
ARIA: table role - Accessibility
keyboard interactions none required javascript features none.
ARIA: textbox role - Accessibility
keyboard interactions in a single-line use (when aria-multiline is false or not used), the return or enter key submits the form.
WAI-ARIA Roles - Accessibility
the position of each cell is significant and can be focused using keyboard input.aria: gridcell rolethe gridcell role is used to make a cell in a grid or treegrid.
Web applications and ARIA FAQ - Accessibility
for example, a screen reader uses this api to read the user interface with a text-to-speech engine, a magnifier uses it to highlight important or active areas of the screen, and an onscreen keyboard might use it to provide the most efficient keyboard layout for a given context or ui control.
Alerts - Accessibility
tbd: let's rethink this -- personally, i think setting focus might be good if done without causing a keyboard trap.
overview - Accessibility
general resources dhtml style guide provides keyboard interaction recommendations wai-aria authoring practices guide checkbox aria toggle button and tri-state checkbox examples (from "the paciello group blog") aria example checkbox widgets from the university of illinois menu using wai-aria roles and states with the yui menu control slider from the paciello group blog: aria slider, part one, part two, part threet (example) creating an accessible, internationalized dojo rating widget tabs enhancing tabview accessibility with wai-aria roles and states, from the yui blog enhancing the jquery ui tabs accordingly to wcag 2.0 and aria ...
Robust - Accessibility
not only by sighted mouse users, but also by screenreader users, keyboard-only users, etc.
Text labels and names - Accessibility
interactive elements include links (<a>), form elements, buttons, and any element that has a handler for mouse or keyboard events.
Understanding the Web Content Accessibility Guidelines - Accessibility
buttons must be clickable in some way — mouse, keyboard, voice command, etc.).
:-moz-focusring - CSS: Cascading Style Sheets
note: developers tend to use :-moz-focusring to differentiate between the focus state when the user focuses an element via a mouse click versus keyboard tabbing.
::after (:after) - CSS: Cascading Style Sheets
WebCSS::after
we can also support keyboard users with this technique, by adding a tabindex of 0 to make each span keyboard focusable, and using a css :focus selector.
:focus - CSS: Cascading Style Sheets
WebCSS:focus
it is generally triggered when the user clicks or taps on an element or selects it with the keyboard's tab key.
orientation - CSS: Cascading Style Sheets
opening the soft keyboard on many devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.
flex-direction - CSS: Cascading Style Sheets
flexbox & the keyboard navigation disconnect — tink source order matters | adrian roselli mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.2 | w3c understanding wcag 2.0 formal definition initial valuerowapplies toflex containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax row | row-reverse | column | column-reverse examples reversing flex c...
order - CSS: Cascading Style Sheets
WebCSSorder
flexbox & the keyboard navigation disconnect — tink source order matters | adrian roselli mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.2 | w3c understanding wcag 2.0 formal definition initial value0applies toflex items and absolutely-positioned flex container childreninheritednocomputed valueas specifiedanimation typean integer formal syntax <integer> examples order...
overflow - CSS: Cascading Style Sheets
WebCSSoverflow
disables scrolling of xml root elements, <html>, and <body> with the keyboard's arrow keys and the mouse wheel.
pointer-events - CSS: Cascading Style Sheets
elements with pointer-events: none will still receive focus through sequential keyboard navigation using the tab key.
scrollbar-width - CSS: Cascading Style Sheets
wcag criterion 2.1.1 (keyboard) has been in place for a long time to advise on basic keyboard accessibility, and this should include scrolling of content areas.
zoom - CSS: Cascading Style Sheets
WebCSSzoom
by pressing ctrl-- or ctrl++ keyboard shortcuts) to the document.
Rich-Text Editing in Mozilla - Developer guides
the most basic keyboard commands such as copy and paste are available, all others need to be implemented by the website.
Index - Developer guides
WebGuideIndex
42 user input and controls screen orientation, contenteditable, drag and drop, fullscreen, keyboard, mouse, pointer lock, touch, user input modern web user input goes beyond simple mouse and keyboard: think of touchscreens for example.
Developer guides
user input and controls modern web user input goes beyond simple mouse and keyboard: think of touchscreens for example.
HTML attribute: multiple - HTML: Hypertext Markup Language
keyboard users can select multiple contiguous items by focusing on the <select> element, selecting an item at the top or bottom of the range they want to select using the up and down cursor keys to go up and down the options.
HTML attribute: pattern - HTML: Hypertext Markup Language
some browsers show a tooltip when an element with a title is hovered, but that leaves out keyboard-only and touch-only users.
<a>: The Anchor element - HTML: Hypertext Markup Language
WebHTMLElementa
<body> <a href="#content">skip to main content</a> <header> … </header> <main id="content"> <!-- the skip link jumps to here --> .skip-link { position: absolute; top: -3em; background: #fff; } .skip-link:focus { top: 0; } skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.
<img>: The Image Embed element - HTML: Hypertext Markup Language
WebHTMLElementimg
while this can provide additional information to the user, you should not assume that the user will ever see it: the user may only have keyboard or touchscreen.
<input type="number"> - HTML: Hypertext Markup Language
WebHTMLElementinputnumber
mobile browsers further help with the user experience by showing a special keyboard more suited for entering numbers when the user tries to enter a value.
<input type="reset"> - HTML: Hypertext Markup Language
WebHTMLElementinputreset
adding a reset keyboard shortcut to add a keyboard shortcut to a submit button — just as you would with any <input> for which it makes sense — you use the accesskey global attribute.
<map> - HTML: Hypertext Markup Language
WebHTMLElementmap
examples <map name="primary"> <area shape="circle" coords="75,75,75" href="left.html"> <area shape="circle" coords="275,75,75" href="right.html"> </map> <img usemap="#primary" src="https://udn.realityripple.com/samples/6a/7e559101b3.png" alt="350 x 150 pic"> result expected live example output the live example above should appear similar to the following images (when using your keyboard tab key): for the left.html link: for the right.html link specifications specification status comment html living standardthe definition of '<map>' in that specification.
<samp>: The Sample Output element - HTML: Hypertext Markup Language
WebHTMLElementsamp
css the css that achieves the appearance we want is: .prompt { color: #b00; } samp > kbd { font-weight: bold; } .cursor { color: #00b; } this simply gives the prompt and cursor fairly subtle colorization and emboldens the keyboard input within the sample text.
<var>: The Variable element - HTML: Hypertext Markup Language
WebHTMLElementvar
usage notes related elements other elements that are used in contexts in which <var> is commonly used include: <code>: the html code element <kbd>: the html keyboard input element <samp>: the html sample output element if you encounter code that is mistakenly using <var> for style purposes rather than semantic purposes, you should either use a <span> with appropriate css or, an appropriate semantic element among the following: <em> <i> <q> default style most browsers apply font-style to "italic" when rendering <var>.
HTML elements reference - HTML: Hypertext Markup Language
WebHTMLElement
<kbd> the html keyboard input element (<kbd>) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.
title - HTML: Hypertext Markup Language
html <div title="cooltip"> <p>hovering here will show “cooltip”.</p> <p title="">hovering here will show nothing.</p> </div> result accessibility concerns use of the title attribute is highly problematic for: people using touch-only devices people navigating with keyboards people navigating with assistive technology such as screen readers or magnifiers people experiencing fine motor control impairment people with cognitive concerns this is due to inconsistent browser support, compounded by the additional assistive technology parsing of the browser-rendered page.
Authoring MathML - MathML
it is semi-wysiwyg: you enter the source of the formula using the equation panel/keyboard and a preview of the formula is regularly refreshed.
Performance fundamentals - Web Performance
make events immediate as old-school, accessibility-aware web developers we love click events since they also support keyboard input.
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
g 620002) only structurally external elements and outermost <svg> element fire load events implementation status unknown resize and scroll instead of svgresize and svgscroll implementation status unknown domactivate removed implementation status unknown focusin and focusout instead of domfocusin and domfocusout implementation status unknown keyboard events implementation status unknown mutation events removed implementation status unknown svgzoomevent removed implementation status unknown <cursor> element deprecated implementation status unknown linking change notes link svg resources with fragment identifiers implementation status unknown xlink:type, xlink:r...