Assessing a Website for WCAG AA 2.1

So you need an accessibility audit of your website?

Oh boy!

There are lots of ways you can approach an accessibility audit. Unfortunately, without knowing any better, lots of people approach it as an unpleasant task.

However, I have found that a good accessibility audit often reveals issues which can be addressed in a way that will improve the website and overall user experience.

The Importance of Web Content Accessibility Guidelines (WCAG)

At the most basic level, the WCAG are a set of criteria for measuring accessibility of web content.

However, the actual collection of WCAG documents goes a bit further than a simple list of rules.

Comprised of supporting documents to explain how to use the WCAG, explanations of success criteria, and the actual guidelines themselves, the WCAG is a robust collection of information designed to help alleviate doubt and misunderstanding about web accessibility.

Created by the World Wide Web Consortium (W3C), a non-profit collection of super smart people dedicated to maintaining the function and philosophy of the World Wide Web, there is no ulterior motive or profit driven agenda. The only interest of the W3C in creating and maintaining the WCAG is to help facilitate an accessible World Wide Web.

The WCAG is the definitive source and authority on measuring accessibility of web-based content.

At the highest level there are four guiding principles of the WCAG:

- - Perceivable
  - Operable
  - Understandable
  - Robust

These are the broad strokes that organize a lengthy delineated list of criteria. The complete WCAG criteria are organized into a hierarchy of three levels, Single A (WCAG A), Double A (WCAG AA), and Triple AAA (WCAG AAA).

The WCAG have undergone revision, and are currently on version 2.1. Version 2.2 is currently being reviewed, and is expected to be released sometime in the not too distant future.

Currently, WCAG 2.1 AA is the accepted standard identified by courts and governments around the world as an acceptable baseline for accessible web content.

Basic Process for Auditing with WCAG 2.1 AA

In a nutshell, an audit is conducted by assessing the various content of a website according to the relevant criteria from WCAG. Some tools can help automate part of the assessment, but there is always a need for manual testing.

While the WCAG provides a good baseline for determining accessibility, there are additional concerns under the category of Usability which also need to be considered when auditing a website for accessibility.

Here is the Standard Operating Procedure I employ:

1. 1. Initial Survey of Site
  2. Identify Representative Pages
  3. Assess Pages (Automated)
  4. Assess Pages (Manually)
  5. Assess pages with NVDA
  6. Consider Content
  7. Consider Interactivity
  8. Compile Report
  9. Review Report with Client

Simple, straight-forward, and at the end of it all there is a report identifying each issues as a line item inventory, referenced to relevant WCAG criteria, and identified by code and line number from the source HTML file.

It’s everything you need to clean up accessibility errors, and it provides a chance to assess your workflow to find places where you can add best practices in an organic manner that will help you create accessible content going forward.

Initial Survey of Site.

The first thing I do is perform a quick assessment of the site scope and purpose. I quickly browse through the main menu items, take note of patterns and different types of page content, forms, modals, interactive elements, general size, and complexity of the site.

If there is an obvious business function the website is supposed to deliver, I see if I can initiate the process via the keyboard and pursue it until something critical breaks, or they ask for a credit card number.

Depending on the size and nature of the site, this can take anywhere from a few minutes to over an hour.

Identify Representative Pages.

After I have an understanding of the size and nature of the website, I identify a sampling of representative pages from the site for audit.

As most websites repeat basic layout patterns through templates and content management systems, it is often not necessary to test every single page. The issues you find on one page will likely exist on every page created from that template, and you end up finding the same type of issue over and over.

It is also common to find a category of accessibility issue which exists throughout a website due to a systemic design/development practice, or from issues contained in source templates and themes.

Gathering a subset of pages with layout and content types which are representative of the rest of the website allows for more efficient and effective testing.

Assess with automated and manual tests.

AI generated image of a man and robot assessing a website for accessibility.

There are several different tools available to help with accessibility testing. Some are dedicated software which monitor and report on accessibility over time, while others are on-demand scanners, providing a snapshot in time of the status of web content.

There are several free plugins for popular Internet browsers which can tell you whether a web page contains content out of conformance with the WCAG standards as well as other usability concerns.

It is important to remember that any automated tool is going to be limited in what it can determine.

Just like computers can’t identify an image with a crosswalk, traffic light, or bus, they also can’t determine all the accessibility issues which might be present on a web page.

Assess pages with NVDA screen reader.

There are many things which a computer can detect, but nothing beats the real-world test of using a screen reader. For best results with screen reader testing you should always employ the assistance of a blind individual if possible.

There are distinct and unique aspects of user patterns and behavior when approaching web content from a non-visual perspective. Getting beyond your ingrained habits (and limitations) as a sighted individual requires practice and dedicated awareness. It can be challenging, but it is not impossible.

Because I spent many years teaching people how to use screen readers, I know enough to be aware of common and typical usage patterns and expected behaviors for non-sighted interaction with digital content.

The end goal of all this is to identify usability issues beyond what can be detected from analyzing the underlying code.

However, I also know and admit freely that nothing compares with a bona fide usability test from individuals who use a screen reader every day as their sole means of accessing the Web. I know my abilities to use a screen reader are never going to be as robust, and I do not hesitate to enlist help from individuals who are blind when necessary.

Consider Content Issues.

The usage of different types of digital content brings an expectation of certain behaviors and capabilities. Specifically interactive content such as forms, audio and video, and web applications. End-users expect these things to function according to established design patterns. When the design pattern is not followed, the content effectively will not function for these individuals.

The World Wide Web, being designed to support a wide range of technologies and content, allows for great flexibility in how a person can design and present content. There are no requirements to follow any design patterns at all, which creates a wonderful sense of freedom for creators and a damning amount of chaos for end-users.

People being the ever-clever rule breaking upstarts that they are, continuously expand the envelope of how to mis-use, abuse, and generally confuse the expected paradigms, patterns, and procedures for delivering the many different types of content.

So it is that we end up needing to check certain types of content, much like a list of repeat offenders kept on the wall of a local police precinct.

As new content types emerge, accessibility specialists evaluate and determine authoring strategies to ensure accessibility of the content. These potentially problematic content types become known and tracked, a cause for concern wherever they turn up.

Tsk tsk tsk Mister Modal – back again, are we?

Consider interactive issues.

There are many ways an object can invite a user to interact with it. Unfortunately, without deliberately paying attention to the access strategies for interactive design, some content can fall short on their offer to deliver an interactive user experience.

Without expressly seeking to maximize the accessibility of your interactive elements, you can create expectations and disappointing user experiences without even knowing it. Effectively leaving your audience frustrated out in the cold as they see the party happening just beyond their reach.

Sometimes it is a case of missing identity where a critical piece of interactive content is present but not labeled, and is therefor invisible and unknown.

Other times a designer creates a widget that works wonderfully with a mouse, but it does not work at all with any other sort of input device.

Some interactive content is simply missing a required component, such as failing to provide captioning for digital video. These authoring failures can reveal ignorance, inability, or indifference on the part of the content creator.

Unless you are creating radical new content types, there is really no excuse for failing to deliver truly interactive content. There are known and documented approaches for ensuring accessibility with most known interactive content.

