|
Design Tips | Questions & Answers | Resources
Design Tips
Alt Attribute
Providing text alternatives for images via the alt attribute of the image tag has become common accessibility practice. But what exactly should be included in the "alt" attribute?
- If the image is used for decoration and is not significant for the content, leave the attribute empty: alt="".
- If the image is used for some function, use a corresponding function
word: alt="next" or alt="submit".
- If the image contains text, include this text: alt="University of Tennessee".
- If the image is used for visual illustration, include the text that conveys the meaning of the image.
- If the image contains additional information, for example, a chart, a graph, or a map, include its short description in the alt attribute and provide a link to the longer text description.
Here are some resources for further reading.
Avoid "Click Here" Links Avoid creating a link with the text "Click here". Such text does not indicate the subject of the link and it implies that you have created a web page only for users with a mouse device. Read articles below to learn more about naming and other techniques for creating a hypertext link.
Data Tables
- Mark up data cells with a <td> tag and header cells with a <th> tag.
- In simple data tables, mark up the table headers with the scope attribute to associate headers with appropriate columns or rows.
- In complex data tables with spanned rows or columns (for example, a header has two sub-headers), give each header a unique id attribute. Then, add the ids of appropriate header cells to the header attributes of data cells.
- Specify the width of the data table as percentage rather than in pixels.
- Give a title to the data table. Add a <caption> tag, immediately after the opening <table> tag. For example: <table> <caption> Table's Title </caption>..
- Provide a brief summary of data in a data table. Add the summary attribute to the table tag <table summary="">.
- Since most popular screen readers don't read complex tables with spanned cells well, try to create tables without spanned rows or columns.
- If the table is long, group rows into table head and table body sections using the <thead> and <tbody> elements. In this way, if long tables are printed, the table head information may be repeated on each page that contains the table.
Find examples and more information on data tables below:
Font Size
Design tip: Use relative or default font size.
The general rule for formatting a web page is to separate the content from its presentation. Build the web content using structural HTML tags. Then create a style sheet to specify font size and other attributes for structural elements of the web page.
Don't set the size of the text in fixed, absolute units (for example, pt). Absolute length prevents users from adjusting the font size in their browsers.
When specifying font size in relative units (for example, % and em), don't go below 85%. What looks good on your computer may turn out considerably smaller on somebody else'. Different browsers and platforms display text differently.
The best option would be not to specify the font size at all, especially for the main text, and to develop a flexible layout of the web page. Here is more reading about font size.
Layout Tables
Even though cascading style sheets (CSS) become increasingly popular to create the layout of a web page, layout tables are still widely used. Layout tables may be fully accessible by people with disabilities if a few rules are followed:
- Keep in mind that screen readers ignore table formatting and read the content in a linearized order that is in the order that it appears in the code
- Ensure that the linearized reading order matches the visual reading order. There are a few ways to check whether the reading order of the content of the table makes sense, for example:
Test the web page with Wave http://www.wave.webaim.org/index.jsp;
Test the table in Opera, a free downloadable browser http://www.opera.com/ by disabling tables in that browser;
Test the page with Web Accessibility Toolbar for Internet Explorer 5+; and Web Developer's Toolbar for Mozilla Firefox, or
View how the table looks in Lynx, a text browser http://www.delorie.com/web/lynxview.html.
- For layout tables, use only the most basic tags: <table></table>, <tr></tr>, and <td></td>. Do not use formatting markup (for example, table headers <th>) in layout tables.
- Avoid designing layout with complex nested tables.
- See if you want to use table trick described at http://www.apromotionguide.com/tabletrick.html
- and finally, consider using CSS for layout instead of tables.
Find more information on designing accessible layout tables at:
Lists (Using Lists for Menus)
Online Forms
- Keep the form clean and simple.
- Don't clutter the form with too many instructions. If necessary, provide a link to a separate help file, use a JavaScript alert, or add titles to input elements.
- Build the form in such a way that the visual order of form elements corresponds to their order in the HTML code.
- Associate the labeling text with form inputs using the <label> tag. All form inputs except buttons should have labels associated with them.
- If the label is not adjacent with the form input (separated by a table cell, for example), use <label for="id"> tag for the labeling text and "id" attribute for the form control.
- Place labeling text for radio buttons and checkboxes after these input elements. In all other instances, labels should go before the form input elements.
- Use <fieldset> tag to logically group form inputs that fall into one category. Name each fieldset using the <legend> tag.
- When using image for a button, include the Alt attribute for the alternative text.
- Do not code the form in such a way that the form is submitted when user makes a selection. Let the user control the form submission.
More Information on Creating Accessible Forms
Accessible Form Validation
Accessibility of PDF
Portable Document Format (PDF) became a typical format on the Internet. Reports, articles, newsletters, guidelines, forms, and other PDF documents are placed on educational and governmental websites. But can all visitors access them? To be accessible to standard screen readers, tagged PDF files should be created. In addition, an accessible HTML version should accompany a PDF document. Find below more information on the issue and guidelines on improving the accessibility of PDF files.
Skip Navigation Link
If a web page contains a lot of links before the main content, provide a method of skipping the top navigation. The following articles offer a variety of techniques; choose the one that works for you.
Use Heading Tags and List Tags to Structure the Content
A sighted user gets a gist of the web content by scanning the web page visually. For a person who uses a screen reader, the best way to get a quick idea of what the content contains is to tab though the headings, subheadings, and lists of the web page. Therefore, it is important to mark the content with the appropriate HTML tags. Here are a few rules to remember.
- Organize the content: create headings, subheadings, and lists.
- Mark up headings and lists with the HTML tags (h1, h2, ul, etc.) that reflect the hierarchical organization of the content.
- Define the format of HTML tags in a cascading style sheet.
Resources
Web Page Layouts Built with CSS
Use the following web sites to study a CSS-based layout.
|
|
