Reports Page Wireframe

[isaacdurazo]

Test Reports Page

Text-based Wireframes

From this page, users are able to visualize the state of support for ARIA by Assistive Technologies in different browsers. Users can control what AT and Browser combinations they want to see results for and group them by role, and properties and states if they want to. This page has two main components: 1) Test Reports Controls at the top and 2) Test Reports Results Table underneath.

1. Test Reports Controls

This section of the page allows the user to control what AT and Browser combination’s results they want to visualize, how many combinations they want to see results for, and also filter them by role, and properties and states. There are two components that control these mechanisms in this section: 1) the AT and Browser combination control at the top and 2) the filtering underneath that.

AT and Browser Controls

These controls are initially comprised of two dropdown menus, one for the Assistive technology and the other one for the Browser. Underneath, there a “add AT and Browser combination” button that will add another row from where the user can choose another AT and Browser combination. It is worth noting that this design allows the user to choose the same AT with several different browsers, which will allow them to view the interoperability of a given Assistive Technology.

Filtering Controls

By default, all test results are displayed in alphabetical order. These filtering controls have a dropdown menu from where the user can choose three different options to filter by. 1) all tests, 2) role, and 3) properties and states. When the user chooses to filter by role or by properties and states, an input field on the right gets displayed, clicking it opens a dropdown that allows the user to scroll through to see all the available options or they can simply type for what they are looking for in the same input field that gets the dropdown displayed. Each item in this dropdown list is a checkbox element and users can select one or more.

2. Test Reports Results Table

This table is attached to the bottom of the previously mentioned controls and is where results are organized and displayed. There is one column that lists all test results and one column for each AT and Browser combination. These columns have the following characteristics.

Test Results column

This column displays test results organized in a directory structure. By default, the root directory is open and displays a list with a folder for each Design Pattern Example. There are two levels deep a user can navigate from here. 1) a Design Pattern Example is open and 2) a Test from a design pattern example is open.

1. Design Pattern Example. Is open When one of these folders is open, underneath the Design Pattern Example’s name, a link to the Design Pattern and the Design Pattern Example’s pages in the W3C website are accessible. The following rows list all the tests that belong to that Pattern Example. Note, when test files varied between Assistive Technologies, an icon (still to be defined), will be displayed next to the test file name. Clicking the icon will display a tooltip with more details about it.

2. Test from a Design Pattern Example is open. When a test is open, a table displaying the details for the test gets displayed. This table looks exactly the way test details are currently displayed in the ARIA-AT app. If more than one AT and Browser combinations are selected, navigation tabs are attached to the top of this table from where the user can look at the result details for this particular test for the different AT and Browser combinations selected. Next to the heading of the table, buttons to "raise an issue" and "open test" are displayed.

AT and Browser column

This column displays the results in different levels of granularity depending on the row. There are 4 different rows in this column: 1) all tests, 2) Design Pattern Example, 3) Design Pattern Example Test, and 4) Support.

1. All tests row. This row displays a progress bar with an average percentage of all passing required test result in the test suite.

2. Design Pattern Example row. This row displays a progress bar with an average percentage of all passing required test result in the Design Pattern Example.

3. Design Pattern Example Test row. This row is split up into three columns, where 1) displays results for required, 2) optional and 3) unexpected behaviors

4. Support row. Following the previous' row format, this row is also split up into three columns. The difference is that results are expressed with an average percentage of all tests within the Design Pattern Example.

Visual Wireframes

[a11ydoer]

Great job, @isaacdurazo The visual grouping of "assitive technology" and "browsers" will be helpful so that the target of "add" and "remove" functionality can be easily understood as well as selected association between AT and Browsers.

[zcorpan]

I like these wireframes, @isaacdurazo ! Great to have an overview of the test results, and ability to dive in to something specific.

I agree with @a11ydoer that the ATs and Browsers selection could be tweaked a bit. The "Remove" and "Add" should be buttons, in my opinion, rather than look like links. "Remove" could be placed to the right instead of above, to make it clearer what it removes.

[isaacdurazo]

Thanks @a11ydoer and @zcorpan! I think both comments make a lot of sense. I'll be incorporating these changes in the next couple of days

[isaacdurazo]

@a11ydoer and @zcorpan I've incorporated your ideas. Thanks again for the feedback!