Writing Accessibility Tests Using Java Script and CSS

Writing Accessibility Tests Using Java. Script and CSS Presented by: Jonathan Avila Chief Accessibility Officer January, 28 2015 Time: 1 pm ET / 12 pm CT/ 11 pm MT / 10 am PT

Agenda • • • Introduction Poll questions Benefits & Discussion CSS Favlets Inserting CSS Inserting JS Java. Script Examples Example Tests Resources Questions 2

Discussion & Benefits • How can we test smarter not harder? – Why do something manually that a computer can do? – Somethings cannot be tested automatically but issues can be surfaced for review • Browser is a good location to test as developers are viewing how content appears in the browser • Add visual markers to page • Within the context of page make identification quick and open testing up to non-developers otherwise may take a lot of time – Code inspection through developer tools/DOM is takes time – Code inspection may require you to know how to read code – Create screen reader agnostic tests for screen reader tester 3

Example of Visual Markup 4

Discussion & Benefits (cont. ) • Make web pages easier to see for people with visual impairments – Enhance visual focus – Make text larger – Change colors, spacing, margins, add borders • Fix accessibility issues on a page – Insert Java. Script file in each page of site – SSB Alchemy • Checks pages for violations • Propose fixes with input from user • Propagate fixes across multiple pages based on signatures 5

What is a Favlet? Favlets/boomarklets • Bookmark/favorite that applies Java. Script to current page for the purposes of testing or changing the page • No installation; cross browser 6

What can you do with CSS and JS? • Create custom stylesheets (CSS) – Through browser, plug-in or through Favlets – IE and FF support user defined styles without plugins – Chrome can use plug-in • Create Java. Script to evaluate content on the page for a 11 y – Through Favlets, plugin (e. g. Grease. Monkey) • Make a browser extension – Create a reviewed/approved extensions – Load own Chrome extensions not in store in developer mode • Add TTS/Sound (mimic screen reader speaking text) • Canvas based tools (e. g. contrast checker) 7

Chrome Developer Extension Load own Chrome extensions not in store Open Chrome menu Toggle extension Can add a context menu 8

What you can do (cont. ) • Test during development (unit testing/smoke test) – Build systems w/ task runners (Grunt, Gulp, etc. ) with headless browsers like Phantom. JS or Selenium • Site Overlays – Java. Script (file) is added via addition of script to run when page runs – Could test pages in a site as user navigates through them – Fix site’s accessibility (e. g. SSB’s Alchemy product) 9

What you cannot do • Script/Favlets has to be served from same protocol – https: // http: //, file: // • Cannot take screenshot from DOM without browse extensions for security reasons • Limits on unsigned extensions in Firefox and Chrome may require bypassing security provisions – Go through process to have extension signed or – Use existing plug-ins such as Grease. Monkey – Use Favlets (limited UI although you could make your own in page UI) 10

Custom Style Sheet Example 11

What can you do with custom CSS? • Write CSS rules – Add !important designation to end of rules – *[role=“banner”] { border: thin solid red !important; } • Affect all pages or those specified by FF media queries • @-moz-document domain(YOUR. DOMAIN) { styles here } • Change borders, colors, etc. to indicate errors or element type • Add content using pseudo elements 12

Content Pseudo Elements Use content with before/after pseudo element to add content [lang]: : before { content: "lang="attr(lang) !important; font-size: small !important; font-style: italic !important; border: darkblue !important; background-color: darkblue !important; color: white !important; font-weight: bold !important; } Note: Strings can be displayed as well as contents of attributes can be displayed with attr(), counter, and media via url() CSS will be applied to the added content and not element. 13

Limitations of CSS • Limited content can be displayed with pseudo content • Certain elements such as input and image don’t support display before/after pseudo element • Cannot control other displayed content for other elements – Only change what is displayed for element specified in CSS selector • Cannot run scripts in CSS except for certain situations like the express function in IE or server side CSS generation or pre-process like Less • Must be loaded into all frames if applying via script/Favlet – Custom CSS in browser will automatically be applied to frames 14

Examples of CSS Selectors * (asterisk) all elements *: focus { outline: thick sold red; } Match id or class – less useful if you don’t know what the id or classes are. sr-only { position: relative !important!; left: 0 !important; . . . } Element name li: : before { content: “li”; border: thin solid purple; } All elements inside a input {content: “invalid: ”; border: thin dotted red; } Target attribute = to *[role=“banner”]: : before{content: ”Banner”; . . . } 15

Example CSS main, nav, section, article, aside, header, footer, address, dialog { border: thin solid orange !important; } main: : before, [role="main"]: : before { content: "main" !important; font-size: small !important; font-style: italic !important; border: darkblue !important; background-color: orange !important; color: black !important; font-weight: bold !important; padding-right: . 25 em !important; } 16