The solution to these interactive problems is usually pretty straight forward: get yourself to W3C and become informed about what you are trying to accomplish – so we can ALL go check it out.

Compile Report.

Understanding what to look for in an accessibility is only part of the challenge. Compiling the final report on what is found is where the ultimate value comes in.

More than a simple collection of issues to address, a web accessibility audit should present the issues in a way which facilitates the identification and remediation of accessibility concerns.

I always include a summary page with an overview of the different WCAG criteria which needs to be addressed, along with some helpful references to help explain the significance of the issue and how to address the issue to alleviate the accessibility concern.

I also provide a detailed inventory of issues for each of the representative pages I identify initially. Each occurrence of an issue is entered as a distinct line item, time and date stamped at time of audit, with corresponding WCAG criteria, severity of impact on accessibility/usability, source code and line number, and a link to an explanation of how to address the concern.

Additional data gathered from content, interactivity, and screen reader perspective are also aggregated and provided as separate categories.

With a detailed report of the accessibility audit, a designer/developer can effectively correct the accessibility and usability issues while also identifying the aspects of their workflow where accessibility can be addressed organically as a normal and ongoing part of quality control.

Review Report with Client

After the audit has been completed and the report has been compiled, I share the report with the client and schedule a meeting to go over the report and respond to any questions they might have.

This is typically adequate for addressing the accessibility concerns of most websites, though for some websites with greater complexity might require additional training.

While a good accessibility audit will reveal work to be done, it also provides peace of mind in knowing the extent of any issues affecting accessibility and usability.

Going through an accessibility audit the first time might be a little intimidating, but as you work through the issues, you are creating a quantifiable difference in your content, and eliminating potential cracks in the user experience where your audience might slip away.

After the first accessibility audit, additional recurring audits will find far fewer issues, and become much less exciting. Eventually, accessibility audits become part of the regular rhythm of a successfully designed and functional website, and ultimately become one less thing to worry about.

May 2, 2021May 2, 2021

Zoom Accessibility – The Basics

Zoom program icon focused in the midst of a screen of blurred icons for other programs.

Zoom Accessibility

As the world has been dealing with the Coronavirus pandemic, Zoom meetings have entered our popular culture as both a means of conducting business and maintaining contact with friends and family.

With all the use Zoom has been getting, I thought it might be helpful to share some of the accessibility features you can enable to make your Zoom meetings as inclusive as possible.

Pre-Meeting Preparation

There are some essential settings you will want to make sure are enabled before the meeting begins, and a few suggestions that can make your meeting more accessible, enjoyable, and worthwhile for all participants.

Zoom Settings

Zoom includes a group of meeting settings to enable features like Closed Captioning and different ways of interacting with meeting participants, such as polling and non-verbal feedback tools.

In order to use these features, the Zoom account holder will need to enable the settings at the account level. This means that if you work for a school where your Zoom account is managed by IT, you may need to get their help to make sure these settings are enabled.

Enabling Zoom Account Settings

From the Zoom settings in the main Zoom application window, you can access the Zoom account settings.

The Zoom account settings will open in your browser after you click the prompt at the bottom of the Zoom Settings window to “View More Settings”.

Zoom settings screen highlighting the prompt for Zoom account settings.

There are two groups of settings you want to enable from the “Meetings” tab.

First are the Meeting Reactions and Non-verbal feedback options under the “In Meeting (Basic)” settings:

Basic Meeting settings for enabling Non-verbal feedback and Meeting reactions.

Second are the Captioning settings found under the “In Meeting (Advanced)” settings:

Advanced Meeting settings for enabling captioning and saving captions.

Live Transcription

Notice that there is an option for a live transcription service, which utilizes speech recognition technology. This is NOT an acceptable replacement for a live captioner.

Do not enable Live Transcription unless all of the meeting hosts using the Zoom account have been made aware that it is not to be used in lieu of a live captioner when captioning is required by a participant.

While the live transcription feature is not accurate enough to rely on as an accommodation, it might provide a good start on a transcript that can be edited and corrected after the meeting. Your results may vary, depending on audio conditions and participants’ speaking voice.

Advance Agenda and Handouts

Another useful thing to do before the meeting starts is to send out the agenda and any handouts for the meeting. This also provides an opportunity to remind participants of any protocol for interacting during the meeting, and to ask if anyone requires any accommodations.

Remember to make the meeting agenda and any handouts accessible before you send them to meeting participants.

In-Meeting Accessibility

There are several considerations for ensuring a meeting is accessible for all participants. Be strategic and prepared in understanding the different tools in Zoom for sharing information and interacting with other participants.

Inter-personal Accessibility

As you manage the meeting, make sure to remind participants of the different tools you will be using to share information, ask questions, and interact with each other.

The following suggestions will help you increase the accessibility of your Zoom meetings:

Repeat questions that are asked verbally and through chat.
Describe images, charts, graphs and any other visual information of significance.
Speak in a relaxed pace and avoid making rapid movements with the mouse when you are sharing your screen.
When using annotations or the Whiteboard, always narrate the visual content you are creating.
If you are using an American Sign Language Interpreter, use the Spotlight tool in Zoom to keep the interpreter’s video window prominently displayed. Likewise, if you are using break-out rooms, manually create the breakout rooms so you can ensure the interpreter is placed in the correct breakout room.

Managing Captioning

The Zoom meeting host has the ability to share a lot of capabilities with selected co-hosts, but only the meeting host is able to manage closed captioning.

When the meeting host clicks on the closed captioning button, the captioning preferences window will be displayed.

Captioning settings from Zoom meeting host perspective.

You can assign the role of captioner to another meeting participant, or you can copy the API token to enable the use of a third-party captioning tool.

It is highly recommended that you do not try to caption the meeting while you are hosting it. It has been found that the quality of the meeting and the captions both suffer when the meeting host tries to be the captioner while also managing the meeting.

Keyboard Shortcuts

There are several keyboard shortcuts you can use within a Zoom meeting to make the experience easier to manage and more accessible to.

The following keyboard shortcuts are just a brief collection that can be useful for you in hosting a Zoom meeting. You may also want to share them with meeting participants before the meeting.

Change focus to Zoom meeting controls = CTRL + ALT + SHIFT
Mute or Unmute audio = ALT + A
Mute or Unmute audio for all except host (only available to Host) = ALT + M
Show or hide floating meeting controls = ALT + SHIFT + H
Cycle through Zoom program windows = F6
Increase or decrease chat display size = CTRL + PLUS or MINUS

Final Thoughts

While there are many possible scenarios you may encounter when hosting Zoom meetings, the best results will happen when you are well-prepared and able to adjust to new information.

Understanding how to use the Zoom tools for interacting with participants and managing a meeting can make a huge difference in your Zoom meeting experience. Being comfortable with using the different meeting tools in Zoom will allow you to better manage last-minute surprises and accessibility challenges.

Essential Accessibility

a woman and child hold hands while walking down a forest path illuminated with beams of sunshine — Photo by James Wheeler on Unsplash

You might have recognized that accessibility happens across a spectrum of detail and capability.

There is a simple and essential accessibility in having the ability to open a digital file and perceive the contents. On the other end of the spectrum is a polished document with detailed formatting and consideration given to the concepts of universal design and equitable experience.

