├── .gitignore ├── Additional ARIA Resources ├── ARIA 101.pdf ├── Static vs. Interactive Widget Roles - Ensuring Proper Functionality in ARIA.pdf └── aria_checklist.pdf ├── Format.bat ├── LICENSE ├── README.md ├── Using Visual ARIA to Physically See and Learn How ARIA Works.pdf ├── docs ├── 1 Basic Link.htm ├── 2 Content Hidden Using aria-hidden.htm ├── 3 ARIA Radio Incomplete 1.htm ├── 4 ARIA Radio Incomplete 2.htm ├── 5 ARIA Radio Incomplete 3.htm ├── 6 ARIA Radio Incomplete 4.htm ├── 7 ARIA Radio Incomplete 5.htm ├── 8 ARIA Radio COMPLETE 6.htm ├── css │ ├── OpenSans-Bold-webfont.eot │ ├── OpenSans-Bold-webfont.svg │ ├── OpenSans-Bold-webfont.ttf │ ├── OpenSans-Bold-webfont.woff │ ├── OpenSans-Italic-webfont.eot │ ├── OpenSans-Italic-webfont.svg │ ├── OpenSans-Italic-webfont.ttf │ ├── OpenSans-Italic-webfont.woff │ ├── OpenSans-Light-webfont.eot │ ├── OpenSans-Light-webfont.svg │ ├── OpenSans-Light-webfont.ttf │ ├── OpenSans-Light-webfont.woff │ ├── OpenSans-Regular-webfont.eot │ ├── OpenSans-Regular-webfont.svg │ ├── OpenSans-Regular-webfont.ttf │ ├── OpenSans-Regular-webfont.woff │ ├── anton-webfont.eot │ ├── anton-webfont.svg │ ├── anton-webfont.ttf │ ├── anton-webfont.woff │ ├── global.css │ └── radios.css ├── github-bookmarklet │ ├── css │ │ ├── OpenSans-Bold-webfont.eot │ │ ├── OpenSans-Bold-webfont.svg │ │ ├── OpenSans-Bold-webfont.ttf │ │ ├── OpenSans-Bold-webfont.woff │ │ ├── OpenSans-Italic-webfont.eot │ │ ├── OpenSans-Italic-webfont.svg │ │ ├── OpenSans-Italic-webfont.ttf │ │ ├── OpenSans-Italic-webfont.woff │ │ ├── OpenSans-Light-webfont.eot │ │ ├── OpenSans-Light-webfont.svg │ │ ├── OpenSans-Light-webfont.ttf │ │ ├── OpenSans-Light-webfont.woff │ │ ├── OpenSans-Regular-webfont.eot │ │ ├── OpenSans-Regular-webfont.svg │ │ ├── OpenSans-Regular-webfont.ttf │ │ ├── OpenSans-Regular-webfont.woff │ │ ├── anton-webfont.eot │ │ ├── anton-webfont.svg │ │ ├── anton-webfont.ttf │ │ ├── anton-webfont.woff │ │ └── global.css │ ├── img │ │ ├── sprite.svg │ │ ├── up.png │ │ ├── whatsock.svg │ │ └── whatsock_logo.jpg │ ├── js │ │ ├── Acc.DC.API.js │ │ ├── jQuery.js │ │ └── setup.js │ └── visual-aria.htm ├── img │ └── cresent_europa.jpg ├── js │ ├── jQuery.js │ └── radios.js └── visual-aria │ ├── public │ ├── 10tablist.css │ ├── 11tree.css │ ├── 12treegrid-grid-table.css │ ├── 1roles.css │ ├── 2landmarks.css │ ├── 3structural.css │ ├── 4dialogs.css │ ├── 5live-regions.css │ ├── 6simple-widgets.css │ ├── 7combobox-listbox.css │ ├── 8menu-menubar.css │ └── 9radiogroup.css │ ├── roles.css │ ├── roles.js │ └── roles.uncompressed.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /Additional ARIA Resources/ARIA 101.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/Additional ARIA Resources/ARIA 101.pdf -------------------------------------------------------------------------------- /Additional ARIA Resources/Static vs. Interactive Widget Roles - Ensuring Proper Functionality in ARIA.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/Additional ARIA Resources/Static vs. Interactive Widget Roles - Ensuring Proper Functionality in ARIA.pdf -------------------------------------------------------------------------------- /Additional ARIA Resources/aria_checklist.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/Additional ARIA Resources/aria_checklist.pdf -------------------------------------------------------------------------------- /Format.bat: -------------------------------------------------------------------------------- 1 | (call prettier --write "./docs/visual-aria/roles.uncompressed.js") 2 | (call uglifyjs "./docs/visual-aria/roles.uncompressed.js" --comments /^!/ --compress --mangle --output "./docs/visual-aria/roles.js") 3 | (call prettier --write "./**/{setup.js,radios.js}") 4 | (call js-beautify -r --type="html" "./**/*.{htm,html}") -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Bryan Garaventa 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # visual-aria 2 | Visual ARIA allows engineers, testers, educators, and students to physically observe ARIA usage within web technologies, including ARIA 1.1 structural, live region, and widget roles, proper nesting and focus management, plus requisite and optional supporting attributes to aid in development. 3 | 4 | Includes the latest version of the AccName Prototype for auto-detection of accessible names and descriptions in accordance with the AccName spec. For further details, visit: https://github.com/WhatSock/w3c-alternative-text-computation 5 | 6 | Visual ARIA 7 | ======== 8 | 9 | ARIA stands for Accessible Rich Internet Applications, and is a technical specification published by the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI). 10 | 11 | One of the greatest challenges regarding ARIA and how to reliably learn to use it, is that ARIA is an invisible technology. Mainstream observers literally cannot see where ARIA is applied, nor when issues are caused as a result of its use. As a result, the process of ARIA education is solely dictated by individuals, their singular understanding of assistive technologies, which browser they are using, which operating system they are using, and the current level of combined support between the operating system, the browser, and the assistive technology, all of which differ significantly when combined in different variations. Thus all ARIA education is skewed by personal subjectivity, perpetually propagating misinformation when key concepts are misunderstood. This makes ARIA education impossible to scale equally across all businesses, agencies, and academic institutions, because all such education is subjective (qualitative) and not objective (quantitative) as it must be. 12 | 13 | To solve this, there needs to be a scientifically precise methodology for learning ARIA that is not based on individual subjectivity, but rather, on that of role usage conformance according to the spec in order to achieve scalable objectivity for universal education. Visual ARIA solves this problem by reliably teaching the accessible use of ARIA through experimentation and experiential learning. Thus all mainstream observers can physically see the effects of ARIA usage equally, while also learning ARIA role usage conformance based on consistent testable mapping algorithms. 14 | 15 | Visual ARIA allows engineers, testers, educators, and students to physically observe ARIA usage within web technologies, including ARIA 1.1 structural, live region, and widget roles, proper nesting and focus management, plus requisite and optional supporting attributes to aid in development. 16 | 17 | Distributed under the terms of the Open Source Initiative OSI - MIT License. 18 | 19 | Developed and maintained by: Bryan Garaventa https://www.linkedin.com/in/bgaraventa 20 | Or on Twitter at https://twitter.com/bryanegaraventa 21 | 22 | Visual ARIA Browser Extensions 23 | ----- 24 | 25 | The Visual ARIA browser extensions can be used to run Visual ARIA offline for local file access during agile development, or from within private intranets that don't allow public internet access. 26 | 27 | * Mozilla: https://addons.mozilla.org/en-US/firefox/addon/visual-aria/ 28 | * Chrome: https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk?hl=en-GB 29 | 30 | Note: Visual ARIA browser extensions are developed and maintained by Laurence Lewis: https://www.linkedin.com/in/laurence-lewis-77520365/ 31 | Or on Twitter at https://twitter.com/Laurence_Lewis 32 | Visual ARIA browser extension support or bug reports should be sent to extensions@a11ycats.com.au 33 | 34 | Project home: 35 | ----- 36 | 37 | https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm 38 | 39 | Download File and Folder Descriptions 40 | ----- 41 | 42 | * Using Visual ARIA to Physically See and Learn How ARIA Works.pdf : CSUN presentation printout. 43 | * docs\* : Example and exercise materials for illustrating Visual ARIA functionality, plus the complete source code for Visual ARIA within the folder 'docs\visual-aria' for use within offline projects or internal server hosting behind corporate firewalls. 44 | * Additional ARIA Resources : Useful resources for learning how ARIA works, how it impacts the accessibility tree within browsers, which ARIA roles are safe to use within specific circumstances, etc. 45 | 46 | How Visual ARIA Works 47 | ----- 48 | 49 | The JavaScript for Visual ARIA is first loaded using roles.js, which then dynamically loads all relevant CSS files that comprise the cascading logic for Visual ARIA. 50 | 51 | Configuration settings can be modified at the top of roles.js to set the base local or remote folder path, plus the millisecond delay for evaluating the text alternative computation and role monitoring sequence for the dynamic loader. Visual ARIA will recursively load itself into nested iframe documents when permitted by the browser's same-origin policy. 52 | 53 | Instructions 54 | ----- 55 | 56 | 1. Open the files within the Files folder in sequence using the numbered HTM files. 57 | 58 | 2. Load Visual ARIA using either the local copy or the public bookmarklet. 59 | https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm 60 | * Or add to Chrome: https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk?hl=en-GB 61 | 62 | 3. Observe the new information displayed that conveys where ARIA is being used. 63 | 64 | 4. Hover the mouse over various elements and observe the Name and Description computation that is displayed for interactive widget roles. This matches the naming computation described at 65 | https://www.levelaccess.com/how-the-w3c-text-alternative-computation-works/ 66 | 67 | 5. Use the keyboard to set focus to interactive widgets and observe how Visual ARIA conveys additional information for the element that has focus, especially when focus is set on the same elements that include ARIA roles. 68 | 69 | How to Interpret Visual ARIA Feedback 70 | ----- 71 | 72 | When observing interactive widget roles, the colors for Visual ARIA will change depending on the circumstances of interaction. For example, When adding the attribute role="button" to an element, it will convey an orange color on black background, but when focus is set on the same element, it will turn green on a white background to convey that the correct element has focus. Additionally, if the wrong element has focus, such as setting focus to an element inside of an element with role="button", a red color on yellow background will be used to convey an incorrect use of ARIA that may result in accessibility issues for assistive technology users. 73 | 74 | Moreover, when interactive widget roles are used and focus is set to one such element, Visual ARIA will suggest keyboard interactions that match the design paradigm for that widget type. In the case of role="button" for example, Visual ARIA will suggest that Space and Enter should activate, and in the case of single tab stop widget roles such as role="radio", role="tab", role="menuitem", role="option", and so on, Visual ARIA will then suggest that the arrow keys should be used to move focus. 75 | 76 | This is meant to guide education and development regarding the accompanying scripting behaviors that should be used when building interactive widgets, thus matching all of the ARIA 1.1 role usage algorithms documented at https://whatsock.com/training/matrices/ . 77 | 78 | The files within this archive may be modified and changed to try out different ARIA roles, which is an encapsulated testing environment for experimenting with ARIA role usage. 79 | 80 | Additional instructions and color combination details are available at 81 | https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm#instructions-for-use 82 | 83 | Related projects: 84 | ----- 85 | 86 | * WhatSock Organization: https://github.com/whatsock 87 | * Visual ARIA: https://github.com/whatsock/visual-aria 88 | -------------------------------------------------------------------------------- /Using Visual ARIA to Physically See and Learn How ARIA Works.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/Using Visual ARIA to Physically See and Learn How ARIA Works.pdf -------------------------------------------------------------------------------- /docs/1 Basic Link.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 1 Basic link with aria-selected 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 17 |
18 |

Basic link with aria-selected

19 |
20 |
21 |
22 |
23 | 24 | 27 | 28 |
29 | Current Page 30 |
31 | 32 |

33 | Load Visual ARIA and confirm what is wrong with this markup. 34 |

35 |
36 |
37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /docs/2 Content Hidden Using aria-hidden.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 2 Content hidden using aria-hidden 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 17 |
18 |

Content hidden using aria-hidden

19 |
20 |
21 |
22 |
23 | 24 | 27 | 28 | 36 | 37 |

38 | Load Visual ARIA and confirm what is wrong with this markup. 39 |

40 |
41 |
42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /docs/3 ARIA Radio Incomplete 1.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 3 ARIA Radios Incomplete 1 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 18 |
19 |

ARIA Radios Incomplete 1

20 |
21 |
22 |
23 |
24 |
25 | 26 | 29 | 30 |
31 |

How would you rate this page?

32 | 39 |
40 | 41 |
42 | 43 |

44 | Load Visual ARIA and confirm there is no ARIA markup. Click the ARIA Role Matrices button to look up the requisite role mappings for this widget structure in section 3.2.6. 45 |

46 |
47 |
48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /docs/4 ARIA Radio Incomplete 2.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 4 ARIA Radios Incomplete 2 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 18 |
19 |

ARIA Radios Incomplete 2

20 |
21 |
22 |
23 |
24 |
25 | 26 | 29 | 30 |
31 |

How would you rate this page?

32 | 39 |
40 | 41 |
42 | 43 |

44 | Load Visual ARIA and observe where problems occur. 45 |

46 |
47 |
48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /docs/5 ARIA Radio Incomplete 3.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 5 ARIA Radios Incomplete 3 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 18 |
19 |

ARIA Radios Incomplete 3

20 |
21 |
22 |
23 |
24 |
25 | 26 | 29 | 30 |
31 |

How would you rate this page?

32 | 39 |
40 | 41 |
42 | 43 |

44 | Load Visual ARIA and observe where problems occur. 45 |

46 |
47 |
48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /docs/6 ARIA Radio Incomplete 4.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 6 ARIA Radios Incomplete 4 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 18 |
19 |

ARIA Radios Incomplete 4

20 |
21 |
22 |
23 |
24 |
25 | 26 | 29 | 30 |
31 |

How would you rate this page?

32 | 39 |
40 | 41 |
42 | 43 |

44 | Load Visual ARIA and observe where problems occur when using the keyboard. 45 |

46 |
47 |
48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /docs/7 ARIA Radio Incomplete 5.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 ARIA Radios Incomplete 5 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 18 |
19 |

ARIA Radios Incomplete 5

20 |
21 |
22 |
23 |
24 |
25 | 26 | 29 | 30 |
31 |

How would you rate this page?

32 | 39 |
40 | 41 |
42 | 43 |

44 | Load Visual ARIA and observe where problems occur when using the keyboard. 45 |

46 |
47 |
48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /docs/8 ARIA Radio COMPLETE 6.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 ARIA Radios COMPLETE 6 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 20 |
21 |

ARIA Radios COMPLETE 6

22 |
23 |
24 |
25 |
26 |
27 | 28 | 34 | 35 |
36 |

How would you rate this page?

37 | 44 |
45 | 46 |
47 | 48 |

49 | Load Visual ARIA and observe what happens when using the keyboard. 50 |

