A guide for looking at the accessibility of Web 2.0 Tools

Assessing the Accessibilty of Web 2.0 Tools

If the tool's interface/page has lists, every item on the list is labeled correctly so that a screen reader user knows what each item is and does.

When a screen reader user gets to a menu item, the reader will read how the item is labeled.&nbsp; Often, lists will not be labeled correctly, so the screen reader will read the content as "blank," "item," or "object." If the user does not know what each option does, they cannot decide if they want to use those options.

Craft paper border

Does the tool allow for Alt-text or captions for images?

-Alternative text(alt-text) is a word or phrase that can be inserted into a document that describes the nature or contents of an image.&nbsp; Alt- text helps people who are visually impaired understand what a picture or image is. Captions underneath a picture also can be used if alt-text is not available.

Screen readers read aloud the description text and Alt-Text as part of reading the document.

Image from: <a href="https://ahrefs.com/blog/alt-text/">https://ahrefs.com/blog/alt-text/</a>

Screen readers may read out the ugly filenames for images without alt text. image show a cat and it says the image has no alt text. So the reader reades img_2345 as the alt text. The next image is the same cat with alt text. The alt text says cute cat.

Navigation ease: Every element of the tool can be navigated by using <a href="https://webaim.org/techniques/keyboard/#testing">keyboard commands</a> and shortcuts.

The basics of keyboard testing are simple—the&nbsp;Tab&nbsp;key can be used to navigate through links and form controls,&nbsp;Enter(and sometimes&nbsp;Spacebar) selects an element, and the arrow keys are sometimes used for other navigation.

Picture of a few keyboard command and keystrokes

Does the tool change any of the&nbsp;personalized settings on the&nbsp;device?

Any web-based tool should not&nbsp;disable any personalized settings&nbsp;that the user has on their device. This includes any accessibility&nbsp;settings that may be enabled on the&nbsp;device. If a tool requires the user to change the&nbsp;settings of their device, it is not&nbsp;accessible.

When it comes to content, students need to be able&nbsp;to...

Perceive, understand, navigate and interact

...with the content fully to make the information make sense. If they are unable to do so, the content is not&nbsp;digitally accessible.

Green polka dot border

Can the tool be used on any Internet-enabled device without an install?

-Since people have all kinds of devices, it is important that Web 2.0 tools can work on any Internet-enabled device to maximize the number of people who can use the tool.&nbsp;

Sign-in ease: If the tool requires students to create accounts to use the tool, are students able to log in without having to go through a CAPTCHA(Completely Automated Public Turing test to tell Computers and Humans Apart) test.

The problem with&nbsp;CAPTCHAs&nbsp;is that they are&nbsp;not accessible&nbsp;to all types of users, which means that some users will&nbsp;not&nbsp;be able to complete the form on the website. For example, an image-based&nbsp;CAPTCHA&nbsp;can be very difficult or impossible to complete for users who are blind or have low vision.

Blue polka dot border

Does the product use Flashy animations? If so, does the user have the ability to turn off the animations?

-Flashy animations are distracting. -Flashy animations are difficult to see. -Flashy animations can trigger seizures for people with seizure disorders.

Seriously, does the flashiness add anything to the content?

Rainbow paper border

-Download the <a href="https://drive.google.com/file/d/1XrlxhKYGT094PJNO0CtzAxmrrhtKDpue/view">Web 2.0 Tools Score Card for Instructor Side. </a> -Download the<a href="https://drive.google.com/file/d/1QJh06ewWi-AdWR6O22rrSFs-WsjqM9iy/view"> </a><a href="https://docs.google.com/document/d/1lNIoOiO_plJs7NDAUiqprqJ9bvjHKc4s/edit?usp=sharing&amp;ouid=102938897887291579618&amp;rtpof=true&amp;sd=true">Web 2.0 Tool Score Card for Student Side</a> -Download the <a href="https://drive.google.com/file/d/1llFnRkMgerPVauPHzUxuvb0rB65jjwnZ/view">APP Score Card</a> Tweak and use as desired. <a href="https://forms.office.com/r/rRTCd0Krp2">Post-Test</a>