Custom Style Sheets in IE • Tools > Accessibility > User Style Sheet > Browser • After modifying the style sheet you have to restart the browser 17

User Style Sheet in Firefox Add to profile (about: support) • C: UsersjavilaApp. Data RoamingMozillaFirefo xProfiles mgzszcg. def aultchromeuser. Conten t. css (your username and profile would be different) Plug-ins • User Style Manager – Shortcut • etc. 18

Digging into Favlets Favlet: Favorite or bookmark that contains scripting that allows you to change or test something • Bookmark or favorite itself contains a small amount of Java. Script or • For longer Java. Script adds a script hosted somewhere on Internet to a page • Favlet can add CSS to page • Favlet can run Java. Script for tests or to add content/markers • Host on a page with same security level – Location of favlet may need to be on https 19

Favlet adding CSS to page (function () { var style = document. create. Element("style"); document. head. append. Child(style); style. sheet. insert. Rule("div { background-color: red; !important; }", style. length); })(); • Anonymous function can be used without a name • The parenthesis before the function and after the function closing brace indicate a an expression • The (); at the end means immediate execution 20

Favlet Adding Java. Script to Page (function() { var element = document. create. Element('script'); element. set. Attribute('src', 'https: //mraccess 77. github. io/favlets/imgalt. js'); document. body. append. Child(element)} )()); • Some people append to head instead of body • If the Java. Script was short enough you can place in directly such as in the CSS example 21

Making the link • Making a link helps users add the Favlet • Add javascript: or javascript: void before ( express <a href=“javascript: void(function () { var element = document. create. Element('script'); element. set. Attribute('src', 'https: //mraccess 77. github. io/favlets/imgalt. js'); document. body. append. Child(element)} )()); ”> Image alt display Favlet </a> • Note how the href is wrapped in double quotes for single quotes are used with the double quoted string 22

Adding Favlets to Your Favorites Firefox • Right click or activate the context menu on the link to the Favlet • Choose Bookmark this link IE • Right click • Add to Favorites Chrome • Drag and drop the favlet to the bookmarks bar (Ctrl+Shift+B if the bar is not showing) 23

Java. Script Hints Obtain a candidate set of elements • document. query. Selector (find first element that matches) • document. query. Selector. All (finds all elements that match) – Uses same CSS selectors discussed earlier var nl = document. query. Selector. All("[tabindex], button, a[href], area, input, select, textarea, iframe"); Pages may have frames (iframes) • Recursive search through frames – Frames may contain other frames Add visual mark, toolbars, or other messages such as alert dialogs (e. g. when no items found an alert might be fastest) 24

