Thank you for watching, and for a full transcript, visit www.fun4thedisabled.com. We hope you enjoy. Hello, my name is Katie Dickens. And today, I’m going to be sharing with you the accessible features of Strategy for Access’ websites. Strategy for Access has partnered with accessiBe to promote web inclusivity and accessibility. AccessiBe allows web users to adjust our website’s user interface to your specific accessibility needs. Right now, I’m on the home page of fun4thedisabled.com. The accessiBe widget is located right here in the bottom left corner of the screen. It is a blue circle with a white stick figure in it. Strategy for Access also runs disabilityvoteil.org to promote accessible voting resources for the disability community. The accessiBe widget is in the same place on this website, and it has the same features. It’s still on the bottom left-hand corner, but the widget is red instead of blue. I’m going to be showing you these features on fun4thedisabled.com, but you can activate all of the same features on Disability Vote IL as well.
Just remember that the widget is a different color. So first, to open the accessiBe widget, you will click on the blue circle in the bottom left-hand corner of Fun 4 the Disabled, red circle on Disability Vote Illinois, and it will open up this pop-up menu labeled ‘Accessibility Adjustments’. And it offers you several options. First, you can change what language it’s in. There’s all kinds of options as you can see here. At the very top of this widget in the middle, here we have the Statement button. If you click this, it will provide an explanation of ADA compliant status. But if you continue to scroll, it will offer further explanations of some of the accessiBe’s features, including the screen reader, keyboard navigation, screen reader optimization, keyboard navigation optimization, and how to turn all of that on, how the features all work. And then it also provides short explanations of each of the disability profiles that accessiBe supports. There are additional user interface, design readability adjustments you can make.
There are short explanations on here if you’d like to read further about them. And short blurbs about assistive technology and browser compatibility for different kinds of screen readers, different kinds of browsers, things like that. And as well as that, we have the option to provide feedback for accessiBe as they’re always continuing to grow, as are we, with our accessibility features. So to click out of this, you just click anywhere outside of that box. If you have any questions about the features on accessiBe, then check out the statement section and there will be further information there. The first set of settings on the accessiBe widget are accessibility profiles. These are generalized sets of settings that typically help an average person with a specific kind of disability. But as each person is different, these settings may or may not be exactly what you need, which is why further down in the accessiBe widget, you can adjust each setting manually to your specific needs. AccessiBe also offers general content adjustments, such as changing the size of your font of the text, the spacing using a magnifier tool, turning on a feature that highlights the titles and links, aligning the text in a different place on the page, things like that.
Next, you can make color adjustments to our website, including the contrast of the website as a whole, the saturation of the colors and images, and the colors of our text and backgrounds. And you can even select monochrome to make the website appear in black or white and grayscale. The last section of adjustments that you can make on the accessiBe widget are orientation adjustments. These are more sensory adjustments, so they include muting all sounds, hiding the images, only viewing the text on the website in read mode, activating a reading guide which helps underline a line of text to help you focus on what to read. You can stop the animations. You can use a reading mask to also help you focus. You can use highlight hover, highlight focus. And you can change your cursor to be big and black or big and white so that you can see it better. I currently have the big black cursor activated for visibility for this video. But you see, if I unselect it, it turns back into a standard small cursor.
So I’m going to select that again. And you can use any of these options by selecting them manually like I just did or in their automatic groupings according to the different accessibility profiles here on the top. I’m going to go into some more examples of what these kinds of adjustments will look like as we go through the accessibility profile. So stay tuned. Additionally, down here in the orientation adjustments, there is a useful link section. This will put all the dropdown links of the website in one place so that it’s really condensed in one place and easy to look at. So if I go through here on the accessiBe widget and I want to donate to Fun 4 the Disabled, I can just click donate and it’ll take me to that page on the website. And the last thing we can do on the accessiBe widget is if there’s anything that you don’t know what it means or what it is, you can search in the dictionary here. Say, I don’t know what a screen reader is, I can type that in here and a result will come up, assistive technology that converts text or images to speech or Braille.
It kind of just searches the internet to tell you more, like this information comes from Wikipedia, but it’s a handy tool to have right within the widget. Lastly, if you don’t want to use accessiBe at all- that’s totally fine- and you don’t want the widget to appear on your website, the hide interface button is an option up here. And what that will do is it will completely remove accessiBe from the website entirely. And if you wanted to get it back, you could if you clear your browsing history and data, but that’s the only way you could. So I’m not going to hide the interface. I’m going to hit cancel, but just so you know what that option is, it’s there. So now I’m going to go through what each of these adjustments look like as we go through each accessibility profile and see which each profile does. So the first accessibility profile is the Seizure Safe Profile for those who have photosensitive epilepsy or anyone susceptible to seizures triggered by photosensitivity. I’m going to press this button to the left of its title to turn it on, the little switch.
And now I can see what it does. So as you can see, any flashes on the website would have been taken away, though we don’t really have any to begin with. The saturation of the colors on the website and their brightness has been reduced so the website is a little easier on the eyes and maybe less straining to look at. Also, I clicked out of the accessiBe widget just by clicking anywhere outside of it. But there is an X in the top left corner. If we scroll down through this widget, we can see which adjustments have been activated by selecting this profile. So we can see in the color adjustments, low saturation has been activated and stop animation has been activated. The big black cursor is not part of the Seizure Safe Profile as I already had it selected. When we want to further customize this widget, we can by adding anything else as I did with the cursor. But say we wanted these options as well as a dark contrast on the website, we can go ahead and click dark contrast, and it will adjust that for us.
So we’ll go back to the widget. And there’s a couple of options you can do. If you want to turn off just the options that the Seizure Safe Profile turns on, we can click that to turn it off. But as you can see, I still have the dark contrast option selected and the big black cursor selected. So if I wanted to turn all of this off instead, I would hit reset settings. It would refresh my page and all the accessibility settings would turn off. The next accessibility profile is the Vision Impaired Profile. This section enhances the visuals on our website for those who have visual impairments, including degrading eyesight, tunnel vision, cataracts, glaucoma and others. If we select the widget and then go through, we can see exactly what it does to adjust the website. First, the content scaling has been upped 100%. The readable font widget has been selected, which adjusts the font slightly to be a more readable font. As you can see, it doesn’t change very much from our original to the readable font.
It also bolds it a little bit more so we can have a better view of it. The Vision Impaired Profile also activates high saturation, so as you can see, the colors on the website are even brighter so that someone with lower vision may see them better. Again, the big black cursor does not automatically turn on with this accessibility profile, but you can turn it on if that’s something that appeals to you, as is the big white cursor. And this is what that looks like. And again, if the Vision Impaired Profile applies to you, you can also select any other feature you may need that could help you, such as changing the contrast of the website, changing the color of the text on our website, and even adjusting background colors. So I’ll give an example, if you want to adjust the text color, if you wanted to turn it teal, you could click that. And up here, you see our menu is now teal. Gonna change it back to black. I’m going to adjust title colors. And here, this title is teal. This title is teal.
The next accessibility profile is the ADHD Friendly Profile. This optimizes accessiBe’s features to allow a more focused experience on our website with less susceptibility to distraction and is useful for not only the ADHD community but also anyone with neurodevelopmental disorders. As I activate the ADHD Accessibility Profile, several things happen. First, it activates a reading mask. That’s this rectangle that’s brighter than the rest of the page so that the user can focus on only looking at the text they want to look at. The ADHD Friendly Profile also activates the high saturation features so the user can really get in tune with the content. This profile also adjusts content scaling by 25%, so that’s a little bit bigger. And lastly, animations are stopped by this profile to avoid further distraction. The next accessibility profile is the Cognitive Disability Profile. This profile is meant to help users with cognitive disabilities such as autism, dyslexia, CVA, and others to focus on the essential elements of the website more clearly.
If we scroll through the widget, we can see that the content scaling has increased by 25%. Highlight titles and highlight links has been activated, and animations have been stopped. So if we click outside of the widget, we can see that there are now boxes around all the titles and links so that the main features of our website are easier to focus on, and it’s more clear where the buttons to click on are. This is true even in the dropdown menu. It helps separate links and clearly defines them. Additionally, because of the content scaling, there’s a little more spacing between the text on your website and it’s bigger. The last two accessibility profiles are linked together as they’re typically used in tandem. The Keyboard Navigation Profile is intended for those with motor disabilities so that they can use their keyboard to navigate our website instead of using a mouse. I’m going to turn it on here. A sound is going to ring so that we know that it’s activated. And accessiBe has a standard key here that says what keys will do what action on our website.
So, for example, when you have this option selected, you can use the shortcut M to highlight the menu up at the top of the screen. You can select tab to arrow through each one. And you can use the arrow keys to go through and select which menu you’d like to choose. So if I want to go look at the Fitness with Friends videos, I can arrow down to Health and hit enter. And here it is. And if I want to look at the graphics, I’ll hit G, and I will keep hitting G to go through them all. So I see this picture of Vanessa when I hit G a second time, and then it’ll go down through the featured images for each of these posts with their Fitness with Friends videos. It’ll typically move vertically, though, instead of horizontally. And if I want to watch SPIRITClub’s Gentle Yoga video, I have this graphic selected. I’ll hit return. It’ll open it up for me. I’m going to head back to the home page, though. If you are someone who already uses their keyboard to navigate the internet as a whole, this widget will automatically be prompted as the website will recognize that that is how your computer is set up.
And then for blind users, this accessibility profile optimizes the website for screen readers such as JAWS, NVDA VoiceOver, and TalkBack. These softwares are already typically installed on the computer or smartphone of blind users. And accesiBe’s widget ensures compatibility with those features. Like the keyboard navigation feature, this profile will automatically be prompted for someone with a screen reader installed on their device. And again, it is linked to the keyboard navigation selection. And if you would like more information about this, as I already stated, there is more information in the Statement section of the accessiBe widget. Thank you so much for watching. I hope you learned a lot about the accessible features of our websites, and I hope you continue to visit us at fun4thedisabled.com and disabilityvoteil.org. Special thank you to accessiBe for your incredible system and your accessibility features. Have a great day, everyone!