Web Accessibility

PRESENTED BY CINDY BARRY, LITS

Presentation Overview: What is covered

» Library website (Cascade)

» WordPress blogs and websites

» Libguides

Presentation Overview: Making it happen

» Check list

» Images

» Headings

» Content

» Tables

» Hyperlinks

» Video and Audio

» Links to resources

Our Goal

» Our goal is to provide web content that meets or exceeds the W3C (WCAG 2.0) standard as well as Section 508 wherever possible.

“Syracuse University Libraries is committed to providing all SU students, faculty and staff equitable access to the library resources and services they require for their academic and research needs. The libraries provide a range of services for individuals who may require assistance or specific tools in order to access and use those resources and services.”

Testing tools

Add-on tools available in Firefox:

» WAVE Toolbar Run validator on the current page from the toolbar or menu option Checks most W3C (WCAG) criteria

» Fangs See what screen readers read in text format Right-click on any page and select View Fangs

Check list

» Images

» Heading Structure

» Content (font, colors)

» Tables

» Hyperlinks

» Video and Audio

Images: Alternative Text

Text Alternatives: Provide text alternatives for any non-text content

» All images, buttons, and image map hot spots have an appropriate, equivalent alternative text (Alt text).

» Use descriptive text, not just “image” or “photo.”

» Keep alternative text descriptive but brief between 5 and 50 characters.

» Must be unique text on the page. Can’t use “image” for every image.

» Don’t repeat what is already in the text of the page.

Images: Functional and Decorative

Functional Images» Some images are functional, which means they convey important information that is relevant to the

user.

» These images require an equivalent alt text description.

Decorative Images» Some images are decorative, which means they are displayed for purely esthetic reasons.

» These images should have a blank alt text so the screen reader will skip them.

Images: Functional Images

» Present information relevant to the visitor in the context of the page.

» May be used as a clickable hyperlink.

» May contain text such as a graphical heading that must be translated for screen readers.

Images: Functional Code

Functional images must contain a relevant text equivalent.

» HTML Code:

<img src=http://mysite.com/images/cat.jpg width=“500px” height=“300px”

alt=“Maine Coon cat”/>

Images: Decorative Images

» Can safely be ignored in the context of the page.

» Used for esthetics.

» Never part of a hyperlink.

» Part of site design such as background, bullets, horizontal lines, etc.

Images: Decorative Code

Purely decorative images can use a null (empty) alt tag.

» HTML code:

<img src=http://mysite.syr.edu/images/bullet.jpg alt=“”/>

Images: Adding the Alt Text

Bad alt text examples:

» None

» “Image”

» “Alt text”

Better alt text example:

» “Maine Coon cat”

Images: Long Description

» Long Description HTML tag can be used to describe complex images in more detail.

» The <longdesc> tag is not supported by many browsers and should be avoided entirely.

» Consider placing the description of your complex image in the text of the page instead.

Images in Cascade Server

Add alternative text to the image in the page, not on the image itself.» Alternative tag: This is required field.

» For decorative images, check the “This is a decorative image” checkbox.

Images in WordPress/Expressions

Add alternative text to the image on the page or post. » This field is set at not required, but must be completed.

» For decorative images, clear all text from this field. WordPress will take care of adding the null Alt text tag.

Images in Libguides

Add alternative text to the image in the box.» Always add alternative text to every image in the Alt Tag field.

» This field is set as not required, but must be completed.

» For decorative images, Libguides does not provide a way to denote an images as Decorative.

Images Accessibility

Missing alt tags is the number one accessibility issue

on our WordPress blogs and Libguides

and the easiest to correct.

When in doubt, use Alt Text.

Headings

» Use meaningful headings.

» Must be in hierarchical order from h1 to h6.

» Use the headings provided by the tool. Don’t make up your own.

» Use headings to group and organize your content for everyone.

Heading structure

» H1-Hx heading levels should be hierarchical. Do not skip levels.

Correct:

h1h2h2

h3h3

h2h3

h4

h2

Incorrect:

h1h3

h2h4

h3

h2h3

h5

Testing headings

» Using WAVE toolbar > Outline

Headings in Cascade» Every page template already has an h1 heading which is the page name.

» Begin your heading structure with h2. Do not use h1 headings.

Headings in Cascade: Setting

Headings in Libguides» Every page template already has an h1 heading which is the Page Title.

» Each box already provides the h2 heading using the Box Title.

» Begin each box with h2 or h3 heading.

Headings in WordPress

» H1 headings will always be the blog title.

» H2 heading will always be the page title.

» Since the h1 and h2 headings are already structured, begin each page or post heading structure with h2 or h3.

» Keep the hierarchy going within each page or post.

ContentDon’t make the visitor work to understand your content.

» Write clear, short sentences.

» Paragraphs should be maximum of 2-3 sentences long.

» “Chunk” content using headings, paragraphs, bullet points whenever possible.

