YouTube Resources to Help You Learn More about Accessibility

Thankfully, web accessibility is getting more attention than ever before. Incorporating strong accessible standards helps every online user, whether or not someone has a disability.

There are multiple YouTube channels dedicated to helping you learn more about accessibility standards and practices, as well as challenging the stigmas surrounding individuals with disabilities. Below are three you may consider checking out!

1. Hadley Institute for the Blind and Visually Impaired

Hadley, the largest distance education provider for those who are blind or visually impaired by serving more than 10,000 students each year, gives students a personalized learning experience to help them in their academic, professional, and everyday lives. Courses are free to blind and visually impaired individuals and their families, and the nonprofit offers low tuition rates to blindness professionals.

Hadley’s YouTube channel (https://www.youtube.com/user/HadleySchool/featured) offers a plethora of information that focuses on specific tasks like “how to make a playlist” using only the screen reader system and not having to look at the phone as you do it. It includes instructional videos on Apple products and tools, like accessing the Zoom Controller and downloading BARD books and magazines.

2. Deafinitely Dope

This channel provides videos of rapping popular songs with American Sign Language (ASL) and was created by a deaf man and hearing woman. According to their page, their goal is “to provide a platform where deaf people of all ages as well as hearing people willing to take the plunge into the world of ASL can unite under a brand that shows YOU’RE NOT ALONE.”

Those who are deaf or hard of hearing who communicate through ASL can enjoy these popular songs, and those willing to learn or brush up on ASL will enjoy these fun videos.

Check out their YouTube channel here: https://www.youtube.com/user/mattmaxey770/featured

 

3. Google Chrome Developers

Want to stay updated on Google’s web accessibility initiatives? Google Chrome Developers have built playlists discussing the latest and greatest Chrome tools, including tutorials on tasks ranging from using Chrome UX Report to optimize your web app’s performance to learning how to build e-commerce websites with AMP and PWA.

They’re currently creating a new series called The State of the Web, which analyzes big data to learn more about how the web is moving forward in performance, security, and more. You’ll definitely want to keep an eye on this YouTube channel to stay in the loop with all the cool things Google is up to!

View videos at https://www.youtube.com/user/ChromeDevelopers/featured.

 

2 Resources to Help You Check on Your Website’s Accessibility

Our Accessibility Team at Hawkes always gets excited when they found out about tools that help you check on the level of web accessibility in order to improve a website for all users. Here are two great tips if you want to ensure your site is up to WCAG 2.0 standards:

1. Google’s Tools for Web Developers

Google has a great community and curated list of resources dedicated to web accessibility. Check out what they offer at https://developers.google.com/web/tools/.

One of our Accessibility Team leaders loves to use the Google developer tool that checks the contrast between text and background. Below, you can see that the header on the Hawkes Learning sign-in page contrasts with the background well enough to comply with Level AAA standards.

The words "Hawkes Learning" on a webpage are highlighted and labeled with "the text we are looking at."

The underlying code behind the sign-in page for Hawkes Learning is displayed. A color swatch is open for the text that was highlighted in the first image. Its contrast ratio is 9.08, and check marks are next to AA: 4.5 and AAA: 7.0 to denote that this level of contrast between text and background is WCAG Level 2.0 AAA compliant.

 

2. HTML_CodeSniffer

Want to make sure a website’s code is up to snuff? HTML_CodeSniffer has you covered! This script finds violations of coding standards in your HTML source code, and you can check your code against custom coding standards. It covers Section 508 and WCAG 2.0 Levels A, AA, and AAA.

You can paste your code here to test it before installing the bookmarklet.

Five of the best accessibility resources for content creators

Our Accessibility Team at Hawkes Learning has gathered several of their favorite resources for learning about and testing a website’s accessibility. As we work toward becoming WCAG 2.0 Level AA compliant, we’ve learned from some of the best sources within the accessibility community. Below are five that our team recommends using if you’re a developer or content creator interested in learning more!

1. U.S. Web Design Standards

This visual style guide and library of open-source UI components serves as a model for creating beautiful and easy-to-use accessible websites.

2. tota11y

This very approachable accessibility evaluation tool uses color overlays and helpful violation explanations, allowing web developers to quickly visualize and address issues without extensive prior knowledge of web accessibility.

3. a11y Toolbar

This toolbar for websites allows users to choose high-contrast and/or grayscale views as well as adjust the text size. It is based on ally.js.

4. Accessibility Checker

This testing tool for web content created in CKEditor quickly identifies accessibility issues and automatically fixes common problems, allowing content creators who are not trained in accessible web development to create accessible content from the ground up.

5. AInspector Sidebar

This web accessibility testing tool for Firefox clearly identifies violations of WCAG 2.0 and ARIA standards. The user-friendly interface provides detailed summaries of test results along with links to techniques for correcting violations.

Make a POUR website. (It’s a good thing.)

To make your website more accessible, make sure it’s POUR. POUR is a handy acronym for:

P: Perceivable

O: Operable

U: Understandable

R: Robust

These are the testing pillars for content providers. What do we mean by that? Let’s look into each word.

Perceivable

Users must be able to perceive your content, and they do this through sight, hearing, and touch. If your content can’t be processed by the user, then it isn’t accessible. So, how do you ensure your information is perceivable?

First off, remember to not let any background sounds or visual elements get in the way of your content. Limit the amount of distractions on the site. If there is too much going on with any given page, users’ brains might get overwhelmed and become unable to process the information.

Two important components to keep in mind are color contrast and alternative text. The High Contract Chrome App can be installed on a user’s computer to invert colors and convert the display to grayscale. Test your website to make sure that when you change these color schemes, users can still access the important information on your site.

Additionally, images should have alternative text so that if users cannot see, they can use assistive devices called screen readers to read aloud descriptions of the images. ChromeVox for Chrome and Mac OS VoiceOver are two great tools to check out for that kind of testing.

Operable

Users must be able to navigate your website. Since not all users can control a computer mouse to navigate a website, keyboard accessibility is important. Check to make sure you can move around the screen using the Tab key, space bar, arrow keys, and the Enter key. A focus indicator, such as a box that highlights each tab or other element of the website, should be visible so users who can see are aware of where they are on the page. A screen reader should also be able to read aloud these elements for navigation.

Understandable

Users need to understand the meaning of your content. Sometimes, users need more than words or images to grasp your meaning; they might need both, as well as videos and other representations of your content.

Users also need easy navigation that’s consistent and predictable throughout the site. Context should not change unexpectedly; otherwise, things will get confusing, and quickly. Buttons and links shouldn’t have ambiguous labels like “Click here.” Try to provide as much context as possible so users understand what action they’re performing each time they select a button or choose a tab.

Robust

Different users are going to access your website in different ways. There are several technologies, browsers, and devices out there, so your content needs to be compatible with as many of them as possible.

Be aware of HTML and Accessible Rich Internet Applications (ARIA) specification, and test out your site using different browsers and devices. Know which technologies are at work in the resource you’re testing. Become familiar with the standards that are used when creating content. This testing will help ensure you’re using well-structured code so that many users can access your content.

For more information, visit WebAIM’s website, a terrific resource for learning how to build a POUR website: http://webaim.org/articles/pour/perceivable.

Web accessibility: Who is affected?

If you’re short on time, here’s the answer: everyone. Yes, web accessibility affects anyone who goes online. If a website is Web Content Accessibility Guidelines (WCAG) 2.0 Level AA compliant, then the website’s usability should also be high-quality. However, people who are affected the most by poor web accessibility are those with disabilities. Below is a quick look at four common disabilities.

An ear with a line going through it.

Auditory

Auditory disabilities include varying degrees of hearing loss, ranging from mild to profound. People with mild or moderate hearing loss are commonly described as hard‑of‑hearing, while those with severe or profound hearing loss are described as deaf.

Accessible websites must supplement all audio content with text. Captions and transcripts should be provided for any videos that contain audio, and transcripts are needed for any audio‑only content.

Three cogs

Cognitive

Someone with a cognitive disability may have deficits in memory, attention, problem solving, verbal comprehension, or visual comprehension.

Well-designed websites should be easy to navigate and understand; these qualities benefit all users and significantly improve accessibility for people with cognitive disabilities.

An eye with a line going through it.

Visual

Two categories of visual disabilities are low vision and blindness. Many people with these disabilities use assistive technologies such as screen readers or refreshable Braille devices. Users of these assistive technologies generally do not use a mouse, so keyboard access to web content is essential.

The final category of visual disability that should be considered when designing web content is color blindness. Users with color blindness may view websites in black and white or use customized color schemes that override the native colors of a website.

A computer cursor in the form of a pointing hand.

Motor

Motor disabilities are characterized by mobility and dexterity impairments. People with these disabilities may not be able to use a mouse or keyboard.

There are thousands of assistive technologies available to help people with motor impairments access the web, most of which either work through the keyboard or emulate keyboard functionality.

 

There are many disabilities out there, and people with different disabilities access the Internet in various ways. They encounter different obstacles that impact their access to web content. Additionally, all of us have been situationally disabled at some point in our lives. A situational disability refers to a temporary state leading to an accessibility issue due to your environment. Two examples include:

  • Needing to listen to an audio book on a road trip because you cannot read the pages while driving.
  • Benefiting from automatic sliding doors when you’re carrying too many groceries in your arms to use a door handle.

It is important for website developers to consider their users in their website’s design and implementation. After all, the accessibility (or lack of it) affects everyone using that website. Together, we can make the Internet accessible to all kinds of users.

Stylish: One of Our Favorite Browser Extensions

Want more display options for webpages? Chrome and Firefox users can customize their visual web experience quickly and easily with the browser extension Stylish. Stylish is free and lets users create and share their own styles if they like.

This extension provides a better experience for all, especially in terms of accessibility. Many users take advantage of Stylish to apply a new color scheme to a website and eliminate unwanted or unnecessary page elements. It can also help users manipulate font sizes on webpages. Another key way Stylish users can enhance the usability of a site is to make answer boxes have a thicker width in order to see them more easily.

Stylish is an excellent tool in customizing display options for websites. For example, they have 149 pages of custom styles for Google. (Yes, that’s right—one hundred forty-nine.) One of the most popular themes is DarkSearch for Google by Stylish contributor Nass O.

Stylish members are volunteers who create User Styles, which are also called website themes or skins. They have a forum set up for questions and sharing valuable information. They include easy instructions on how to install the browser extension and use it to its full capability.

Our developers and content creators at Hawkes love Stylish, and we think you will too!

Find out more from the Stylish website, https://userstyles.org/.