Web Accessibility Training Overview What Why How Demo

Web Accessibility Training • Overview - What? Why? How? • Demo of WAVE Tool • Demo of WYSIWYG Editor • Hands-on Accessibility Check (time permitting)

What is Web Accessibility? Web accessibility is the inclusive practice of making websites usable by people of all abilities and disabilities. 1 billion (~15%) of the world’s population has a DISABILITY

The Major Categories of Disability Types Are: • Visual • Hearing • Motor • Cognitive

How do People Interact with the Web? Perception a. Visually (looking at the screen) b. Screen reader c. Refreshable braille device d. Screen Magnifier Input and Navigation a. Mouse b. Keyboard c. Speech input software d. Adaptive keyboard e. Mouth stick

Why Create Accessible Websites? 1. To improve the lives of people with disabilities. It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with disabilities. 2. Because we care and want to be inclusive, and it’s the right thing to do in keeping with USF's Jesuit mission. 3. It’s the law. State and federal law require that we do not discriminate against people with disabilities.

How to Make USF Websites Accessible USF's web editors incorporate web accessibility techniques into their development process, and strive to adhere to the industry standard Web Content Accessibility Guidelines (WCAG 2. 0 AA). For Information about Digital Accessibility and Web Accessibility Standards https: //myusf. usfca. edu/digital-accessibility

my. USF Accessibility Standards Site

Practical Techniques to Make Your Pages Accessible

Alternative Text (alt text) for Images A screen reader will announce the alt text whenever it encounters an image. For example, if our alt text for this image is “George Washington” a screen reader will announce that.

Adding Alt Text

Determining Appropriate Alt Text Adding alternative text to images is one of the easiest accessibility principles to learn and one of the hardest to master. There is often more than one acceptable answer as to what can be used as alt text.

The Alt Attribute Should Typically: • Be accurate and equivalent in presenting the same content and function of the image. • Be succinct. Typically no more than a few words are necessary. • NOT be redundant or provide the same information as text within the context of the image. • NOT use the phrases "image of. . . " or "graphic of. . . " to describe the image. It usually apparent to the user that it is an image.

Does the image have a function (usually applies only if the image is within a link)? This printer icon is within a link and clicking it prints the page. • Would it be appropriate to use “Printer” for the alt text? • Does the link have a function? • What might be appropriate alt text?

Is the image described in the surrounding text? If the content that the image conveys is presented within text in the surrounding context of the image, then an empty alt attribute (alt=””) may suffice. George Washington

Avoid Using Images of Text Why avoid images of text? • Potential contrast issues. • Potential unclear text when resizing. • Screen readers and search engines can’t read it. Text in a logo, with appropriate alt text is acceptable. If you do use an image with text, ensure that the text is included in the alt text.

Examples of Text Images Is it appropriate for Google to use this for a logo? What would be appropriate alt text?

Examples of Images with Text Is this image the best choice? What would be appropriate alt text?

Questions About Alt Text?

Provide Logical Heading Order and Content Structure Headings, lists, and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page.

Headings and structure example

Headings Use appropriate tools in the WYSIWYG (Headings, lists, etc. ) • Level 1 headings (<h 1>) Page Title • Level 2 headings (<h 2>) Major Sections • Level 3 headings (<h 3>) Sub-sections of <h 2> • Avoid skipping heading levels, for example <h 1> to <h 4> • Headings should be ranked in order (<h 1 to h 6>)

Using Headings

Lists • Unordered (bullets) • Ordered (numbered) • Lists should never be used for merely indenting or other layout purposes. • Use the WYSYWIG to create lists

Questions About Heading Order and Content Structure?

Meaningful Link Text Unclear: • Click Here to see today's weather. • More Info about web accessibility. • Read More about building websites in Drupal. Clear: • Today’s weather • Learn about web accessibility • Building websites in Drupal

Avoiding Redundant Links Avoid using redundant links that go to the same destination. George Washington

Provide Transcripts and Captions for Videos and Other Media • Who benefits? • Transcripts and captions are required for most audio and video media. • Formatting transcripts. • Where do we put the transcript? (in-page, link) • How to create captions? Resources: (3 rd party, You. Tube)

Caption Example

Questions About Captions and Transcripts?

Sufficient Color Contrast Web & Digital Communications has implemented color changes on the website to compliant with color contrast.

Questions About Color Contrast?

Don’t Rely on Sensory Characteristics • “To the left of the picture of the student” (Spatial relationships) • “Click the small image” (Size) • “At the bottom of the second column” (Position) • “Required fields in red” (Color) • “Listen for the bell” (Sound)

Questions About Sensory Characteristics?

Tables • Tables should be used for tabular data and not for layout • Include a caption • Use headers • Use scope

Making Tables

Non-HTML Docs: PDF Files, Word and Power. Point Presentations • We are currently investigating methods to assist with making compliant PDF files. More to come. • Avoid using PDF files when possible. Use HTML pages instead. • Contact Web Services for more info.

Techniques for Testing Web Accessibility wave. webaim. org Let’s audit a few recent events.

Questions? Please sign-in on the registration sheet to confirm that you have attended this training. Thank you for attending!