In the midst of an accessibility breakdown, the first priority is to establish reliable communications.

Ensure that the essential learning objectives can be taught accessibly, even if it is just through simple text.

Enhancing engagement becomes a secondary concern when a student can’t even access the information to try and engage with it.

Making your instructional content as accessible as possible for future cohorts of students is still a priority, it is just secondary to ensuring essential access.

Doing it Right the First Time Saves You Pain and Expense

The logistics of accommodating an individual who is not physically located at your institution present numerous challenges.

There are simply too many unforeseeable variables to provide effective accommodations in response to users in real time as they are notifying you they have a need.

We have to ensure effective access for all individuals in advance of courses being offered. This is the only way to avoid students with disabilities getting stuck in a situation where they need to be accommodated in order to proceed and succeed.

As challenging as it might be at times, the time and resources spent making content accessible in advance will always save you money when compared to the cost of responding to a legal complaint over inaccessible content.

Usability vs Technical Accessibility

Even though the two concepts are very closely related, there is a big difference between usability and accessibility in practice.

Usability is the determination of whether or not something is actually functional and useable by an individual with a disability.

Accessibility is a measure of quantifiable criteria, according to a specific standard.

Often the adoption of Accessibility standards will lead to usability, but not always.

Online accessibility needs to be established in concert with a high degree of verified usability in order to ensure effective access for individuals with disabilities.

Content that is not usable is unacceptable, regardless of how well it measures up to any technical standard.

100% Accessible is a Myth

The fact is, 100% Pure and Total Accessible does not truly exist in the wild.

Whatever content you create, given the extreme diversity and sheer mass of humanity occupying the planet, it is inevitable that someone can be found for whom your content will be unusable and inaccessible.

The truth is, we are making things adaptable when we say they are accessible. This is because often the specialized needs of one individual require content to be formatted in a way that makes the content inaccessible according to another individual’s specialized needs.

In designating something as accessible, there is an expected element of flexibility and adaptability that prevents anything being nailed down too rigidly.

Accessibility does not mean you deliver 100% usability so much as you deliver content that is as open to customization/personalization as possible.

Additional adjustments are expected by individual user technologies, and thus the final rendering of the information is not in your purview.

“Technology-Agnostic” content is a term for content that can be rendered accessibly across different hardware and software platforms. Well-formatted, technology-agnostic content is what is necessary for the greatest usability scenario.

Accessibility is Adaptability

In the social model of accessibility, it is not the individual who is “lacking” anything because of a disability. It is the environment that is lacking the appropriate design elements to make it usable by the citizenry.

The transferable idea for online learning is that technology can be managed in a way that provides the necessary customization of the digital landscape for each individual as needed.

It is understood that everyone will show up with their own unique skillset and abilities. We all meet in the middle, leveraging our technology to ensure access where necessary.

We don’t need to anticipate every potential usage scenario. We just need to maintain an environment with as few obstacles to people using it in the manner they need to.

Responsive Accessibility

a desktop computer, a laptop computer, a graphics tablet, and a cell phone all sit on a desk displaying information — Photo by Domenico Loia on Unsplash

We can deliver the most effective instruction when each individual is able to configure their interface and information delivery to meet their needs.

True responsive design happens when the content has the appropriate structure to provide consistent meaning while retaining the ability to flow into whatever specialized technology a student might be using.

For example, MS Word is a powerful editing tool for digital content. Even so, it is not always the best digital container to present information in.

However, the content created in Word can be styled and formatted in a way that enables it to be easily converted into any alternate format you need. It is easy to convert content from MS Word to be presented in many different digital frameworks.

This enables one source document to be created that can be delivered to an entire class of individuals with differing needs and specialized software, and each of the students will get the customized rendering of the content in the format they are able to interact with.

You don’t have to make any of these formats, you just make the one master file in a way that allows the technology to convert the information into the appropriate format for each student.

These capabilities are the result of technological standards such as Section 508 and WCAG (Web Content Accessibility Guidelines). These standards identify the essential considerations for making your content accessible enough to be usable in most conceivable situations.

However, even when you meet all the technical standards, your content is not 100% accessible. The best you can say is that your content is conformant with the Section 508 standards and WCAG.

There is always a chance that tomorrow some individual with a unique set of skills might show up to educate you further in the amazing diversity of humankind.

You Make the Difference

Leadership is the element that brings this vision to reality, and it is critical to realize that leadership is not reserved for management. Sometimes the most effective leadership is that inspiring example you provide by simply doing the best you can.

You have the ability to inform and inspire your colleagues by setting the right example, and by speaking up and sharing what you know.

If you are involved in governance committees at your institution, make sure that accessibility is discussed and addressed. Providing awareness of accessibility is the first step towards affecting change.

When the entire institution is informed and empowered to do their best work, accessibility can happen as a result of people simply doing their job right.

Informed and effective management can ensure employees are properly trained and held accountable. The creation, delivery, and maintenance of accessible infrastructure and processes becomes an accepted aspect of basic operations.

Remember that accessibility is not just the right thing to do according to the law, it is the right thing to do for delivering truly effective education, and the right thing to do for the people in your community.

Think about this – we all benefit when the education system is more accessible to the people who need it.

Thanks for doing your part, and thanks for reading!

August 30, 2020August 30, 2020

Student Engagement: Ensuring Accessibility for All

Smiling student wearing headphones and taking notes. — Photo by Ben Mullins on Unsplash

When designing and delivering online education there is a strong focus on engaging the learner. In order to remediate the effects of teacher and student being separated in time and space, the course content needs to be as engaging and interesting as possible.

This becomes even more true as the interest and motivation of the student decreases.

It is natural for teachers to seek out professionally produced digital content to add to their course in an attempt to make the course more engaging and interesting.

Ironically, this content for creating student engagement can sometimes create accessibility problems.

Learning Tool Integration (LTI)

There is a class of technology available for online learning that enables powerful extension of your LMS’ capability. It can bring third-party content into the LMS and tightly integrate it with your content.

Utilizing internet-based computing, it is easy to add engagement to your course through an LTI module that integrates content and interactive functionality.

These LTI technologies are often created for faculty who want to add engaging and interactive content to their course without the hassle of learning HTML or digital design.

With an LTI module, additional menu items can even be added into the menu of the LMS, and affect the core functionality of the LMS.

Unfortunately, a lot of LTI modules and other content that is created for enhancing the engagement of online courses is designed with sighted mouse-using individuals in mind.

Before you integrate third-party digital content, it is a good idea to perform a basic accessibility test and make sure you aren’t setting the stage for an accessibility drama to unfold.

Accessibility Considerations for LTI and Third-Party Content

When considering the accessibility of new technology for your online course, it is wise to start with a quick and simple keyboard test to weed out the obvious accessibility dead-ends.

Even though it is a quick and simple test, you still need to be thorough and ensure that all critical functions are keyboard accessible, at a minimum.

However, even if the content passes the quick initial test, that is not all the testing you need to do. Ultimately, you need to ensure that the content and technology can pass WCAG AA criteria for accessibility.

Quick and Simple Keyboard Testing

Install the LTI or content pack into your development course and make sure it is activated and working.

Using the standard keyboard commands for navigating and interacting with digital content, use the keyboard to navigate and interact with the content/technology you are evaluating.