Sample Recursion function traverse. Frames(doc) { // perform check here var frametypes= ['frame', 'iframe']; for (var i=0; i<frametypes. length; i++) { var myframes=doc. get. Elements. By. Tag. Name(frametypes[i]); for (var z=0; z<myframes. length; z++) { try { traverse. Frames(myframes[z]. content. Window. document); }. . . 25

Java. Script Example to display sr-only content function check(doc) { var elements = doc. get. Elements. By. Class. Name("sr-only"); // our candiate set var e = []; for (var i=0; i< elements. length; i++) { // make a copy of all the elements e[i] = elements[i]; } for (var i = 0; i < e. length; i++) { e[i]. style. border="1. 5 px solid red"; // put a border around element e[i]. style. padding="2 px"; e[i]. class. Name = e[i]. class. Name. replace(/bsr-onlyb/, ''); // remove class name // create indicator and prepare for it to be inserted before elment var span 2 = document. create. Element('span'); span 2. set. Attribute("id", ("sr. SSB" + i)); text. Node 2 = document. create. Text. Node(e[i]. text. Content); span 2. append. Child(text. Node 2); . . . 26

Java. Script Example to display sr-only content (cont. ) //style indicator span 2. style. color="#00437 A"; span 2. style. font. Size="small"; span 2. style. font. Weight="bold"; span 2. style. background. Color="#fbc 55 b"; span 2. style. border="1 px solid black"; span 2. style. padding="1 px"; span 2. style. margin. Right="2 px"; e[i]. parent. Node. insert. Before(span 2, e[i]); } } 27

Example problems to solve and solutions • • • Page structure Focus Order Alt text for non-text elements (images, SVG, objects, etc. ) Remove styles CSS Background images Grayscale (use of color and contrast) Linearlize tables Data table markup Language and localization including screen reader specific content • Contrast • ARIA markup 28

Page Structure • Combination of CSS and Java. Script due to limitations in CSS content classes 29

Focus Order 1. Get focusable elements – [tabindex], button, a[href], area, input, select, textarea, iframe 2. Removed disabled elements 3. Collect all the elements with a positive tabindex 4. Order all the items with a positive tabindex 5. All other items appear in DOM order next 6. Add visual numerical markers indicating focus order Note: This is a general formula that has limitations & does not account for other focus management techniques 30

Focus Order Example 31

Alt text for non-text elements • Determine accessible name for images, SVG, objects, and other non-text elements (e. g. video, audio, etc. ) • Display the accessible name 1. If the img element has an aria-label or an aria-labelledby attribute then calculate as accessible name 2. Otherwise use alt attribute 3. Otherwise use title attribute 4. Otherwise there is no accessible name Note: Check for the presence of role="presentation" or any labeling attribute that specifies an empty label, specifically aria-label, arialabelledby, alt or title. The presence of any of these indicates the author's intention to indicate that the img is decorative https: //www. w 3. org/TR/html-aam-1. 0/ 32

Remove styles function remove. Styles () { var el = document. query. Selector. All('style, link'); for (var i=0; i<el. length; i++) { el[i]. parent. Node. remove. Child(el[i]); }; var el = document. query. Selector. All('[style]'); for (var i=0; i<el. length; i++) { el[i]. style=""; }; } Remove linked style sheets, doc style sheets, and inline styles 33

Remove Styles Example Purpose: • Show content that may appear in response web design • Used to test Section 508 standard for use without associated style sheet • May reveal screen reader only content position off-screen with CSS 34

CSS Background Images Fastest way is through CSS * { background-image: none !important; } 35

Linearize Tables Apply a CSS rule is fastest way table, tr, td, th { display: block; } Purpose: check reading order of content 36

Linearize Tables Example 37

Grayscale (use of color and contrast Filters such as grayscale (depend on browser) • For Chrome html { filter: none; -webkit-filter: grayscale(1); } Canvas - replace colors 1. Get pixel data from get. Image. Data 2. Loop through rgb values modifying as needed 3. Put modified values back with put. Image. Data Hint: grayscale = (r+g+b)/3 for each of r, g, and b – that is they all have the same value 38

Grayscale Example 39

Data table markup • • @summary Table header cells (scope, ids, and headers) Table data cells Display actual text that would be announced for each cell such as the headers announced by a screen reader 40

Data Table Example 41

Language and localization including screen reader specific content Localization efforts may miss content that is not visible on screen. Examples include • @Alt for images • @Title (e. g. form fields, img) • Screen reader only text position off-screen with CSS • • Often has a certain class name @aria-labels Table @summary Other @attributes or elements (e. g. caption tracks) 42

Contrast • Use computed styles • Compare foreground and background colors • Advanced factors – – Content with different z-index (front to back order of content) Gradient backgrounds Images of text Transparent backgrounds • Relative Luminance formula @ W 3 C – https: //www. w 3. org/TR/2008/REC-WCAG 2020081211/#relativeluminancedef var style = window. get. Computed. Style(element[, pseudo. Elt]); 43

ARIA Markup • Display – Roles, attributes, and boundaries of elements • Validate ARIA markup – Invalid roles – Invalid attributes based on roles – Invalid attribute values • Accessible Name calculation – Use aria-label, aria-labelledby, HTML specific labeling dependent on element (label, alt, etc. ), then title attribute followed by inner content – Caveats include inner text with labels, aria-hidden, display: none and visibility: hidden content 44

Visual ARIA Favlet Example 45

What are some of the things you want to write tests for? 46

47

Resources Github page for some of my tests and CSS • https: //github. com/mraccess 77/a 11 ycheck Visual ARIA bookmarklet • http: //whatsock. com/training/matrices/visual-aria. htm Parsing Error Bookmarklet • https: //www. paciellogroup. com/blog/2012/02/wcag-2 -0 -parsing-error-bookmarklet/ SSB Labs Favlet page • https: //labs. ssbbartgroup. com/index. php/Category: Favlet Contrast Checker • http: //mraccess 77. github. io/Canvas. Contrast. Checker. html Favlets for Checking Accessibility • http: //jimthatcher. com/favelets/ HTML Accessibility API Mappings 1. 0 • https: //www. w 3. org/TR/html-aam-1. 0/ Section 508 Testing dot Org Bookmarklets • http: //section 508 testing. org/tools/ 48

Thank You! Contact Us Jonathan Avila jon. [email protected] com Webinars ssbbartgroup. com/webinars SSB University info. ssbbartgroup. com/documentacces sibilitycurriculum Follow Me jonavila. [email protected] TGroup linkedin. com/in/jonathan -avila-2 a 964 a 7 facebook. com/ SSBBARTGroup. com/blog 49