Comprehensive Web Accessibility Training Overview
Explore the significance of web accessibility, the major categories of disabilities, user interaction methods, reasons to create accessible websites, and practical techniques to enhance website accessibility. Discover how to make USF websites accessible and learn about tools like the WAVE Tool and WYSIWYG Editor for hands-on accessibility checks. Enhance inclusivity and compliance with standards for a better web experience for all users.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
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
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.
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?
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 Use appropriate tools in the WYSIWYG (Headings, lists, etc.) Level 1 headings (<h1>) Page Title Level 2 headings (<h2>) Major Sections Level 3 headings (<h3>) Sub-sections of <h2> Avoid skipping heading levels, for example <h1> to <h4> Headings should be ranked in order (<h1 to h6>)
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: (3rd party, YouTube)
Sufficient Color Contrast Web & Digital Communications has implemented color changes on the website to compliant with color contrast.
Dont 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)
Tables Tables should be used for tabular data and not for layout Include a caption Use headers Use scope
Non-HTML Docs: PDF Files, Word and PowerPoint 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!