Consider the following issues:

First, identify how the LTI or content pack will integrate within your course.
Does it add any menu items?
Does it add any options within an internal form, activity, or toolbar?
Can you navigate to the new interface items with the TAB key?
Does the LTI or content pack follow a logical order when you consider it’s sequence among the other elements you can TAB to?
If applicable, can you use the ARROW and SPACEBAR when you would expect them to be available options?

Now that you’ve ensured a basic level of keyboard access, we can expect a basic amount of accessibility. This simple level of testing will disqualify many of the worst LTI modules and content packs that are inaccessible.

If you can answer yes to the above questions, then your LTI or content pack is on good footing so far, but it’s still too early to get happy.

We’ve only done a quick check so far, a basic inspection to make sure there are not giant obvious gaping accessibility issues.

You still need more detailed data in order to determine the accessibility of the LTI or content pack. Following are some additional considerations to keep in mind as you continue testing the LTI or content pack for accessibility.

WCAG 2.1 AA

You will need to ensure the LTI or content pack satisfies the Section 508 requirements for electronic technology and information as well as meeting the WCAG 2 AA criteria.

This is where you should seek some assistance from your instructional support team, or hire a qualified accessibility professional to assist with more in-depth testing and a thorough accessibility audit.

Usability

In addition to an accessibility audit against the Section 508 and WCAG 2 AA criteria, a usability test is the ultimate test for whether or not the LTI or content pack is going to be accessible and truly usable by all students.

An individual with a disability who uses Assistive Technology every day can provide essential insight to help answer some of the following questions:

Does the LTI or content pack provide an advantage for students that is not possible for students with certain disabilities?
Is it inherently inaccessible to certain individuals for some reason?
Is there an equivalent academic accommodation you could provide?

As a responsible educator you are given a lot of deference in terms of deciding the instructional value of these things. Now you have the essential skills to make a more responsible choice for your students when selecting content to enhance their engagement.

Thanks for reading!

August 29, 2020August 29, 2020

Leveraging the Accessibility of your LMS

woman studying books in front of a computer and cell phone. — Photo by Mateus Campos Felipe on Unsplash

The LMS as Digital Ecosystem

At the hub of your online learning toolkit is a foundational bit of technology that is often taken for granted, the Learning Management System (LMS).

The LMS is a huge determiner of what kinds of content you can use as part of your online course. The ability to interact with data across different technologies while maintaining the security and privacy required for the modern world is a critical aspect of delivering online education.

Essential LMS Capabilities

In general, it is expected that a modern LMS should be able to provide a suite of basic functions:

Storage of files
Creation of HTML pages
Various activities/modules for organizing content
Assessment tools (Quiz/Exams)
Forums/Discussion Boards
Email communications
Gradebooks

To name a few…

Accessibility has largely been built into the framework of most modern Learning Management Systems, most likely as a requisite element in getting the government-sponsored contracts with public school districts across the US.

That’s the beauty of Section 508, it requires you to buy the most accessible version of technology that delivers your business need, so all the LMS vendors basically have to deliver the same level of accessibility.

However, there is nothing so simple it can’t be undone with some third-party “enhancements”.

Accessibility in your online course may start at an acceptable level, but it is possible to introduce technologies that do not provide the necessary level of accessibility.

LMS Virtues and Weaknesses

Typically, the LMS provides an accessible structure you can build your course in. Issues like heading structure and accessible interactive elements are built into the interface, so theoretically your LMS is accessible. But this is mostly true when your course is empty.

As you build your course, your design decisions will influence the final measure of accessibility.

If you use the formatting features in your content creation tools to enable accessibility as you create content, then your course accessibility remains intact.

If you introduce content that does not provide the formatting required for accessibility, you actually take away from the overall accessibility of your course.

It doesn’t matter if the LMS framework is accessible if you put an inaccessible file inside it, the file is still inaccessible. Information doesn’t automagically become accessible by virtue of being loaded into the accessible LMS.

There is no accessibility through osmosis or association.

WWW – World Wide Web, or Wild Wild West?

Each and every piece of content needs to be formatted for accessibility – if not by the original author, then by you.

This includes the world outside of your LMS – the Internet. When you link to a third-party website, you should check the website for basic accessibility. Remember, it is often easy to copy and paste the educationally significant information into an accessible LMS page, if necessary.

Publisher Problems

Don’t assume that a content pack you purchase from a textbook publisher is automatically accessible. Even if the sales rep assures you it is.

You need to verify the accessibility of ALL the features of the content and technology you attach to the LMS and expose to your students.

Ask the sales rep to cover the cost of accommodating any students with disabilities if their product is found to be inaccessible and see how they react.

There is much of the world of online education that is not yet accessible, but plenty of sales people who will try to sell you a problem waiting to happen.

Now you know better, and you can choose content more responsibly for the good of your students and for your success as an educator.

Accessibility Checkers

Be wary of people selling accessibility checkers for your LMS. Often these tools can be useful additions to your online tool kit, but so far none of them are capable of addressing all the accessibility challenges in your course.

Always ask about the capability of accessibility checkers to test individual documents such as MS Word, PDF, PowerPoint, Excel, etc., as well as websites you want to link to from your course.

Ask if they can test different quiz questions.

Ask if they can test the LTI cartridge you want to integrate into your course.

Unfortunately, the range of true help available from most accessibility checkers remains rather limited.

As they say, “Some assembly is required” in building an accessible learning experience for your students. Slick shortcuts and ready-baked solutions are rarely accessible. Often these are just bright shiny broken things that interfere with education for your students with disabilities.

Accessibility through Phones and Tablets

It is important to verify that all the different aspects of your LMS and your online course are also accessible when viewed through a phone or tablet using a mobile operating system such as Android or iOS.

There are many happy examples of accessibility functioning across technology platforms and operating systems, but it is not a safe assumption that everything automatically works.

Verify, and adjust your workflow as necessary to ensure information is accessible for all users in as many contexts as possible.

Support in Different Browsers

It is also a good idea to check out the accessibility of your course and LMS in different internet browsers.

Surprisingly, many LMS vendors can only claim accessibility in certain browsers using certain assistive technologies.

These LMS vendors get away with this lack of capability simply because your administrators continue to sign the contracts instead of requiring better support for accessibility.

But that is the topic for a different blog post. The point here is to be aware of any limitations that you can advise your students about before they flood your inbox with emails about broken content in a certain browser.

Portability of Content

While the LMS is a great tool for delivering online education, sometimes a student really needs the information presented in a special way to be most accessible and usable.

It is a good idea to become familiar with the export capabilities of your LMS.

Especially valuable is any ability to export course content as an ePub document.

ePub is a rich data format that is capable of presenting multiple media formats in an accessible file that is compatible with different assistive technologies.

ePub can also be loaded onto many reading devices, increasing the options for your students to be able to engage with content and study on their terms.

That’s half the joy of taking an online course, after all.

These are just some of the things you can keep in mind to make your online course more effective, truly engaging, and as accessible as possible.

Thanks for reading!

August 28, 2020August 28, 2020

The Sound of Math

A colorful depiction of a piano amidst graphing coordinates and a list of math functions. — Finalist in Desmos Global Math Art contest.

