Search completed in 1.10 seconds.
KeyboardEvent.initKeyboardEvent() - Web APIs
the
keyboardevent.init
keyboardevent() method initializes the attributes of a
keyboard event object.
... syntax kbdevent.init
keyboardevent(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
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/nsibidi
keyboard.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 havebidi
keyboards 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
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
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
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 = instanceof
keyboardevent.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
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.
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 = instanceof
keyboardevent.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 = instanceof
keyboardevent.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
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
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
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 anative
keyboardlayout, 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 widget
keyboardevent for making the behavior on each platform exactly same.
... for example, if widget
keyboardevent 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 allow
keyboardmotion = 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.
... allow
keyboardmotion 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
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
« 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_acc
keyboardshortcut 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
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.
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
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.init
keyboardevent ?
... e.init
keyboardevent("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
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
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
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_acc
keyboardshortcut.
... 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_acc
keyboardshortcut: 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
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> </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.
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
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.
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...
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.
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
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
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
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.
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
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: 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.
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
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
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
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
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.
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.
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) ...
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.
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.
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.
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.
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...
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.
tabs - Archive of obsolete content
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
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?
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.
CSS - Archive of obsolete content
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 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 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.
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.
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.
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 ...
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.
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.
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.
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.
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.
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 ...
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.
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.
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
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 moz
keyboard: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
treamnsiasyncoutputstreamnsiasyncstreamcopiernsiasyncverifyredirectcallbacknsiauthinformationnsiauthmodulensiauthpromptnsiauthprompt2nsiauthpromptadapterfactorynsiauthpromptcallbacknsiauthpromptprovidernsiauthpromptwrappernsiautocompletecontrollernsiautocompleteinputnsiautocompleteitemnsiautocompletelistenernsiautocompleteobservernsiautocompleteresultnsiautocompletesearchnsibadcertlistener2nsibidi
keyboardnsibinaryinputstreamnsibinaryoutputstreamnsiblocklistpromptnsiblocklistservicensiboxobjectnsibrowserboxobjectnsibrowserhistorynsibrowsersearchservicensicrlinfonsicrlmanagernsicachensicachedeviceinfonsicacheentrydescriptornsicacheentryinfonsicachelistenernsicachemetadatavisitornsicacheservicensicachesessionnsicachevisitornsicachingchannelnsicancelablensicategorymanagernsichannelnsichanneleventsinkn...
XPCOM Interface Reference by grouping
d nsicommandline nsicommandlinehandler nsicommandlinerunner component nsicomponentmanager preferences nsicontentprefobserver nsicontentprefservice nsicomponentregistrar internationalization nsibidi
keyboard 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.
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".
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 ...
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.
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.
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.
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.
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.
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.
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.button - Web APIs
some pointing devices only have one button and use
keyboard or other input mechanisms to indicate main, secondary, auxilary, etc.
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
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.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.
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
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.
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.
XRView - Web APIs
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
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.
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: 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: 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.
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.
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
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...
Index - Developer guides
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.
<a>: The Anchor element - HTML: Hypertext Markup Language
<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.
<map> - HTML: Hypertext Markup Language
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.
<var>: The Variable element - HTML: Hypertext Markup Language
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>.
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.