1. Web Accessibility June 2, 2016 Evaluation and Workflow

2. W3C Web Accessibility Initiative We’ve adopted the W3C Easy Checks –“These checks cover just a few accessibility issues and are designed to be quick and easy, rather than definitive. A web page could seem to pass these checks, yet still have accessibility barriers.” –https://www.w3.org/WAI/eval/preliminaryhttps://www.w3.org/WAI/eval/preliminary

3. Accessibility Initiative In order to meet its values of diversity and inclusiveness, the University of Massachusetts Amherst is committed to making its website accessible to all. Providing Equal Access –All UMass Amherst websites are required to make best efforts to ensure that information is equally accessible for everyone. Websites must comply with the following easy checks to ensure equal access.

4. Accessibility Easy Checks Page Title The Page Title is the first thing a screen reader says upon loading a web page, the description visible in browser windows and tabs, and the title that appears in search engine results. –Titles should describe the content of the page and be unique within the site. –Titles are "front-loaded" with the important information first. –Example: Page Title | Site Name | UMass Amherst Alt Text Text alternatives convey the purpose of images when they cannot be seen. –Image's conveying useful information need alternative text. –Decorative images alt text can be left empty. –Example:

5. Headings Headings are used to identify and separate sections of information on a page. –Headings must be marked up accordingly so all users can benefit equally. –Heading levels must have a meaningful hierarchy of conceptual content beginning at Heading Level 1 and cascading down. –Example: comes first, followed by then etc. Color Contrast Colored elements must have a sufficient contrast ratio when used together. –High contrast is required by some people with visual impairments (dark text on a light background). –A contrast ration of 4.5:1 is required for normal text (14 point and larger) and 3:1 for text 18 point and larger. –Use freely available color contrast checkers: webaim.org/resources/contrastchecker/

6. Resize Text Give users the ability to change the text on a page in order to better read it. This includes changing the font, line height, line spacing etc. –Browsers allow changes to text, but all websites should start at font size 100%. –Web pages should be designed so they are usable when text size is increased. –Example: Use text-only zoom on your browser (200%) and ensure that text doesn't disappear, cut off, or include horizontal scroll bars. Keyboard Access and Visual Focus Necessary for users that cannot rely on a mouse to navigate a website. –All content and functionality must be accessible via keyboard. –Keyboard focus must be visible and should follow a logical order through the page elements. –Example: Check that you can tab to all the elements, including links, form fields, buttons, and media player controls.

7. Forms, Labels and Errors Appropriate Labels, keyboard access, clear instructions, and effective error handling are important for the accessibility of forms. –Forms should be usable via the keyboard, voice input, and screen readers. –Forms controls must be labeled using 'label', 'for', and 'id'. –Error messages should be displayed before the form, rather than after the form. –Use WAI Labels Checks https://www.w3.org/WAI/eval/preliminary#labelscheckshttps://www.w3.org/WAI/eval/preliminary#labelschecks Multimedia Alternatives Alternative formats are necessary to make content accessible to everyone. –Auditory and Visual media should include subtitles (captions) and transcripts. –Audio should not start automatically (including video’s) when a page loads. –Auto captioning on sites like YouTube is not always adequate, a complete transcript should be uploaded along with the any video.

8. Basic Structure Check A basic structure is necessary for users of assistive technology. Content should be available without images, styles, or layout. –Columns, sections, colors, and other visual aspects that organize a page's information are only available to users who can see them. –Check that the information on a page makes sense when images, style sheets and scripting languages are removed. –Check that blocks of information have clear headings. Beyond the Basics For a more comprehensive approach, please refer to Techniques for WCAG 2.0. –www.w3.org/TR/WCAG20-TECHSwww.w3.org/TR/WCAG20-TECHS

9. Compliance Testing We encourage everyone to utilize the following free online tools: Web Accessibility Evaluation Tool: wave.webaim.orgwave.webaim.org Illinois Functional Accessibility Evaluator 2.0: fae20.cita.illinois.edufae20.cita.illinois.edu Cynthia Says for 508 and WCAG 2.0: cynthiasays.comcynthiasays.com AChecker for 508 and WCAG 2.0: achecker.caachecker.ca Fangs Screen Reader Emulator for Firefox: addons.mozilla.orgaddons.mozilla.org AInspector Sidebar for Firefox: ainspector.github.ioainspector.github.io Color Contrast Checker: webaim.org/resources/contrastcheckerwebaim.org/resources/contrastchecker

10. Accessibility Work Flow Define your standards criteria –Web Accessibility Easy Checks –Web Content Accessibility Guidelines (WCAG 2.0) –Section 508 Compliance “…access to information that is comparable to access available to others.” Choose your evaluation tool or tools –Web Accessibility Evaluation Tool –Illinois Functional Accessibility Evaluator 2.0 –Cynthia Says –Achecker –Etc…

11. Identify appropriate pages for accessibility review –Start with the Front page and a basic page. –Make a note of any unique pages that utilize different layouts or content types. Begin testing –Test your Front page with your preferred evaluation tool. –Familiarize yourself with the chosen tool to discover how it can help you. Each tool is different and comes with strengths and weaknesses. Document everything –Before you start to address any errors or warnings, create a document to track the progress of your evaluation(s). –Document the results of your first evaluation of the page, good and bad. –Identify solutions and make a note of any issues that should be discussed at a higher level.

12. Begin making changes –Start with the easiest fixes utilizing the solutions you previously documented. Often times the small fixes can resolve larger issues. –Re-run the evaluation tool after updating each item. –Document each completed task when an issue is resolved. Complete the process with the first evaluation tool –Make a note of any items you were unable to fix. –Identify any errors that you don’t agree with and document why. –Move on to the next evaluation tool if you’ve chosen more than one. If you’ve decided to use more than one evaluation tool it’s best to evaluate the Front page with all of the tools before moving on to the next page.

13. Next steps –After you’ve completed testing and fixing the Front page with all of your chosen evaluation tools, you can follow the same process for the basic page and any additional pages you’ve chosen. –Resolving issues on the Front page will likely resolve a great deal of issues on the remaining pages, so it should be progressively easier to evaluate the remaining pages. Debrief –Meet with interested parties to discuss any issues that arose during the review. –Discuss any errors or warnings that need to be decided at a higher lever Example: Links opening in new tabs –Document any issues that you plan to ignore or table with clear reasoning and evidence explaining why.

14. Final thoughts Web accessibility is no easy task, but it is a worthwhile goal to achieve. The process can be very time consuming and is a continuous effort because of the ever evolving landscape of the web. A little goes a long way, even beginning work on the Easy Checks can make a difference for someone that previously couldn't access your site.

15. Contact Information Bill Leahy Web Designer/Production Manager University Communications 413-545-9308 leahyw@umass.edu Questions Feel free to ask me any questions.