The idea of representing math through sonic information might be a rather new and abstract concept for many.

For a lot of people, the meaning behind a sonic waveform is just the noise it makes. For instance, do you know what sin(x)+2 sounds like?

Can you provide an example?

By the end of this article, you will be able to answer yes to both of those questions.

Concepts of Sonic Data

For audio information, there are a number of issues that have historically been more constraining than liberating in terms of our ability to create and use it. Namely, a lack of tools and the related supporting culture of practice and use.

Most people have simply never encountered math deliberately represented through audio- or if they did, they probably didn’t realize it was happening.

Students and teachers need to have some preparation for using audio versions of math. Some overview of what is being represented, with context provided as to what the different sonic palettes represent, and how to interact with significant data.

The Evolution of Sound

Beyond live sound, our technological capability to record and produce sound continues to grow. We started in the world of analog audio, and ironically, many hipsters continue to return there…

An analog recording of sound is a direct and singular representation of something in the world. It is evidence of a unique moment in time, a direct translation of some event or data. It typically can not be reproduced without losing fidelity, making each use one time closer to the last time it will ever be usable.

Traditionally, there have been constraints related to the cost and complexity of analog audio recording technology that put audio-based math out of reach for most people.

Issues from recording equipment, barometric pressure, ambient temperature and humidity, the list goes on. Suffice it to say that there are many variables which combine into a very challenging situation when trying to re-create consistent representations of sound.

It helps to have a recording studio.

man sitting in a recording studio — Photo by John Hult on Unsplash

And don’t forget the talent, we need a source of the sound – a means of making noise. Cue the orchestra, or get out the xylophone, slide whistle, and kazoo.

For the longest time, in order to capture sonic information, the task required a range of expensive and sophisticated recording equipment (and audio engineers to operate it). This resulted in it being out of the reach of most teachers and students.

Happier Times

Today technology for making and distributing noise is ever-present. We carry the equivalent of a recording studio in our cell phones, as well as the means of distributing our noise across the globe. I give you the Internet as exhibit A.

The Internet has provided the means for a new paradigm where audio information is easy and affordable to record and share. We can even synthesize conceptual never-before heard sonic information according to our desires, with a variety of free tools.

Today audio technology enables us to create new kinds of sounds our grandparents would most likely not approve of.

And you can count on that…

Combining Sound and Sight for Superior Communication

A central tenant of media theory is that multiple means of representing information reinforces the message being communicated.

Today we have a unique capability to express information in a variety of ways. We combine multiple forms of media into much more engaging representations than formulas scribbled in chalk or dry erase markers.

For example, consider the complexities of data-sorting algorithms, and the need to compare the logic of the algorithm in a way that demonstrates efficiencies and differences in theoretical approaches.

Written in text. a lengthy tome of incredibly boring dimensions is the result. It could easily take an hour to read this explanation, while it is represented in a fraction of the time through this YouTube video “Fifteen Sorting Algorithms in 6 Minutes”.

Besides being slightly hypnotic, this video efficiently demonstrate a rather abstract concept and relationship between the techniques of different coding approaches (sorting algorithms) used in computer science.

As a lot of people figured out in the 60’s, it is easy to get absorbed into the engaging mixture of audio-reinforced visuals. Now we can tap into that power for teaching and learning Math.

History of Sonic Math

Audio Graphing is the term applied to the process for sonic rendering of mathematic information.

As an instructional technology, audio graphing provides an interesting capability for teaching and learning – though it is not as familiar to most of us as the visual representation of math.

Audio Graphing has remained a niche use for people with disabilities, or else individuals who were deep into the science of math or sound.

The main issue has been the lack of tools that made it easy for average people to create or use audio graphing.

The most popular and reliable tool for many years was an expensive technology relegated to the fringes of assistive technology for students who were blind and studying math. Costing several hundred dollars, it was an unfortunate stranglehold on a powerful capability.

There is one notable tool from the past that still deserves some attention both for capability and for the spirit of supporting education for everyone: MathTrax from the fine folks at NASA.

MathTrax is a great example of how audio graphing can help explain math functions and concepts. It is an accessible graphing calculator that allows for individuals with disabilities to create and listen to math. There are also built-in samples for exploring the physics and functions of rocket launches and roller coasters, and it is all accessible.

As cool as all that is, it is still a rather limited range of options and a very outdated interface.

Happily, the world has changed for the better in terms of our ability to create and study math with audio graphing capabilities.

Current Evolution of Sonic Math: Desmos

Desmos is a company that provides a free suite of web-based math tools, which includes an impressive audio graphing calculator that is completely accessible, and it works across operating systems and devices.

Did I mention it’s free?

Desmos works to ensure their tools are accessible and available across operating systems and devices, as part of their mission to make math easier and more enjoyable to learn for everyone.

In addition to an impressive collection of math tools, Desmos provides free lessons and activities you can use to teach math with their tools.

Using Desmos to create content for the LMS

To use Desmos, go to www.desmos.com and create an account.

You need an account to save and share the content you make, but anyone can visit the URL for what you create – with no account required to view your content.

Before you begin, I recommend you read the page about how to best succeed in creating great digital math. It is really quite good advice.

Math Tools

Under the “Math Tools” menu you will find the different tools included in the free suite. There’s a lot of good stuff here, but today I’m focusing on the Graphing Calculator.

Graphing Calculator

Click on the Graphing Calculator option from the Math Tools menu, and the Graphing Calculator opens in full-window mode.

No ads to distract, no interruptions to sign up for the newsletter, just good old-fashioned, blast it out loud audio math.

That’s right – this ain’t your grandpa’s math. But actually, go ahead and turn up your speakers and let Grandpa learn something too.

Here is how you get it done:

First, click the big PLUS sign in the upper left-hand corner.

Choose “f(x) expression”.

Next, enter your expression via the keyboard or through the onscreen entry tool-pane.

Notice the collection of common functions that can save you time in data entry. Here is the complete list of supported functions.

When you have finished creating/editing your expression, press ENTER.

If your expression is a valid function, it will be added to the graph.

AUDIO Graphing

Here is how to play your math out loud:

With your expressions selected, press ALT + T to engage the audio graphing tool.
Press H to hear the entire expression.
Use TAB to navigate through significant points like intersections with other functions or axis markers.
Use the ARROW KEYS to navigate along the graph in either direction.

Share Your Math with the World

To show your work outside of Desmos, click on the “Share Graph” icon in the upper right-hand corner.

You can download a picture, send someone a link, or embed the code within an HTML page.

Following is the same information via an HTML embed code:

Using Desmos as a Student

Before unleashing your audio graphs on your students, you should introduce your students to the concepts of using audio graphs and the different keyboard commands for interacting with the audio graphing calculator.

Desmos provides a thorough overview of how they support accessibility, including technical information and instructions for using their product with different screen readers and assistive technologies, across different operating systems and devices.

In addition to being keyboard accessible, Desmos also provides a “Projector Mode” that makes the lines fatter and easier to see when displayed through a projector. Projector Mode also helps when a graph is being viewed on a mobile device outside, or when being viewed by someone with a visual impairment.

Desmos Unlocks the Potential of Math for Everyone

