Web Accessibility 101 UW GAAD 2018 Anna Marie Golden IT Accessibility Specialist amgolden@uw.edu

General Guidelines Assistive technologies rely on a web page’s mark-up to relay content to users Use HTML elements semantically Use the correct element for the job and not for its appearance Use CSS for formatting Minimize the use of inline styles, especially sizing Can affect user’s ability to zoom web page for better visibility “visibility:hidden” and “display:none” hides content from ALL users, including assistive technology users

Heading Structure Provide an outline of a page’s content Visual headings marked-up as HTML headings Headings in order without skipping levels Starting with <h1> Only one <h1> heading per web page Not used for their visual appearance

Images Alt text for images that convey meaning Alt=“textual equivalent or image’s purpose” Assistive technologies relay alt text to users Not necessary to say, “photo of …” Null alt text (alt = “”) for decorative images Purely decorative and do not convey meaning Allows assistive technology to ignore the image Use text for text instead of images of text Linked images need alt text for link’s purpose

Lists Marked-up as lists Provides context Provides orientation ATs announce a list and how many items in the list Provides orientation Unordered list Order doesn’t matter Ordered list <ol> with list items <li> Order matters Definition/description list List of terms with a description of each term

Unordered List <ul> <li>cat</li> <li>dog</li> </ul>

Ordered List <ol> <li>cat</li> <li>dog</li> </ol>

Definition/description List <dl> <dt>cat</dt> <dd>feline animal</dd> <dt>dog</dt> <dd>canine animal</dd> </dl>

Links Link text Meaningful link text Make sense out of context Omit the use of target attributes e.g. target=“_blank” It is best to let users decide where links will open

Color Contrast Meaning Adequate contrast between foreground and background Meaning Avoid conveying meaning through color alone Provide a backup

UW Web Accessibility Resources UW’s Accessible Technology website http://www.washington.edu/accessibility/ Developing Accessible Websites http://www.washington.edu/accessibility/web/ Anna Marie Golden, IT Accessibility Specialist amgolden@uw.edu Feel free to contact me anytime with your accessibility-related questions

Web Accessibility 101 UW GAAD 2018 Anna Marie Golden IT Accessibility Specialist amgolden@uw.edu