Organization
A sighted user of a web page can quickly scan the entire page. Someone using a screen reader will hear a linear rendering of the page, one part at a time. Semantic markup is an important part of making the screen reader translation meaningful. You want to insure that the flow of the page as rendered in a reader will make sense, and present the page in a way that enables someone using a screen reader to quickly move through all the content, choosing that content they are interested in.
- Give a descriptive and informative title for the web page
- Organize content with headers and lists, using semantic markup. If you use the editor tools in Libguides and YaleSites semantic markup will be applied when you select text and then apply the appropriate header format. Headers 1 and 2 are reserved, so your hierarchy should start with header 3.
- Include the most meaningful content at the beginning of all paragraphs and links.
- Provide a logical flow of text and navigation through the page.
- Provide a way to skip repeated content. The library's web site contains such a skip navigation command automatically.
- You can test your semantic markup using WAVE (web accessibility evaluation tool).
- A useful test for organization is to listen to your web page as it would render in a screen reader. One free one is NVDA. You may download NVDA for free from NVAccess.
Data Tables
- It is important to differentiate layout tables and data tables. Commonly you will use a table to present some type of data. We discourage the use of layout tables as a design element.
- For data tables, associate columns and rows with headers in tables.
- Include a caption for the table. When using the insert table function in the YaleSites editor you will be prompted to enter a caption.
- Keep data tables simple and avoid nested tables.
Understandable Content
- Material on the library web site is generally in English. This is indicated for you automatically by YaleSites' use of the lang attribute and you do not need to indicate the language. When a different language is included within the page use a block attribute ( example <blockquote lang=”es”>)
- Spell out an abbreviation the first time it is used.
These guidelines were adapted from Webaim Checklist.