Desmos products are used by millions of students around the world, and they are unlocking the ability to find solutions to universal questions and problems while helping every student realize their individual potential, understanding, and mastery of math.

As if they weren’t already the coolest math company in the world, or maybe because they are, Desmos is sponsoring a Global Math Art contest. Please check it out, and enjoy the amazing visual and audio prize winning content – all created with pure math.

Here is the first place winner for the 13-14 Year-old Age Category:

And here is the best Audio Graph winner:

Visit the Global Math Art Contest page and see all the winners across different age categories, and share with anyone who ever tells you math is boring.

Now you know differently.

Thanks for reading!

August 27, 2020August 27, 2020

Accessible Stem Challenges

man teaching math at a chalkboard full of math expressions and diagrams. — Photo by Science in HD on Unsplash

Creating accessible STEM content for the web is not simple.

(In case you’re not aware, STEM is an acronym for Science, Technology, Engineering, Math.)

There are limited tools for creating accessible STEM content for the web, as well as limited technology for reading/studying the content.

Typically, the visual nature of STEM is the biggest challenge in creating accessible digital content. So often, a visual depiction of STEM is created because it is so challenging to describe the content verbally.

Accessibility can be ironic.

Because there is no effective technology to decipher and describe graphs, charts, and other graphical representations of STEM content, we are reduced to simply describing the images of this content that can not be easily represented by other digital means.

You need a specialized ability to verbalize complex STEM content in a way that is understandable, as well as a deep understanding of the STEM content itself. It helps to have instructional design skills to discern the instructional strategy and create an accessible alternative.

Most of the math teachers I know do not have a degree in instructional design – thankfully we have a technology that is helping bridge the gap.

MathML

For the discipline of Math, there is some ability to render accessible expressions via digital technology.

Using a technology called MathML, it is possible to codify a mathematic expression so that it can be communicated over the Internet and even read by screenreaders.

The ML from MathML stands for “Markup Language”. The different aspects of the mathematical expression are identified through specialized tags to identify both the operator and/or value of numerical information and their placement within the expression.

Semantics Through Layout

For math content, another confounding issue is that a lot of the meaning is conveyed through the visual layout of expressions. It becomes challenging to accurately express complicated expressions simply as verbal descriptions.

It is even more challenging to learn math by listening to verbal descriptions without the ability to interact with the components of the expression.

True usability occurs when a student can interact with each part of the expression and navigate through the different parts of the expression – in the same way a sighted person “studies” key parts of the expression to discern the meaning.

Simply listening to the expression is not the same thing as studying and navigating through the individual parts of an expression, and MathML provides a solution that is more accessible than a simple description (however difficult the description might be to come up with).

Special Characters

Another confounding issue with STEM is the use of special characters and the Greek alphabet. These characters are not always commonly supported, either from the reading or creating standpoint.

Limited Alternatives

Because MathML is so challenging to work with, a lot of people simply create images of expressions and provide a verbal description.

This is not really an equitable experience for someone who can not see, and certainly not the most effective way to teach Math.

Nemeth Braille

For those few individuals who have the ability to read Nemeth Braille, there is a solution in the form of electronic refreshable Braille displays. Much like a screenreader can verbalize information, they can also provide a tactile representation through a refreshable Braille display.

When provided with properly formatted MathML.

But hey, it’s easier than making Nemeth Braille!

LaTEX

LaTEX (pronounced LAW-tek) is a text-based code for representing mathematical expressions.

Originally used in the printing and typesetting of STEM books before the digital revolution, LaTEX is a code that allows for representing mathematical expressions in a text format. This is a good option if you and your students happen to know LaTEX.

Reading Expressions vs. Interacting with Expressions

For most people, it isn’t very difficult to recognize the challenge of learning math by only listening to descriptions of mathematical expressions.

Realize that students need to express their understanding of the material as well.

So students need to learn how to speak mathematical expressions back to the teacher (in addition to learning math), or be able to transcribe into LaTEX.

MathType

Thankfully there is a program called MathType.

MathType allows for easy creation of mathematical expressions and chemistry formulas that can also be rendered as accessible web pages for use with screenreaders and magnifiers.

MathType also supports LaTEX, so for students and teachers who know LaTEX, it is even more powerful.

MathType has a standalone application as well as multiple plugins for different popular authoring programs such as MS Word and PowerPoint.

Recently, MathType released new plugins for Google Docs and WordPress, as well as the Canvas LMS and Moodle LMS, increasing the range of options for creating and presenting accessible math content.

Desktop vs Web

There are different pricing options for MathType plugins for Canvas and Moodle. Read more about the differences at the Design Science Website.

The Google MathType plugin is free, and it creates accessible math expressions within a Google doc.

The standalone version of MathType will also integrate into all recent versions of MS Word, in addition to having its own standalone interface.

MathType Basic Workflow

You create and edit your mathematic expressions in the MathType Editor.

Whether you prefer working in the Desktop version…

… or the Web-based version of MathType.

Both versions allow you to create accessible web-based math expressions, the desktop version also supports additional workflows for non web-based and printed math.

MathType in MS Word

When you install the desktop version of MathType, it also populates MS Word with a plugin that allows you to create and embed math expressions within your MS Word document.

The MathType toolbar provides powerful support for creating and editing math expressions inside MS Word.

You can also use the MS Word plugin to create accessible web-based math expressions.

Creating Math Expressions

MathType provides many pre-built expression components that are commonly used in math, and it also provides the individual elements of math expressions to allow you to create whatever kind of math you need to.

There are common groupings on dedicated tabs for Algebra, Derivatives, Statistics, Matrices, Sets, Trigonometry, and Geometry.

Click on the element you want to add, and then use the keyboard to enter the numbers and variables of your expression.
Use the arrow keys to move around within the expression.
DON’T USE the SPACEBAR, it does not work in MathType. MathType takes care of the spacing automatically.
When you have finished entering the math expression, go to the File menu of the MathType editor and choose “Close and return to MS Word”.
MathType will ask you if you want to save the expression, say yes.

Publish to Webpage

When you have completed your page of math and you are ready to create the web-based version, click on the MathType toolbar.

Click the “Publish to MathPage” option.

Publish to MathPage option from the MathType Toolbar in MS Word.

The Publish to MathPage options will open. In the “Equations” section, choose MathML.

There is a pull-down menu that allows you to fine-tune your choice of technology for rendering the MathML. Check with your system administrator to verify which version is supported by your LMS.

Firefox for Math

The support for MathML varies from browser to browser, and unfortunately, it often varies over time as well. As of today, I had best results in the Firefox browser using NVDA to test the different output options.

I also found adequate support in Chrome with the Google Docs MathType output using the NVDA screenreader.

MathType enjoys a place as the sole option in terms of being able to easily produce accessible math expressions.

Learn more about MathType and the different authoring environments it is supported in at the Design Science website.

Now you have an option for creating accessible math expressions for the web.

Thanks for reading!

August 26, 2020August 26, 2020

Accessibility through Assimilation – Bring it into the LMS

Slate with the words "You've got this" sitting on top of a laptop with headphones next to a cup of pencils. — Photo by Emma Matthews Digital Content Production on Unsplash