Pop art yellow

The Advantages of Text-To-Speech

<a href="http://mediawiremobile.com/news/text-to-speech-applications-benefits-and-uses/#:~:text=TTS%20technology%20allows%20them%20to,that's%20convenient%20for%20the%20consumer.">Source</a>

Improves literacy skills Makes editing and proofreading easy Enhances pronunciation and speech skills  Enables listening to the news while communicating Relieves eye strain Improves comprehension and recall Provides the freedom to choose how to consume content Increase accessibility for people with vision impairments and learning disabilities Enables learning of a new language without a tutor

Purple polka dot border

Screen readers are used by people who are blind or visionally impaired/blind to read and understand digital content. Many electronic devices have built-in readers so there is nothing to install. The screen reader for Mac and Apple products is called<a href="https://dequeuniversity.com/tips/learn-voiceover"> VoiceOver.</a> For PCs, (Windows), the built-in screen reader is <a href="https://support.microsoft.com/en-us/help/17173/windows-10-hear-text-read-aloud#:~:text=Narrator%20reads%20aloud%20the%20text,F1%20after%20you%20open%20Narrator.">Windows Narrator.</a> Also available for PCs: <a href="https://www.nvaccess.org/">NVDA</a> is a free screen reader that can be downloaded to your computer. For Android products, the built-in screen reader is <a href="https://support.google.com/accessibility/android/answer/6283677?hl=en">TalkBack.</a> For Google ChromeBooks the built-in screen reader is<a href="https://www.chromevox.com/next.html"> ChromeVox.</a>

Verna Myers stated that “Diversity is being invited to the party. Inclusion is being asked to dance.”&nbsp;

"Just got a @joinClubhouse invite. My welcome didn't last too long. The app has buttons that could be labeled for screen readers, but aren't, and Voiceover users seem to have no way to edit our profiles. Inaccessible code is digital redlining that keeps us out of communal spaces. " -Chancey Fleet <a href="https://twitter.com/chanceyfleet">@ChanceyFleet</a>

-B.A. Special Education -M. Ed Instructional Technology -Mother of two. (One in college and one who is in Fifth Grade) The Fifth grader is Autistic. -I took it for granted that websites and Web 2.0&nbsp;tools were accessible. -&nbsp;I just assumed they were. It&nbsp;was only when I started really looking into the&nbsp;accessibility of Web products, did I realize many of&nbsp;them were not.&nbsp;

Wendy with her family. She has two children. One is an African American female who is holding up a highschool diploma, She is wearing a white dress. Wendy is in the middle smiling wearing a blue dress. She is a hispanic woman. Her son is to the left of her. He is an African American male who is ten.

Black and white photo of Wendy with her two kids. They are smiling at the camera. Xavier is wearing a paper crown and drinking from a straw.

Students with disabilities are a vulnerable population in higher education.

19% of students in North America have a disability.

60% to 80% of North American undergrads choose not to disclose a disability.

*References 1.<a href="https://help.blackboard.com/Accessibility/Accessibility_in_Education">Accessibility in Education</a> 2. <a href="https://er.educause.edu/blogs/2020/6/ecar-study-of-the-technology-needs-of-students-with-disabilities-2020#fn1">ECAR Study of the Technology Needs of Students with Disabilities, 2020</a>

&nbsp;The site that hosts the tool is free of outside advertisements or media that automatically plays when a user goes to the site.

-Multiple ads/video player: Since many Web 2.0 tools are free, the tool's creators often rely on revenue ads. Numerous ads on any page are distracting and can make getting to the content very frustrating.

When you evaluate Web 2.0 tools, <a href="https://youtu.be/zv4nn8JDxmg">remember it is all about content.</a>

