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:

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:

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 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: h1 h2 h3 h2 h3 h4 h2 Incorrect: h1 h3 h2 h4 h3 h2 h3 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.

Content Don’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

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!

SUL Editorial Style Guide Check out the Libraries Editorial Style Guide online » Navigate to About > Departments > Communications > Editorial Style »

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 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 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 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 » 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: Click here for our room policy. » Better example:  Read our Room Policy [PDF]  What the screen reader gets: Read our Room Policy [PDF] for our room policy.

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 Guide » ITS Technology and Accessibility » SU Libraries Disability Services » W3C Web Content Accessibility Guidelines (WCAG) 2.0

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