51 |
52 |
53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /docs/css/OpenSans-Bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/css/OpenSans-Bold-webfont.eot -------------------------------------------------------------------------------- /docs/css/OpenSans-Bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/css/OpenSans-Bold-webfont.ttf -------------------------------------------------------------------------------- /docs/css/OpenSans-Bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/css/OpenSans-Bold-webfont.woff -------------------------------------------------------------------------------- /docs/css/OpenSans-Italic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/css/OpenSans-Italic-webfont.eot -------------------------------------------------------------------------------- /docs/css/OpenSans-Italic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/css/OpenSans-Italic-webfont.ttf -------------------------------------------------------------------------------- /docs/css/OpenSans-Italic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/css/OpenSans-Italic-webfont.woff -------------------------------------------------------------------------------- /docs/css/OpenSans-Light-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/css/OpenSans-Light-webfont.eot -------------------------------------------------------------------------------- /docs/css/OpenSans-Light-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/css/OpenSans-Light-webfont.ttf -------------------------------------------------------------------------------- /docs/css/OpenSans-Light-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/css/OpenSans-Light-webfont.woff -------------------------------------------------------------------------------- /docs/css/OpenSans-Regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/css/OpenSans-Regular-webfont.eot -------------------------------------------------------------------------------- /docs/css/OpenSans-Regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/css/OpenSans-Regular-webfont.ttf -------------------------------------------------------------------------------- /docs/css/OpenSans-Regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/css/OpenSans-Regular-webfont.woff -------------------------------------------------------------------------------- /docs/css/anton-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/css/anton-webfont.eot -------------------------------------------------------------------------------- /docs/css/anton-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/css/anton-webfont.ttf -------------------------------------------------------------------------------- /docs/css/anton-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/css/anton-webfont.woff -------------------------------------------------------------------------------- /docs/css/global.css: -------------------------------------------------------------------------------- 1 | 2 | .clearfix:after { 3 | visibility: hidden; 4 | display: block; 5 | font-size: 0; 6 | content: " "; 7 | clear: both; 8 | height: 0; 9 | } 10 | .clearfix { 11 | display: inline-block; 12 | } 13 | * html .clearfix { 14 | height: 1%; 15 | } 16 | .clearfix { 17 | display: block; 18 | } 19 | 20 | /* CSS index: 21 | RESET 22 | DEFAULT VALUES 23 | PAGE STRUCTURE 24 | FORMS 25 | TABLES 26 | NAVIGATION 27 | SPECIFICS 28 | PRINT STYLES 29 | MEDIA QUERIES 30 | */ 31 | 32 | /* ------------------------------ RESET ---------------------------- */ 33 | 34 | html, body, div, span, object, iframe, 35 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 36 | a, abbr, acronym, address, big, cite, code, 37 | del, dfn, em, font, img, ins, kbd, q, s, samp, 38 | small, strike, strong, sub, sup, tt, var, main, figure, 39 | dl, dt, dd, ol, ul, li, 40 | fieldset, form, label, legend, 41 | table, caption, tbody, tfoot, thead, tr, th, td { 42 | margin: 0; 43 | padding: 0; 44 | border: 0; 45 | } 46 | 47 | article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { 48 | display: block; 49 | } 50 | 51 | body {overflow-y: scroll;} 52 | 53 | /* Generated by Font Squirrel (http://www.fontsquirrel.com) on December 10, 2015 */ 54 | 55 | @font-face { 56 | font-family: 'open_sansregular'; 57 | src: url('OpenSans-Regular-webfont.eot'); 58 | src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), 59 | url('OpenSans-Regular-webfont.woff') format('woff'), 60 | url('OpenSans-Regular-webfont.ttf') format('truetype'), 61 | url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg'); 62 | font-weight: normal; 63 | font-style: normal; 64 | } 65 | 66 | @font-face { 67 | font-family: 'open_sanslight'; 68 | src: url('OpenSans-Light-webfont.eot'); 69 | src: url('OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), 70 | url('OpenSans-Light-webfont.woff') format('woff'), 71 | url('OpenSans-Light-webfont.ttf') format('truetype'), 72 | url('OpenSans-Light-webfont.svg#open_sanslight') format('svg'); 73 | font-weight: normal; 74 | font-style: normal; 75 | } 76 | 77 | @font-face { 78 | font-family: 'open_sansitalic'; 79 | src: url('OpenSans-Italic-webfont.eot'); 80 | src: url('OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'), 81 | url('OpenSans-Italic-webfont.woff') format('woff'), 82 | url('OpenSans-Italic-webfont.ttf') format('truetype'), 83 | url('OpenSans-Italic-webfont.svg#open_sansitalic') format('svg'); 84 | font-weight: normal; 85 | font-style: normal; 86 | } 87 | 88 | @font-face { 89 | font-family: 'open_sansbold'; 90 | src: url('OpenSans-Bold-webfont.eot'); 91 | src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), 92 | url('OpenSans-Bold-webfont.woff') format('woff'), 93 | url('OpenSans-Bold-webfont.ttf') format('truetype'), 94 | url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); 95 | font-weight: normal; 96 | font-style: normal; 97 | } 98 | 99 | 100 | @font-face { 101 | font-family: 'antonregular'; 102 | src: url('anton-webfont.eot'); 103 | src: url('anton-webfont.eot?#iefix') format('embedded-opentype'), 104 | url('anton-webfont.woff') format('woff'), 105 | url('anton-webfont.ttf') format('truetype'), 106 | url('anton-webfont.svg#antonregular') format('svg'); 107 | font-weight: normal; 108 | font-style: normal; 109 | } 110 | 111 | /* --------------------------------------------------------------------------- */ 112 | /* ----------------------------- DEFAULT VALUES ------------------------------ */ 113 | /* --------------------------------------------------------------------------- */ 114 | 115 | body { 116 | font: 100%/1 open_sansregular, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 117 | background-color: #133639; 118 | } 119 | 120 | h1 { 121 | font: normal 8vw/1.2 antonregular, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 122 | text-transform: capitalize; 123 | color: #E2A037; 124 | padding: 120px 5% 0 5%; 125 | } 126 | 127 | h2 { 128 | font: normal 1.8em/1.3 antonregular, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 129 | color: #2E3135; 130 | margin: 1.5em 0 0.5em; 131 | } 132 | aside section h2 {margin: 0 0 0.5em;} 133 | 134 | h4 { 135 | font: normal 1.3em/1.3 open_sansbold, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 136 | color: #2E3135; 137 | margin: 1.5em 0 0.5em; 138 | } 139 | 140 | p, li, dt, dd {font-size: 0.9em; line-height: 1.45;} 141 | 142 | li li {font-size: 100%;} 143 | 144 | a, a:link, a:visited { 145 | text-decoration: none; 146 | color: #000; 147 | background: #F2D3A1; 148 | } 149 | a:hover { 150 | text-decoration: underline; 151 | background: transparent; 152 | } 153 | 154 | *:focus { 155 | color: #000; 156 | background: #FC0; 157 | } 158 | 159 | img {max-width: 100%; border: none;} 160 | 161 | em { 162 | font-family: open_sansitalic, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 163 | font-style: normal; 164 | } 165 | strong { 166 | font-family: open_sansbold, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 167 | font-weight: 600; 168 | } 169 | 170 | button {cursor: pointer;} 171 | 172 | code { 173 | color: #000; 174 | background: #E4E4E4; 175 | } 176 | 177 | code.block { 178 | display: block; 179 | padding: 1rem; 180 | margin: 1rem 0; 181 | } 182 | 183 | 184 | /* --------------------------------------------------------------------------- */ 185 | /* ----------------------------- PAGE STRUCTURE ------------------------------ */ 186 | /* --------------------------------------------------------------------------- */ 187 | 188 | #container {min-width: 800px;} 189 | #container.pageContainer {min-width: 0;} 190 | 191 | header { 192 | position: relative; 193 | text-align: center; 194 | color: #FFF; 195 | background: #133639; 196 | background-image: linear-gradient(rgba(0,0,0,.5), transparent); 197 | padding: 2rem 0 0; 198 | } 199 | 200 | main { 201 | background-color: #F4FAFB; 202 | padding: 2rem 5%; 203 | } 204 | 205 | aside {color: #000; background: #d9e8e9; padding: 2rem 5%;} 206 | 207 | p.baseline {font-size: 0.75em; margin-top: 1.5em;} 208 | p.logo {position: absolute; top: 2rem; left: 50%; width: 100px; margin-left: -50px;} 209 | 210 | p.logo a {background: transparent;} 211 | 212 | 213 | /* --------------- FOOTER --------------- */ 214 | 215 | footer {margin: 1rem 0 2rem; text-align: center;} 216 | p.copyright { 217 | font-size: 0.7em; 218 | color: #FFF; 219 | background: transparent; 220 | margin-top: 1rem; 221 | } 222 | 223 | ul.policies li { 224 | display: inline-block; 225 | position: relative; 226 | list-style-type: none; 227 | } 228 | ul.policies li::after { 229 | position: absolute; 230 | top: 0.7em; 231 | right: -0.35em; 232 | display: block; 233 | content: ""; 234 | width: 5px; 235 | height: 5px; 236 | background: #E2A037; 237 | border-radius: 5px; 238 | } 239 | ul.policies li:last-child::after {content: none;} 240 | 241 | footer button { 242 | color: #FFF; 243 | background: transparent; 244 | border: none; 245 | } 246 | 247 | /* --------------------------------------------------------------------------- */ 248 | /* ---------------------------------- FORMS ---------------------------------- */ 249 | /* --------------------------------------------------------------------------- */ 250 | 251 | form p + p {margin-top: 1em;} 252 | 253 | fieldset {margin-bottom: 2rem;} 254 | 255 | legend { 256 | font: normal 1.5em/1 antonregular, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 257 | text-transform: uppercase; 258 | padding-bottom: 1.5rem; 259 | } 260 | 261 | label { 262 | display: block; 263 | font-family: open_sansbold, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 264 | padding-bottom: 0.1em; 265 | } 266 | 267 | input { 268 | font-size: 100%; 269 | padding: 2px 3px; 270 | border: 1px solid #C0C0C0; 271 | border-radius: 2px; 272 | } 273 | 274 | .mandatory-info { 275 | text-align: right; 276 | } 277 | 278 | .buttons-bar {text-align: center; margin: 2rem 0 0;} 279 | .buttons-bar input {margin: 0 0.5rem;} 280 | 281 | input[type=submit], input[type=reset] { 282 | font-size: 100%; 283 | text-transform: uppercase; 284 | color: #FFF; 285 | background: #49182E; 286 | padding: 0.3em 0.5em; 287 | border: none; 288 | box-shadow: 0 1px 2px rgba(0,0,0,.7); 289 | border-radius: 2px; 290 | cursor: pointer; 291 | } 292 | input[type=reset] { 293 | color: #FFF; 294 | background: #555; 295 | } 296 | 297 | input[type=submit]:hover, input[type=reset]:hover { 298 | color: #FFF; 299 | background: #286278; 300 | box-shadow: none; 301 | border-radius: 0; 302 | } 303 | 304 | input[type=submit]:focus {background: #F60;} 305 | 306 | 307 | 308 | /* --------------------------------------------------------------------------- */ 309 | /* --------------------------------- TABLES ---------------------------------- */ 310 | /* --------------------------------------------------------------------------- */ 311 | 312 | table { 313 | width: 100%; 314 | border-collapse: collapse; 315 | } 316 | 317 | th { 318 | font: normal 0.9em/1.2 open_sansbold, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 319 | text-align: left; 320 | background: #E0E0E0; 321 | vertical-align: top; 322 | padding: 0.5em 1em; 323 | } 324 | th a, tr td:nth-child(4) a {background: transparent;} 325 | th a:hover, tr td:nth-child(4) a:hover {text-decoration: none;} 326 | 327 | th:nth-child(1) {width: 9em;} 328 | th.notes {width: 40%;} 329 | tr + tr {border-top: 1px solid #D0D0D0;} 330 | 331 | td { 332 | font-size: 0.9em; 333 | vertical-align: top; 334 | padding: 1em; 335 | } 336 | td ul {padding-left: 0.5em;} 337 | td li {font-size: 100%; padding-bottom: 0.5em;} 338 | td+td {border-left: 1px solid #D0D0D0;} 339 | td p {font-size: 100%; margin: 0;} 340 | td p + p {margin-top: 0.8em;} 341 | 342 | 343 | 344 | /* --------------------------------------------------------------------------- */ 345 | /* -------------------------------- NAVIGATION ------------------------------- */ 346 | /* --------------------------------------------------------------------------- */ 347 | 348 | nav {text-align: center; margin-top: 2rem;} 349 | 350 | nav li {list-style-type: none;} 351 | nav button, nav a, nav a:link, nav a:visited { 352 | display: block; 353 | font: bold 1.2em Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 354 | text-transform: uppercase; 355 | color: #FFF; 356 | background: #0A1C1D; 357 | padding: 0.8em 0.5em; 358 | border-bottom: 1px solid #999; 359 | } 360 | nav button:hover, nav a:hover { 361 | color: #191B1D; 362 | background: #E2A037; 363 | text-decoration: none; 364 | } 365 | 366 | nav li.active button, nav li.active a, nav li.active a:link, nav li.active a:visited { 367 | color: #191B1D; 368 | background: #E2A037; 369 | } 370 | 371 | /* TABLE OF CONTENTS */ 372 | 373 | #toc {text-align: right;} 374 | 375 | #toc dt a, #toc dt a:link, #toc dt a:visited { 376 | color: #000; 377 | background: #E2A037; 378 | padding: 0.3em 0.5em; 379 | border-radius: 0.3em; 380 | } 381 | #toc dt a::after {content: " \23F7";} 382 | #toc dt a:hover {text-decoration: none; color: #FFF; background: #133639;} 383 | 384 | #tocDD { 385 | text-align: left; 386 | background: #F2D3A1; 387 | margin-top: 0.5rem; 388 | } 389 | #tocDD ul {padding: 1rem; margin: 0 1rem 0;} 390 | #tocDD li + li {margin-top: 0.5em;} 391 | 392 | /* --------------------------------------------------------------------------- */ 393 | /* ---------------------------------- ARTICLES/SECTIONS ---------------------- */ 394 | /* --------------------------------------------------------------------------- */ 395 | 396 | article {max-width: 98em;} 397 | 398 | article > .hd:first-of-type h2 {margin-top: 0;} 399 | 400 | article p + p, section p + p {margin-top: 0.8em;} 401 | article ul, section ul, article ol, section ol {margin: 1em;} 402 | article li, section li {margin: 0 0 0.8em 0;} 403 | 404 | /* FIGURES */ 405 | 406 | figcaption { 407 | font: 0.8em open_sansitalic, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 408 | text-align: right; 409 | margin: 0.3em 1rem; 410 | } 411 | 412 | /* Notes */ 413 | 414 | .note { 415 | font: 0.9em open_sansitalic, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 416 | padding-top: 2rem; 417 | margin-top: 2rem; 418 | border-top: 1px dotted #2E3135; 419 | } 420 | 421 | /* --------------------------------------------------------------------------- */ 422 | /* ---------------------------------- UTILITIES ------------------------------ */ 423 | /* --------------------------------------------------------------------------- */ 424 | 425 | .links-list a { 426 | display: block; 427 | font-family: open_sansbold, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 428 | text-decoration: underline; 429 | color: #2E3135; 430 | background: transparent; 431 | } 432 | 433 | p.topLink {text-align: center; margin: 1rem 0;} 434 | p.topLink a {background: transparent;} 435 | 436 | .permalink { 437 | position: absolute; 438 | left: -9000px; 439 | clip: rect(1px); 440 | display: inline-block; 441 | width: 3em; 442 | height: 1em; 443 | text-align: center; 444 | color: #FFF; 445 | background: #133639; 446 | padding: 1em 0; 447 | margin-bottom: 2rem; 448 | border-radius: 3em; 449 | } 450 | 451 | /* --------------------------------------------------------------------------- */ 452 | /* ---------------------------------- SPECIFICS ------------------------------ */ 453 | /* --------------------------------------------------------------------------- */ 454 | 455 | .downloads strong { 456 | display: block; 457 | font-family: open_sansregular, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 458 | } 459 | 460 | /* Contextual menu */ 461 | 462 | .heading { 463 | margin-top: 1rem; 464 | } 465 | code + .heading {margin-top: 2rem;} 466 | 467 | dl.api { 468 | background: #FFF; 469 | padding: 0.5rem 1rem 1rem; 470 | margin: 2rem 0; 471 | border: 1px solid #63B7C2; 472 | } 473 | 474 | dt.heading {margin-bottom: 1rem;} 475 | 476 | dd.detail.hidden {display: none;} 477 | 478 | 479 | .highlight { 480 | font: 1.3em/1.4 open_sansbold, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 481 | padding: 1rem; 482 | margin: 2rem 0; 483 | border-top: 1px solid #E2A037; 484 | border-bottom: 1px solid #E2A037; 485 | } 486 | 487 | 488 | /* DEMOS */ 489 | 490 | div.demo { 491 | clear: both; 492 | padding: 1rem 5%; 493 | margin: 2rem 0; 494 | border: 1px solid #63B7C2; 495 | } 496 | 497 | div.demo .editLink, input[type=button] { 498 | font-family: open_sansbold, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 499 | text-transform: uppercase; 500 | color: #FFF; 501 | background: #286278; 502 | padding: 0.3em 0.5em; 503 | border: none; 504 | border-radius: 3px; 505 | box-shadow: 0 1px 2px rgba(0,0,0,.7); 506 | transition: border-radius; 507 | -webkit-transition: border-radius; 508 | } 509 | 510 | div.demo .editLink:hover, input[type=button]:hover {text-decoration: none; border-radius: 0; box-shadow: none;} 511 | 512 | p.morphCtrl {text-align: right; margin: 1rem 0 0.5rem;} 513 | 514 | 515 | 516 | /* LISTS */ 517 | ol.lsn { 518 | counter-reset: level; 519 | } 520 | ol.lsn li { 521 | display: block; 522 | text-indent: -1em; 523 | } 524 | ol.lsn ol li { 525 | display: block; 526 | text-indent: -2em; 527 | margin-left: 1.3em; 528 | } 529 | ol.lsn li::before { 530 | content: counters(level, ".")". "; 531 | counter-increment: level; 532 | } 533 | 534 | /* HELP */ 535 | p.guidance { 536 | min-height: 30px; 537 | font-family: open_sansitalic, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 538 | background: url(../img/guidance.svg) 0 0 no-repeat; 539 | padding: 0 0 2rem 40px; 540 | margin: 2rem 0 0; 541 | } 542 | 543 | /* DEMO PAGES */ 544 | 545 | div.demo-block { 546 | clear: both; 547 | padding: 1rem 0; 548 | border-top: 2px dotted #63B7C2; 549 | } 550 | 551 | div.demo-block h2 {margin: 0 0 0.5em;} 552 | 553 | #demos nav {text-align: left;} 554 | #demos nav a, #demos nav a:link, #demos nav a:visited { 555 | width: auto; 556 | font-size: 90%; 557 | font-weight: normal; 558 | text-transform: none; 559 | background: transparent; 560 | padding: 1em 5%; 561 | } 562 | #demos nav a:hover {color: #FFF; text-decoration: underline;} 563 | #demos nav a::before {content: "< ";} 564 | 565 | 566 | /* VISUAL ARIA */ 567 | 568 | #bookmarklet {background: #D9E8E9; padding: 0.8rem 1rem;} 569 | 570 | #bookmarklet .content {padding-bottom: 1rem; border-bottom: 3px dotted #E2A037;} 571 | #bookmarklet p + p {margin-top: 0.8em;} 572 | 573 | #bookmarklet textarea {width: 90%;} 574 | 575 | #bookmarkletBtn { 576 | display: inline-block; 577 | color: #000; 578 | background: #E2A037; 579 | padding: 0.3em 0.8em; 580 | margin-bottom: 2rem; 581 | border-radius: 0.3em; 582 | } 583 | 584 | #bookmarkletBtn:hover {text-decoration: none; color: #FFF; background: #133639;} 585 | 586 | 587 | .purpleTltp { 588 | background-color: white; 589 | color: purple; 590 | } 591 | 592 | .blueTltp { 593 | background-color: white; 594 | color: blue; 595 | } 596 | 597 | .redTltp { 598 | background-color: yellow; 599 | color: red; 600 | } 601 | 602 | .fuchsiaTltp { 603 | background-color: white; 604 | color: fuchsia; 605 | } 606 | 607 | .orangeTltp { 608 | background-color: black; 609 | color: orange; 610 | } 611 | 612 | .greenTltp { 613 | background-color: white; 614 | color: green; 615 | } 616 | 617 | dl.calculation { 618 | } 619 | 620 | dl.calculation dt { 621 | font-size: 1em; 622 | font-weight: bold; 623 | padding-top: 0.5rem; 624 | margin: 1em 0 0.8em; 625 | border-top: 1px solid #D0D0D0; 626 | } 627 | 628 | /* --------------------------------------------------------------------------- */ 629 | /* ---------------------------------- QUERIES -------------------------------- */ 630 | /* --------------------------------------------------------------------------- */ 631 | 632 | 633 | @media screen and (min-width: 780px) { 634 | nav { 635 | display: -webkit-flex; 636 | -webkit-justify-content: flex-start; 637 | display: -ms-flex; 638 | -ms-justify-content: flex-start; 639 | display: flex; 640 | justify-content: flex-start; 641 | background: #0A1C1D; 642 | } 643 | nav button, nav a, nav a:link, nav a:visited { 644 | padding: 0.5em 1em; 645 | margin: 0 0.5em 0; 646 | border: none; 647 | } 648 | nav a:nth-child(3) {padding-left: 120px; margin-left: 5%;} 649 | 650 | div.demo-block .trigger { 651 | float: right; 652 | width: 35%; 653 | text-align: right; 654 | margin-top: -3.5rem; 655 | } 656 | 657 | aside section div.content { 658 | display: -webkit-flex; 659 | display: -ms-flex; 660 | display: flex; 661 | } 662 | 663 | aside section div.notes {max-width: 35em; margin: 0.8rem 0 2rem 5%;} 664 | 665 | #bookmarklet { 666 | display: -webkit-flex; 667 | display: -ms-flex; 668 | display: flex; 669 | } 670 | #bookmarklet div.content { 671 | -webkit-flex: 1 1 70%; 672 | -ms-flex: 1 1 70%; 673 | flex: 1 1 70%; 674 | margin-left: 5%; 675 | } 676 | } 677 | 678 | @media screen and (min-width: 1000px) { 679 | h1 {font-size: 5vw; line-height: 80px; text-align: left; padding: 0 0 0 120px; margin-left: 5%;} 680 | p.logo {width: 80px; left: 5%; margin: 0;} 681 | 682 | /* 683 | main {min-height: 800px;} 684 | */ 685 | 686 | h2 {font-size: 2.5em;} 687 | aside section h2 {font-size: 2em;} 688 | 689 | ul.menuList {display: block; background: transparent;} 690 | ul.menuList li {margin-bottom: 0.5rem;} 691 | 692 | nav {text-align: left; margin-top: 3rem;} 693 | 694 | th, td {font-size: 1em;} 695 | 696 | footer {width: 98%; text-align: left; padding: 0 1%;} 697 | footer ul {width: 60%; margin-top: -4rem;} 698 | p.topLink { 699 | float: right; 700 | width: 50px; 701 | text-align: right; 702 | margin: 0; 703 | } 704 | } 705 | 706 | main {margin: 50px auto;} 707 | #testElement {margin: 0 0 100px 150px;} 708 | #testSection1 p {float: left; max-width: 40%;} 709 | #testSection1 img {max-height: 450px;} 710 | 711 | @media screen and (min-width: 1200px) { 712 | p, li, dt, dd {font-size: 1.1em;} 713 | aside p, aside li {font-size: 1em;} 714 | } 715 | 716 | 717 | @media screen and (min-width: 1600px) { 718 | nav { 719 | -webkit-justify-content: flex-start; 720 | -ms-justify-content: flex-start; 721 | justify-content: flex-start; 722 | background: #0A1C1D; 723 | } 724 | h1 {font-size: 2.3vw;} 725 | } 726 | -------------------------------------------------------------------------------- /docs/css/radios.css: -------------------------------------------------------------------------------- 1 | 2 | h2 {font-size: 1.2em; margin-bottom: 2rem;} 3 | fieldset { 4 | padding: 0 1rem 1rem; 5 | margin-top: 2rem; 6 | border: 1px solid #4E4E4E; 7 | } 8 | 9 | legend { 10 | font-size: 1em; 11 | font-weight: bold; 12 | text-align: center; 13 | } 14 | 15 | div.rGroup ul {margin-top: 2rem;} 16 | div.rGroup li { 17 | width: 8em; 18 | list-style-type: none; 19 | text-align: center; 20 | margin: 0.5rem auto; 21 | } 22 | 23 | div.rGroup a.accRadio { 24 | display: block; 25 | font-size: 100%; 26 | text-decoration: none; 27 | color: #FFF; 28 | background: #286278; 29 | padding:0.3em 0.5em; 30 | border: none; 31 | box-shadow: 0 1px 2px rgba(0,0,0,.7); 32 | border-radius: 2px; 33 | cursor: pointer; 34 | } 35 | div.rGroup a.accRadio:hover, div.rGroup a.accRadio:focus, div.rGroup a.accRadio[aria-checked="true"] { 36 | color: #FFF; 37 | background-color: #C13836; 38 | box-shadow: none; 39 | border-radius: 0; 40 | } 41 | 42 | fieldset.radiogroup label { 43 | cursor: pointer; 44 | } 45 | 46 | @media screen and (min-width: 700px) { 47 | div.demo-block { 48 | display: flex; 49 | } 50 | 51 | } 52 | -------------------------------------------------------------------------------- /docs/github-bookmarklet/css/OpenSans-Bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/github-bookmarklet/css/OpenSans-Bold-webfont.eot -------------------------------------------------------------------------------- /docs/github-bookmarklet/css/OpenSans-Bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/github-bookmarklet/css/OpenSans-Bold-webfont.ttf -------------------------------------------------------------------------------- /docs/github-bookmarklet/css/OpenSans-Bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/github-bookmarklet/css/OpenSans-Bold-webfont.woff -------------------------------------------------------------------------------- /docs/github-bookmarklet/css/OpenSans-Italic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/github-bookmarklet/css/OpenSans-Italic-webfont.eot -------------------------------------------------------------------------------- /docs/github-bookmarklet/css/OpenSans-Italic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/github-bookmarklet/css/OpenSans-Italic-webfont.ttf -------------------------------------------------------------------------------- /docs/github-bookmarklet/css/OpenSans-Italic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/github-bookmarklet/css/OpenSans-Italic-webfont.woff -------------------------------------------------------------------------------- /docs/github-bookmarklet/css/OpenSans-Light-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/github-bookmarklet/css/OpenSans-Light-webfont.eot -------------------------------------------------------------------------------- /docs/github-bookmarklet/css/OpenSans-Light-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/github-bookmarklet/css/OpenSans-Light-webfont.ttf -------------------------------------------------------------------------------- /docs/github-bookmarklet/css/OpenSans-Light-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/github-bookmarklet/css/OpenSans-Light-webfont.woff -------------------------------------------------------------------------------- /docs/github-bookmarklet/css/OpenSans-Regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/github-bookmarklet/css/OpenSans-Regular-webfont.eot -------------------------------------------------------------------------------- /docs/github-bookmarklet/css/OpenSans-Regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/github-bookmarklet/css/OpenSans-Regular-webfont.ttf -------------------------------------------------------------------------------- /docs/github-bookmarklet/css/OpenSans-Regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/github-bookmarklet/css/OpenSans-Regular-webfont.woff -------------------------------------------------------------------------------- /docs/github-bookmarklet/css/anton-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/github-bookmarklet/css/anton-webfont.eot -------------------------------------------------------------------------------- /docs/github-bookmarklet/css/anton-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/github-bookmarklet/css/anton-webfont.ttf -------------------------------------------------------------------------------- /docs/github-bookmarklet/css/anton-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/github-bookmarklet/css/anton-webfont.woff -------------------------------------------------------------------------------- /docs/github-bookmarklet/img/sprite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 10 | 11 | 12 | 14 | 15 | 16 | 17 | 19 | 20 | 21 | 22 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /docs/github-bookmarklet/img/up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/github-bookmarklet/img/up.png -------------------------------------------------------------------------------- /docs/github-bookmarklet/img/whatsock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 13 | 15 | 18 | 20 | 25 | 29 | 32 | 34 | 35 | 39 | 41 | 44 | 47 | 51 | 52 | 55 | 59 | 61 | 63 | 65 | 69 | 73 | 78 | 79 | 83 | 87 | 90 | 92 | 97 | 99 | 101 | 106 | 109 | 111 | 114 | 116 | 117 | 121 | 123 | 124 | 125 | 131 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /docs/github-bookmarklet/img/whatsock_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/github-bookmarklet/img/whatsock_logo.jpg -------------------------------------------------------------------------------- /docs/github-bookmarklet/js/setup.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | $A.bind(window, "load", function () { 3 | $A.bind("p.topLink > a", "click", function (ev) { 4 | $A.setFocus($A.query("h1")[0]); 5 | ev.preventDefault(); 6 | }); 7 | 8 | $A.bind("#mlto", { 9 | click: function (ev) { 10 | this.href = "mailto:bryan.garaventa@whatsock.com"; 11 | }, 12 | blur: function (ev) { 13 | this.href = "#"; 14 | }, 15 | }); 16 | 17 | // Generate permalinks 18 | $A.query("h2, h3, h4, h5, h6", function (i, o) { 19 | if (!$A.hasClass(o, "nopermalink")) { 20 | var d = o.parentNode, 21 | a = $A.createEl( 22 | "a", 23 | { 24 | href: 25 | (isVisualARIA 26 | ? "https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm#" 27 | : "http://whatsock.com/training/matrices/#") + d.id, 28 | title: 29 | "Permalink: " + 30 | (isVisualARIA 31 | ? "https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm#" 32 | : "http://whatsock.com/training/matrices/#") + 33 | d.id, 34 | "aria-label": 35 | "Permalink: " + 36 | (isVisualARIA 37 | ? "https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm#" 38 | : "http://whatsock.com/training/matrices/#") + 39 | d.id, 40 | }, 41 | null, 42 | "permalink" 43 | ); 44 | 45 | a.innerHTML = ''; 46 | d.appendChild(a); 47 | $A.css(a, "left", -a.offsetWidth); 48 | } 49 | }); 50 | 51 | if ($A.getEl("ph")) createHeaderNav(); 52 | 53 | if ($A.getEl("tocBtn")) generateTOC(); 54 | }); 55 | 56 | if (top != window) 57 | top.location.href = "http://whatsock.com/training/matrices/"; 58 | 59 | var hds = {}, 60 | createHeaderNav = function () { 61 | var ph = $A.getEl("ph"), 62 | hs = $A.query("div.hd > h2"); 63 | hds = {}; 64 | 65 | for (var i = 0; i < hs.length; i++) { 66 | var h = hs[i]; 67 | 68 | if (ph && h.className !== "skip") { 69 | h.id = "H" + $A.genId(); 70 | var a = $A.createEl( 71 | "a", 72 | { 73 | href: "#", 74 | }, 75 | null, 76 | h.id, 77 | document.createTextNode($A.getText(h)) 78 | ); 79 | 80 | ph.appendChild(a); 81 | $A.setAttr(h, "tabindex", -1); 82 | hds[h.id] = h; 83 | $A.bind(a, "click", function (ev) { 84 | hds[this.className].focus(); 85 | ev.preventDefault(); 86 | }); 87 | 88 | /*if (i < (hs.length - 1)) 89 | ph.appendChild($A.createEl('span', null, null, null, document.createTextNode(' | ')));*/ 90 | } 91 | } 92 | }, 93 | generateTOC = function () { 94 | var links = [], 95 | pLevel = 0, 96 | map = {}; 97 | 98 | $A.query("div.hd", document, function (i, o) { 99 | var heading = $A.query("h1, h2, h3, h4, h5, h6", o)[0], 100 | level = parseInt(heading.nodeName.substring(1)), 101 | a = $A.createEl("a", { 102 | href: "#" + o.id, 103 | }), 104 | props = { 105 | hd: o, 106 | heading: heading, 107 | headingText: $A.getText(heading), 108 | level: level, 109 | map: {}, 110 | a: a, 111 | li: $A.createEl("li"), 112 | }; 113 | 114 | if (level > 1) props.pSibling = map[level]; 115 | 116 | if (!props.pSibling) props.ul = $A.createEl("ul"); 117 | else if (props.pSibling) props.ul = props.pSibling.ul; 118 | 119 | if (level === 1) { 120 | map[1] = props; 121 | map[2] = map[3] = map[4] = map[5] = map[6] = null; 122 | } else if (level === 2) { 123 | map[2] = props; 124 | map[3] = map[4] = map[5] = map[6] = null; 125 | } else if (level === 3) { 126 | map[3] = props; 127 | map[4] = map[5] = map[6] = null; 128 | } else if (level === 4) { 129 | map[4] = props; 130 | map[5] = map[6] = null; 131 | } else if (level === 5) { 132 | map[5] = props; 133 | map[6] = null; 134 | } else if (level === 6) { 135 | map[6] = props; 136 | } 137 | 138 | for (var x = 1; x <= 6; x++) props.map[x] = map[x]; 139 | a.innerHTML = props.headingText; 140 | props.li.appendChild(a); 141 | 142 | if (level > 1 && !props.pSibling) 143 | $A.setAttr( 144 | props.ul, 145 | "aria-label", 146 | props.map[level - 1].headingText.substring( 147 | props.level > 2 148 | ? props.map[level - 1].headingText.indexOf(": ") + 2 149 | : 1 150 | ) 151 | ); 152 | $A.internal.data(a, "props", props); 153 | links.push(a); 154 | pLevel = level; 155 | }); 156 | 157 | var list = $A.createEl( 158 | "ul", 159 | { 160 | "aria-label": "Table of Contents", 161 | }, 162 | { 163 | display: "none", 164 | } 165 | ); 166 | 167 | $A.query(links, function (i, a) { 168 | var props = $A.internal.data(a, "props"); 169 | 170 | if (props.level === 1) list.appendChild(props.li); 171 | else if (props.level > 1 && !props.pSibling && props.ul) { 172 | props.map[props.level - 1].li.appendChild(props.ul); 173 | props.ul.appendChild(props.li); 174 | } else if (props.level > 1 && props.pSibling && props.ul) 175 | props.ul.appendChild(props.li); 176 | }); 177 | 178 | $A.getEl("tocDD").appendChild(list); 179 | 180 | $A.bind("#tocDD a", "click", function (ev) { 181 | $A.internal.data(this, "props").hd.focus(); 182 | ev.preventDefault(); 183 | }); 184 | 185 | var isVisible = false; 186 | 187 | $A.bind("#tocBtn", "click", function (ev) { 188 | if (isVisible) isVisible = false; 189 | else isVisible = true; 190 | $A.setAttr(this, "aria-expanded", isVisible ? "true" : "false"); 191 | $A[isVisible ? "addClass" : "remClass"](this, "pressed"); 192 | $A.css(list, "display", isVisible ? "block" : "none"); 193 | ev.preventDefault(); 194 | }); 195 | }; 196 | })(); 197 | -------------------------------------------------------------------------------- /docs/github-bookmarklet/visual-aria.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | The Visual ARIA Bookmarklet 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 | 23 |
24 |
25 |

The Visual ARIA Bookmarklet

26 |
27 | 30 |
31 | 32 |
33 |
34 | 35 |
36 |

Visual ARIA allows engineers, testers, educators, and students to physically observe ARIA usage within web technologies, including ARIA 1.1 structural, live region, and widget roles, proper nesting and focus management, plus requisite and optional supporting attributes to aid in development.

37 |

Download Visual ARIA from GitHub to view the offline source code for Visual ARIA, which includes important information that explains how it works, plus an example exercise for building a simulated radio button construct using Visual ARIA.

38 |

Additional resources:

39 | 50 |
51 | 52 |
53 |

54 | Visual ARIA Bookmarklet

55 |
56 |

Instructions:

57 |

Right click the "Visual ARIA Bookmarklet" button, then choose Add to 58 | Favorites or Add to Bookmarks. 59 | The Visual ARIA Bookmarklet can then 60 | be run upon any webpage by choosing the bookmarklet from within your 61 | Favorites or Bookmarks menu.

62 |

Alternatively, the bookmarklet can be added manually within browsers such 63 | as Chrome and Safari, by activating New within the Bookmark Manager, 64 | then pasting the below code into the URL field.

65 | 66 |

76 |

77 |
78 |
79 |
80 |
81 |
82 |

Target Audience

83 |
84 |
85 |
    86 |
  • Visual ARIA can be used within classrooms by educators to physically show sighted students what ARIA does and how it works, and how the improper use of ARIA causes accessibility issues when misapplied.
    • 87 |
  • Sighted students can use Visual ARIA to evaluate their own projects as they learn accessible coding practices, with real-time feedback to identify their mistakes and coach them when necessary.
    • 88 |
  • Online learning programs can incorporate Visual ARIA to provide real-time feedback as students build test widgets to practice through experience and repetition.
    • 89 |
  • Sighted Quality Analysis teams can use Visual ARIA to reliably evaluate ARIA usage and related interactivity for all public and private services and products, without having to first understand or have experience using Assistive Technologies in advance.
    • 90 |
  • Teams of sighted engineers can incorporate Visual ARIA within the development process to see how ARIA is being used within their projects, and whether ARIA is being used correctly according to spec when interacted with.
    • 91 |
  • Any sighted person who is interested in ARIA can use Visual ARIA to see where and how ARIA is used on any website to better understand how Assistive Technology users are impacted by its use or misuse.
    • 92 |
93 |
94 |
95 |

How It Works

96 |
97 |
98 |

The bookmarklet script includes a small amount of JavaScript, which 99 | loads the Visual ARIA JavaScript setup file.

100 |

This small JavaScript file then loads the roles.css stylesheet, which comprises all of the Visual ARIA cascading logic functionality.

101 |

The JavaScript file then monitors the page for changes to ARIA roles and supporting attributes associated with HTML input and img elements, which is necessary since these elements don't support the use of the :before and :after CSS pseudo elements.

102 |

Since all of the processing power is handled using CSS, visual feedback by Visual ARIA is instantaneous, and should work correctly within any CSS3 compliant browser within any operating system on any desktop or mobile device.

103 |

Though the coaching advice within Visual ARIA is geared for desktop keyboard interactions, the ARIA spec compliance algorithms conveyed by Visual ARIA are applicable to both desktop and mobile platforms equally.

104 |
105 |
106 |

Instructions for Use

107 |
108 |
109 |

Visual ARIA is very simple to use.

110 |
    111 |
  1. Navigate to the webpage that you wish to examine.
    2. 112 |
  2. Activate the Visual ARIA Bookmarklet from your Favorites or Bookmarks menu, and wait for Visual ARIA to load. The time for this may vary depending on the speed of your internet connection.
    3. 113 |
114 |

You will then see various colored borders where ARIA roles are detected, and tooltips to convey their purpose and supporting attributes.

115 |

These borders and tooltips follow several distinct color schemes to identify the differences between static and interactive widget roles.

116 |

To view the Alternative Text Calculation for any form field, link, or simple interactive widget role, hover the mouse over the active element.

117 |
118 |
119 |

Static Roles

120 |
121 |
122 |
    123 |
  • Purple border with purple tooltip: 124 | Identifies landmark and region roles.
    • 125 |
  • Blue border with blue tooltip: 126 | Identifies structural roles.
    • 127 |
  • Red border with red tooltip: 128 | Identifies role usage errors within structural role usage.
    • 129 |
130 |
131 |
132 |

Live Region Roles

133 |
134 |
135 |
    136 |
  • Fuchsia border with fuchsia tooltip: 137 | Identifies live region roles and associated attributes.
    • 138 |
139 |
140 |
141 |

Interactive Roles

142 |
143 |
144 |
    145 |
  • Orange border with orange tooltip: 146 | Identifies technically compliant interactive role usage. 147 | (Requires keyboard testing to validate functionality) 148 |
    • 149 |
  • Green border with green tooltip: 150 | Identifies technically compliant interactive role usage that matches 151 | the correct focus management for that role type.
    • 152 |
  • Red border with red tooltip: Identifies role usage 153 | and focus management errors within interactive role usage.
    • 154 |
155 |

When interacting with keyboard accessible widget roles, the goal is to turn both the focus outline and border of the focused widget role green. This conveys that focus management and ARIA widget role usage are correctly synchronized.

156 |

If however you see two different colored borders on the same widget role, such as orange and red, then focus management and ARIA widget role usage for this implementation are incorrect and not programmed according to spec.

157 |
158 |
159 |

Alternative Text Calculation

160 |
161 |
162 |

Visual ARIA will automatically calculate the Alternative Text Calculation for any form field, link, or simple ARIA interactive widget role, and display this information when the mouse is hovered over the element.

163 |

There are some important details about this feature that need to be explained however.

164 |

There are two properties that need to be understood within the Accessibility Tree, the Name, and the Description. The Name represents the calculated label text for the active element, and the Description represents supplementary information that can be used by Assistive Technologies to accompany the Name.

165 |
166 |
167 |

Name Calculation

168 |
169 |
170 |
171 |
aria-labelledby
172 |
Caveats: Must not be included with aria-label, nor with the HTML 173 | label element with matching 'for' and 'id' attributes. Also, 174 | aria-labelledby cannot recursively reference other elements 175 | that include aria-labelledby. The presence of role="presentation" 176 | or role="none" will nullify aria-labelledby on the same node. 177 |
178 | 179 |
aria-label
180 |
Caveats: Only if aria-labelledby is not set. If included within a 181 | container referenced via aria-labelledby, the HTML label element with 182 | matching 'for' and 'id' attributes, or 183 | aria-describedby, the value of 184 | aria-label will supersede any embedded content or additional aria-label 185 | attribute values; which will be ignored when setting the Accessible Name 186 | of the parent role. The presence of role="presentation" or role="none" 187 | will nullify aria-label on the same node. 188 |
189 | 190 |
HTML label element with matching 'for' and 'id' attributes
191 |
Caveats: Only if aria-labelledby or aria-label is not set; on HTML 192 | input and select elements only. 193 |
194 | 195 |
HTML 'alt' attribute
196 |
Caveats: Only if aria-labelledby or aria-label is not set; 197 | on HTML img elements only. The presence of role="presentation" or role="none" 198 | will nullify 'alt' on the same node. 199 |
200 | 201 |
HTML 'title' attribute
202 |
Caveats: Only if aria-labelledby, aria-label, or 'alt' is not set; 203 | on HTML img elements only. The presence of role="presentation" or role="none" 204 | will nullify 'title' on the same node. 205 |
206 |
207 |
208 |
209 |

Description Calculation

210 |
211 |
212 |
213 |
aria-describedby
214 |
Caveats: Must not be included with the HTML 'title' attribute, which 215 | will be overwritten by aria-describedby. The presence of 216 | role="presentation" or role="none" will nullify 217 | aria-describedby on the same node. 218 |
219 |
HTML 'title' attribute
220 |
Caveats: Only when applied to active elements that are not HTML img 221 | elements. Must not be included with aria-describedby, which will overwrite 222 | the value of 'title' as the Description. The presence of 223 | role="presentation" or role="none" will nullify 'title' 224 | on the same node. 225 |
226 |
227 |
228 |
229 |

Important Details

230 |
231 |
232 |

Any use of aria-hidden="true" or the CSS properties 233 | display:none or visibility:hidden, will cancel the naming 234 | calculation for the referenced element and all elements within 235 | the subtree of that element. 236 |

237 |

Additionally, the presence of CSS content via the 238 | ::before and ::after pseudo elements are also included as part 239 | of the naming calculation. 240 |

241 |

The Name and Description exposed by Visual ARIA strictly 242 | follows the Alternative Text Calculation for interactive elements, which may not exactly match what is represented by the Accessibility Tree within certain browsers, nor what is conveyed by Assistive Technologies.

243 |

The value in exposing this calculation however, is to identify current bugs within browsers that need to be reported to their venders when discovered using Object Inspector for example, as well as bugs with Assistive 244 | Technologies that need to be reported to AT venders. This will lead 245 | to better interoperability support in the future.

246 |

It is important to note that Visual ARIA will include content 247 | added using CSS pseudo elements as part of the estimated naming 248 | calculation, but not for the element that includes the specific role. Otherwise the calculation would overwrite the status tooltips rendered by Visual ARIA.

249 |
250 |
251 |

Supported Active Element Types

252 |
253 |
254 |
    255 |
  • All HTML input, select, and button elements.
    • 256 |
  • All HTML A elements that include an 'href' attribute.
    • 257 |
  • All HTML5 progress elements.
    • 258 |
  • All of the ARIA roles: 259 | "button", "checkbox", "link", "searchbox", "scrollbar", "slider", "spinbutton", "switch", "textbox", "combobox", "option", "menuitem", "menuitemcheckbox", "menuitemradio", "radio", "tab", "treeitem"
    • 260 |
261 |
262 |
263 |

Notes and Limitations

264 |
265 |
266 |

Since the HTML img, input, textarea, and progress elements cannot support the use of the :before and :after CSS pseudo elements, tooltip and border coloration may sometimes differ.

267 |

Please address any questions or support issues to the Accessibility Innovators LinkedIn group.

268 |
269 |
270 |
271 |
272 | 273 | 293 | 294 |
295 | 296 | 302 |
303 | 304 | 305 | 306 | 307 | -------------------------------------------------------------------------------- /docs/img/cresent_europa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhatSock/visual-aria/9543f5b1943271d8c3a12fc5ed5badd8a37a6c80/docs/img/cresent_europa.jpg -------------------------------------------------------------------------------- /docs/js/radios.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | var index = 0, 3 | radios = $('a[role="radio"]'); 4 | radios.bind({ 5 | keydown: function (ev) { 6 | var k = ev.which || ev.keyCode; 7 | 8 | if (k >= 37 && k <= 40) { 9 | if (k == 37 || k == 38) { 10 | if (index > 0) index--; 11 | else index = radios.length - 1; 12 | } else if (k == 39 || k == 40) { 13 | if (index < radios.length - 1) index++; 14 | else index = 0; 15 | } 16 | $(radios.get(index)).click(); 17 | ev.preventDefault(); 18 | } 19 | }, 20 | click: function (ev) { 21 | index = $.inArray(this, radios.get()); 22 | setFocus(); 23 | ev.preventDefault(); 24 | }, 25 | }); 26 | var setFocus = function () { 27 | radios.attr({ 28 | tabindex: "-1", 29 | "aria-checked": "false", 30 | }); 31 | 32 | $(radios.get(index)) 33 | .attr({ 34 | tabindex: "0", 35 | "aria-checked": "true", 36 | }) 37 | .focus(); 38 | }; 39 | }); 40 | -------------------------------------------------------------------------------- /docs/visual-aria/public/1roles.css: -------------------------------------------------------------------------------- 1 | /* 2 | Visual ARIA Bookmarklet (Revision: 9/9/2022) 3 | Copyright 2022 Bryan Garaventa (http://whatsock.com/training/matrices/visual-aria.htm) 4 | Part of the ARIA Role Conformance Matrices, distributed under the terms of the Open Source Initiative OSI - MIT License 5 | */ 6 | 7 | /* Laurence Lewis -Name Prohibited */ 8 | 9 | div:not([role])[aria-label][data-ws-name-prohibited-aria], 10 | span:not([role])[aria-label][data-ws-name-prohibited-aria], 11 | *[aria-label][data-ws-name-prohibited-aria] 12 | { 13 | border: 2px solid red; 14 | } 15 | *[aria-label][data-ws-name-prohibited-aria]::before { 16 | display: table; 17 | height: auto; 18 | width: auto; 19 | position: relative; 20 | padding: 1px 0; 21 | background-color: #FFFFE5; 22 | color: red; 23 | font-size: .9rem; 24 | font-weight: 900; 25 | content: " [Invalid] aria-label cannot be used on " attr(data-ws-name-prohibited-aria) " "; 26 | } 27 | div:not([role])[aria-labelledby][data-ws-name-prohibited-aria], 28 | span:not([role])[aria-labelledby][data-ws-name-prohibited-aria], 29 | *[aria-labelledby][data-ws-name-prohibited-aria] 30 | { 31 | border: 2px solid red; 32 | } 33 | *[aria-labelledby][data-ws-name-prohibited-aria]::before { 34 | display: table; 35 | height: auto; 36 | width: auto; 37 | position: relative; 38 | padding: 1px 0; 39 | background-color: #FFFFE5; 40 | color: red; 41 | font-size: .9rem; 42 | font-weight: 900; 43 | content: " [Invalid] aria-labelledby cannot be used on " attr(data-ws-name-prohibited-aria) " "; 44 | } 45 | div:not([role])[aria-label][data-ws-name-prohibited-html], 46 | span:not([role])[aria-label][data-ws-name-prohibited-html], 47 | *[aria-label][data-ws-name-prohibited-html] 48 | { 49 | border: 2px solid red; 50 | } 51 | *[aria-label][data-ws-name-prohibited-html]::before { 52 | display: table; 53 | height: auto; 54 | width: auto; 55 | position: relative; 56 | padding: 1px 0; 57 | background-color: #FFFFE5; 58 | color: red; 59 | font-size: .9rem; 60 | font-weight: 900; 61 | content: " [Invalid] aria-label cannot be used on HTML element " attr(data-ws-name-prohibited-html) " "; 62 | } 63 | div:not([role])[aria-labelledby][data-ws-name-prohibited-html], 64 | span:not([role])[aria-labelledby][data-ws-name-prohibited-html], 65 | *[aria-labelledby][data-ws-name-prohibited-html] 66 | { 67 | border: 2px solid red; 68 | } 69 | *[aria-labelledby][data-ws-name-prohibited-html]::before { 70 | display: table; 71 | height: auto; 72 | width: auto; 73 | position: relative; 74 | padding: 1px 0; 75 | background-color: #FFFFE5; 76 | color: red; 77 | font-size: .9rem; 78 | font-weight: 900; 79 | content: " [Invalid] aria-labelledby cannot be used on HTML element " attr(data-ws-name-prohibited-html) " "; 80 | } 81 | /* END */ 82 | 83 | *[aria-label]:focus:after { 84 | display: table; 85 | height: auto; width: auto; 86 | position: relative; padding: 1px 0; 87 | z-index: 10000; 88 | background-color: white; 89 | color: green; 90 | font-size: .9rem; font-weight: 900; 91 | content: ' [ARIA] aria-label=' attr(aria-label) ' '; 92 | } 93 | *[data-ws-bm-aria-label]:before { 94 | display: table; 95 | height: auto; width: auto; 96 | position: relative; padding: 1px 0; 97 | background-color: white; 98 | color: green; 99 | font-size: .9rem; font-weight: 900; 100 | content: ' [ARIA] aria-label=' attr(data-ws-bm-aria-label) ' '; 101 | } 102 | *[aria-labelledby]:focus:after { 103 | display: table; 104 | height: auto; width: auto; 105 | position: relative; padding: 1px 0; 106 | z-index: 10000; 107 | background-color: white; 108 | color: green; 109 | font-size: .9rem; font-weight: 900; 110 | content: ' [ARIA] aria-labelledby=' attr(aria-labelledby) ' '; 111 | } 112 | *[data-ws-bm-aria-labelledby]:before { 113 | display: table; 114 | height: auto; width: auto; 115 | position: relative; padding: 1px 0; 116 | background-color: white; 117 | color: green; 118 | font-size: .9rem; font-weight: 900; 119 | content: ' [ARIA] aria-labelledby=' attr(data-ws-bm-aria-labelledby) ' '; 120 | } 121 | *[aria-describedby]:focus:after { 122 | display: table; 123 | height: auto; width: auto; 124 | position: relative; padding: 1px 0; 125 | z-index: 10000; 126 | background-color: white; 127 | color: green; 128 | font-size: .9rem; font-weight: 900; 129 | content: ' [ARIA] aria-describedby=' attr(aria-describedby) ' '; 130 | } 131 | *[data-ws-bm-aria-describedby]:before { 132 | display: table; 133 | height: auto; width: auto; 134 | position: relative; padding: 1px 0; 135 | background-color: white; 136 | color: green; 137 | font-size: .9rem; font-weight: 900; 138 | content: ' [ARIA] aria-describedby=' attr(data-ws-bm-aria-describedby) ' '; 139 | } 140 | *[aria-label][aria-describedby]:focus:after { 141 | display: table; 142 | height: auto; width: auto; 143 | position: relative; padding: 1px 0; 144 | z-index: 10000; 145 | background-color: white; 146 | color: green; 147 | font-size: .9rem; font-weight: 900; 148 | content: ' [ARIA] aria-label=' attr(aria-label) ' aria-describedby=' attr(aria-describedby) ' '; 149 | } 150 | *[data-ws-bm-aria-label][data-ws-bm-aria-describedby]:before { 151 | display: table; 152 | height: auto; width: auto; 153 | position: relative; padding: 1px 0; 154 | background-color: white; 155 | color: green; 156 | font-size: .9rem; font-weight: 900; 157 | content: ' [ARIA] aria-label=' attr(data-ws-bm-aria-label) ' aria-describedby=' attr(data-ws-bm-aria-describedby) ' '; 158 | } 159 | *[aria-labelledby][aria-describedby]:focus:after { 160 | display: table; 161 | height: auto; width: auto; 162 | position: relative; padding: 1px 0; 163 | z-index: 10000; 164 | background-color: white; 165 | color: green; 166 | font-size: .9rem; font-weight: 900; 167 | content: ' [ARIA] aria-labelledby=' attr(aria-labelledby) ' aria-describedby=' attr(aria-describedby) ' '; 168 | } 169 | *[data-ws-bm-aria-labelledby][data-ws-bm-aria-describedby]:before { 170 | display: table; 171 | height: auto; width: auto; 172 | position: relative; padding: 1px 0; 173 | background-color: white; 174 | color: green; 175 | font-size: .9rem; font-weight: 900; 176 | content: ' [ARIA] aria-labelledby=' attr(data-ws-bm-aria-labelledby) ' aria-describedby=' attr(data-ws-bm-aria-describedby) ' '; 177 | } 178 | 179 | *[aria-haspopup="true"]:focus:after, *[aria-haspopup="menu"]:focus:after, *[data-ws-bm-aria-haspopup="true"]:before, *[data-ws-bm-aria-haspopup="menu"]:before { 180 | display: table; 181 | height: auto; width: auto; 182 | position: relative; padding: 1px 0; 183 | z-index: 10000; 184 | background-color: white; 185 | color: green; 186 | font-size: .9rem; font-weight: 900; 187 | content: ' [ARIA] (has-menu) (Shift+F10 should open menu) '; 188 | } 189 | 190 | *[aria-haspopup="listbox"]:focus:after, *[aria-haspopup="tree"]:focus:after, *[aria-haspopup="grid"]:focus:after, *[aria-haspopup="dialog"]:focus:after { 191 | display: table; 192 | height: auto; width: auto; 193 | position: relative; padding: 1px 0; 194 | z-index: 10000; 195 | background-color: white; 196 | color: green; 197 | font-size: .9rem; font-weight: 900; 198 | content: ' [ARIA] (has-popup) (' attr(aria-haspopup) ') '; 199 | } 200 | 201 | *[data-ws-bm-aria-haspopup="listbox"]:before, *[data-ws-bm-aria-haspopup="tree"]:before, *[data-ws-bm-aria-haspopup="grid"]:before, *[data-ws-bm-aria-haspopup="dialog"]:before { 202 | display: table; 203 | height: auto; width: auto; 204 | position: relative; padding: 1px 0; 205 | z-index: 10000; 206 | background-color: white; 207 | color: green; 208 | font-size: .9rem; font-weight: 900; 209 | content: ' [ARIA] (has-popup) (' attr(data-ws-bm-aria-haspopup) ') '; 210 | } 211 | 212 | *[role]:focus:after { 213 | content: none; 214 | } 215 | *[data-ws-bm-role]:before { 216 | content: none; 217 | } 218 | 219 | *[aria-current="true"]:before, *[aria-current="page"]:before, *[aria-current="step"]:before, *[aria-current="location"]:before, *[aria-current="date"]:before, *[aria-current="time"]:before { 220 | display: table; 221 | height: auto; width: auto; 222 | position: relative; padding: 1px 0; 223 | background-color: white; 224 | color: green; 225 | font-size: .9rem; font-weight: 900; 226 | content: ' [ARIA] Current (' attr(aria-current) ') '; 227 | } 228 | 229 | *[aria-hidden="true"] { 230 | visibility: hidden; 231 | } 232 | *:focus { 233 | outline: 3px green inset; 234 | } 235 | 236 | *[aria-selected]:before { 237 | display: table; 238 | height: auto; width: auto; 239 | position: relative; padding: 1px 0; 240 | background-color: #FFFFE5; 241 | color: red; 242 | font-size: .9rem; font-weight: 900; 243 | content: ' aria-selected is not supported on this element '; 244 | } 245 | *[data-ws-bm-aria-selected]:before { 246 | display: table; 247 | height: auto; width: auto; 248 | position: relative; padding: 1px 0; 249 | background-color: #FFFFE5; 250 | color: red; 251 | font-size: .9rem; font-weight: 900; 252 | content: ' aria-selected is not supported on this element '; 253 | } 254 | *[role][aria-selected]:before { 255 | content: none; 256 | } 257 | *[data-ws-bm-role][data-ws-bm-aria-selected]:before { 258 | content: none; 259 | } 260 | 261 | span.WS-BM-Loading-Msg { 262 | display: none; 263 | } 264 | -------------------------------------------------------------------------------- /docs/visual-aria/public/2landmarks.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | ARIA Banner 4 | http://whatsock.com/training/matrices/#banner 5 | */ 6 | 7 | *[role="banner"] { 8 | border: ridge thick purple; 9 | } 10 | *[role="banner"]:before { 11 | display: table; 12 | height: auto; width: auto; 13 | position: relative; padding: 1px 0; 14 | background-color: white; 15 | color: purple; 16 | font-size: .9rem; font-weight: 900; 17 | content: ' (unlabelled) (landmark) [ARIA] Banner '; 18 | } 19 | *[role="banner"][aria-label]:before { 20 | display: table; 21 | height: auto; width: auto; 22 | position: relative; padding: 1px 0; 23 | background-color: white; 24 | color: purple; 25 | font-size: .9rem; font-weight: 900; 26 | content: ' (landmark) [ARIA] Banner aria-label=' attr(aria-label) ' '; 27 | } 28 | *[role="banner"][aria-labelledby]:before { 29 | display: table; 30 | height: auto; width: auto; 31 | position: relative; padding: 1px 0; 32 | background-color: white; 33 | color: purple; 34 | font-size: .9rem; font-weight: 900; 35 | content: ' (landmark) [ARIA] Banner aria-labelledby=' attr(aria-labelledby) ' '; 36 | } 37 | 38 | /* 39 | ARIA Complementary 40 | http://whatsock.com/training/matrices/#complementary 41 | */ 42 | 43 | *[role="complementary"] { 44 | border: ridge thick purple; 45 | } 46 | *[role="complementary"]:before { 47 | display: table; 48 | height: auto; width: auto; 49 | position: relative; padding: 1px 0; 50 | background-color: white; 51 | color: purple; 52 | font-size: .9rem; font-weight: 900; 53 | content: ' (unlabelled) (landmark) [ARIA] Complementary '; 54 | } 55 | *[role="complementary"][aria-label]:before { 56 | display: table; 57 | height: auto; width: auto; 58 | position: relative; padding: 1px 0; 59 | background-color: white; 60 | color: purple; 61 | font-size: .9rem; font-weight: 900; 62 | content: ' (landmark) [ARIA] Complementary aria-label=' attr(aria-label) ' '; 63 | } 64 | *[role="complementary"][aria-labelledby]:before { 65 | display: table; 66 | height: auto; width: auto; 67 | position: relative; padding: 1px 0; 68 | background-color: white; 69 | color: purple; 70 | font-size: .9rem; font-weight: 900; 71 | content: ' (landmark) [ARIA] Complementary aria-labelledby=' attr(aria-labelledby) ' '; 72 | } 73 | 74 | /* 75 | ARIA Contentinfo 76 | http://whatsock.com/training/matrices/#contentinfo 77 | */ 78 | 79 | *[role="contentinfo"] { 80 | border: ridge thick purple; 81 | } 82 | *[role="contentinfo"]:before { 83 | display: table; 84 | height: auto; width: auto; 85 | position: relative; padding: 1px 0; 86 | background-color: white; 87 | color: purple; 88 | font-size: .9rem; font-weight: 900; 89 | content: ' (unlabelled) (landmark) [ARIA] Contentinfo '; 90 | } 91 | *[role="contentinfo"][aria-label]:before { 92 | display: table; 93 | height: auto; width: auto; 94 | position: relative; padding: 1px 0; 95 | background-color: white; 96 | color: purple; 97 | font-size: .9rem; font-weight: 900; 98 | content: ' (landmark) [ARIA] Contentinfo aria-label=' attr(aria-label) ' '; 99 | } 100 | *[role="contentinfo"][aria-labelledby]:before { 101 | display: table; 102 | height: auto; width: auto; 103 | position: relative; padding: 1px 0; 104 | background-color: white; 105 | color: purple; 106 | font-size: .9rem; font-weight: 900; 107 | content: ' (landmark) [ARIA] Contentinfo aria-labelledby=' attr(aria-labelledby) ' '; 108 | } 109 | 110 | /* 111 | ARIA Form 112 | http://whatsock.com/training/matrices/#form 113 | */ 114 | 115 | *[role="form"] { 116 | border: ridge thick purple; 117 | } 118 | *[role="form"]:before { 119 | display: table; 120 | height: auto; width: auto; 121 | position: relative; padding: 1px 0; 122 | background-color: white; 123 | color: purple; 124 | font-size: .9rem; font-weight: 900; 125 | content: ' (unlabelled) (landmark) [ARIA] Form '; 126 | } 127 | *[role="form"][aria-label]:before { 128 | display: table; 129 | height: auto; width: auto; 130 | position: relative; padding: 1px 0; 131 | background-color: white; 132 | color: purple; 133 | font-size: .9rem; font-weight: 900; 134 | content: ' (landmark) [ARIA] Form aria-label=' attr(aria-label) ' '; 135 | } 136 | *[role="form"][aria-labelledby]:before { 137 | display: table; 138 | height: auto; width: auto; 139 | position: relative; padding: 1px 0; 140 | background-color: white; 141 | color: purple; 142 | font-size: .9rem; font-weight: 900; 143 | content: ' (landmark) [ARIA] Form aria-labelledby=' attr(aria-labelledby) ' '; 144 | } 145 | form[aria-label]:before { 146 | display: table; 147 | height: auto; width: auto; 148 | position: relative; padding: 1px 0; 149 | background-color: white; 150 | color: purple; 151 | font-size: .9rem; font-weight: 900; 152 | content: ' (landmark) [ARIA] Form aria-label=' attr(aria-label) ' '; 153 | } 154 | form[aria-labelledby]:before { 155 | display: table; 156 | height: auto; width: auto; 157 | position: relative; padding: 1px 0; 158 | background-color: white; 159 | color: purple; 160 | font-size: .9rem; font-weight: 900; 161 | content: ' (landmark) [ARIA] Form aria-labelledby=' attr(aria-labelledby) ' '; 162 | } 163 | 164 | /* 165 | ARIA Main 166 | http://whatsock.com/training/matrices/#main 167 | */ 168 | 169 | *[role="main"] { 170 | border: ridge thick purple; 171 | } 172 | *[role="main"]:before { 173 | display: table; 174 | height: auto; width: auto; 175 | position: relative; padding: 1px 0; 176 | background-color: white; 177 | color: purple; 178 | font-size: .9rem; font-weight: 900; 179 | content: ' (unlabelled) (landmark) [ARIA] Main '; 180 | } 181 | *[role="main"][aria-label]:before { 182 | display: table; 183 | height: auto; width: auto; 184 | position: relative; padding: 1px 0; 185 | background-color: white; 186 | color: purple; 187 | font-size: .9rem; font-weight: 900; 188 | content: ' (landmark) [ARIA] Main aria-label=' attr(aria-label) ' '; 189 | } 190 | *[role="main"][aria-labelledby]:before { 191 | display: table; 192 | height: auto; width: auto; 193 | position: relative; padding: 1px 0; 194 | background-color: white; 195 | color: purple; 196 | font-size: .9rem; font-weight: 900; 197 | content: ' (landmark) [ARIA] Main aria-labelledby=' attr(aria-labelledby) ' '; 198 | } 199 | 200 | /* 201 | ARIA Navigation 202 | http://whatsock.com/training/matrices/#navigation 203 | */ 204 | 205 | *[role="navigation"] { 206 | border: ridge thick purple; 207 | } 208 | *[role="navigation"]:before { 209 | display: table; 210 | height: auto; width: auto; 211 | position: relative; padding: 1px 0; 212 | background-color: white; 213 | color: purple; 214 | font-size: .9rem; font-weight: 900; 215 | content: ' (unlabelled) (landmark) [ARIA] Navigation '; 216 | } 217 | *[role="navigation"][aria-label]:before { 218 | display: table; 219 | height: auto; width: auto; 220 | position: relative; padding: 1px 0; 221 | background-color: white; 222 | color: purple; 223 | font-size: .9rem; font-weight: 900; 224 | content: ' (landmark) [ARIA] Navigation aria-label=' attr(aria-label) ' '; 225 | } 226 | *[role="navigation"][aria-labelledby]:before { 227 | display: table; 228 | height: auto; width: auto; 229 | position: relative; padding: 1px 0; 230 | background-color: white; 231 | color: purple; 232 | font-size: .9rem; font-weight: 900; 233 | content: ' (landmark) [ARIA] Navigation aria-labelledby=' attr(aria-labelledby) ' '; 234 | } 235 | 236 | /* 237 | ARIA Search 238 | http://whatsock.com/training/matrices/#search 239 | */ 240 | 241 | *[role="search"] { 242 | border: ridge thick purple; 243 | } 244 | *[role="search"]:before { 245 | display: table; 246 | height: auto; width: auto; 247 | position: relative; padding: 1px 0; 248 | background-color: white; 249 | color: purple; 250 | font-size: .9rem; font-weight: 900; 251 | content: ' (unlabelled) (landmark) [ARIA] Search '; 252 | } 253 | *[role="search"][aria-label]:before { 254 | display: table; 255 | height: auto; width: auto; 256 | position: relative; padding: 1px 0; 257 | background-color: white; 258 | color: purple; 259 | font-size: .9rem; font-weight: 900; 260 | content: ' (landmark) [ARIA] Search aria-label=' attr(aria-label) ' '; 261 | } 262 | *[role="search"][aria-labelledby]:before { 263 | display: table; 264 | height: auto; width: auto; 265 | position: relative; padding: 1px 0; 266 | background-color: white; 267 | color: purple; 268 | font-size: .9rem; font-weight: 900; 269 | content: ' (landmark) [ARIA] Search aria-labelledby=' attr(aria-labelledby) ' '; 270 | } 271 | 272 | /* 273 | ARIA Region 274 | Note: The Region role requires an explicit label using either aria-label or aria-labelledby. 275 | http://whatsock.com/training/matrices/#region 276 | */ 277 | 278 | *[role="region"] { 279 | border: ridge thick red; 280 | } 281 | *[role="region"]:before { 282 | display: table; 283 | height: auto; width: auto; 284 | position: relative; padding: 1px 0; 285 | background-color: #FFFFE5; 286 | color: red; 287 | font-size: .9rem; font-weight: 900; 288 | content: ' (unlabelled) [ARIA] Region (requires a label) '; 289 | } 290 | *[role="region"][aria-label], *[role="region"][aria-labelledby] { 291 | border: ridge thick purple; 292 | } 293 | *[role="region"][aria-label]:before { 294 | display: table; 295 | height: auto; width: auto; 296 | position: relative; padding: 1px 0; 297 | background-color: white; 298 | color: purple; 299 | font-size: .9rem; font-weight: 900; 300 | content: ' [ARIA] Region aria-label=' attr(aria-label) ' '; 301 | } 302 | *[role="region"][aria-labelledby]:before { 303 | display: table; 304 | height: auto; width: auto; 305 | position: relative; padding: 1px 0; 306 | background-color: white; 307 | color: purple; 308 | font-size: .9rem; font-weight: 900; 309 | content: ' [ARIA] Region aria-labelledby=' attr(aria-labelledby) ' '; 310 | } 311 | -------------------------------------------------------------------------------- /docs/visual-aria/public/3structural.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | ARIA Article 4 | http://whatsock.com/training/matrices/#article 5 | */ 6 | 7 | *[role="article"] { 8 | border: ridge thick blue; 9 | } 10 | *[role="article"]:before { 11 | display: table; 12 | height: auto; width: auto; 13 | position: relative; padding: 1px 0; 14 | background-color: white; 15 | color: blue; 16 | font-size: .9rem; font-weight: 900; 17 | content: ' (unlabelled) [ARIA] Article '; 18 | } 19 | *[role="article"][aria-label]:before { 20 | display: table; 21 | height: auto; width: auto; 22 | position: relative; padding: 1px 0; 23 | background-color: white; 24 | color: blue; 25 | font-size: .9rem; font-weight: 900; 26 | content: ' [ARIA] Article aria-label=' attr(aria-label) ' '; 27 | } 28 | *[role="article"][aria-labelledby]:before { 29 | display: table; 30 | height: auto; width: auto; 31 | position: relative; padding: 1px 0; 32 | background-color: white; 33 | color: blue; 34 | font-size: .9rem; font-weight: 900; 35 | content: ' [ARIA] Article aria-labelledby=' attr(aria-labelledby) ' '; 36 | } 37 | 38 | /* 39 | ARIA Definition 40 | Required attributes: aria-labelledby which must point to an element with role=term 41 | http://whatsock.com/training/matrices/#definition 42 | */ 43 | 44 | *[role="definition"] { 45 | border: ridge thick red; 46 | } 47 | *[role="definition"]:before { 48 | display: table; 49 | height: auto; width: auto; 50 | position: relative; padding: 1px 0; 51 | background-color: #FFFFE5; 52 | color: red; 53 | font-size: .9rem; font-weight: 900; 54 | content: ' [ARIA] Definition (missing aria-labelledby) '; 55 | } 56 | *[role="definition"][aria-labelledby] { 57 | border: ridge thick blue; 58 | } 59 | *[role="definition"][aria-labelledby]:before { 60 | display: table; 61 | height: auto; width: auto; 62 | position: relative; padding: 1px 0; 63 | background-color: white; 64 | color: blue; 65 | font-size: .9rem; font-weight: 900; 66 | content: ' [ARIA] Definition aria-labelledby=' attr(aria-labelledby) ' '; 67 | } 68 | 69 | /* 70 | ARIA Directory 71 | Note: Requires children with role="listitem". 72 | http://whatsock.com/training/matrices/#directory 73 | */ 74 | 75 | *[role="listitem"] { 76 | border: ridge thick red; 77 | } 78 | *[role="listitem"]:before { 79 | display: table; 80 | height: auto; width: auto; 81 | position: relative; padding: 1px 0; 82 | background-color: #FFFFE5; 83 | color: red; 84 | font-size: .9rem; font-weight: 900; 85 | content: ' [ARIA] Listitem (missing parent with role=list or role=directory) '; 86 | } 87 | 88 | *[role="directory"] *[role="listitem"] { 89 | border: ridge thick blue; 90 | } 91 | *[role="directory"] *[role="listitem"]:before { 92 | display: table; 93 | height: auto; width: auto; 94 | position: relative; padding: 1px 0; 95 | background-color: white; 96 | color: blue; 97 | font-size: .9rem; font-weight: 900; 98 | content: ' [ARIA] Listitem (contained within role=directory) '; 99 | } 100 | 101 | *[role="directory"] { 102 | border: ridge thick blue; 103 | } 104 | *[role="directory"]:before { 105 | display: table; 106 | height: auto; width: auto; 107 | position: relative; padding: 1px 0; 108 | background-color: white; 109 | color: blue; 110 | font-size: .9rem; font-weight: 900; 111 | content: ' [ARIA] Directory (requires children with role=listitem) '; 112 | } 113 | *[role="directory"][aria-label]:before { 114 | display: table; 115 | height: auto; width: auto; 116 | position: relative; padding: 1px 0; 117 | background-color: white; 118 | color: blue; 119 | font-size: .9rem; font-weight: 900; 120 | content: ' [ARIA] Directory (requires children with role=listitem) aria-label=' attr(aria-label) ' '; 121 | } 122 | *[role="directory"][aria-labelledby]:before { 123 | display: table; 124 | height: auto; width: auto; 125 | position: relative; padding: 1px 0; 126 | background-color: white; 127 | color: blue; 128 | font-size: .9rem; font-weight: 900; 129 | content: ' [ARIA] Directory (requires children with role=listitem) aria-labelledby=' attr(aria-labelledby) ' '; 130 | } 131 | 132 | /* 133 | ARIA Document 134 | http://whatsock.com/training/matrices/#document 135 | */ 136 | 137 | *[role="document"] { 138 | border: ridge thick blue; 139 | } 140 | *[role="document"]:before { 141 | display: table; 142 | height: auto; width: auto; 143 | position: relative; padding: 1px 0; 144 | background-color: white; 145 | color: blue; 146 | font-size: .9rem; font-weight: 900; 147 | content: ' (unlabelled) [ARIA] Document '; 148 | } 149 | *[role="document"][aria-label]:before { 150 | display: table; 151 | height: auto; width: auto; 152 | position: relative; padding: 1px 0; 153 | background-color: white; 154 | color: blue; 155 | font-size: .9rem; font-weight: 900; 156 | content: ' [ARIA] Document aria-label=' attr(aria-label) ' '; 157 | } 158 | *[role="document"][aria-labelledby]:before { 159 | display: table; 160 | height: auto; width: auto; 161 | position: relative; padding: 1px 0; 162 | background-color: white; 163 | color: blue; 164 | font-size: .9rem; font-weight: 900; 165 | content: ' [ARIA] Document aria-labelledby=' attr(aria-labelledby) ' '; 166 | } 167 | 168 | /* 169 | ARIA Feed 170 | Note: Requires first level children with role="article". 171 | Elements with role="article" should be focusable and navigable using the arrow keys, and newly rendered articles must be either appended or prepended to the role="feed" container. 172 | The container with role="feed" should not be focusable. 173 | http://whatsock.com/training/matrices/#feed 174 | */ 175 | 176 | *[role="feed"] *[role="article"] { 177 | border: ridge thick blue; 178 | } 179 | *[role="feed"] *[role="article"]:before { 180 | display: table; 181 | height: auto; width: auto; 182 | position: relative; padding: 1px 0; 183 | background-color: white; 184 | color: blue; 185 | font-size: .9rem; font-weight: 900; 186 | content: ' [ARIA] Article (contained within role=feed) '; 187 | } 188 | 189 | *[role="feed"] *[role="article"]:focus { 190 | border: ridge thick green; 191 | } 192 | *[role="feed"] *[role="article"]:focus:before { 193 | display: table; 194 | height: auto; width: auto; 195 | position: relative; padding: 1px 0; 196 | background-color: white; 197 | color: blue; 198 | font-size: .9rem; font-weight: 900; 199 | content: ' (focused) [ARIA] Article (contained within role=feed) (arrows should move focus between articles) '; 200 | } 201 | 202 | *[role="feed"] { 203 | border: ridge thick blue; 204 | } 205 | *[role="feed"]:before { 206 | display: table; 207 | height: auto; width: auto; 208 | position: relative; padding: 1px 0; 209 | background-color: white; 210 | color: blue; 211 | font-size: .9rem; font-weight: 900; 212 | content: ' [ARIA] Feed (requires first level focusable children with role=article) '; 213 | } 214 | *[role="feed"][aria-label]:before { 215 | display: table; 216 | height: auto; width: auto; 217 | position: relative; padding: 1px 0; 218 | background-color: white; 219 | color: blue; 220 | font-size: .9rem; font-weight: 900; 221 | content: ' [ARIA] Feed (requires first level focusable children with role=article) aria-label=' attr(aria-label) ' '; 222 | } 223 | *[role="feed"][aria-labelledby]:before { 224 | display: table; 225 | height: auto; width: auto; 226 | position: relative; padding: 1px 0; 227 | background-color: white; 228 | color: blue; 229 | font-size: .9rem; font-weight: 900; 230 | content: ' [ARIA] Feed (requires first level focusable children with role=article) aria-labelledby=' attr(aria-labelledby) ' '; 231 | } 232 | 233 | *[role="feed"]:focus { 234 | border: ridge thick red; 235 | } 236 | *[role="feed"]:focus:before { 237 | display: table; 238 | height: auto; width: auto; 239 | position: relative; padding: 1px 0; 240 | background-color: #FFFFE5; 241 | color: red; 242 | font-size: .9rem; font-weight: 900; 243 | content: ' (focused) [ARIA] Feed (role=feed should not be focusable) '; 244 | } 245 | 246 | /* 247 | ARIA Figure 248 | http://whatsock.com/training/matrices/#figure 249 | */ 250 | 251 | *[role="figure"] { 252 | border: ridge thick blue; 253 | } 254 | *[role="figure"]:before { 255 | display: table; 256 | height: auto; width: auto; 257 | position: relative; padding: 1px 0; 258 | background-color: white; 259 | color: blue; 260 | font-size: .9rem; font-weight: 900; 261 | content: ' [ARIA] Figure '; 262 | } 263 | *[role="figure"][aria-label]:before { 264 | display: table; 265 | height: auto; width: auto; 266 | position: relative; padding: 1px 0; 267 | background-color: white; 268 | color: blue; 269 | font-size: .9rem; font-weight: 900; 270 | content: ' [ARIA] Figure aria-label=' attr(aria-label) ' '; 271 | } 272 | *[role="figure"][aria-labelledby]:before { 273 | display: table; 274 | height: auto; width: auto; 275 | position: relative; padding: 1px 0; 276 | background-color: white; 277 | color: blue; 278 | font-size: .9rem; font-weight: 900; 279 | content: ' [ARIA] Figure aria-labelledby=' attr(aria-labelledby) ' '; 280 | } 281 | 282 | /* 283 | ARIA Heading 284 | Required attributes: aria-level 285 | http://whatsock.com/training/matrices/#heading 286 | */ 287 | 288 | *[role="heading"] { 289 | border: ridge thick red; 290 | } 291 | *[role="heading"]:before { 292 | display: table; 293 | height: auto; width: auto; 294 | position: relative; padding: 1px 0; 295 | background-color: #FFFFE5; 296 | color: red; 297 | font-size: .9rem; font-weight: 900; 298 | content: ' [ARIA] Heading (missing aria-level) '; 299 | } 300 | *[role="heading"][aria-level] { 301 | border: ridge thick blue; 302 | } 303 | *[role="heading"][aria-level]:before { 304 | display: table; 305 | height: auto; width: auto; 306 | position: relative; padding: 1px 0; 307 | background-color: white; 308 | color: blue; 309 | font-size: .9rem; font-weight: 900; 310 | content: ' [ARIA] Heading aria-level=' attr(aria-level) ' '; 311 | } 312 | 313 | /* 314 | ARIA Img 315 | http://whatsock.com/training/matrices/#img 316 | */ 317 | 318 | *[role="img"] { 319 | border: ridge thick blue; 320 | } 321 | *[role="img"]:before { 322 | display: table; 323 | height: auto; width: auto; 324 | position: relative; padding: 1px 0; 325 | background-color: white; 326 | color: blue; 327 | font-size: .9rem; font-weight: 900; 328 | content: ' [ARIA] Img '; 329 | } 330 | *[role="img"][aria-label]:before { 331 | display: table; 332 | height: auto; width: auto; 333 | position: relative; padding: 1px 0; 334 | background-color: white; 335 | color: blue; 336 | font-size: .9rem; font-weight: 900; 337 | content: ' [ARIA] Img aria-label=' attr(aria-label) ' '; 338 | } 339 | *[role="img"][aria-labelledby]:before { 340 | display: table; 341 | height: auto; width: auto; 342 | position: relative; padding: 1px 0; 343 | background-color: white; 344 | color: blue; 345 | font-size: .9rem; font-weight: 900; 346 | content: ' [ARIA] Img aria-labelledby=' attr(aria-labelledby) ' '; 347 | } 348 | 349 | /* 350 | ARIA List 351 | Note: Requires children with role="listitem". 352 | http://whatsock.com/training/matrices/#list 353 | */ 354 | 355 | *[role="list"] *[role="listitem"] { 356 | border: ridge thick blue; 357 | } 358 | *[role="list"] *[role="listitem"]:before { 359 | display: table; 360 | height: auto; width: auto; 361 | position: relative; padding: 1px 0; 362 | background-color: white; 363 | color: blue; 364 | font-size: .9rem; font-weight: 900; 365 | content: ' [ARIA] Listitem (contained within role=list) '; 366 | } 367 | 368 | *[role="list"] { 369 | border: ridge thick blue; 370 | } 371 | *[role="list"]:before { 372 | display: table; 373 | height: auto; width: auto; 374 | position: relative; padding: 1px 0; 375 | background-color: white; 376 | color: blue; 377 | font-size: .9rem; font-weight: 900; 378 | content: ' [ARIA] List (requires children with role=listitem) '; 379 | } 380 | *[role="list"][aria-label]:before { 381 | display: table; 382 | height: auto; width: auto; 383 | position: relative; padding: 1px 0; 384 | background-color: white; 385 | color: blue; 386 | font-size: .9rem; font-weight: 900; 387 | content: ' [ARIA] List (requires children with role=listitem) aria-label=' attr(aria-label) ' '; 388 | } 389 | *[role="list"][aria-labelledby]:before { 390 | display: table; 391 | height: auto; width: auto; 392 | position: relative; padding: 1px 0; 393 | background-color: white; 394 | color: blue; 395 | font-size: .9rem; font-weight: 900; 396 | content: ' [ARIA] List (requires children with role=listitem) aria-labelledby=' attr(aria-labelledby) ' '; 397 | } 398 | 399 | /* 400 | ARIA Math 401 | http://whatsock.com/training/matrices/#math 402 | */ 403 | 404 | *[role="math"] { 405 | border: ridge thick blue; 406 | } 407 | *[role="math"]:before { 408 | display: table; 409 | height: auto; width: auto; 410 | position: relative; padding: 1px 0; 411 | background-color: black; 412 | color: orange; 413 | font-size: .9rem; font-weight: 900; 414 | content: ' [ARIA] Math (unlabelled) '; 415 | } 416 | *[role="math"][aria-label]:before { 417 | display: table; 418 | height: auto; width: auto; 419 | position: relative; padding: 1px 0; 420 | background-color: white; 421 | color: blue; 422 | font-size: .9rem; font-weight: 900; 423 | content: ' [ARIA] Math aria-label=' attr(aria-label) ' '; 424 | } 425 | *[role="math"][aria-labelledby]:before { 426 | display: table; 427 | height: auto; width: auto; 428 | position: relative; padding: 1px 0; 429 | background-color: white; 430 | color: blue; 431 | font-size: .9rem; font-weight: 900; 432 | content: ' [ARIA] Math aria-labelledby=' attr(aria-labelledby) ' '; 433 | } 434 | 435 | /* 436 | ARIA Note 437 | http://whatsock.com/training/matrices/#note 438 | */ 439 | 440 | *[role="note"] { 441 | border: ridge thick blue; 442 | } 443 | *[role="note"]:before { 444 | display: table; 445 | height: auto; width: auto; 446 | position: relative; padding: 1px 0; 447 | background-color: white; 448 | color: blue; 449 | font-size: .9rem; font-weight: 900; 450 | content: ' (unlabelled) [ARIA] Note '; 451 | } 452 | *[role="note"][aria-label]:before { 453 | display: table; 454 | height: auto; width: auto; 455 | position: relative; padding: 1px 0; 456 | background-color: white; 457 | color: blue; 458 | font-size: .9rem; font-weight: 900; 459 | content: ' [ARIA] Note aria-label=' attr(aria-label) ' '; 460 | } 461 | *[role="note"][aria-labelledby]:before { 462 | display: table; 463 | height: auto; width: auto; 464 | position: relative; padding: 1px 0; 465 | background-color: white; 466 | color: blue; 467 | font-size: .9rem; font-weight: 900; 468 | content: ' [ARIA] Note aria-labelledby=' attr(aria-labelledby) ' '; 469 | } 470 | 471 | /* 472 | ARIA Separator 473 | http://whatsock.com/training/matrices/#separator 474 | */ 475 | 476 | *[role="separator"] { 477 | border: ridge thick blue; 478 | } 479 | *[role="separator"]:before { 480 | display: table; 481 | height: auto; width: auto; 482 | position: relative; padding: 1px 0; 483 | background-color: white; 484 | color: blue; 485 | font-size: .9rem; font-weight: 900; 486 | content: ' (horizontal) [ARIA] Separator '; 487 | } 488 | *[role="separator"][aria-orientation="vertical"]:before { 489 | display: table; 490 | height: auto; width: auto; 491 | position: relative; padding: 1px 0; 492 | background-color: white; 493 | color: blue; 494 | font-size: .9rem; font-weight: 900; 495 | content: ' (vertical) [ARIA] Separator '; 496 | } 497 | 498 | /* 499 | ARIA Term 500 | Must be referenced by role=definition using aria-labelledby 501 | Element with role="term" must not be a focusable active element 502 | http://whatsock.com/training/matrices/#term 503 | */ 504 | 505 | *[role="term"] { 506 | border: ridge thick blue; 507 | } 508 | *[role="term"]:before { 509 | display: table; 510 | height: auto; width: auto; 511 | position: relative; padding: 1px 0; 512 | background-color: white; 513 | color: blue; 514 | font-size: .9rem; font-weight: 900; 515 | content: ' [ARIA] Term '; 516 | } 517 | 518 | /* 519 | ARIA Toolbar 520 | Note: If the container with role="toolbar" is focusable, aria-activedescendant must be used to reference the currently highlighted Button within the Toolbar. 521 | http://whatsock.com/training/matrices/#toolbar 522 | */ 523 | 524 | *[role="toolbar"] { 525 | border: ridge thick green; 526 | } 527 | *[role="toolbar"]:before { 528 | display: table; 529 | height: auto; width: auto; 530 | position: relative; padding: 1px 0; 531 | background-color: white; 532 | color: green; 533 | font-size: .9rem; font-weight: 900; 534 | content: ' [ARIA] Toolbar '; 535 | } 536 | *[role="toolbar"][tabindex] { 537 | border: ridge thick orange; 538 | } 539 | *[role="toolbar"][tabindex]:before { 540 | display: table; 541 | height: auto; width: auto; 542 | position: relative; padding: 1px 0; 543 | background-color: black; 544 | color: orange; 545 | font-size: .9rem; font-weight: 900; 546 | content: ' (focusable) [ARIA] Toolbar '; 547 | } 548 | *[role="toolbar"][tabindex]:focus { 549 | border: ridge thick red; 550 | } 551 | *[role="toolbar"][tabindex]:focus:before { 552 | display: table; 553 | height: auto; width: auto; 554 | position: relative; padding: 1px 0; 555 | z-index: 10000; 556 | background-color: #FFFFE5; 557 | color: red; 558 | font-size: .9rem; font-weight: 900; 559 | content: ' (focused) [ARIA] Toolbar (missing aria-activedescendant) '; 560 | } 561 | *[role="toolbar"][tabindex][aria-activedescendant]:focus { 562 | border: ridge thick green; 563 | } 564 | *[role="toolbar"][tabindex][aria-activedescendant]:focus:before { 565 | display: table; 566 | height: auto; width: auto; 567 | position: relative; padding: 1px 0; 568 | z-index: 10000; 569 | background-color: white; 570 | color: green; 571 | font-size: .9rem; font-weight: 900; 572 | content: ' (focused) [ARIA] Toolbar: aria-activedescendant=' attr(aria-activedescendant) ' '; 573 | } 574 | *[role="toolbar"][aria-label] { 575 | border: ridge thick green; 576 | } 577 | *[role="toolbar"][aria-label]:before { 578 | display: table; 579 | height: auto; width: auto; 580 | position: relative; padding: 1px 0; 581 | background-color: white; 582 | color: green; 583 | font-size: .9rem; font-weight: 900; 584 | content: ' [ARIA] Toolbar aria-label=' attr(aria-label) ' '; 585 | } 586 | *[role="toolbar"][aria-label][tabindex] { 587 | border: ridge thick orange; 588 | } 589 | *[role="toolbar"][aria-label][tabindex]:before { 590 | display: table; 591 | height: auto; width: auto; 592 | position: relative; padding: 1px 0; 593 | background-color: black; 594 | color: orange; 595 | font-size: .9rem; font-weight: 900; 596 | content: ' (focusable) [ARIA] Toolbar aria-label=' attr(aria-label) ' '; 597 | } 598 | *[role="toolbar"][aria-label][tabindex]:focus { 599 | border: ridge thick red; 600 | } 601 | *[role="toolbar"][aria-label][tabindex]:focus:before { 602 | display: table; 603 | height: auto; width: auto; 604 | position: relative; padding: 1px 0; 605 | z-index: 10000; 606 | background-color: #FFFFE5; 607 | color: red; 608 | font-size: .9rem; font-weight: 900; 609 | content: ' (focused) [ARIA] Toolbar (missing aria-activedescendant) '; 610 | } 611 | *[role="toolbar"][aria-label][tabindex][aria-activedescendant]:focus { 612 | border: ridge thick green; 613 | } 614 | *[role="toolbar"][aria-label][tabindex][aria-activedescendant]:focus:before { 615 | display: table; 616 | height: auto; width: auto; 617 | position: relative; padding: 1px 0; 618 | z-index: 10000; 619 | background-color: white; 620 | color: green; 621 | font-size: .9rem; font-weight: 900; 622 | content: ' (focused) [ARIA] Toolbar: aria-activedescendant=' attr(aria-activedescendant) ' aria-label=' attr(aria-label) ' '; 623 | } 624 | *[role="toolbar"][aria-labelledby] { 625 | border: ridge thick green; 626 | } 627 | *[role="toolbar"][aria-labelledby]:before { 628 | display: table; 629 | height: auto; width: auto; 630 | position: relative; padding: 1px 0; 631 | background-color: white; 632 | color: green; 633 | font-size: .9rem; font-weight: 900; 634 | content: ' [ARIA] Toolbar aria-labelledby=' attr(aria-labelledby) ' '; 635 | } 636 | *[role="toolbar"][aria-labelledby][tabindex] { 637 | border: ridge thick orange; 638 | } 639 | *[role="toolbar"][aria-labelledby][tabindex]:before { 640 | display: table; 641 | height: auto; width: auto; 642 | position: relative; padding: 1px 0; 643 | background-color: black; 644 | color: orange; 645 | font-size: .9rem; font-weight: 900; 646 | content: ' (focusable) [ARIA] Toolbar aria-labelledby=' attr(aria-labelledby) ' '; 647 | } 648 | *[role="toolbar"][aria-labelledby][tabindex]:focus { 649 | border: ridge thick red; 650 | } 651 | *[role="toolbar"][aria-labelledby][tabindex]:focus:before { 652 | display: table; 653 | height: auto; width: auto; 654 | position: relative; padding: 1px 0; 655 | z-index: 10000; 656 | background-color: #FFFFE5; 657 | color: red; 658 | font-size: .9rem; font-weight: 900; 659 | content: ' (focused) [ARIA] Toolbar (missing aria-activedescendant) '; 660 | } 661 | *[role="toolbar"][aria-labelledby][tabindex][aria-activedescendant]:focus { 662 | border: ridge thick green; 663 | } 664 | *[role="toolbar"][aria-labelledby][tabindex][aria-activedescendant]:focus:before { 665 | display: table; 666 | height: auto; width: auto; 667 | position: relative; padding: 1px 0; 668 | z-index: 10000; 669 | background-color: white; 670 | color: green; 671 | font-size: .9rem; font-weight: 900; 672 | content: ' (focused) [ARIA] Toolbar: aria-activedescendant=' attr(aria-activedescendant) ' aria-labelledby=' attr(aria-labelledby) ' '; 673 | } 674 | -------------------------------------------------------------------------------- /docs/visual-aria/public/4dialogs.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | ARIA Application 4 | Note: The Application region role will change the browse modality of screen readers such as JAWS and NVDA, so caution must always be used when implementing this role. 5 | As of ARIA 1.1, role=application is no longer mapped as a landmark. 6 | http://whatsock.com/training/matrices/#application 7 | */ 8 | 9 | *[role="application"] { 10 | border: ridge thick green; 11 | } 12 | *[role="application"]:before { 13 | display: table; 14 | height: auto; width: auto; 15 | position: relative; padding: 1px 0; 16 | background-color: white; 17 | color: green; 18 | font-size: .9rem; font-weight: 900; 19 | content: ' (unlabelled) [ARIA] Application (WARNING: Changes screen reader behavior, use with caution) '; 20 | } 21 | *[role="application"][aria-label]:before { 22 | display: table; 23 | height: auto; width: auto; 24 | position: relative; padding: 1px 0; 25 | background-color: white; 26 | color: green; 27 | font-size: .9rem; font-weight: 900; 28 | content: ' [ARIA] Application (WARNING: Changes screen reader behavior, use with caution) aria-label=' attr(aria-label) ' '; 29 | } 30 | *[role="application"][aria-labelledby]:before { 31 | display: table; 32 | height: auto; width: auto; 33 | position: relative; padding: 1px 0; 34 | background-color: white; 35 | color: green; 36 | font-size: .9rem; font-weight: 900; 37 | content: ' [ARIA] Application (WARNING: Changes screen reader behavior, use with caution) aria-labelledby=' attr(aria-labelledby) ' '; 38 | } 39 | 40 | /* 41 | ARIA Alertdialog 42 | Required attributes: aria-label or aria-labelledby, and optionally aria-describedby 43 | Note: When rendered, focus must move to an active element within the Alertdialog. If modal, aria-modal="true" must be set and the forward and backward tab order must be confined to active elements within the Alertdialog container. When closed, focus must return to the triggering element if applicable. 44 | http://whatsock.com/training/matrices/#alertdialog 45 | */ 46 | 47 | *[role="alertdialog"] { 48 | border: ridge thick red; 49 | } 50 | *[role="alertdialog"]:before { 51 | display: table; 52 | height: auto; width: auto; 53 | position: relative; padding: 1px 0; 54 | background-color: #FFFFE5; 55 | color: red; 56 | font-size: .9rem; font-weight: 900; 57 | content: ' [ARIA] Alertdialog (missing required attributes such as aria-label or aria-labelledby) '; 58 | } 59 | *[role="alertdialog"][aria-label], *[role="alertdialog"][aria-labelledby] { 60 | border: ridge thick green; 61 | } 62 | *[role="alertdialog"][aria-label]:before, *[role="alertdialog"][aria-labelledby]:before { 63 | display: table; 64 | height: auto; width: auto; 65 | position: relative; padding: 1px 0; 66 | background-color: white; 67 | color: green; 68 | font-size: .9rem; font-weight: 900; 69 | content: ' [ARIA] (non-modal) Alertdialog (ensure focus is set to an element within the Alertdialog) '; 70 | } 71 | *[role="alertdialog"][aria-label][aria-modal="true"]:before, *[role="alertdialog"][aria-labelledby][aria-modal="true"]:before { 72 | display: table; 73 | height: auto; width: auto; 74 | position: relative; padding: 1px 0; 75 | background-color: white; 76 | color: green; 77 | font-size: .9rem; font-weight: 900; 78 | content: ' [ARIA] (modal) Alertdialog (ensure focus is set to an internal element and confined within the Alertdialog) '; 79 | } 80 | 81 | /* 82 | ARIA Dialog 83 | Required attributes: aria-label or aria-labelledby, and optionally aria-describedby 84 | Note: When rendered, focus must move to an active element within the Dialog. If modal, aria-modal="true" must be set and the forward and backward tab order must be confined to active elements within the Dialog container. When closed, focus must return to the triggering element if applicable. 85 | http://whatsock.com/training/matrices/#dialog 86 | */ 87 | 88 | *[role="dialog"] { 89 | border: ridge thick red; 90 | } 91 | *[role="dialog"]:before { 92 | display: table; 93 | height: auto; width: auto; 94 | position: relative; padding: 1px 0; 95 | background-color: #FFFFE5; 96 | color: red; 97 | font-size: .9rem; font-weight: 900; 98 | content: ' [ARIA] Dialog (missing required attributes such as aria-label or aria-labelledby) '; 99 | } 100 | *[role="dialog"][aria-label], *[role="dialog"][aria-labelledby] { 101 | border: ridge thick green; 102 | } 103 | *[role="dialog"][aria-label]:before, *[role="dialog"][aria-labelledby]:before { 104 | display: table; 105 | height: auto; width: auto; 106 | position: relative; padding: 1px 0; 107 | background-color: white; 108 | color: green; 109 | font-size: .9rem; font-weight: 900; 110 | content: ' [ARIA] (non-modal) Dialog (ensure focus is set to an element within the Dialog) '; 111 | } 112 | *[role="dialog"][aria-label][aria-modal="true"]:before, *[role="dialog"][aria-labelledby][aria-modal="true"]:before { 113 | display: table; 114 | height: auto; width: auto; 115 | position: relative; padding: 1px 0; 116 | background-color: white; 117 | color: green; 118 | font-size: .9rem; font-weight: 900; 119 | content: ' [ARIA] (modal) Dialog (ensure focus is set to an internal element and confined within the Dialog) '; 120 | } 121 | -------------------------------------------------------------------------------- /docs/visual-aria/public/5live-regions.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | Generic ARIA Live Region 4 | */ 5 | 6 | *[aria-live] { 7 | border: ridge thick fuchsia; 8 | } 9 | *[aria-live]:before { 10 | display: table; 11 | height: auto; width: auto; 12 | position: relative; padding: 1px 0; 13 | background-color: white; 14 | color: fuchsia; 15 | font-size: .9rem; font-weight: 900; 16 | content: ' [ARIA] (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' '; 17 | } 18 | *[aria-live][aria-atomic]:before { 19 | display: table; 20 | height: auto; width: auto; 21 | position: relative; padding: 1px 0; 22 | background-color: white; 23 | color: fuchsia; 24 | font-size: .9rem; font-weight: 900; 25 | content: ' [ARIA] (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' aria-atomic=' attr(aria-atomic) ' '; 26 | } 27 | *[aria-live][aria-relevant]:before { 28 | display: table; 29 | height: auto; width: auto; 30 | position: relative; padding: 1px 0; 31 | background-color: white; 32 | color: fuchsia; 33 | font-size: .9rem; font-weight: 900; 34 | content: ' [ARIA] (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' aria-relevant=' attr(aria-relevant) ' '; 35 | } 36 | *[aria-live][aria-relevant][aria-atomic]:before { 37 | display: table; 38 | height: auto; width: auto; 39 | position: relative; padding: 1px 0; 40 | background-color: white; 41 | color: fuchsia; 42 | font-size: .9rem; font-weight: 900; 43 | content: ' [ARIA] (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' aria-atomic=' attr(aria-atomic) ' aria-relevant=' attr(aria-relevant) ' '; 44 | } 45 | 46 | /* 47 | ARIA Alert 48 | Note: For an OS system alert to fire, a container with role="alert" must be dynamically rendered using the CSS 'display' property, or JavaScript core DOM methods such as element.appendChild/replaceChild, or element.innerHTML. 49 | The default live region attribute for Alert is aria-live="assertive". 50 | http://whatsock.com/training/matrices/#alert 51 | */ 52 | 53 | *[role="alert"] { 54 | border: ridge thick fuchsia; 55 | } 56 | *[role="alert"]:before { 57 | display: table; 58 | height: auto; width: auto; 59 | position: relative; padding: 1px 0; 60 | background-color: white; 61 | color: fuchsia; 62 | font-size: .9rem; font-weight: 900; 63 | content: ' [ARIA] Alert (live region) (must be dynamically written to) aria-live=assertive '; 64 | } 65 | *[role="alert"][aria-live]:before { 66 | display: table; 67 | height: auto; width: auto; 68 | position: relative; padding: 1px 0; 69 | background-color: white; 70 | color: fuchsia; 71 | font-size: .9rem; font-weight: 900; 72 | content: ' [ARIA] Alert (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' '; 73 | } 74 | *[role="alert"][aria-atomic]:before { 75 | display: table; 76 | height: auto; width: auto; 77 | position: relative; padding: 1px 0; 78 | background-color: white; 79 | color: fuchsia; 80 | font-size: .9rem; font-weight: 900; 81 | content: ' [ARIA] Alert (live region) (must be dynamically written to) aria-live=assertive aria-atomic=' attr(aria-atomic) ' '; 82 | } 83 | *[role="alert"][aria-atomic][aria-live]:before { 84 | display: table; 85 | height: auto; width: auto; 86 | position: relative; padding: 1px 0; 87 | background-color: white; 88 | color: fuchsia; 89 | font-size: .9rem; font-weight: 900; 90 | content: ' [ARIA] Alert (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' aria-atomic=' attr(aria-atomic) ' '; 91 | } 92 | *[role="alert"][aria-relevant]:before { 93 | display: table; 94 | height: auto; width: auto; 95 | position: relative; padding: 1px 0; 96 | background-color: white; 97 | color: fuchsia; 98 | font-size: .9rem; font-weight: 900; 99 | content: ' [ARIA] Alert (live region) (must be dynamically written to) aria-live=assertive aria-relevant=' attr(aria-relevant) ' '; 100 | } 101 | *[role="alert"][aria-relevant][aria-live]:before { 102 | display: table; 103 | height: auto; width: auto; 104 | position: relative; padding: 1px 0; 105 | background-color: white; 106 | color: fuchsia; 107 | font-size: .9rem; font-weight: 900; 108 | content: ' [ARIA] Alert (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' aria-relevant=' attr(aria-relevant) ' '; 109 | } 110 | *[role="alert"][aria-relevant][aria-atomic]:before { 111 | display: table; 112 | height: auto; width: auto; 113 | position: relative; padding: 1px 0; 114 | background-color: white; 115 | color: fuchsia; 116 | font-size: .9rem; font-weight: 900; 117 | content: ' [ARIA] Alert (live region) (must be dynamically written to) aria-live=assertive aria-atomic=' attr(aria-atomic) ' aria-relevant=' attr(aria-relevant) ' '; 118 | } 119 | *[role="alert"][aria-relevant][aria-atomic][aria-live]:before { 120 | display: table; 121 | height: auto; width: auto; 122 | position: relative; padding: 1px 0; 123 | background-color: white; 124 | color: fuchsia; 125 | font-size: .9rem; font-weight: 900; 126 | content: ' [ARIA] Alert (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' aria-atomic=' attr(aria-atomic) ' aria-relevant=' attr(aria-relevant) ' '; 127 | } 128 | 129 | /* 130 | ARIA Log 131 | Note: For a live region event to fire, a container with role="log" must be dynamically written to using JavaScript core DOM methods such as element.appendChild/replaceChild, or element.innerHTML. 132 | The default live region attribute for Log is aria-live="polite". 133 | http://whatsock.com/training/matrices/#log 134 | */ 135 | 136 | *[role="log"] { 137 | border: ridge thick fuchsia; 138 | } 139 | *[role="log"]:before { 140 | display: table; 141 | height: auto; width: auto; 142 | position: relative; padding: 1px 0; 143 | background-color: white; 144 | color: fuchsia; 145 | font-size: .9rem; font-weight: 900; 146 | content: ' [ARIA] Log (live region) (must be dynamically written to) aria-live=polite '; 147 | } 148 | *[role="log"][aria-live]:before { 149 | display: table; 150 | height: auto; width: auto; 151 | position: relative; padding: 1px 0; 152 | background-color: white; 153 | color: fuchsia; 154 | font-size: .9rem; font-weight: 900; 155 | content: ' [ARIA] Log (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' '; 156 | } 157 | *[role="log"][aria-atomic]:before { 158 | display: table; 159 | height: auto; width: auto; 160 | position: relative; padding: 1px 0; 161 | background-color: white; 162 | color: fuchsia; 163 | font-size: .9rem; font-weight: 900; 164 | content: ' [ARIA] Log (live region) (must be dynamically written to) aria-live=polite aria-atomic=' attr(aria-atomic) ' '; 165 | } 166 | *[role="log"][aria-atomic][aria-live]:before { 167 | display: table; 168 | height: auto; width: auto; 169 | position: relative; padding: 1px 0; 170 | background-color: white; 171 | color: fuchsia; 172 | font-size: .9rem; font-weight: 900; 173 | content: ' [ARIA] Log (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' aria-atomic=' attr(aria-atomic) ' '; 174 | } 175 | *[role="log"][aria-relevant]:before { 176 | display: table; 177 | height: auto; width: auto; 178 | position: relative; padding: 1px 0; 179 | background-color: white; 180 | color: fuchsia; 181 | font-size: .9rem; font-weight: 900; 182 | content: ' [ARIA] Log (live region) (must be dynamically written to) aria-live=polite aria-relevant=' attr(aria-relevant) ' '; 183 | } 184 | *[role="log"][aria-relevant][aria-live]:before { 185 | display: table; 186 | height: auto; width: auto; 187 | position: relative; padding: 1px 0; 188 | background-color: white; 189 | color: fuchsia; 190 | font-size: .9rem; font-weight: 900; 191 | content: ' [ARIA] Log (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' aria-relevant=' attr(aria-relevant) ' '; 192 | } 193 | *[role="log"][aria-relevant][aria-atomic]:before { 194 | display: table; 195 | height: auto; width: auto; 196 | position: relative; padding: 1px 0; 197 | background-color: white; 198 | color: fuchsia; 199 | font-size: .9rem; font-weight: 900; 200 | content: ' [ARIA] Log (live region) (must be dynamically written to) aria-live=polite aria-atomic=' attr(aria-atomic) ' aria-relevant=' attr(aria-relevant) ' '; 201 | } 202 | *[role="log"][aria-relevant][aria-atomic][aria-live]:before { 203 | display: table; 204 | height: auto; width: auto; 205 | position: relative; padding: 1px 0; 206 | background-color: white; 207 | color: fuchsia; 208 | font-size: .9rem; font-weight: 900; 209 | content: ' [ARIA] Log (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' aria-atomic=' attr(aria-atomic) ' aria-relevant=' attr(aria-relevant) ' '; 210 | } 211 | 212 | /* 213 | ARIA Marquee 214 | Note: For a live region event to fire, a container with role="marquee" must be dynamically written to using JavaScript core DOM methods such as element.appendChild/replaceChild, or element.innerHTML. 215 | The default live region attribute for Marquee is aria-live="off". 216 | http://whatsock.com/training/matrices/#marquee 217 | */ 218 | 219 | *[role="marquee"] { 220 | border: ridge thick fuchsia; 221 | } 222 | *[role="marquee"]:before { 223 | display: table; 224 | height: auto; width: auto; 225 | position: relative; padding: 1px 0; 226 | background-color: white; 227 | color: fuchsia; 228 | font-size: .9rem; font-weight: 900; 229 | content: ' [ARIA] Marquee (live region) (must be dynamically written to) aria-live=off '; 230 | } 231 | *[role="marquee"][aria-live]:before { 232 | display: table; 233 | height: auto; width: auto; 234 | position: relative; padding: 1px 0; 235 | background-color: white; 236 | color: fuchsia; 237 | font-size: .9rem; font-weight: 900; 238 | content: ' [ARIA] Marquee (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' '; 239 | } 240 | *[role="marquee"][aria-atomic]:before { 241 | display: table; 242 | height: auto; width: auto; 243 | position: relative; padding: 1px 0; 244 | background-color: white; 245 | color: fuchsia; 246 | font-size: .9rem; font-weight: 900; 247 | content: ' [ARIA] Marquee (live region) (must be dynamically written to) aria-live=off aria-atomic=' attr(aria-atomic) ' '; 248 | } 249 | *[role="marquee"][aria-atomic][aria-live]:before { 250 | display: table; 251 | height: auto; width: auto; 252 | position: relative; padding: 1px 0; 253 | background-color: white; 254 | color: fuchsia; 255 | font-size: .9rem; font-weight: 900; 256 | content: ' [ARIA] Marquee (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' aria-atomic=' attr(aria-atomic) ' '; 257 | } 258 | *[role="marquee"][aria-relevant]:before { 259 | display: table; 260 | height: auto; width: auto; 261 | position: relative; padding: 1px 0; 262 | background-color: white; 263 | color: fuchsia; 264 | font-size: .9rem; font-weight: 900; 265 | content: ' [ARIA] Marquee (live region) (must be dynamically written to) aria-live=off aria-relevant=' attr(aria-relevant) ' '; 266 | } 267 | *[role="marquee"][aria-relevant][aria-live]:before { 268 | display: table; 269 | height: auto; width: auto; 270 | position: relative; padding: 1px 0; 271 | background-color: white; 272 | color: fuchsia; 273 | font-size: .9rem; font-weight: 900; 274 | content: ' [ARIA] Marquee (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' aria-relevant=' attr(aria-relevant) ' '; 275 | } 276 | *[role="marquee"][aria-relevant][aria-atomic]:before { 277 | display: table; 278 | height: auto; width: auto; 279 | position: relative; padding: 1px 0; 280 | background-color: white; 281 | color: fuchsia; 282 | font-size: .9rem; font-weight: 900; 283 | content: ' [ARIA] Marquee (live region) (must be dynamically written to) aria-live=off aria-atomic=' attr(aria-atomic) ' aria-relevant=' attr(aria-relevant) ' '; 284 | } 285 | *[role="marquee"][aria-relevant][aria-atomic][aria-live]:before { 286 | display: table; 287 | height: auto; width: auto; 288 | position: relative; padding: 1px 0; 289 | background-color: white; 290 | color: fuchsia; 291 | font-size: .9rem; font-weight: 900; 292 | content: ' [ARIA] Marquee (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' aria-atomic=' attr(aria-atomic) ' aria-relevant=' attr(aria-relevant) ' '; 293 | } 294 | 295 | /* 296 | ARIA Status 297 | Note: For a live region event to fire, a container with role="status" must be dynamically written to using JavaScript core DOM methods such as element.appendChild/replaceChild, or element.innerHTML. 298 | The default live region attribute for Status is aria-live="polite". 299 | http://whatsock.com/training/matrices/#status 300 | */ 301 | 302 | *[role="status"] { 303 | border: ridge thick fuchsia; 304 | } 305 | *[role="status"]:before { 306 | display: table; 307 | height: auto; width: auto; 308 | position: relative; padding: 1px 0; 309 | background-color: white; 310 | color: fuchsia; 311 | font-size: .9rem; font-weight: 900; 312 | content: ' [ARIA] Status (live region) (must be dynamically written to) aria-live=polite '; 313 | } 314 | *[role="status"][aria-live]:before { 315 | display: table; 316 | height: auto; width: auto; 317 | position: relative; padding: 1px 0; 318 | background-color: white; 319 | color: fuchsia; 320 | font-size: .9rem; font-weight: 900; 321 | content: ' [ARIA] Status (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' '; 322 | } 323 | *[role="status"][aria-atomic]:before { 324 | display: table; 325 | height: auto; width: auto; 326 | position: relative; padding: 1px 0; 327 | background-color: white; 328 | color: fuchsia; 329 | font-size: .9rem; font-weight: 900; 330 | content: ' [ARIA] Status (live region) (must be dynamically written to) aria-live=polite aria-atomic=' attr(aria-atomic) ' '; 331 | } 332 | *[role="status"][aria-atomic][aria-live]:before { 333 | display: table; 334 | height: auto; width: auto; 335 | position: relative; padding: 1px 0; 336 | background-color: white; 337 | color: fuchsia; 338 | font-size: .9rem; font-weight: 900; 339 | content: ' [ARIA] Status (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' aria-atomic=' attr(aria-atomic) ' '; 340 | } 341 | *[role="status"][aria-relevant]:before { 342 | display: table; 343 | height: auto; width: auto; 344 | position: relative; padding: 1px 0; 345 | background-color: white; 346 | color: fuchsia; 347 | font-size: .9rem; font-weight: 900; 348 | content: ' [ARIA] Status (live region) (must be dynamically written to) aria-live=polite aria-relevant=' attr(aria-relevant) ' '; 349 | } 350 | *[role="status"][aria-relevant][aria-live]:before { 351 | display: table; 352 | height: auto; width: auto; 353 | position: relative; padding: 1px 0; 354 | background-color: white; 355 | color: fuchsia; 356 | font-size: .9rem; font-weight: 900; 357 | content: ' [ARIA] Status (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' aria-relevant=' attr(aria-relevant) ' '; 358 | } 359 | *[role="status"][aria-relevant][aria-atomic]:before { 360 | display: table; 361 | height: auto; width: auto; 362 | position: relative; padding: 1px 0; 363 | background-color: white; 364 | color: fuchsia; 365 | font-size: .9rem; font-weight: 900; 366 | content: ' [ARIA] Status (live region) (must be dynamically written to) aria-live=polite aria-atomic=' attr(aria-atomic) ' aria-relevant=' attr(aria-relevant) ' '; 367 | } 368 | *[role="status"][aria-relevant][aria-atomic][aria-live]:before { 369 | display: table; 370 | height: auto; width: auto; 371 | position: relative; padding: 1px 0; 372 | background-color: white; 373 | color: fuchsia; 374 | font-size: .9rem; font-weight: 900; 375 | content: ' [ARIA] Status (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' aria-atomic=' attr(aria-atomic) ' aria-relevant=' attr(aria-relevant) ' '; 376 | } 377 | 378 | /* 379 | ARIA Timer 380 | Note: For a live region event to fire, a container with role="timer" must be dynamically written to using JavaScript core DOM methods such as element.appendChild/replaceChild, or element.innerHTML. 381 | The default live region attribute for Timer is aria-live="off". 382 | http://whatsock.com/training/matrices/#timer 383 | */ 384 | 385 | *[role="timer"] { 386 | border: ridge thick fuchsia; 387 | } 388 | *[role="timer"]:before { 389 | display: table; 390 | height: auto; width: auto; 391 | position: relative; padding: 1px 0; 392 | background-color: white; 393 | color: fuchsia; 394 | font-size: .9rem; font-weight: 900; 395 | content: ' [ARIA] Timer (live region) (must be dynamically written to) aria-live=off '; 396 | } 397 | *[role="timer"][aria-live]:before { 398 | display: table; 399 | height: auto; width: auto; 400 | position: relative; padding: 1px 0; 401 | background-color: white; 402 | color: fuchsia; 403 | font-size: .9rem; font-weight: 900; 404 | content: ' [ARIA] Timer (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' '; 405 | } 406 | *[role="timer"][aria-atomic]:before { 407 | display: table; 408 | height: auto; width: auto; 409 | position: relative; padding: 1px 0; 410 | background-color: white; 411 | color: fuchsia; 412 | font-size: .9rem; font-weight: 900; 413 | content: ' [ARIA] Timer (live region) (must be dynamically written to) aria-live=off aria-atomic=' attr(aria-atomic) ' '; 414 | } 415 | *[role="timer"][aria-atomic][aria-live]:before { 416 | display: table; 417 | height: auto; width: auto; 418 | position: relative; padding: 1px 0; 419 | background-color: white; 420 | color: fuchsia; 421 | font-size: .9rem; font-weight: 900; 422 | content: ' [ARIA] Timer (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' aria-atomic=' attr(aria-atomic) ' '; 423 | } 424 | *[role="timer"][aria-relevant]:before { 425 | display: table; 426 | height: auto; width: auto; 427 | position: relative; padding: 1px 0; 428 | background-color: white; 429 | color: fuchsia; 430 | font-size: .9rem; font-weight: 900; 431 | content: ' [ARIA] Timer (live region) (must be dynamically written to) aria-live=off aria-relevant=' attr(aria-relevant) ' '; 432 | } 433 | *[role="timer"][aria-relevant][aria-live]:before { 434 | display: table; 435 | height: auto; width: auto; 436 | position: relative; padding: 1px 0; 437 | background-color: white; 438 | color: fuchsia; 439 | font-size: .9rem; font-weight: 900; 440 | content: ' [ARIA] Timer (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' aria-relevant=' attr(aria-relevant) ' '; 441 | } 442 | *[role="timer"][aria-relevant][aria-atomic]:before { 443 | display: table; 444 | height: auto; width: auto; 445 | position: relative; padding: 1px 0; 446 | background-color: white; 447 | color: fuchsia; 448 | font-size: .9rem; font-weight: 900; 449 | content: ' [ARIA] Timer (live region) (must be dynamically written to) aria-live=off aria-atomic=' attr(aria-atomic) ' aria-relevant=' attr(aria-relevant) ' '; 450 | } 451 | *[role="timer"][aria-relevant][aria-atomic][aria-live]:before { 452 | display: table; 453 | height: auto; width: auto; 454 | position: relative; padding: 1px 0; 455 | background-color: white; 456 | color: fuchsia; 457 | font-size: .9rem; font-weight: 900; 458 | content: ' [ARIA] Timer (live region) (must be dynamically written to) aria-live=' attr(aria-live) ' aria-atomic=' attr(aria-atomic) ' aria-relevant=' attr(aria-relevant) ' '; 459 | } 460 | -------------------------------------------------------------------------------- /docs/visual-aria/roles.js: -------------------------------------------------------------------------------- 1 | !function(){var e,t,l="https://whatsock.github.io/w3c-alternative-text-computation/Sample%20JavaScript%20Recursion%20Algorithm/recursion.min.js",O=( 2 | /*! 3 | * @overview es6-promise - a tiny implementation of Promises/A+. 4 | * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald) 5 | * @license Licensed under MIT license 6 | * See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE 7 | * @version v4.2.4+314e4831 8 | */ 9 | e=this,t=function(){"use strict";function u(e){return"function"==typeof e}var r=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)},a=0,t=void 0,i=void 0,n=function(e,t){d[a]=e,d[a+1]=t,2===(a+=2)&&(i?i(c):j())};var e="undefined"!=typeof window?window:void 0,o=e||{},o=o.MutationObserver||o.WebKitMutationObserver,l="undefined"==typeof self&&"undefined"!=typeof process&&"[object process]"==={}.toString.call(process),B="undefined"!=typeof Uint8ClampedArray&&"undefined"!=typeof importScripts&&"undefined"!=typeof MessageChannel;function s(){var e=setTimeout;return function(){return e(c,1)}}var d=new Array(1e3);function c(){for(var e=0;eLoading Visual ARIA, please wait.
(Hold down Ctrl+Shift then Left-click any role for more details.)',window.VisualARIA.VisualARIALoadingMsg=e,document.body.appendChild(window.VisualARIA.VisualARIALoadingMsg)),window.top.VisualARIA.IsVisualARIALoaded=!0,window.VisualARIA.toggleVisualARIA=function(){window.VisualARIA.VisualARIALoadingMsg&&(window.VisualARIA.VisualARIALoadingMsg.parentNode.removeChild(window.VisualARIA.VisualARIALoadingMsg),window.VisualARIA.VisualARIALoadingMsg=null),window.top.VisualARIA.IsVisualARIALoaded=!window.top.VisualARIA.IsVisualARIALoaded,window.VisualARIA.VisualARIAToggle.setAttribute("aria-label",window.top.VisualARIA.IsVisualARIALoaded?"Unload Visual ARIA":"Load Visual ARIA"),window.VisualARIA.VisualARIAToggle.innerHTML=window.VisualARIA.getVisualARIAStatus().lng},window.VisualARIA.getVisualARIAStatus=function(){return{lng:window.top.VisualARIA.IsVisualARIALoaded?"Unload Visual ARIA":"Load Visual ARIA",shrt:window.top.VisualARIA.IsVisualARIALoaded?"X":"O"}},function(e,k,L,M,T,S,E,C,N){var r,q,t,a,i,o,B=this,H=function(e){return"string"!=typeof e?"":e.replace(/^\s+|\s+$/g,"")},j=null,z=null,n=(S="aria-disabled,aria-readonly,aria-haspopup,aria-orientation,aria-label,aria-labelledby,aria-describedby,aria-pressed,aria-checked,aria-valuemin,aria-valuemax,aria-valuenow,aria-valuetext,aria-controls,aria-autocomplete,aria-expanded,aria-owns,aria-activedescendant,aria-posinset,aria-setsize,aria-level,role,alt".split(","),E=function(e,t){for(;e;)if((e=e.parentNode).getAttribute("role")===t)return"true";return"false"},C=function(e,t,r,a,i,o,n,l){if(window.top.VisualARIA.IsVisualARIALoaded){N&&N.init&&(N.comboboxListbox||T.getElementById("ws-visual-aria-7")||!T.querySelectorAll('*[role="combobox"], *[role="listbox"], *[role="option"]').length||(N.comboboxListbox=!0,q("7combobox-listbox.css","7")),N.menuMenubar||T.getElementById("ws-visual-aria-8")||!T.querySelectorAll('*[role="menu"], *[role="menubar"], *[role="menuitem"], *[role="menuitemradio"], *[role="menuitemcheckbox"]').length||(N.menuMenubar=!0,q("8menu-menubar.css","8")),N.radiogroup||T.getElementById("ws-visual-aria-9")||!T.querySelectorAll('*[role="radiogroup"], *[role="radio"]').length||(N.radiogroup=!0,q("9radiogroup.css","9")),N.tablist||T.getElementById("ws-visual-aria-10")||!T.querySelectorAll('*[role="tablist"], *[role="tab"], *[role="tabpanel"]').length||(N.tablist=!0,q("10tablist.css","10")),N.tree||T.getElementById("ws-visual-aria-11")||!T.querySelectorAll('*[role="tree"], *[role="treeitem"]').length||(N.tree=!0,q("11tree.css","11")),N.treegridGridTable||T.getElementById("ws-visual-aria-12")||!T.querySelectorAll('*[role="treegrid"], *[role="grid"], *[role="table"], *[role="rowgroup"], *[role="row"], *[role="columnheader"], *[role="rowheader"], *[role="gridcell"], *[role="cell"]').length||(N.treegridGridTable=!0,q("12treegrid-grid-table.css","12"))),N&&!N.init&&(N.init=!0,q("1roles.css","1"),N.landmarks=!0,q("2landmarks.css","2"),N.structural=!0,q("3structural.css","3"),N.dialogs=!0,q("4dialogs.css","4"),N.liveRegions=!0,q("5live-regions.css","5"),N.simpleWidgets=!0,q("6simple-widgets.css","6")),e=T.querySelectorAll("input[aria-owns], img[aria-owns], area[aria-owns], hr[aria-owns]");for(_=0;_?
X ',document.body.appendChild(t),window.VisualARIA.VisualARIAMatrices=document.getElementById("ws-bm-aria-matrices-lnk-a"),window.VisualARIA.VisualARIAToggle=document.getElementById("ws-bm-aria-matrices-toggle-a"))}(); -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "visual-aria", 3 | "version": "1.0.0", 4 | "lockfileVersion": 2, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "visual-aria", 9 | "version": "1.0.0", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "js-beautify": "^1.14.5", 13 | "prettier": "^2.7.1", 14 | "uglify-js": "^3.17.0" 15 | } 16 | }, 17 | "node_modules/abbrev": { 18 | "version": "1.1.1", 19 | "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", 20 | "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", 21 | "dev": true 22 | }, 23 | "node_modules/balanced-match": { 24 | "version": "1.0.2", 25 | "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", 26 | "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", 27 | "dev": true 28 | }, 29 | "node_modules/brace-expansion": { 30 | "version": "2.0.1", 31 | "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", 32 | "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", 33 | "dev": true, 34 | "dependencies": { 35 | "balanced-match": "^1.0.0" 36 | } 37 | }, 38 | "node_modules/commander": { 39 | "version": "2.20.3", 40 | "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", 41 | "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", 42 | "dev": true 43 | }, 44 | "node_modules/config-chain": { 45 | "version": "1.1.13", 46 | "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz", 47 | "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==", 48 | "dev": true, 49 | "dependencies": { 50 | "ini": "^1.3.4", 51 | "proto-list": "~1.2.1" 52 | } 53 | }, 54 | "node_modules/editorconfig": { 55 | "version": "0.15.3", 56 | "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz", 57 | "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==", 58 | "dev": true, 59 | "dependencies": { 60 | "commander": "^2.19.0", 61 | "lru-cache": "^4.1.5", 62 | "semver": "^5.6.0", 63 | "sigmund": "^1.0.1" 64 | }, 65 | "bin": { 66 | "editorconfig": "bin/editorconfig" 67 | } 68 | }, 69 | "node_modules/fs.realpath": { 70 | "version": "1.0.0", 71 | "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", 72 | "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", 73 | "dev": true 74 | }, 75 | "node_modules/glob": { 76 | "version": "8.0.3", 77 | "resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz", 78 | "integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==", 79 | "dev": true, 80 | "dependencies": { 81 | "fs.realpath": "^1.0.0", 82 | "inflight": "^1.0.4", 83 | "inherits": "2", 84 | "minimatch": "^5.0.1", 85 | "once": "^1.3.0" 86 | }, 87 | "engines": { 88 | "node": ">=12" 89 | }, 90 | "funding": { 91 | "url": "https://github.com/sponsors/isaacs" 92 | } 93 | }, 94 | "node_modules/inflight": { 95 | "version": "1.0.6", 96 | "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", 97 | "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", 98 | "dev": true, 99 | "dependencies": { 100 | "once": "^1.3.0", 101 | "wrappy": "1" 102 | } 103 | }, 104 | "node_modules/inherits": { 105 | "version": "2.0.4", 106 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", 107 | "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", 108 | "dev": true 109 | }, 110 | "node_modules/ini": { 111 | "version": "1.3.8", 112 | "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", 113 | "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", 114 | "dev": true 115 | }, 116 | "node_modules/js-beautify": { 117 | "version": "1.14.5", 118 | "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.5.tgz", 119 | "integrity": "sha512-P2BfZBhXchh10uZ87qMKpM2tfcDXLA+jDiWU/OV864yWdTGzLUGNAdp9Y1ID5ubpNVGls3cZ1UMcO8myUB+UyA==", 120 | "dev": true, 121 | "dependencies": { 122 | "config-chain": "^1.1.13", 123 | "editorconfig": "^0.15.3", 124 | "glob": "^8.0.3", 125 | "nopt": "^6.0.0" 126 | }, 127 | "bin": { 128 | "css-beautify": "js/bin/css-beautify.js", 129 | "html-beautify": "js/bin/html-beautify.js", 130 | "js-beautify": "js/bin/js-beautify.js" 131 | }, 132 | "engines": { 133 | "node": ">=10" 134 | } 135 | }, 136 | "node_modules/lru-cache": { 137 | "version": "4.1.5", 138 | "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", 139 | "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", 140 | "dev": true, 141 | "dependencies": { 142 | "pseudomap": "^1.0.2", 143 | "yallist": "^2.1.2" 144 | } 145 | }, 146 | "node_modules/minimatch": { 147 | "version": "5.1.0", 148 | "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz", 149 | "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==", 150 | "dev": true, 151 | "dependencies": { 152 | "brace-expansion": "^2.0.1" 153 | }, 154 | "engines": { 155 | "node": ">=10" 156 | } 157 | }, 158 | "node_modules/nopt": { 159 | "version": "6.0.0", 160 | "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz", 161 | "integrity": "sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==", 162 | "dev": true, 163 | "dependencies": { 164 | "abbrev": "^1.0.0" 165 | }, 166 | "bin": { 167 | "nopt": "bin/nopt.js" 168 | }, 169 | "engines": { 170 | "node": "^12.13.0 || ^14.15.0 || >=16.0.0" 171 | } 172 | }, 173 | "node_modules/once": { 174 | "version": "1.4.0", 175 | "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", 176 | "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", 177 | "dev": true, 178 | "dependencies": { 179 | "wrappy": "1" 180 | } 181 | }, 182 | "node_modules/prettier": { 183 | "version": "2.7.1", 184 | "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz", 185 | "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==", 186 | "dev": true, 187 | "bin": { 188 | "prettier": "bin-prettier.js" 189 | }, 190 | "engines": { 191 | "node": ">=10.13.0" 192 | }, 193 | "funding": { 194 | "url": "https://github.com/prettier/prettier?sponsor=1" 195 | } 196 | }, 197 | "node_modules/proto-list": { 198 | "version": "1.2.4", 199 | "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", 200 | "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==", 201 | "dev": true 202 | }, 203 | "node_modules/pseudomap": { 204 | "version": "1.0.2", 205 | "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", 206 | "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==", 207 | "dev": true 208 | }, 209 | "node_modules/semver": { 210 | "version": "5.7.1", 211 | "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", 212 | "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", 213 | "dev": true, 214 | "bin": { 215 | "semver": "bin/semver" 216 | } 217 | }, 218 | "node_modules/sigmund": { 219 | "version": "1.0.1", 220 | "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz", 221 | "integrity": "sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g==", 222 | "dev": true 223 | }, 224 | "node_modules/uglify-js": { 225 | "version": "3.17.0", 226 | "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.0.tgz", 227 | "integrity": "sha512-aTeNPVmgIMPpm1cxXr2Q/nEbvkmV8yq66F3om7X3P/cvOXQ0TMQ64Wk63iyT1gPlmdmGzjGpyLh1f3y8MZWXGg==", 228 | "dev": true, 229 | "bin": { 230 | "uglifyjs": "bin/uglifyjs" 231 | }, 232 | "engines": { 233 | "node": ">=0.8.0" 234 | } 235 | }, 236 | "node_modules/wrappy": { 237 | "version": "1.0.2", 238 | "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", 239 | "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", 240 | "dev": true 241 | }, 242 | "node_modules/yallist": { 243 | "version": "2.1.2", 244 | "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", 245 | "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==", 246 | "dev": true 247 | } 248 | }, 249 | "dependencies": { 250 | "abbrev": { 251 | "version": "1.1.1", 252 | "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", 253 | "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", 254 | "dev": true 255 | }, 256 | "balanced-match": { 257 | "version": "1.0.2", 258 | "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", 259 | "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", 260 | "dev": true 261 | }, 262 | "brace-expansion": { 263 | "version": "2.0.1", 264 | "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", 265 | "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", 266 | "dev": true, 267 | "requires": { 268 | "balanced-match": "^1.0.0" 269 | } 270 | }, 271 | "commander": { 272 | "version": "2.20.3", 273 | "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", 274 | "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", 275 | "dev": true 276 | }, 277 | "config-chain": { 278 | "version": "1.1.13", 279 | "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz", 280 | "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==", 281 | "dev": true, 282 | "requires": { 283 | "ini": "^1.3.4", 284 | "proto-list": "~1.2.1" 285 | } 286 | }, 287 | "editorconfig": { 288 | "version": "0.15.3", 289 | "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz", 290 | "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==", 291 | "dev": true, 292 | "requires": { 293 | "commander": "^2.19.0", 294 | "lru-cache": "^4.1.5", 295 | "semver": "^5.6.0", 296 | "sigmund": "^1.0.1" 297 | } 298 | }, 299 | "fs.realpath": { 300 | "version": "1.0.0", 301 | "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", 302 | "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", 303 | "dev": true 304 | }, 305 | "glob": { 306 | "version": "8.0.3", 307 | "resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz", 308 | "integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==", 309 | "dev": true, 310 | "requires": { 311 | "fs.realpath": "^1.0.0", 312 | "inflight": "^1.0.4", 313 | "inherits": "2", 314 | "minimatch": "^5.0.1", 315 | "once": "^1.3.0" 316 | } 317 | }, 318 | "inflight": { 319 | "version": "1.0.6", 320 | "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", 321 | "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", 322 | "dev": true, 323 | "requires": { 324 | "once": "^1.3.0", 325 | "wrappy": "1" 326 | } 327 | }, 328 | "inherits": { 329 | "version": "2.0.4", 330 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", 331 | "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", 332 | "dev": true 333 | }, 334 | "ini": { 335 | "version": "1.3.8", 336 | "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", 337 | "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", 338 | "dev": true 339 | }, 340 | "js-beautify": { 341 | "version": "1.14.5", 342 | "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.5.tgz", 343 | "integrity": "sha512-P2BfZBhXchh10uZ87qMKpM2tfcDXLA+jDiWU/OV864yWdTGzLUGNAdp9Y1ID5ubpNVGls3cZ1UMcO8myUB+UyA==", 344 | "dev": true, 345 | "requires": { 346 | "config-chain": "^1.1.13", 347 | "editorconfig": "^0.15.3", 348 | "glob": "^8.0.3", 349 | "nopt": "^6.0.0" 350 | } 351 | }, 352 | "lru-cache": { 353 | "version": "4.1.5", 354 | "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", 355 | "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", 356 | "dev": true, 357 | "requires": { 358 | "pseudomap": "^1.0.2", 359 | "yallist": "^2.1.2" 360 | } 361 | }, 362 | "minimatch": { 363 | "version": "5.1.0", 364 | "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz", 365 | "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==", 366 | "dev": true, 367 | "requires": { 368 | "brace-expansion": "^2.0.1" 369 | } 370 | }, 371 | "nopt": { 372 | "version": "6.0.0", 373 | "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz", 374 | "integrity": "sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==", 375 | "dev": true, 376 | "requires": { 377 | "abbrev": "^1.0.0" 378 | } 379 | }, 380 | "once": { 381 | "version": "1.4.0", 382 | "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", 383 | "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", 384 | "dev": true, 385 | "requires": { 386 | "wrappy": "1" 387 | } 388 | }, 389 | "prettier": { 390 | "version": "2.7.1", 391 | "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz", 392 | "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==", 393 | "dev": true 394 | }, 395 | "proto-list": { 396 | "version": "1.2.4", 397 | "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", 398 | "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==", 399 | "dev": true 400 | }, 401 | "pseudomap": { 402 | "version": "1.0.2", 403 | "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", 404 | "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==", 405 | "dev": true 406 | }, 407 | "semver": { 408 | "version": "5.7.1", 409 | "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", 410 | "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", 411 | "dev": true 412 | }, 413 | "sigmund": { 414 | "version": "1.0.1", 415 | "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz", 416 | "integrity": "sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g==", 417 | "dev": true 418 | }, 419 | "uglify-js": { 420 | "version": "3.17.0", 421 | "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.0.tgz", 422 | "integrity": "sha512-aTeNPVmgIMPpm1cxXr2Q/nEbvkmV8yq66F3om7X3P/cvOXQ0TMQ64Wk63iyT1gPlmdmGzjGpyLh1f3y8MZWXGg==", 423 | "dev": true 424 | }, 425 | "wrappy": { 426 | "version": "1.0.2", 427 | "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", 428 | "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", 429 | "dev": true 430 | }, 431 | "yallist": { 432 | "version": "2.1.2", 433 | "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", 434 | "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==", 435 | "dev": true 436 | } 437 | } 438 | } 439 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "visual-aria", 3 | "version": "1.0.0", 4 | "private": true, 5 | "description": "Visual ARIA allows engineers, testers, educators, and students to physically observe ARIA usage within web technologies, including ARIA 1.1 structural, live region, and widget roles, proper nesting and focus management, plus requisite and optional supporting attributes to aid in development.", 6 | "main": "index.js", 7 | "directories": { 8 | "doc": "docs" 9 | }, 10 | "scripts": { 11 | "build": "uglifyjs \"./docs/visual-aria/roles.uncompressed.js\" --comments /^!/ --compress --mangle --output \"./docs/visual-aria/roles.js\"", 12 | "fix": "prettier --write \"./docs/visual-aria/roles.uncompressed.js\" \"./**/{setup.js,radios.js}\" && js-beautify -r --type=\"html\" \"./**/*.{htm,html}\"", 13 | "test": "echo \"Error: no test specified\" && exit 1" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/whatsock/visual-aria.git" 18 | }, 19 | "keywords": [], 20 | "author": "", 21 | "license": "ISC", 22 | "bugs": { 23 | "url": "https://github.com/whatsock/visual-aria/issues" 24 | }, 25 | "homepage": "https://github.com/whatsock/visual-aria#readme", 26 | "devDependencies": { 27 | "js-beautify": "^1.14.5", 28 | "prettier": "^2.7.1", 29 | "uglify-js": "^3.17.0" 30 | } 31 | } 32 | --------------------------------------------------------------------------------