Updating the new website some more

WilcoFiers commented 5 years ago

Note: (from Jey) I am ticking items I have done & merged

Navigation

[x] Change the name from "ACT RULES CG" to "ACT-Rules Community"
- [x] Remove its underline
- [x] Make it look like it isn't just badly wrapped text
[x] Move the "A community of...", the logos and the EU stuff and a link to the license into an actual page footer, not in the top of the navbar
[ ] Reorganise the menu:
- Rules
- Implementations
- How to Contribute
- Documentation
- About Us
- Github Repository
- Move glossary under Documentation
- Collapse the subsections (see the nav on pattern-library.dequelabs.com/ for an example)
[x] Don't uppercase menu items, it's hard to read
[x] Don't show the "collapse menu" button on high resolution (>1280)
[x] Rename: "DEFINITION OF "DONE" 1.0" to "Definition of Done"
[ ] Don't scroll the nav after loading a page, it's jarring
[x] Make the nav collaps button more subtle, have a look at what JIRA did in their design. It hides the button when the thing is open, only showing it on hover/focus, has the button sitting on a line with a color, indicating that there's a menu there to be opened, and changes icons once its open.
[x] Don't put the logo in the scrollable area, it's small enough that we don't need it to

Main body

[x] Make the whitespace above and below the h1 relative to the screen height. That size is fine for a large screen, not for a small one. Same for the other headings, too much whitespace for a small screen.

Contribute page

[x] The "Learn more about how to join WCAG-ACT-RULES-CG" button doesn't work
[x] Join the group links are wrong.

Rules page

[x] Don't include the rule count in the h1. It's not important
[x] Remove the authors column, not important
[x] Don't upppercase success criterion
[x] Use the actual SC title, rather than "WCAG2:NAME-ROLE-VALUE", also not uppercase it
[x] Don't do the outline on hover, it implies that you can interact with something
[x] Put the atomic in a list under the description rather than in a column that doesn't even fit the ID
[x] Use the atomic rule titles rather than their IDs
[x] ~~Remove the numbering. If we use numbers, people might start refering to the numbers, we don't want that.~~ - @WilcoFiers - Keeping this, we want to know how many rules we have, otherwise we cannot keep track, given we are removing total count on the heading.
[x] Show the number of implementations for each rule (e.g. Implementations: 3)

Glossary page

[x] Don't put the key in the heading, there's already a "key: foo" below it
[x] As before, no numbering, no hover outline
[x] Remove indentation from "Used in rules" section after it wraps, so that it aligns with the text above it.
~~[x] Change H2 headings in definitions to H3s (this is not valid)~~
[x] Add underlines to links, it fails WCAG
[x] Remove underline from the key as it makes it look like a link. Use some other style, like a Courier New font or something.
[x] Let the glossary title flow above the "used in rules" list, instead of wrap for it, makes them look less separate
[x] Use a list for the Used in rules list, WCAG issue. Don't underline them if they are in this list.
[x] In places where we're using URLs for link text, replace them with a descriptive title

kasperisager commented 5 years ago

Also, the URLs are now completely random making them even more unstable than previously. What's perhaps worse, the randomness is seeded by the path of each rule file, making the URLs both random and tied to the path of a given rule.

Note: this is solved in this PR https://github.com/act-rules/act-rules.github.io/pull/478

WilcoFiers commented 5 years ago

[x] Include the randomised IDs in the frontmatter, so that they become static
[x] Resolve the problem where the right column in the rules page overflows the main content.
[x] Don't make the footer sticky in low height resolutions

WilcoFiers commented 5 years ago

[x] At lower resolutions, the right side of the content of the following page is clipped: https://act-rules.github.io/pages/implementations/reporting/
[x] URLs are outdated: https://act-rules.github.io/testcases.json

kasperisager commented 5 years ago

[x] Protocols are also missing from all URLs in https://act-rules.github.io/testcases.json.

Brynanders commented 5 years ago

Wilco has already mentioned this along with myself and Emma but I thought I would show you what the issue is with no responsive content when zoomed in. ...

[x] 1600 x 900 zoomed in 300%, clipped/no scroll, and the footer is taking up approx 30% of the screen.

Brynanders commented 5 years ago

I also noticed that the favicon is still the "aXe" style logo. P{icky perhaps and equally not a priority ahead of the actual accessibility issues affecting the site but still there were some pretty strong feelings about the logo so I think the favicon should be removed until we have an agreed upon design.

[x] Updated favicon to just a square block reading ACT

annethyme commented 5 years ago

[x] Make sure links in blocks of text (e.g. in the Glossary, https://act-rules.github.io/glossary/#accessible-name) stand out according to Technique G183, by either:
[x] making the links underline/bold/something
[x] ensuring a 3:1 contrast to surrounding text AND making the links underline/bold/something on hover and focus

Easiest thing would be to give them same styling as the links in the rules, e.g.: https://act-rules.github.io/rules/5f99a7

annethyme commented 5 years ago

[x] When linking to input rules from the composite rule, show the name of the rule instead of the file name:

annethyme commented 5 years ago

[x] Can we get the frontmatter stuff into the actual rule part of the rule? I seriously couldn't find the test aspects out there at the far right, that is usually reserved for "related content", not important context:

Screenshot 2019-05-03 at 13 38 37