title |
---|
Basic Page Iteration 1 Template |
This is the basic page template iteration 1.
A basic page is very flexible, and can be built piece by piece. In general, you should organize each page's structure based on order of importance. Break up text with a title and subheaders, use lists when possible, add images, and break up content into multiple columns, if it makes sense to do so. For legibility, body text should never run the full-width of a page. Break content into columns, add a sidebar, or add multimedia to make text more narrow.
Please ensure accessibility by testing the whole page, including these elements, in context.
Complex menus, sliders, dialogs, tab panels, etc. must all be built to support keyboard accessibility.
- About menu accessibility properties: http://webaim.org/techniques/aria/
For screen readers, links should make sense out of context. Place the distinguishing information of links at the beginning of a link.
- About link accessibility properties: http://webaim.org/techniques/hypertext/
Images must have text alternatives that describe the information or function represented by them. Be sure to specify the type of image.
- About image accessibility properties: https://www.w3.org/WAI/tutorials/images/
Button color contrast and font size is important. The button description should be descriptive. Be sure to specify the type of button (button, reset, submit).
- About button accessibility properties: http://webaim.org/techniques/forms/controls
- About button markup: https://www.w3schools.com/tags/tag_button.asp
Many concepts are communicated more effectively with the addition of illustrations, maps, charts, etc.
- About image accessibility properties: http://webaim.org/techniques/images/
This section is left intentionally blank and is for future consideration.
Anything special technical-wise will be shared here.