Web Accessibility – myUSF Editors Welcome and thank you all for coming . So who has already attended a calendar or news training

Plan for Today Web Accessibility Overview How to make myUSF Websites Accessible Hands on exercise with myUSF Pages

What is Web Accessibility? Web accessibility is the inclusive practice of making websites usable by people of all abilities and disabilities. Web accessibility encompasses all disabilities that affect access to the web, including visual, auditory, physical, speech, cognitive, and neurological disabilities. 1 billion (~15%) of the world’s population has a DISABILITY

The Major Categories of Disability Types Are: Visual: Blindness, low vision, color-blindness Hearing: Deafness and hard-of-hearing Motor: Inability to use a mouse, slow response time, limited fine motor control Cognitive: Learning disabilities, distractibility, inability to remember or focus on large amounts of information. When we’re building web pages, we need to keep all of these in mind.

How do People Interact with the Web? Perception Visually (looking at the screen) Screen reader Refreshable braille device Screen Magnifier Input and Navigation Mouse Keyboard Speech input software Adaptive keyboard Head pointer Mouth stick Alternative reasons 4.      The Web is an increasingly important resource in many aspects of life: education, employment, government, commerce, health care, recreation, and more. It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with disabilities. An accessible Web can also help people with disabilities more actively participate in society. 5.      The Web offers the possibility of unprecedented access to information and interaction for many people with disabilities. That is, the accessibility barriers to print, audio, and visual media can be much more easily overcome through Web technologies.

Why Create Accessible Websites? 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. It’s the law. State and federal law require that we do not discriminate against people with disabilities. Alternative reasons 4. The Web is an increasingly important resource in many aspects of life: education, employment, government, commerce, health care, recreation, and more. It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with disabilities. An accessible Web can also help people with disabilities more actively participate in society. 5.  The Web offers the possibility of unprecedented access to information and interaction for many people with disabilities. That is, the accessibility barriers to print, audio, and visual media can be much more easily overcome through Web technologies.

So How do you Make USF Websites Accessible? It’s a mix of what web developers can do, and what content editors can do. 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 WCAG provides an extensive list of requirements to make websites accessible. There are 3 levels: A, AA, and AAA, and we strive for at least AA. AAA has a high impact on design, and attempting to achieve it is not necessarily recommended by the governing bodies: “It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.” So essentially, AAA is not always achievable, depending on the website.

Let’s discuss the following accessibility techniques. Image alternative text (alt text) Appropriate document structure (Heading order, lists) Sufficient color contrast Text and graphics are understandable when viewed without color Ensuring accessibility of non-HTML content, including PDF files, Microsoft Word documents, PowerPoint presentations and Adobe Flash content.

Provide Appropriate Alternative Text (alt text) for Images Not everyone can see images on a website. Images must have text alternatives that describe the information or function represented by them 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 and a blind user will know what is being presented. The HTML code would look something like this: <img src=“imgGeorge.jpg” alt=“George Washington”> If there’s no alt tag, the above will read “imgGeorge.jpg” which will not be helpful to someone using a screen reader.

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. Keep in mind that there is often more than one acceptable answer as to what can be used as alt text.   There’s a lot left to interpretation, and only time and experience will make you better at determining appropriate alt text. If you’re unsure or just want a second opinion, please email webservices@usfca.edu

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, though rarely a short sentence or two may be appropriate. 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’s apparent to the screen reader user that it is an image, because the screen reader will say so. Appropriately describe the image, be relatively short and precise if possible, not be the same as a caption

Questions About Alt Text?

Headings Pages should be structured in a hierarchical manner. Level 1 headings (<h1>) being the most important (page titles) Level 2 headings (<h2> - major section headings) Level 3 headings (sub-sections of the <h2>), and so on Do not use text formatting, such as font size or bold to give the visual appearance of headings - use actual heading (<h1> - <h6>) for all content headings. Assistive technologies rely upon the markup of the page to determine structure. Items that are bolded or display in a bigger font are indicative of headings to someone using an assistive device. Technically, lower level headings need to be contained within headings of the next highest degree (i.e., one should not skip heading levels, such as from an <h2> to an <h4>, going down the document).

Lists HTML lists - <ul>, <ol>, and <dl> - also convey a hierarchical content structure. Each of these has rules regarding their use as well. Unordered lists should be used when there is no order of sequence or importance. Ordered lists suggest a progression or sequence. Lists should never be used for merely indenting or other layout purposes. Nested lists should be coded properly using the list button in the editor. The structure of the list element is important to screen readers and other assistive technologies. So if you’re making a list, use the list button in the editor as opposed to just manually doing a series of lines with a dot, number, or hyphen

Questions About Document Structure?

Provide Captions or Transcripts For All Videos and Other Media Videos and live audio must have captions and a transcript. With archived audio, a transcription may be sufficient. Captions are text versions of the spoken word presented within multimedia. Captions allow the content of web audio and video to be accessible to those who do not have access to audio. Though captioning is primarily intended for those who cannot hear the audio, it has also been found to help those that can hear audio content, those who may not be fluent in the language in which the audio is presented, those for whom the language spoken is not their primary language, etc. Videos on the site need captions. Youtube does these for free, vimeo you have to do your own. If you’re making a video through OMC, that’s baked into our process now so you shouldn’t need to worry about captioning it yourself.

Questions About Captions?

Sufficient Color Contrast It is important that text has sufficient contrast in comparison to the background of a webpage. Insufficient contrast may make the text difficult to read. Some examples of contrast that may be difficult to read This should not in any way discourage the use of color on a page, or even color coding if it is redundant with other visual indication. We have taken care of/ are taking care of this on the back end, BUT If you’re adding, for example, a background image with text laid over it (which is not recommended), this needs to have sufficient color contrast (as designated here: https://webaim.org/resources/contrastchecker/. Web & Digital Communications has implemented (or are in the process of implementing) color changes on the website to compliant with color contrast. If you’re interested though, you can check with the color contrast tool found here: https://webaim.org/resources/contrastchecker/

Questions About Color Contrast?

In the content of your webpage avoid the use of: Spatial relationships Size Position Color Sound Always provide multiple means of understanding if your content is drawing attention to one of those attributes, preferably This should not in any way discourage the use of color on a page, or even color coding if it is redundant with other visual indication. So you would say something like “See the information in the green box with the heading of “Quick Links”.

Examples of Using 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 Using Sensory Characteristics? Time permitting discuss, other types of descriptions that may be challenging for some users, for example, “The information on the right side of the page”.

Ensure accessibility of non-HTML content, including PDF files, Microsoft Word documents, PowerPoint presentations and Adobe Flash content. In addition to all of the other principles listed here, PDF documents and other non-HTML content must be as accessible as possible. If you cannot make it accessible, consider using HTML instead or, provide an accessible alternative. We are currently investigating methods and developing training materials to assist with making compliant PDF files and . More to come. If you’re unsure about the accessibility of a PDF, reach out to webservices@usfca.edu PDFs follow all the same rules of the stuff we just talked about here

Techniques for Auditing Web Accessibility After you have published your event, use the WAVE automated tool for testing the web page for errors. http://wave.webaim.org/

Hands On Exercise with an Overview of The WAVE Tool Lets audit a few myUSF Pages. http://wave.webaim.org/ https://myusf.usfca.edu/marketing-communications/our-services I’d like to take a minute now and show off the wave tool. It will automatically analyze your page. All you need to do is input the URL.

Everyone Audit a Page! Find a page from your section and run it through the WAVE tool. See if you can fix the issues that pop up. Go here: http://wave.webaim.org/ In the field that pops up, paste the URL of a myUSF page

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