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/.

Accessibility Checklist: Topics to Discuss with Your Publisher

Accessible practices ensure all students, no matter their ability level, are able to use technology to learn. They open doors for everyone, including students who have auditory, visual, motor, or cognitive disabilities.

The field of web accessibility covers a lot of ground, so this checklist covers a few basics you can easily bring up with your publisher to get the conversation started about your students receiving accessible materials.

Have a topic to add? Please let us know in the comments!

Accessibility Checklist:

Topics to Discuss with Your Publisher

ACCESSIBILITY DOCUMENTATION

Image result for checkbox  A Voluntary Product Accessibility Template (VPAT) for textbook and courseware is available (or other documentation if it is not yet available).

Image result for checkbox  Dates for when the documentation on accessibility was published and last updated are given.

Image result for checkbox  Name and contact information of the publisher’s disabilities services coordinator are provided.

ONLINE COURSEWARE

Image result for checkbox  A screen reader can read all text within the web-based materials.

Image result for checkbox  All interactive elements have clear text or a text alternative to describe their purpose.

Image result for checkbox  The web-based materials are designed so that they do not disrupt assistive technology installed by the student on their personal computer.

Image result for checkbox  When color is used to convey information, that same information is available in text form.

Image result for checkbox  Motion effects such as blinking can be turned off.

Image result for checkbox  The web-based materials are easy to navigate using only a keyboard. Specific examples of which keys to use to accomplish which functions and focus indicators are provided.

Image result for checkbox  Students can input answers to homework, tests, quizzes, etc. using only the keyboard.

Image result for checkbox  Time limits are adjustable for individual students with visual and auditory warnings before time expires.

VIDEO-BASED CONTENT

Image result for checkbox  Videos are captioned.

Image result for checkbox  Transcripts are available.

Image result for checkbox  The video player provides alternate controls (play, pause, etc.) for students who have motor disabilities.

AUDIO-BASED CONTENT

Image result for checkbox  Transcripts are available.

Image result for checkbox  The audio player provides alternate controls (play, pause, etc.) for students who have motor disabilities.

INSTRUCTIONAL CONTENT

Image result for checkbox  The text can be read aloud by screen readers.

Image result for checkbox  The font size can be adjusted.

Image result for checkbox  The text is responsive (i.e., students can access the text on different devices like tablets and smartphones, and the text does not get distorted).

Image result for checkbox  Colors of the text and its background can be changed.

Image result for checkbox  The text has controls like “Next Page” and “Previous Page” for students who have motor disabilities and cannot use a computer mouse to navigate between pages.

Image result for checkbox  Each image has alternative text that describes its purpose.

Image result for checkbox  Graphs are created as Scalable Vector Graphics (SVGs) and can be enlarged.

Image result for checkbox  Well-formed MathML code is created for clear audio descriptions of expressions to be interpreted by screen readers.

Global Accessibility Awareness Day

What’s that?

Today—May 19th, 2016—is Global Accessibility Awareness Day (GAAD)! Started in 2012, this day is dedicated to communicating and learning more about digital accessibility. Bringing awareness to accessibility is a critical first step in making the web an inclusive space for all.

How is Hawkes involved in the conversation of accessibility?

Hawkes Learning is committed to improving our student web platform for all students by working toward our goal of achieving Web Content Accessibility Guidelines (WCAG) 2.0 Level AA. We’re making our student web platform more…

  • Perceivable by ensuring that all text content contrasts enough with the background for easy reading as well as providing alternative text for images.
  • Operable through vastly improving the ability for students to use a keyboard to interact with the questions, including more exhaustive and intuitive keyboard shortcuts.
  • Understandable by ensuring that the ways students interact with the product are consistent through standardization.
  • Robust by using best practices for creating accessible materials to help ensure that all users in all contexts are able to focus on learning.

How do I learn more?

We want to keep you updated on our progress! Check out Hawkes Learning’s Accessibility page on our website for more information.

Want to learn more about GAAD? Visit this website today and join the conversation.

What interests you the most about making the web more accessible? Share in the comments below!