Difference between revisions of "Web Accessibility:Layout and Structure"
Jump to navigation
Jump to search
| (13 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| + | {{Web toc:Access}} | ||
| + | HTML tables are container elements for presenting tabular data in a grid format. As tables can also provide a way to control the placement (alignment and position) and layout of content objects on the web page, they soon evolved into the primary layout tool for web pages to control and manage the visual aesthetics of all types of content. | ||
| + | |||
| + | The recommended design construct is to separate presentation from content using CSS for layout, however carefully designed layout tables, when used judiciously, can be a very useful tool for page layout to address browser compatibility and other issues. | ||
| + | |||
| + | '''Below you will find a list of recommended best practices that will make your web pages more accessible:''' | ||
| + | |||
| + | ---- | ||
| + | |||
*Separate presentation layer from the structure. When possible use Cascading Style Sheets (CSS) to control the visual appearance of a page. | *Separate presentation layer from the structure. When possible use Cascading Style Sheets (CSS) to control the visual appearance of a page. | ||
| − | *Do not use structural elements for presentation and layout. For example using heading <h> tag to enhance text; list <li> tag to indent text; text area input <textarea> element for text inset. | + | *Do not use structural elements for presentation and layout. For example using heading <h> tag to enhance text; list <nowiki><li></nowiki> tag to indent text; text area input <textarea> element for text inset. |
*Use CSS and <nowiki><div></nowiki> tag or <iframe> to create a text inset. | *Use CSS and <nowiki><div></nowiki> tag or <iframe> to create a text inset. | ||
*Use <title> element in the <head> section of the page to identify the contents of a page. Browsers expose this information to assistive technology and the user can identify the page. | *Use <title> element in the <head> section of the page to identify the contents of a page. Browsers expose this information to assistive technology and the user can identify the page. | ||
| Line 6: | Line 15: | ||
*Avoid using Frames for layout. Frames divide a web page into multiple, scrollable regions each with its own content source. Frames can be very disorienting to screen readers especially when content in one frame references content in another. | *Avoid using Frames for layout. Frames divide a web page into multiple, scrollable regions each with its own content source. Frames can be very disorienting to screen readers especially when content in one frame references content in another. | ||
*Avoid opening new windows or "pop-ups". New windows destroy user browsing history preventing them from using the "back" button to return to the source page. If new window is opened identify the target window using target ="name" and provide a mechanism to easily return to original location on source page. | *Avoid opening new windows or "pop-ups". New windows destroy user browsing history preventing them from using the "back" button to return to the source page. If new window is opened identify the target window using target ="name" and provide a mechanism to easily return to original location on source page. | ||
| + | |||
| + | ---- | ||
| + | '''Resources''' | ||
| + | |||
| + | [http://css.maxdesign.com.au/] Tutorials on Layout-Maxdesign | ||
| + | |||
| + | [http://css-discuss.incutio.com/?page=FontSize] How do I size fonts? | ||
Latest revision as of 12:46, 18 December 2006
HTML tables are container elements for presenting tabular data in a grid format. As tables can also provide a way to control the placement (alignment and position) and layout of content objects on the web page, they soon evolved into the primary layout tool for web pages to control and manage the visual aesthetics of all types of content.
The recommended design construct is to separate presentation from content using CSS for layout, however carefully designed layout tables, when used judiciously, can be a very useful tool for page layout to address browser compatibility and other issues.
Below you will find a list of recommended best practices that will make your web pages more accessible:
- Separate presentation layer from the structure. When possible use Cascading Style Sheets (CSS) to control the visual appearance of a page.
- Do not use structural elements for presentation and layout. For example using heading <h> tag to enhance text; list <li> tag to indent text; text area input <textarea> element for text inset.
- Use CSS and <div> tag or <iframe> to create a text inset.
- Use <title> element in the <head> section of the page to identify the contents of a page. Browsers expose this information to assistive technology and the user can identify the page.
- Minimize using tables for layout. When used, limit them to simple tables and ensure that the read order of the cell content can be linearized. Tables increase the size and footprint of the page and they are not easily maintained.
- Avoid using Frames for layout. Frames divide a web page into multiple, scrollable regions each with its own content source. Frames can be very disorienting to screen readers especially when content in one frame references content in another.
- Avoid opening new windows or "pop-ups". New windows destroy user browsing history preventing them from using the "back" button to return to the source page. If new window is opened identify the target window using target ="name" and provide a mechanism to easily return to original location on source page.
Resources
[1] Tutorials on Layout-Maxdesign
[2] How do I size fonts?