When interacting with the tool, can all students: -Perceive -Understand -Navigate and -Interact ...With the information they are being given?

-You have to know your audience. -If you use a tool that is not fully accessible, you can still use it with your students if all the students are able to get the content fully. -However, if any member of your audience cannot fully interact with the tool/content, then you must consider using a different tool.

&nbsp;Does the tool rely on color to convey meaning to the user?&nbsp; Color should never be used as the only way to convey information (ex: the red arrows indicate...) because people with color blindness or vision impairments may not understand the content.

Does the tool offer the user caption/transcription options for multimedia items, such as videos/audio files?

Video captions are useful for all students and <a href="https://www.youtube.com/watch?v=iWO5N3n1DXU&amp;feature=youtu.be">essential for some students. </a>Research has shown that&nbsp;using captions with videos can make students better readers, however, for students who are deaf, captioning is essential for understanding content.

The <a href="https://www.3playmedia.com/blog/the-impact-of-captions-and-transcripts-on-student-learning/">reality is that accessible content benefits everyone.</a>

Navy zig-zag pattern

Some Web 2.0 vendors offer app versions of their tool. The app versions tend to fare better for accessibility because keyboard navigation is not needed for apps. Most electronic devices have built-in screen readers that will work for apps. If the app is coded correctly, the screen readers should read the content.

Since students have different devices, it is important to test out all versions of the tool. The app version may not have all the full features of the Web 2.0 tool. 

The Rehabilitation Act of 1973 ( amended many times)

Section 508 requires Federal agencies to ensure that persons with disabilities have comparable access to and use of electronic information technology.​  Section 504 requires organizations to provide individuals with disabilities an equal opportunity to participate in their programs and benefit from their services.​  Unless you are a Federal agency- your institution is held to the standards of Section 504- 508 is more stringent but the ideal .​

When testing with screen readers, it is important to know that different readers work better with different browsers.

ChromeVox works best with Chrome. Talkback also works best with Chrome.

Does the tool look clear when magnified or enlarged even at 200%?&nbsp;

Does the tool allow for changing of font and picture sizes?

People with visual impairments may need to enlarge content to see it. If the content is fuzzy or loses clarity, it is not fully accessible.

Being able to change the font or image size makes it easier for people to see visual content.

Green zig-zag pattern

https://api.bookcreator.com/users/v2/pzokauvYtvXmrxG21qmkv3nKFTh1/books/9LX9uS2fSciIqVtjoqGgAQ/assets/Z8AG15Q0R-uc4rwl10k5pA.jpeg?width=503&height=359

Web 2.0 Tools/sites should not rely on website overlays for accessibility. 

An accessibility overlay/widget offers features like text-to-speech or contrast adjustments for websites, but they also cause barriers for easy navigation/use of the site. See the <a href="http://overlayfactsheet.com">http://overlayfactsheet.com</a> for more information. A user shouldn't have to download/rely on an external tool to engage with any online tool. Users should have the option to turn off accessibility overlays if they prefer to interact with the content without these modifications.

Since VPATs are voluntary, some companies may not have them filled out. However, vendors who do business in the US must have some documentation available that discusses the accessibility of their product.&nbsp;

The vendor should have an ongoing plan to address the accessibility of the product as they continue to make upgrades and updates.

When using a Screen Reader, the content is read correctly/clearly.

When using a screen reader, the content is read correctly/clearly. If a user gets to a tool, and the screen reader skips over the content or it is jumpy, there is an issue with the tool's coding. This skipping makes creating content and using the tool very challenging.

Does the tool&nbsp;have an option to change the <a href="https://youtu.be/Hui87z2Vx8o">color contrast</a> on the screen? People who have color blindness or are visually impaired, have ADHD, or suffer from migraines/epilepsy may need to change the color contrast on their screen to understand the content.&nbsp;

