Community & business group feedback

Hi All,

I took a look at the new CG/BG site (which I think looks great btw) from an accessibility perspective. It is worth noting that this is not a comprehensive audit. This is more of a look over the key pages and functions on the site. 

Evaluation platform was Firefox 32.0.3, Mac OS X 10.9.5.

I have provided a link to the relevant criteria and/or technique where appropriate.

We have a number of resources that may help:

• Tutorials (http://www.w3.org/WAI/tutorials/) - These cover some specific topics. Images, tables and forms, with more on the way.
• Demo site (http://www.w3.org/WAI/demos/bad/) - This provides a before and after example of a site. It is useful to see how to implement common site features.
• WCAG QuickRef (http://www.w3.org/WAI/WCAG20/quickref/) - This is helpful for narrowing down the techniques (and failures) that are important to look out for.

If you have any questions regarding any of this, I am more than happy to help. Just contact me.

Thanks

Kevin

——
Kevin White
W3C Web Accessibility Initiative (WAI)
e-mail: kevin@w3.org
phone: +1 617 532 0912
phone: +44 131 202 6009
about: http://www.w3.org/People/Kevin/


General issues

• Form controls missing labels (http://w3.org/brief/NDAz)
Login form has no labels for the form elements. There is a placeholder which is insufficient. This is evident on other forms throughout the site, such as the Live Search text entry field and the chair check boxes on the group participants listing page. There are instances where there are form labels that are not correctly associated with the form element. For example, on the Propose a Community Group (http://cgbeta.w3.org/community/groups/propose_cg/) there are form labels but the form elements do not have ID attributes that allow for the label to be correctly associated. When leaving a comment, the comment box has a correctly associated label. Unfortunately, it is styled with display: none. This means that it is generally not read out by screen readers, so unavailable to these users.
Suggestion: For each form element, add a correctly associated label. This can be moved off screen to avoid impacting on the visual design. Don’t use ‘display: none’ to hide the label. Alternatively a title attribute could be used.

• Focus ordering makes accessing lightbox functionality using a keyboard almost impossible. (http://w3.org/brief/NDAy)
For example log in box, and information panels on homepage. When the Log In link is activated with the keyboard, the lighbox pop-up appears but keyboard focus remains on the Log In link. Tabbing will simply take the user to the next link in the toolbar. This makes it nigh on impossible to access the login lightbox. This is particularly problematic when a screen reader user activates a homepage link that requires login as the activation will cause no apparent effect as the popup will not be available.
Suggestion: When activated the Log In link should shift focus to the lightbox. Ideally focus should be contained within the lighbox until it is closed, at which point it should return to the Log In link. This approach should be adopted for all lightbox popups.

• No visible keyboard focus (http://w3.org/brief/Mzk5)
This is relevant for links and form elements.
Suggestion: For all elements that have a :hover styling, add in a :focus styling as well. For example, style.css line 860 has:
  .main-nav a:hover span {
    color: #5e6266;
  }
Simply add:
  .main-nav a:hover span, .main-nav a:focus span {
    color: #5e6266;
  }
It is noted that there is some specific :focus styling, but this does not appear to be functioning, and there is little reason to make this different from the :hover styling.

• No text alternative provided (http://w3.org/brief/NDAw)
The community link image at the top of the footer section has no alternative text.
Suggestion: Add suitable alternative text.

• Header home link purpose is unclear from text. None of them are particularly well labeled: ‘w3c logo’, ‘cg logo’, and ‘Community & Business Groups Beta’.
Suggestion: If the W3C logo is to link to the w3.org page then the label should be more clearly specified as ‘W3C homepage’. There should only be one link to the community homepage, ideally wrapping the logo and the ‘Community and Business Groups’ header. In this case the logo alternative text can be set to null as the header would suffice.

• Toolbar is visually positioned at the top of the page and is fixed, but in the DOM it actually appears at the bottom. (http://w3.org/brief/Mzk4). This could be problematic there is important functionality in the toolbar and it may not be immediately apparent. The link ‘skip to toolbar’ arguably may not be sufficient as there is little that would suggest what ‘toolbar’ provides.
Suggestion: Move the toolbar to the top of the DOM and change the ‘Skip to toolbar’ to be ‘Skip to main content’.

• The toolbar link order is given right to left not left to right (http://w3.org/brief/Mzk4). This is similar to the above and will cause some difficulty for some users.
Suggestion: Reorder the toolbar links in the DOM to match the visually presented order.

• It is unclear why the community link image in the footer is marked up as an H1. This may not be an issue, it just seems a bit much for a simple link.

• Footer is marked up as <aside> rather than <footer> (closest is probably http://w3.org/brief/NDAx).
Suggestion: Use <footer> as it is a footer.

• Positioning of labels for the comment form is not ideal from a usability or accessibility perspective. This is only apparent when the user is not logged in.
Suggestion: Left or top align the labels.


Page specific issues

Community home page e.g. http://cgbeta.w3.org/community/odrl/

• It may not be apparent that the read more link has done anything on the page. This link reveals content above it but for screen reader or magnifier users this content may not be apparent. It is not clear what the purpose of this is in the context of the community group introduction. Most users would need to read this information, hiding it simply makes it slightly more work to find it.
Suggestion: In the case of this introduction text, remove the show/hide. Where show/hide is useful ensure that users are informed that new content will be made visible. Consider also how focus is handled. If content is made visible before the link then how will a screen reader or magnifier user find it? Using in page links can move focus to the newly revealed content.

• Final reports table is missing a column header (http://w3.org/brief/NDA0).
Suggestion: Add a suitable column header in.

• The chairs alternative text simply repeats the information following it and is arguably redundant.
Suggestion: Where a users image is show with their name immediately following it, the image should have empty alternative text.

• In the Tools for this group, the mailing lists only appear on hover (http://w3.org/brief/NDA2).
Suggestion: Make this list also appear when ‘Mailing lists’ receives keyboard focus.

Community participants page e.g.http://cgbeta.w3.org/community/odrl/participants

• The purpose of the sort links are not clear from their link text (http://w3.org/brief/NDA1) and sort direction may not be apparent.
Suggestion: Change the link text to be ‘Sort by name’, ‘Sort by organization’. Consider making the icon that shows sort direction into an image with appropriate alternative text.



Other things

I bumped into these issues as I was exploring the site:

• On the list of proposed groups (http://cgbeta.w3.org/community/groups/proposed/), if I click on ‘support this group’ the group content disappears. If I refresh the page by clicking on the ‘proposed’ link in the top left it appears again with a ‘You have supported this group’ in place of the button.

• There is something peculiar about the responsive sizes. If the viewport is between 1058 and 1140 there is a horizontal scroll bar.

• The stronger green for the ‘Create a community group’ button over the ‘Create a business group’ button seems to create more prominence for Community groups. Is this deliberate?

• Not sure if it was a feature or an issue, but when I log in I am able to get to the Wordpress back end via the toolbar. I am assuming that is as a result of my being a Team member.