Easy Checks 2019 Project Plan

From Education & Outreach

Project Plan

This is the preliminary plan for developing a team and production schedule for updating the popular Easy Checks tool. There may be short term as well as long term plans depending on results of EOWG polling. Background information and previous notes for suggested revisions are found on Easy Checks Next Gen.

Task/Action Responsible Start Date End Date Status/Comment
Review the Change log and the issues list in GitHub Sharron 02-07-19 02-15-19
Poll EOWG for priority check Sharron 03-04-19
Contact those previously interested to confirm continued capacity to contribute Sharron 02-15-19 02-28-19
Finalize team structure Sharron 02-28-19
Establish plan for communication and work cadence
Resource management - Assign specific roles and tasks related to Easy Checks revisions
Tools and browser review what tools and browser versions are currently recommended to do the checks - are they up to date, available in multiple languages, provide the best result, currently being supported.
Review and recommend new toolsThose that have evolved that test 2.0 and also any that may have emerged to test 2.1.
Check cross references to other WAI resources (Tutorials, for example)
Assess WCAG 2.1 implications - what needs to be added and what should be changed to accommodate 2.1 but not replace 2.0 for those who will stay there. Example: An organization is still using 2.0, do we need to distinguish target size differences? Should it be labelled in such a way that I now it applies to 2.1 and not 2.0 or do we need both? Shawn 11 Mar 19 2.1 assessment ready for review
Coordinate with BAD revisions ensure that references to BAD are current and relevant
Video/screencasts - Assess and document feasibility of illustrating checks with screen casts and/or video clips
Check all links - in page and external to page to make sure they point to updated resources
Significantly tersify and clarifyReview wording e.g. Forms labels and errors needs revising for wording in intro - sounds like 'if it is too hard, don't do it"
Report template - investigate and recommend on the development of a report template for easy checks along the lines of WCAG EM report template but simplified. [Too much risk of this being seen as a definitive evaluation]


Notes

1. Considerations in review of tools/browsers

  • Establish requirements for including reference to any testing tool. Suggested:
    • Free
    • Work with multiple browsers
    • Associated with a for profit company or not? (and does that matter?)
    • Multi-language
    • Actively updated
    • Are there public reviews, can we tell how many people use them?
    • Note that GitHub issue #10 related to adding Chrome toolbar has been partially addressed
  • If there are tools that you commonly use and feel might be considered within Easy Checks - add to Google Sheets tools list.

2. Review process

  • Could review the agreed requirements for the features used and generate a list from that. But, will also need to consider the requirements for the new 2.1 SC. Thus, may need to move the task of determining what easy checks are needed for 2.1 SC before reviewing the tools.

3. Consideration in browser review

  • This should be pretty straightforward based on browser use and surveys of AT use.
  • Compare matrix of tools with browser support and usage to determine which tools to recommend in Easy Checks.

4. Consideration of creating WAI accessibility bookmarklets

  • Pros
  • Cons


Bookmarklets for Accessibility Evaluation

Below are some existing bookmarklets (developed by others).

Search results for even more: https://duckduckgo.com/?q=accessibility+bookmarklets&va=b&t=hc&ia=web

JavaScript Bookmarklets for Accessibility Testing:

  • ARIA
  • Images
  • Forms
  • Headings
  • Tables
  • Landmarks
  • Page Title
  • Lang
  • Tabindex
  • Title Attributes
  • Iframes
  • Lists
  • Force Show Focus
  • Reset Page
  • Grayscale
  • aXe Console.log

for SC 1.4.12 Text Spacing

[A11y audit bookmarklets https://a11y-tools.com/bookmarklets/]:

  • ... lots...

list of bookmarklets for accessibility testing

Favlets, Favlets for WCAG 2.1:

  • WCAG 2.1 SC 1.3.5 Input Purpose
  • WCAG 2.1 SC 1.4.10 Reflow
  • WCAG 2.1 SC 1.4.12 Text Spacing
  • WCAG 2.1 SC 2.5.3 Label in Name
  • WCAG 2.1 SC 4.1.3 Status Messages

Accessibility Bookmarklets:

  • Landmarks — Highlights all ARIA landmarks, including HTML5 tags that are interpreted as landmarks
  • Headings — Highlights all H1 through H6 elements on a page
  • Lists — Highlights every ordered list, unordered list, and definition list on a given page, along with how many list items exist for each list
  • Images — Highlights the types of images on a page, along with their alt text
  • Forms — Highlights form-related elements and provides information on their associated labelling techniques, grouping labels and ARIA roles

[old] Favelets for Checking Accessibility - @@ do these work in modern browsers?

  • Active Images — The Active Images favelet counts alt-text errors and highlights alt text on active images to review. Active images include images inside anchor tags (image links), <input> elements with type=image and <area> elements for image maps. This favelet adds "NoALT" markup text for image errors with all image borders highlighted.
  • Larger Images — The Larger Images favelet counts alt-text errors and highlights alt-text on larger images to review. Larger images are <img> elements which are not active and whose height and width are both greater than 9 pixels.
  • Long Description — The Long Description Highlights and provides links to view long descriptions when present.
  • Formatting Images — The Formatting Images favelet counts alt-text errors and highlights alt-text on formatting images for review. Formatting images are defined here as images which are not active and which have height or width less than 10 pixels. This favelet does not add markup text for formatting image errors although all image borders are highlighted.
  • Form Labels — The Form Labels favelet highlights form labeling and counts form labeling errors. Errors are also highlighted.
  • Data Tables — The Data Tables favelet simply displays all accessible table markup - th, summary, scope, axis, id, and headers. In this way, the human reviewer can see if necessary accessible table markup is present. The favelet also draws borders around all tables.
  • Skip Links — The Skip Links favelet highlights the location of in-page links and where input focus (not visual foces) will land when each link is activated.
  • Headings — The Headings favelet counts and highlights all HTML headings (h1, h2, ..., h6) on the page.
  • ARIA Markup — The Aria Markup favelet counts and highlights with h6 tags all instances of ARIA markup on the page.
  • Tabindex — The Tabindex favelet counts and highlights with h6 tags all instances of tabindex on the page.
  • LargeText — The LargeText favelet creates a movable box on the page with samples of "large text".
  • Frames — The Frames favelet marks up frames and iframes on the page and also creates a list of the frames and their properties in a new winodw. Form there you can open individual frames by clicking on the src link.
  • LandMarks — The LandMarks favelet marks up all ARIA and HTML 5 landmarks (<nav>). It also checks for and marks up the text specified by aria-labelledby. The favelet even checks for misspellng of "aria-labeledby."
  • Slider — The Slider favelet is the first in the "widget group," revealing ARIA roles Slider, Spinbutton, Progressbar and Scroll bar as well as HTML5 input elements Range and Number.

... others...

Other ideas for consideration

Misc

Minutes from discussions:

Input from surveys and other: