search

quailjs / quail

Accessibility testing in the browser and on the server.
http://quailjs.org
Other
300 stars 44 forks source link

Test for WCAG technique C6: Positioning content based on structural markup #74

Open kevee opened 10 years ago

kevee commented 10 years ago

Create a test for the following WCAG 2.0 technique: http://www.w3.org/TR/WCAG20-TECHS/C6.html The objective of this technique is to demonstrate how visual appearance may be enhanced via style sheets while still maintaining a meaningful presentation when style sheets are not applied. Using the positioning properties of CSS2, content may be displayed at any position on the user's viewport. Using structural elements ensures that the meaning of the content can still be determined when styling is not available.

Tests Procedure

hannolans commented 10 years ago

How could we test this?

kevee commented 10 years ago

In looking at this and F1, I think this test is going to only have a medium severity level (testability of .5). A process could be:

  1. Look for elements that have styles which could make their render frame on layout or re-flow be non-normative (i.e. position: absolute or margin-left: -500px;.
  2. Look at either the ancestor that would have set the relative coordinates of the positioned element, or just the parent if there is no absolute positioning. This would be our 'anchor' to look for other descendants with similar positioning methods.
  3. If the positioned element has several siblings that are also positioned and have the same relative x or y positions (like a grid or columns) and these elements with similar positioning (i.e. a group of three elements with the same x position that makes a column) are not also grouped in a structured way (wrapped in a <ul> for instance), then that means the positioning is not also placed in the context of a larger structure.
kevee commented 10 years ago

Moved to round 2, seems to fit the scope of that milestone better.

kevee commented 10 years ago

We need some additional use cases for this, or is visual columns created with odd positioning the only one?

hannolans commented 10 years ago

Well, this a test for a technique, so we should check if the technique 'Positioning content based on structural markup' is used. That means, positioning css is used on html elements that also has a meaning itself like tables, lists, etc. (and not div). So when the stylesheet isn't there, no information is lost as it is tagged with a meaningful html tag. Not sure if I answer your question with this. Positioning seems mostly relevant for lists and tables, as there is the order of appearance relevant. F1 is the failure test, harder to test, and that should test if div's are used, it's still understandable without stylesheets.

kevee commented 10 years ago

Feature branch: https://github.com/quailjs/quail/tree/74-positioning