Sometimes you find a novel or impressive way of communicating information out in the wild west of the World Wide Web. You find some form of content that would be a great addition to your online course – but you quickly find that it has some critical accessibility failing that makes it unacceptable.

If you’re thinking that you can’t use this otherwise impressive content because of the lack of accessibility, consider another option.

Sometimes you can bring a problem out of the rough and sink it into the nice manicured green of your LMS.

Admittedly, this is not always possible, as some content may require complete re-programming to address the accessibility problems it contains. However, for certain media you can recreate the essential aspects of what is being communicated as an HTML page within your LMS.

Essential Accessibility Concepts of WCAG – POUR

When considering content that can be improved upon, remember the four guiding principles of WCAG, POUR:

Perceivable
Operable
Understandable
Robust

Ultimately, the WCAG nails accessibility down in simple terms that are easy to remember and apply to content you are teaching.

Perceivable

Perceivable content is styled and represented in a way that allows it to be presented to at least one of the human senses.

No content is invisible to ALL of the senses, there must be a representation of the content that is perceivable by whatever capability a user possesses.

Operable

The interface menus, links, and functionality must be operable by all users. Keyboard control is one of the easy tests to see if content is operable, but it is just a beginning.

Understandable

The content and the intended use and operation of the interface must be understandable. As an educator, this should be an easy one to discern and improve upon, if necessary.

Robust

Content needs to be adequately formatted and designed so there is enough information for a variety of different user agents to make sense of it. Over time, the information should retain the core meaning and capability of being expressed through evolving technologies.

Having thorough text descriptions and formatting content with semantic styles like headings and lists is a great way to make content more robust.

When you find digital media that can be improved upon, follow the WCAG concepts of POUR to enhance the message as much as possible.

Essential Interactive Elements

Moodle activities and resources you can create in the LMS.

Your LMS can be used to create many of the interactive elements used by digital designers. From basic HTML pages to more sophisticated content packages, today’s modern LMS offers the capability to create several types of accessible interactive content.

Consider mapping out just what kind of interactivity is present in the content, and see if you can duplicate it within the LMS.

Undescribed and Unlabeled Content

It is very easy to provide alternate text descriptions for images within your LMS.

If the only accessibility issue you find is missing or inappropriate alternate text, then copy and paste the images into your LMS and provide appropriate descriptions for those images.

Remember that form fields require text labels as well.

Inaccessible polls and surveys can be recreated accessibly with the assessment and feedback tools of your LMS.

Bad Contrast

If there is bad contrast between text and background, that is another issue that is extremely easy to fix.

Copy and paste the text into your LMS and apply appropriate colors for WCAG-compliant contrast ratios.

Likewise, if the focus indicator has been styled to be invisible or difficult to see via linked CSS, you can copy and paste the content into your LMS. The styling for the focus indicator will be formatted according to your LMS CSS settings.

Bad Instructions and Layout

Sometimes good content comes with bad instructions, explanations, or just a confusing or cluttered layout. Redesigning a problematic page for easier readability is a valid activity for accessibility and a great use of the LMS.

Bonus Lessons

Another benefit of fixing accessibility issues by redesigning the content within your LMS is the opportunity to demonstrate to your students how to responsibly synthesize information into new forms of media, and how to properly cite sources when using other people’s content.

Reproducing content within the LMS can provide a simple means for addressing basic accessibility concerns, and it can also be a great way to focus user attention and keep students in the LMS.

You’ve learned not only how to assess content for accessibility, but how to make content better for accessibility and learning. Now when you encounter inaccessible content, it doesn’t have to be a dead end – you can create options and improve the situation for everyone.

Thanks for reading!

August 25, 2020August 25, 2020

Checking Other People’s Accessibility

Woman in white lab coat points at a screen of test results as a crowd of people watch approvingly. — Photo by National Cancer Institute on Unsplash

It is hard to imagine an online course without any links to other sources of content on the Internet.

Talk about a wasted opportunity – to have the whole world wide web at your disposal as an instructional resource, and to not tap into that power?

Again, hard to imagine.

What We Know Now

We’ve covered the basic aspects of web accessibility this month, and if you’ve followed along, you should have a pretty good grasp on what it is we should be hoping to find in any accessible web content:

Headings with logical structure
Resizable text
Alternate text descriptions for imaged
Text transcripts for audio files
Captioned video in accessible video players
Color Contrast that ensures easy readability
Forms with labels and keyboard control
Page title and language – meta information matters
Visual focus and keyboard access
Strobing animations and blinking text

These are all simple aspects of web design that carry a significant impact on the accessibility of the content. There is more to consider before a web page can be considered completely accessible, but satisfying these criteria puts the web content into pretty good standing for being usable if not completely technically accessible.

So let’s look at some of the considerations for checking other people’s web content for accessibility.

We will be making good use of the WAVE tool for today’s activity.

The WAVE accessibility evaluation tool. — The WAVE accessibility evaluation tool is available at wave. webaim.org

Headings with Logical Structure

Of course we want to have headings in the web pages, but that is not enough. We also want those headings to be used properly in terms of their structure.

One of the quickest ways to evaluate the structure of headings in a web page is to run the page through the WAVE accessibility evaluation tool from WebAIM.

Paste the URL of the webpage you want to include in your course into the Web page address field and press ENTER.

When the WAVE report loads, click on the Structure tab to review the heading structure.

The report will provide an outline comprised of the headings.

If the results don’t look like a proper outline, you know there is a problem with the content.

Resizable Text

person holding a magnifying glass up to their eyes, which are covered with blue sunglasses. — Photo by Marten Newhall on Unsplash

Another issue that is commonly found in problematic content is that of text that does not gracefully change size.

When people with visual disabilities enlarge the web content to make it easier to see, poorly formatted text will present problems. Sometimes parts of sentences become invisible, or text will wrap on top of other text, or text can grow beyond the size of the layout and disappear.

There are two primary ways to enlarge web page content.

Page magnification enlarges everything, including images and layout elements like space between lines and paragraphs.

Text enlargement only increases the size of the text. It is with text enlargement where you tend to find the most egregious problems.

The specific instructions for text and page zoom vary from browser to browser. Consult your browser help section for guidance in adjusting your settings.

Alternate Text Descriptions for Images

There are two aspects to checking for alternate text descriptions for images.

First is the simple verification that there is any kind of alternate text present in the “alt” tag for the image.

Second is to make sure that if there is a description provided, that it is appropriate and effectively describes the image.

To check a webpage for alternate text descriptions, copy and paste the page URL into the WAVE accessibility checker.

Use the icons generated by the WAVE report to assess the status of the document’s alt text descriptions.

If there are images with missing alt text, WAVE will indicate this with a big red Alt icon, bearing a white stripe down at a diagonal.

If there are images with alt text present, WAVE identifies them with a big green Alt icon, with the word “Alt” written in white. For these results, check the description and make sure that it is accurate and effectively describes the image it refers to.

Visual Focus and Keyboard Access

Gray keyboard with red CONTROL key, Green ALT key, and blue COMMAND key. — Photo by scottishstoater on Unsplash

When you review third-party content to include in your course, always check for the visual focus indicator and do a keyboard check of the basic accessibility of the interactive elements of the page.

TAB between different interactive elements.

