w3c / wai-policies-prototype

Prototype for the new WAI Policies Page

Lacking documentation, some notes:

• To delete a listing that used a filter, I also had to edit wcagver in _policies/js/script.js. Here's the pull request 403. I suspect when we add WCAG 2.1, we might also need to add to this file?
• Some policy code elsewhere: https://github.com/w3c/wai-website-theme/blob/master/_includes/multilang-list-policy-links.html & https://github.com/w3c/wai-website-theme/blob/master/_includes/multilang-policy-title.html

wai-policies-prototype's Issues

All on one page, or countries separate?

[I didn't see an issue on this point. Sorry if I missed it.]

We've talked about the default being one starting page, and then each country on it's on page. (and also an option to get it all on one page.)
(@sharronrush - do you happen to have pointer to relevant minutes???)

This has implications on the current prototype -- e.g., are the Filtering options within the Table section, or before it?

Standardize values for wcag version used

• wcag 1.0
• wcag 2.0
• wcag 2.0 derivative

Button for Submitting new entries

From @nitedog in #12:

2. We should have a button/link to an input form for updates, like we have on the tools list. Maybe also here have an additional link for every item that would pre-fill the form for easier updating

Form: Would like to have separate link name, URL, and description fields for standards and relevant documents

In my original design for the form I showed providing the three fields - policy name, it's URL link, and an optional description with a button that would add another group of those three fields for adding a additional standards and also when adding relevant documents. It seems a bit confusing to provide three parts of information in a single entry field and having to provide any additional as another line in the entry field.

Hopefully this is easy to do. Otherwise, it may be an enhancement after the MVP version of the form.

'new'/'updated' indicator

@maryjom said:

• I still like the idea of an update icon here. It can be programmatically added [o each entry] if the last updated date is less than 3 months from the current date and is not too attention grabbing. Looking at actual dates cause more cognitive power, and an icon makes it easier to skim.
• Also, not sure how long we’d want a “new” or “update” icon to appear. Maybe only for a month or so. We should have a regular time to go quickly update that info on the page so it doesn’t get stale.
• Do we want a description of what changed since the last update to this country’s info.?

How do we handle showing text and links are in another language?

For example, in France the title of their standard is in French. How do we mark up that language change in the prototype code?

In addition, the links will go to a French language page. Should there be some indication that the link takes you to a French-only page?

File download of table data

Recommendation to provide ability to download full table data (CSV, Excel, JSON, etc.)

Country details page needs linkage back to main page (or similar navigation as main page)

I showed the policy prototype to someone and when they navigated to a specific country's page, they noticed there's no breadcrumb or navigation to get back (other than the browser's back button). I'm thinking we should have the country navigation menu (left nav) in all of the individual country pages as well as the main page.

[enhancement] reorder wcag version filter choices

Expand all on page and expand all per country functionality

If we have expand/collapse on each of the laws & policies for each country (which I like), there should be an easy one-button method to expand all for the whole page, and another on each country to expand all for just that country. WCAG has similar methods for expanding/collapsing info.

Use of <details> <summary> to expand/collapse

I suggest not using details / summary for expanding and collapsing content.

This is not widely supported with screen reader / browser combos.

1. IE does not support details/summary at all. (http://caniuse.com/#feat=details) Since JAWS is a major screen reader which pairs with IE this would be an issue.
2. I tried it in NVDA and while the summary is announced as a button with the current state announced, when triggered it doesn't announce the change of state.
3. I tried it in VO on iOS and summary cannot be reached and engaged.
4. I tried it in VO on Mac and it doesn't work well with the screen reader and the instructions given by VO do not work if followed.

I would suggest using a regular button with aria-expanded and aria-owns.

Here is some extra info: http://haltersweb.github.io/Accessibility/accordion.html

Checkbox Fieldsets and Legends

Policy filter subtitles need to be legends. They need to relate to the checkboxes they own, rather than being siblings to their checkboxes.

A legend and its checkboxes must be wrapped in a fieldset.

This is of importance because screen-reader users often jump directly into form fields non linearly. They will have no idea what the checkbox is for.

They will hear for example "WCAG 1.0 checkbox not checked". with no understanding of what this checkbox relates to.

Bonus, by using fieldset and legend, as well as nesting your checkboxes in their labels you will no longer need to use list items for these. Woo hoo! :-)

Here is an example:

<fieldset>
    <legend><span class="screen-reader-text">Filter policies to show: </span>Standard</legend>
    <label><input id="wcag10" type="checkbox">WCAG 1.0</label>
    <label><input id="wcag10d" type="checkbox">WCAG 1.0 derivative</label>
    ...
</fieldset>
<fieldset>
    <legend><span class="screen-reader-text">Filter policies to show: </span>Status</legend>
    <label><input id="proposed" type="checkbox">Proposed/in development</label>
    <label><input id="in_effect" type="checkbox">In effect</label>
</fieldset>
...

Now they will hear "Filter policies to show: Standard. WCAG 1.0. Checkbox. Not checked".

(note I also added some screen-reader text to flesh out the legend for even more understanding)

Status and Updates too wordy

1. "Last updated" could be a single line, no need for a full sentence. Actually, we might have "last updated" for every entry as it is ambiguous on the page level.
2. We should have a button/link to an input form for updates, like we have on the tools list. Maybe also here have an additional link for every item that would pre-fill the form for easier updating

level of detail to include

@maryjom : Only add relevant links to the text of the law, legislation and/or rule(s)/standard(s) that provide the basis and specific guidance for complying with the web accessibility regulation.

@maryjom : I would prefer not to have an additional information part. We could potentially have the following additional information per country, though these aren’t just Web accessibility related:
Digital accessibility strategy for the country

Introduction too wordy

Think the first paragraph and last bullet-list in this section could be safely dropped. If needed the first paragraph could be made collapsible under a different heading, like "background" - people probably do not want/need to read this every time. The remaining paragraph + sentence in this section could be made more succinct too.

Summary table - status

@maryjom asked: How do we indicate difference between Law on books vs. adopted by EU member states vs. enforced with a standard in place?

icons in table [was: Summary Table: Weekly Survey Question/Comments]

This is for the EOWG Weekly Survey: Let us know what you think about the summary table and what advice or opinions you have to make it better.

Definitions - public sector

Some [organizations in the public sector] do [seek to generate a profit] in Australia – eg the Government owned Australia Post. In Australia we have ‘corporate’ and ‘non-corporate’ government entities as well as Commonwealth companies. Refer PGPA Act 2013

@maryjom drafted:

Public sector – Includes government and government-run or owned entities, and entities that receive government funding. Organizations in the public sector do not seek to generate a profit.

dates for entries

which dates should we include for an entry?

Seems important to have:

• when the law/policy was approved
• when the law/policy went into effect
• any other date-based info? (eg sunset date if exists?)

We may not be able to provide all dates for all laws/policies, but we should aim to provide when we can.

Country in left nav and table are pulling country names from the file name, not the actual name

The capitalization of countries with two word names is not correct. Also, if the country file name has an underscore in it, that underscore is showing up in the left nav menu and in the table (e.g. United_kingdom which should be United Kingdom). These pieces of information should instead come from the English country name contained inside of the file which has the grammatically correct name for the country.

heading with expand/collapse and external link

I wanted to expand the section and noticed that the heading was a link, so i clicked it - but instead of expanding the section it took me to a different page. Not sure how to address that - either clearer expand/collapse toggles and link or a different approach altogether?

Wording for left menu item - Law & Policy Overview Table - not clear

I suggest changing the wording of "Law & Policy Overview Table" to "Law & Policy by Country - table" and the menu item below that one: "Laws & Policies by Country" to "Laws & Policies by Country - detail."

I expected to find the table when I went to the latter and jumped right past the table. Someone not familiar with this page might miss the table altogether.

Summary table - scope column

@maryjom suggested: need to add 'Scope' column per Andrew’s comment in 23/Sept meeting.

me: this column would reflect which sectors the 'policy' applies to, eg Govt only,

Clear all filters button

I'm thinking there should be a clear all filters button to easily switch back to view all existing country information.

Definitions - private sector

Should we split this into 'for-profit' an 'not-for-profit'?

@maryjom drafted:

Private sector - Businesses and organizations that are not part of the public sector

Need method to add related page link to link to state/province info

Right now on all countries there's the blanket message pointer "Related page: Australian states..." as a placeholder for links to a separate state/province page. This functionality will need to be added so we can begin to prototype those pages as well and in the meantime we can point to the existing state/province page.

Note: The "Related page" label shouldn't show up when there is no related page to point to.

Responsible body

@maryjom suggests: Pick word applicable to that country. U.S. says “Agency”, other countries seem to say “Ministry”

Hong kong is showing up first in the alphabetic list of countries

Not sure why, but Hong kong is now showing up first in the left navigation list and first in the alphabetic table when sorted alphabetically, and first in the alphabetized countries at the bottom - before the countries that start with earlier letters.

New Entry for Germany

New Entry for Germany

Submitted by Eric Eggert:

This is a comment

---
country:
  en: Germany
  # Manual enter other country names: 
updated: 2017-04-27
updatemsg:
# Related page:
province: 
policies:
  - title:
      en: BIT OV A TEST
    url: https://bitv.de
    updated: 2002
    wcagver: 
    enactdate: 2002
    type: 
    ministries:
      - title: "Test Ministry 1"
        url: "http://1.example.com"
      - title: "Test Ministry 2"
        url: "http://2.example.com"
    webonly: true
    scope: 
    standard:
      - title: "Standard 1"
        desc: "S1 D"
        url: "https://s1.example.com"
      - title: "Standard 2"
        desc: ""
        url: "https://s2.example.com"
      - title: "Standard 3"
        desc: "S3 D"
        url: "https://s3.example.com"
    documents:
      - title: "RD1"
        desc: ""
        url: "https://d1.example.com"
      - title: "RD2"
        desc: "Relevan Documentation, I’d say!"
        url: "https://d2.example.com"
---

Filters are taking too much vertical space.

Put each filter type group in a box and horizontally so they don't take too much vertical space.

Country details pages missing date enacted information

Individual country details pages missing:

• Date enacted

Also on the summary page, labels are inconsistent:

• Date enacted vs. Enacted date

Create Form

In relation to #18

better differentiate in-page vs external links

In the table it is not immediately clear what links down within the page and what takes you to another page.

non-legally binding policies/strategies

How to handle non-legally binding policies / strategies / standards?

@maryjom said: [in relation to the Australian NTS and Digital Service Standard] These aren’t really required by this law [Australia's Disability Discrimination Act], but the government does have a policy to make their websites accessible – though it seems to be on a voluntary basis.

Terminology in the way

I suggest putting the Terminology section at the end of the document (and possibly link to it from the top if needed), or make it collapsible. People probably do not want/need to read it every time.

Recently updated indicator

From the February 28 F2F:
Mark entries updated in the last six months and in the last three months.

Ensure "link" text is unique

Country details sections for each policy on the site's index page have non-unique link text that reads "link". Need to make this link text unique by linking the name of the policy or adding the name as visually hidden text for to supplement/replace "link".

Disclaimer text is on different line from the expand/collapse arrow.

This is related to Issue #1, but when the collapsible functionality was added, the expand/collapse icon appears a line above the disclaimer heading.

Disclaimer

@maryjom suggests: Can disclaimer go to the bottom?

Draft text:

The policy links on this page are compiled as a resource by the World Wide Web Consortium’s (W3C) Web Accessibility Initiative (WAI) Education and Outreach Working Group (EOWG). This page is not a comprehensive resource for all applicable laws and policies for Web accessibility. The information on this page is not legal advice. If you have questions about the applicability of the laws to specific situations, consult with legal authorities in the appropriate jurisdiction.

Submission form styling

Improve styling and layout on the form to ensure clarity/usability of the labels, fields, and the description text.

Make label placement more consistent (some are over their fields, some are to the left).

New Entry for Germany

New Entry for Germany

Submitted by Eric Eggert:

This is a comment

---
country:
  en: Germany
  # Manual enter other country names: 
updated: 2017-04-27
updatemsg:
# Related page:
province: 
policies:
  - title:
      en: BIT OV A TEST
    url: https://bitv.de
    updated: 2002
    wcagver: 
    enactdate: 2002
    type: 
    ministries:
      - title: "Test Ministry 1"
        url: "http://1.example.com"
      - title: "Test Ministry 2"
        url: "http://2.example.com"
    webonly: true
    scope: 
    standard:
      - title: "Standard 1"
        desc: "S1 D"
        url: "https://s1.example.com"
      - title: "Standard 2"
        desc: ""
        url: "https://s2.example.com"
      - title: "Standard 3"
        desc: "S3 D"
        url: "https://s3.example.com"
    documents:
      - title: "RD1"
        desc: ""
        url: "https://d1.example.com"
      - title: "RD2"
        desc: "Relevan Documentation, I’d say!"
        url: "https://d2.example.com"
---

Some laws have multiple standards- need way to provide a list of them

One change that I need to have made to the Policy prototype is to allow multiple standards to be added for a single law. When I went to add the U.S. 21st Century Video and Communications Accessibility Act, they actually have at least 4 different technical standards (e.g. audio description, captions, etc.) but there's no code to display multiple so I instead added a pointer to a page that has the links.

Confusing navigation pattern for collapsible details on laws/legislations

I think it's very confusing to rely on the small right-pointing arrow to indicate the presence of additional details for any given law/legislation under a country. The country itself has a regular bullet which is not clickable, yet the links underneath have what seems to be bullets (the arrows), but those are clickable to expand the section. When one clicks or triggers the links themselves however, it leads to the URL of said law/legislation. I think we should change the visual presentation of the call to action from a right-pointing arrow to something more obvious/predictable, like a plus sign or something.

WCAG version used not shown in country policy detailed information.

The WCAG version used for the law/policy used to be in the table and not in the country details, so now needs to be added to the country details.

Remove status column in favor to date.

See #21

Law/Legislation column, make contents not bold, left justified

In the table column titled Law/Legislation Name, all of the rows have the laws in bold and centered in the column. Make them not bold, left justified.

Policy submission form - class of visuallyhidden content still visible on the page

There are leftover headings that have a class="visuallyhidden" that are visible (not hidden) on the submission form page. Do we really even need these headings now that we are using fieldsets?

Heading hierarchy

All the country headings under the H2 "Laws & Policies by Country" should be changed to H3s since they are subsections under "Laws & Policies by Country". (They are currently also H2s which makes them siblings of "Laws & Policies by Country".)

Heading hierarchy is very important for those using screen readers. The hierarchy should make sense.

Disclaimer link no longer shows up at bottom of page

We had added a disclaimer link at the bottom of the page, but it disappeared when the new (or old) WAI template/CSS was applied. Need to make sure that when the final template is applied the link is re-added.

Law vs Legislation

@maryjom said: Comment received that these are used interchangeably in countries outside of the U.S. Not sure if that is because people don't understand the difference or if there really is no difference in the definition in other countries.

Law – Law that has completed the legislation process, and goes into effect as the law of the land.
Legislation – A law that is in the process of becoming a law, commonly referred to as proposed legislation.