If CAPTCHA tests are required, they should provide alternatives like audio and text options. This is essential for users who may have difficulty reading the distorted text or visual challenges in CAPTCHAs.

CAPTCHAs should be navigable using different input methods, including keyboard, mouse, stylus, or joystick. This ensures that users with various disabilities can complete the test using their preferred method.

You may use this presentation: Under the following terms: •Attribution&nbsp;—&nbsp;You must give&nbsp;<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">appropriate credit</a>, provide a link to the license, and&nbsp;<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">indicate if changes were made</a>. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use. •NonCommercial&nbsp;— You may not use the material for&nbsp;<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">commercial purposes</a>. •ShareAlike&nbsp;— If you remix, transform, or build upon the material, you must distribute your contributions under the&nbsp;<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">same license</a>&nbsp;as the original.

Creative commons icon attribute, can't sell, can remix

https://api.bookcreator.com/users/v2/pzokauvYtvXmrxG21qmkv3nKFTh1/books/9LX9uS2fSciIqVtjoqGgAQ/assets/UskMUSwPSWOHolJ5wZVQaw.jpeg?width=480&height=480

When using a Web 2.0 tool that allows the user to upload content( media, pictures, videos, audio, etc), the user can upload such content using multiple  input methods.

Multiple Input Methods: Users should be able to add content using various input methods like keyboard, mouse, stylus, or joystick. This ensures that individuals with different motor disabilities can interact with the tool effectively.

<a href="https://www.itic.org/policy/accessibility/vpat">Voluntary Product Accessibility Template</a>

A (VPAT™) is a document that explains how information and communication technology (ICT) products such as software, hardware, electronic content, and support documentation meet (conform to) the&nbsp;(Under the Rehabilitation Act of 1973)&nbsp;for IT accessibility.&nbsp;

https://api.bookcreator.com/users/v2/pzokauvYtvXmrxG21qmkv3nKFTh1/books/9LX9uS2fSciIqVtjoqGgAQ/assets/u7KQxEQWQLqsfcvMEchzKA.jpeg?width=560&height=371

When using keyboard shortcuts or a mouse, the tool's interface/page does not jump or shift to other parts of the tool.

. The order the cursor moves on the page matches the visual layout of the page/tool. 

https://api.bookcreator.com/users/v2/pzokauvYtvXmrxG21qmkv3nKFTh1/books/9LX9uS2fSciIqVtjoqGgAQ/assets/2mpwpIaBSBGVwyzi87HPxQ.png?width=354&height=354

If any content is skipped over, this makes the content difficult to get to and understand.

Does the tool have a VPAT (<a href="https://www.itic.org/policy/accessibility/vpat">Voluntary Product Accessibility Template)</a> on file?

International accessibility laws are different and, therefore, International based companies are not required to have VPATs available. However, if they are doing business in the US, they should have one available.&nbsp;

Vendors must fill out the information that applies to their product. It is important to note that VPATs are documents that are only valid in the United States

Keyboard navigation: When using keyboard shortcuts, the user can clearly identify where the cursor is.&nbsp; When a person uses the tab button, they should be able to identify where the cursor is so they can decide what they want to select.&nbsp;

https://api.bookcreator.com/users/v2/pzokauvYtvXmrxG21qmkv3nKFTh1/books/9LX9uS2fSciIqVtjoqGgAQ/assets/pNr149PgTFWcg19N4SVtbA.jpeg?width=732&height=488

Multimedia Alternatives: If the tool uses multimedia for sensory engagement, allowing users to provide a text alternative ensures that those who cannot experience the sensory content can still understand its context.

Flashing Content: Avoiding excessive flashing content helps prevent triggering seizures or discomfort in users who are sensitive to flashing animations.

 Animation Control: Offering the option to turn off flashy/moving animations or backgrounds is beneficial for users who may find these animations distracting or overwhelming.