Use the ARROW KEYS to explore different options for menus and forms.

SPACEBAR will engage with most form fields that can be checked or activated, and allow you to select an option.

ENTER will activate the interactive element under your focus.

ESCAPE will cancel form entry for the currently focused form field.

Text Transcripts for Audio Files

If you find any audio files included in the content, check for the presence of a text transcript.

Depending on the audio file format, a transcript could be provided through an associated text file, or embedded into the Lyrics meta-information field.

At a minimum the audio should be accurately represented by the text file.

It is not required for accessibility, but usability is greatly enhanced when the transcript is provided as interactive timed text.

Captioned Video in Accessible Video Players

With digital video, you need to have proper captions that effectively describe the audio content via text.

Play any videos contained within the page and ,make sure there are captions available, and that they are actually representing the audio information accurately.

It is optimal for the captions to be capable of being toggled on or off, but it is acceptable to have captions that are always displayed.

In addition to the presence of captions, ensure that the video is presented through an accessible video player that is keyboard controllable.

Color Contrast for Easy Readability

Color contrast is one of those issues that can have a surprisingly large impact on a lot of different visual disabilities.

The WAVE tool provides a wonderful contrast check as part of it’s accessibility assessment.

Enter the page URL into the WAVE tool and click the Contrast tab to evaluate the color contrast ratio.

Forms with Labels and Keyboard Control

Form fields are interactive elements, and as such they must be operable via the keyboard.

Using the TAB key, you should be able to navigate to any form elements contained in the page.

Using the ARROW Keys, SPACEBAR, ENTER, and ESCAPE, you should be able to verify that the forms are in fact keyboard controllable.

In addition to being keyboard controllable, each form field needs to have a text label that describes the form field.

Sometimes it is possible to have a visual label appear next to a form without actually being associated with the form field. This is an accessibility problem, as someone without sight could end up not knowing what kind of data the form is expecting in that field.

Use the WAVE tool to reveal any forms that are missing labels.

Page Title and Language – Meta Information Matters

One of the invisible aspects of a web page that you need to verify is the presence of a page title and a declared language.

Once again, the WAVE tool makes it easy to find out if either of these elements is missing.

WAVE tool showing a page with missing title.

Look for a big red square with a white T in it for a missing page Title.

Missing Language will be indicated with a big red square containing a white globe icon.

WAVE tool showing a missing language error explanation.

Strobing Animations and Blinking Text

There is an unfortunate response to certain frequencies of animation that can cause seizures and narcoleptic reactions. It is important that you do not include any content that has blinking text, flashing text, or animations that create any kind of repetitive or strobe-like effects.

By ensuring the above accessibility concerns are addressed in the third party content you include as part of your online course, you help ensure that your students with disabilities are able to complete the assignments and gain the same educational opportunities as their non-disabled peers.

Thanks for reading!

August 24, 2020August 24, 2020

Dynamic Content and Accessible Interaction

hands on a keyboard with a mouse, yellow watch, and cellphone on the periphery. — Photo by Damian Zaleski on Unsplash

Dynamic content is content that can change based on the interaction of the user. The difference between information that is simply read, and the content that is “clickable” comes down to a small group of interactive controls.

Interactive digital content is what makes the Internet the most amazing thing to ever happen to human beings since the opposable thumb – it enables a new potential for communication and connectivity between humans that is inspiring and life altering. Interactive content on the Internet is facilitating social and political revolutions around the world.

Now the revolution will not only be televised, it will be accessible to people with disabilities…

By allowing people to interact with each other through remote technology, the Internet has broadened the potential of humanity. The Internet helps people to embrace and celebrate knowledge of each other. Interactive media enables people to participate more fully in all the different aspects of modern life.

When created properly, this is especially true for people with disabilities.

Amazing.

Here is one big takeaway: when you create opportunities for your audience to interact with you or your content, follow the standards for accessibility to ensure that your interactive content lives up to its potential and is not missed by those with differing abilities.

Another big takeaway: when you select digital content to use as instructional materials, you can use the keyboard commands at the bottom of this post to evaluate the accessibility of the interactive content.

Standard Interactive Elements

Despite all the different websites and applications in existence, there are just a small number of interactive elements that make them possible.

Following is a list of common interactive elements found in digital media:

Auto-complete
Button
Checkbox
Dialog
Link
Menu – Complex
Menu – Simple
Menu -Tree
Radio Button
Select Menu (Drop Down Menu)
Slider
Tab Menu

Interactive Elements across the Internet

The interactive elements listed above are like building blocks for digital designers who create content and applications. These elements are expected to function the same way in MS Word, PDF, HTML, and your LMS, just to name a few examples.

Designers who create interactive elements that resemble the above elements in appearance but do not include the keyboard controllability described below are not accessible.

Keyboard Interaction

The process for interacting with each of the different elements via the keyboard should be the same across browsers and applications.

You can navigate to and among interactive elements by using the TAB key, or SHIFT + TAB.

When you are selecting interactive content to use as instructional materials, ensure the different interactive elements can be controlled via the following keyboard commands:

Interactive Element	Keyboard Control
Auto-complete	Start typing to initiate the auto-complete suggestions.Use the ARROW Keys to navigate among the different options.Use ENTER to select an option.
Button	ENTER or SPACEBAR will both activate buttons.
Checkbox	SPACEBAR will toggle a checkbox between checked or not checked.
Dialog	ESCAPE will close dialogs.Modal dialogs need to retain keyboard focus and return focus to the element in the document that initiated the dialog when closed.Non-modal dialogs should close automatically when they lose focus.
Link	ENTER will activate a link.
Menu – Complex	UP and DOWN ARROWS move between menu options.ENTER can expand a menu to reveal its items.ENTER will select a menu item that is not expandable.LEFT and RIGHT ARROWS will expand or collapse menus.
Menu – Simple	TAB will navigate between menu items.ENTER will select a menu item.
Menu -Tree	UP and DOWN ARROW keys navigate between options.LEFT and RIGHT ARROW keys expand or collapse submenus/move up or down a level in the hierarchy.
Radio Button	ARROW KEYS move between options.SPACEBAR selects/toggles options.
Select Menu (Drop Down Menu)	UP and DOWN ARROW to navigate between options.SPACEBAR expands menu.ENTER selects an option.
Slider	ARROW KEYS increase or decrease the value.HOME or END take you to the beginning or ending value for the slider.
Tab Menu	TAB to enter the menu. ARROW KEYS navigate between the different tabs.

The keyboard commands to interact with data.

Limited Keys Bring Great Potential

The entirety of the Internet should be available via just a handful of keys.

Using just TAB, SHIFT, SPACEBAR, ENTER, ESCAPE, and the ARROW KEYS will allow you to interact with most accessible content.

Now you know how to test interactive content for keyboard access, and you can more effectively select appropriate content to include as part of your instructional materials.

Thanks for reading!

IDWerdz

Posts

Zoom Accessibility – The Basics

Zoom Accessibility

Pre-Meeting Preparation

Zoom Settings

Enabling Zoom Account Settings

Live Transcription

Advance Agenda and Handouts

In-Meeting Accessibility

Inter-personal Accessibility

Managing Captioning

Keyboard Shortcuts

Final Thoughts

Further Reading