» Use plain English and avoid unspecified acronyms and institutional nomenclature.

Which would you rather read?

This…We are here to help you with your research needs. We also have a lot of services available online. If you want to request a book on the library website, click here. It’s easy. To return a book, drop it off at the Circulation desk. You can renew a book online or in person. Be sure to renew before the book is due to avoid late fees. Fines and late fees are here. You can pay your fines at the BSO in Bird.

or this?Request a book online.

» Return books to the Circulation desk.

» Renew books online or in person at the Circulation desk.

» View fines and late fees.

» Fines and late fees can be paid at the Business Services Office (BSO) in Bird Library.

Fonts: Type, size, and colors

» Legible, web standard fonts such as Arial and VerdanaI like my funky font! Makes my page look great even though it’s hard to read.

» Font size no less than 10ptTiny font that no one can read.

» Use text colors appropriate for text and hyperlinks. I’m going to make my links really stand out. And my content, too!

Fonts: Backgrounds

» Do not apply background colors.

» Provide adequate color contrast between the background color and the foreground color.

» Do not override the website CSS.

I love colored backgrounds!

Lorem Ipsum! Lorem Ipsum!

Lorem Ipsum! Lorem Ipsum!

SUL Editorial Style GuideCheck out the Libraries Editorial Style Guide online

» Navigate to About > Departments > Communications > Editorial Style

» http://library.syr.edu/about/departments/Communications/editorial/index.php

Tables

There two types of tables used on web pages: Layout and Data

Layout tables

» Used for page layout in lieu of CSS formatting. Do not use.

Data tables

» Used to present tabular data, much like an Excel spreadsheet.

» Cells can be easily identified and mapped as headers, columns, and rows of data.

» Contact LITS for assistance in setting up accessible data tables.

Data tables: Getting assistance

» Data tables are complicated to set up properly!

» Is there another, simpler way to convey the same information?

» Contact LITS for assistance.

Hyperlinks: The link text

Rule #1: The visible part of the link (link text) must describe the link.Don’t make the visitor guess what the link is going to do.

» Bad examples: Visit Syracuse University Parking Services website here. See http://suevents.syr.edu/main.php?view=event&eventid=1393623700688 for info.**

» Better examples: Visit Syracuse University Parking Services website for parking information. See Carnegie Library Reading Room Dedication article.

Hyperlinks: Indicating linked document type

Rule #2: Document links should indicate the document type in the visible part of the link (link text).Visitors need to know if the link will open something other than a webpage.

» Bad examples: There is a PDF here for our room policy. Instructions for use

» Better examples: Read our Room Policy [PDF] Instructions for use [Word]

Hyperlinks: Opening

Rule #3: When to open the hyperlink in a new window.There are no hard and fast rules, just keep it consistent and considerate.

» Open in the SAME window if the link goes to a site where the content is controlled by Syracuse University Libraries EXCEPT for document links, full size image links, and email address links.

» Open in NEW window if the link goes to a site where the content is NOT controlled by Syracuse University Libraries.

» Open in NEW window for any email address link, any documents such as PDF, Excel spreadsheet or Word document, video/audio files, and for library databases and e-journals as to not disrupt the natural working flow through the website.

Hyperlinks: Open in the same window» Pages in library.syr.edu

» Libguides/Subject Guides

» ILLiad

» Classic Catalog

» Summon

» SUL News items

» SUL blogs

» Surface

Hyperlinks: Open in a new window» Any PDF documents

» Databases or e-journals the Libraries subscribe to

» Full size image files (where only the image is displayed)

» Word documents

» Excel spreadsheets

» Email address to anywhere

» Syracuse University websites

» External websites

Hyperlinks: Using Title field

Rule #4: Use HTML Title field for all links that open in a NEW window only.Tell the visitor where they are going if they click the link.

» Bad example: Click here for our room policy. What the screen reader gets: <p>Click <a

href=“http://library.syr.edu/room/policy.pdf”>here</a> for our room policy.</p>

» Better example: Read our Room Policy [PDF] What the screen reader gets: <p>Read our <a href=“http://library.syr.edu/room/policy.pdf”

target=“_blank” title=“Adobe PDF document opens in a new window”>Room Policy [PDF]</a> for our room policy.</p>

Video and Audio

» Provide a direct link to the video URL above the video window.

» The link should open in a new window and the Title field should read “Video opens in a new window” or something similar.

» Captioning should always be provided.

» Contact LITS for assistance with accessible video and audio.

Links to resources

» Syracuse University Library Editorial Style Guidehttp://library.syr.edu/about/departments/Communications/editorial/index.php

» ITS Technology and Accessibility http://its.syr.edu/accessible-tech/

» SU Libraries Disability Services http://library.syr.edu/services/getting_help/disability/

» W3C Web Content Accessibility Guidelines (WCAG) 2.0http://www.w3.org/TR/2008/REC-WCAG20-20081211/

Accessibility…it’s not as hard as you think.