Skip to content

mraccess77/a11ycheck

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

75 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

a11ycheck

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

About

a11y Structure Check

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published