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) [3].
• 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  [4]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. [5]

• Provide a contrast ratio for the color of text and its background color of 4.5:1 for font sizes below 18 points.
• If the font size is large (greater than 18 points) the contrast ratio should be 3:1 or more.
• Provide text that is still readable when zoomed in 200%. Zoom in to this level and then shrink the page to a very narrow width. The text should not break.
• When color is used to convey meaning, a second method must also be used. For example, use a shape and color.
• Color along should not be used to identify a link.

Test the color contrast using the Web AIM Color Contrast Checker [6] or Check My Colours [7].

Images

Make sure all images and form buttons have associated descriptive text. Screen reader technology cannot automatically convey the meaning of an image. The ALT attribute is used for this purpose, and the creator must provide this information. The ALT attribute information is also used when an image cannot be displayed properly. If you wonder if you need to add information in the ALT attribute, or what information to put there, ask yourself “What text would I provide if I did not have this image or the image was missing?” A full explanation of uses of ALT attribute is provided by Webaim.org [8]

• Describe an image with meaningful content using the ALT attribute within the IMG HTML element. Name the item(s) in the image. Do not use the phrase “image of.” However, you may wish to specify “painting,” “photograph” or other genre if this is important.
• As shown below, when you upload an image in Yalesites, an entry element will open prompting you to enter the "Alternate Text." This will populate the ALT attribute.

• Leave ALT attribute blank for a purely decorative image with no meaning and no link to other material. 

Video and Audio

When inserting video or audio files on your online resource you must

• Provide a full text transcript of video and audio.
• The transcript and video/audio should be synchronized.
• Provide captions synchronized to the audio of the video, including video with no audio content (to describe the action).
• Provide means to stop, pause and adjust volume of video and audio.

These guidelines were adapted from Webaim Checklist. [5]

The purpose and ultimate destination of links must be clear from the text of the link itself or the link text and the text immediately around it.

• Do not use ambiguous wording such as "click here." Rather, include what the action will do, such as "download the 2015 report."
• In a single page do not provide links labeled with the same text that go to different places.

Many of the following form accessibility guidelines are taken care of automatically when using YaleSites forms.

• Put instructions at top of form.
• Describe any form button using ALT attribute. For example, if a magnifying glass is used with a search box, you might use "submit search."
• Give any input a text LABEL value with a matching INPUT ID value. This is done for you in YaleSites.
• The LABEL and INPUT field must be close together with little white space between (YaleSites does this). 
• Group together related form elements.
• Ensure that the user can page through all elements using the keyboard only (YaleSites does this).
• Write informative labels on forms.
• Mark required fields clearly (YaleSites uses the red asterisk).
• Provide a summary of entry errors at the top of the form after submission (YaleSites does this).

Test the form by moving through it with the keyboard only (do not use the mouse). You should not get stuck in any one element and should be able to move from one entry to the next. In YaleSites, this should not be a problem.

These guidelines were adapted from Webaim Checklist. [5]

• Ensure a user can move around to all elements of the page using only a keyboard.
• Make it visually apparent where the keyboard control is at any time.
• Make all page functionality available using a keyboard as alternative to the mouse.
• Provide a "skip navigation" command. This is done for you in the library's YaleSites pages.

External Resources for Testing and Understanding Accessibility Issues

• Test the color contrast on a web page to ensure that text is readable for the widest range of users: Color Contrast Checker [6]
• Test the semantic markup to ensure that the meaning of the page will render well in a screen reader: Web Accessibility Evaluation WAVE [9]
• There are browser specific tools that can aid accessibility reviews, such as the Chrome Plug Ins for Accessibility  [10]and Firefox Accessibility Toolbar [11]. These are more useful for web developers than editors. 
• Check how your page will sound on a screen reader. Try NVAccess [4], a free screen reader. 

Web Pages

Using YaleSites and LibGuides as designed should ensure that your web page is accessibility. When you create a web page using one of these resources check that 

• The page title is meaningful.
• Every image or form button has an ALT tag. The ALT tag should convey the meaning and content of the image. The exception to this rule is if the image is purely decorative, in which case do not provide an ALT tag.
• The page is divided into meaningful segments using headings 3 and 4, and bulleted or numbered lists (applied through the page editor).
• Non-English language is marked with the correct language tag.
• Do not alter the color scheme of the default text and the default background color. 
• Make sure color contrast is a minimum 4.5:1, or if large text (14 pt and larger) a minimum contrast ratio of 3:1.

Video/Audio

• When creating a video or audio provide a synchronized transcript. 

Test the Page

• Try to run through the page using only the keyboard by tabbing through the page elements. You should be able to access every element on the page.
• Try increasing text view 200% and make the page dimensions much smaller. Text should not "break" and the display should still work. 
• Run the page through the WAVE tool [9]to identify markup problems. 
• If you've changed colors, make sure that there are no color contrast issues by using a color checker such as the WebAIM Color Contrast Checker. [6]