Optimal Content Examples - nschonni/wet-boew GitHub Wiki
The focus of this project is to provide optimal examples for various types of Web content to help Web developers to make their Web content accessible, usable and interoperable.
- WxT CodeFest Page: https://github.com/wet-boew/wet-boew/wiki/WxT-CodeFest-Collaborative-Activities#wiki-Optimal_Content_Examples
In particular the forms page need some work:
- The radio buttons don’t seem to be grouped together like they should. See the following for how they should be presented: http://jquerymobile.com/demos/1.1.0/docs/forms/radiobuttons/. Most likely the < br / > are causing the problem so you should use CSS (e.g., display: block) to achieve the same effect without messing up jQuery Mobile (see Feedback form for how we did it with checkboxes).
- I noticed that the how form errors are handled is not consistent with Form validation. Could you please align you example and guidance with Form validation?
- Some of the fields such as phone number and postal code don’t render well in mobile. Do they need to be split up? The postal code looks terrible in mobile view and really should just be one field (same for phone number). We should ensure good results in both desktop and mobile view without any significant changes to the markup.
Under "Images" section
- If there is a sufficient caption underneath an image, I think that it's fine to have empty alt text. I think Mark, Cynthia and I were discussing this at one point. See 2. Simple images.
- In the table under 2. Use of colour, you say for charts and graphs "Use pattern shading, provide a supplementary data table, or use text labels on the chart or graph.". Pattern shading shouldn't be used just to convey information. There has to be some sort of alternate text.
Under "Forms" section
- Dont necessarily need title attribute if you have a proper label for the form element. You can have a form element without a label; you just need title text.
- Under instructions: Mention that these instructions should be supplied before the related form element.
- Maybe mention that page titles should reflect the < h1 > ?
- Maybe mention that you should not have the same link text for two links that go to the different pages.
Under quotations section
- Maybe mention that just because text is in quotations, doesn't mean it has to be in a < q > tag. It might be in quotations for emphasis. When I was working at NRCan, people seemed to have trouble wrapping their minds around that.
Provide an example of a complex table with ids and headers...
Depreciated HTML5
Since it seems the new WET template is done in HTML5, it might be a good idea to mention depreciated elements... like name (outside forms and stuff).
(from Maddy Daigle)