Universal Design Goal
Become comfortable with incorporating both Emerging and Developing Steps into your workflow in order to meet universal design goals for web content.
In the text editor, use the Paragraph drop-down menu to select heading levels.
Select the link text, then click on the Insert/Edit Link icon.
Click on the Settings button to get more Link Options.
In the Link options window, enter the destination URL and the descriptive link text in the appropriate fields. Once these are both added, click Update to apply changes.
Using the Media Library
To add alternate text in WordPress, click on the image in the Media Library and edit the Alt Text field.
Coding in HTML
When editing HTML code directly, include the alt attribute (“alternative text”) for all images. The alt attribute is added after the path to the file:
- Example: <img src=”file-name.jpg” alt=”Descriptive text goes here.” />
Alt text should describe the meaning of an image rather than its appearance. For example:
- Poor: <img src=” lab_sign.gif” alt=”Sign hanging on lab door.” />
- Better: <img src=”lab_sign.gif” alt=”Each laboratory has safety policies posted on the door.” />
Purely decorative images (graphics that convey no information), require a “null” or “empty” alt attribute. The null attribute is a signal to screen reader software that the image is unimportant and can be skipped. Use this with caution – ensure that the image truly is only decorative.
Example: <img src=”spacer.gif” alt=”” />
Table Header Row
- Use tables for tabular data only, not as a framework for page layout.
- Keep tables as simple as possible, and try to avoid nesting tables inside one another.
- Add captions to tables using the <caption> tag. A caption will typically provide an adequate summary of the table’s contents. Complex tables may need a more detailed explanation using the <table> tag’s “summary” attribute.
- In the header row of the table, replace <td> (table data) tags with <th>(table header) tags to indicate the special function of those cells as column labels.
Visit Color Contrast Tools page for methods of checking the colors on your site.
Video Player and Captions
- Use a video player that can be controlled using a mouse, a keyboard and a screen reader
- Use a video player with visible controls to toggle captions
- Provide accurate captions for videos and accurate transcripts for audio files
- Provide audio description for videos
For available captioning solutions, visit Video Captions page.