<a href="https://www.w3.org/TR/WCAG/">Web Content Accessibility Guidelines (WCAG</a>)&nbsp;

A( minimum standards) AA( moderate standards) AAA( highest level)

https://api.bookcreator.com/users/v2/pzokauvYtvXmrxG21qmkv3nKFTh1/books/9LX9uS2fSciIqVtjoqGgAQ/assets/xX4TiAy0QT-JtrWIY8Tpjg.png?width=743&height=557

These guidelines explain how to&nbsp;make web content more&nbsp;accessible for people with&nbsp;disabilities, and user friendly for&nbsp;everyone. The guidelines have three levels&nbsp;of accessibility (A, AA and AAA)

Assessing the Accessibility of Web 2.0 Tools

Cartoon shows a bird, monkey ,penguin ,elephant, a fish in a bowl, seal and a dog.  The instructor is outside sitting at a desk. The instructor says "For a fair selection everybody has to take the same exam: Please climb that tree."

by Wendy Torres Senior Instructional Technologist Twitter handle: @Tech_snacks <a href="http://web2accessibility.weebly.com/">Download the Scorecards</a>

Creative Commons License icon, give attribution, can't sell for commercial can remix

<a href="https://docs.google.com/document/d/e/2PACX-1vTem4hRM9heh8iiDbL5ZjYHZIaJx4dXzirbfmuRMnn9qBUpJeH_-ICiIQYqTsZarf12vzWTtKpn4LRD/pub">Text version of book</a>

Color Contrast (Minimum)

The Visual Presentation of text and images of text has a contrast ratio of at least 4.5:1. To test the contrast ratio of text and images, you can use a downloadable tool from the <a href="https://developer.paciellogroup.com/resources/contrastanalyser/">Paciello Group.</a> You can also use the online web color analyzer from <a href="https://webaim.org/resources/contrastchecker/">WebAIM.</a>

Selecting "Name"Colors on a White Background. The color picker image indicates the colors that meet minimum standards

Image courtesy of Paula James Kaplan from BBWorld2018 presentation

When considering Web 2.0 tools, it is important to consider how accessible the tool is for....

<a href="https://drive.google.com/file/d/1QJh06ewWi-AdWR6O22rrSFs-WsjqM9iy/view">Students</a>

<a href="https://drive.google.com/file/d/1XrlxhKYGT094PJNO0CtzAxmrrhtKDpue/view">Instructors</a>

Paper stack border

What should instructors look for when assessing the accessibility of Web 2.0 tools?

-Navigation ease -ScreenReader Compatibility -Audio/Visual Components -Mobile/Touch/Size Capabilities -Sensory settings -Color settings -Access -Personalization -Accessibility Policy

When using the keyboard to navigate the tool, all user should have an an option to “Skip to Content.”

If a user relies on keyboard navigation, they may not want to go through every element on the tool to get to your content.

Bright ideas border

Does the tool have an audio component like a "Read to Me" feature or the ability to upload audio files? Does the tool have a speech-to-text option available to the user? Text to speech improves literacy and comprehension skills and makes editing and proofreading easier. Speech-to-text is helpful for those with vision impairments, learning disabilities, or physical/motor disabilities.

So what are Web 2.0 tools?

Web 2.0 tools are web-based tools that focus on user collaboration, sharing of&nbsp;user-generated&nbsp;content,&nbsp;and social&nbsp;networking. Many are free to use and work on multiple platforms.

Collaboration :Working with someone to produce or create something. Sharing of user-generated content 	Student centered focus: Social networking: Practice of expanding the number of one's business and/or social contacts by making connections through individuals

Any media( audio/video) on the tool/page can be paused and started by the user.

-Also, users should have control over what content they get. If they get to a site that automatically plays a video or sound ad, this takes away the users' control over the content. Any media( audio/video) on the tool/page can be paused and started by the user. -Any media that automatically plays on any site should not be longer than 3 seconds in duration.