This project is a CSS and JS based accessibility (a11y) structure manual checking tool. It is comprised of a main CSS file (a11y.css) that shows the user the different HTML and ARIA structural markup on the page using pseudo before and after. Some elements do not support these CSS properties and thus a JS file is also associated with the Chrome extension. This git is a setup to be a Chrome extension but you can simply use the main a11y.css file in any browser or create a bookmarklet. Clicking the extension on the active tab will apply the CSS and JS to that Chrome tab. In addition, a context menu is provided with additional favlets for manual testing such as grayscale, linearize table, remove CSS, darken, enhance focus, show lang attributes, show title attributes, show complex table headers associated with a each cell, and an ARIA properties displaying option -- some of hte favlets are part of the extension while others are linked on my mraccess77.github.io project site.
As this extension is not yet in the Chrome Store -- go to chrome:extensions and check the developer mode checkbox. Choose the load unpacked extendtion and point to the folder where you have downloaded this git to. The extension should now be available.
Note: The darken option is just an added option to make page text black and all link text dark blue and underlined to make the page easier to see for the user. I personally find reading pages with light gray text difficult. The enahanced focus indicator makes it easier to track what element has keyboard focus and is useful in testing but can also be useful for people who have a hard time locating the focus indicator.
| Element | indicator | border |
|---|---|---|
| ARIA landmarks | name on brown background (app, nav, main, ban, form, search, coninfo, reg, asd (complementary) | orange |
| ARIA roles | name on brown backgroound | sienna (brownish orange) |
| a | a | cyan |
| area | area | cyan |
| abbr | abr | cyan |
| address | adr | orange |
| applet | none | yellow |
| audio | aud | yellow |
| button | b | cyan |
| canvas | can | |
| caption | cap | yellow |
| dialog | dlg | orange |
| dl | dl | purple |
| img | alt | pink |
| form | none | organge |
| iframe | none | green dotted |
| h1 - h6 | h1-h6 | lightblue |
| label | lbl | gold |
| legend | none | gold dashed |
| lang | lang code in white on dark blue | none |
| li | li | purple |
| main, nav, section, article, aside, header, footer, address, dialog | main, nav, sec, art, asd,hdr, ftr, adr, dlg | orange |
| object | none | yellow |
| ol | ol | cyan |
| onclick attribute | oc | purple |
| svg | svg | pink |
| summary attribute | text of attribute in white on red background | |
| table | table | red solid |
| td | none | red dashed |
| th | none | red dotted |
| ul | ul | purple |
| title attribute | none | dotted gray border |
| tabindex attribute | tbx (does not always show) | dotted blue border |
| video | none | yellow |