Accessibility Capability Maturity Model

Accessibility Capability Maturity Model Icon, hourglass with WCAG ruler and QWERTY keyboard over a blue circle.Accessibility Maturity Model

Maturity Models have been around since the mid-80’s as a way of measuring an organization’s level of performance in terms of both formal capability and practices, from ad-hoc to policy-driven to a level of innovation and refinement. While Maturity Models were originally used in software development companies, they can be applied to a wide range of practices and industries.

person sorting different mediaTypical structure of maturity models include defined levels of maturity, essential processes, organization and strategy, goals and optimization. Even though many of the maturity models are presented in linear terms, it is not uncommon for an organization to be involved in several different areas concurrently. Accessibility Maturity Models are no exception in this regard.

From “Model” to “Process”

While the term “model” might infer a static state, Accessibility Maturity Models typically refer to an ongoing process for the institution employing the model. Typically, the models describe a process including the following five steps:

    • Initial awareness
    • Managed efforts
    • Defined strategy
    • Regularly Assessed/Adjusted
    • Optimization

Most organizations can define their practices according to one or more of these steps. Ultimately nobody really “matures” completely, as nobody can ever be completely optimized in the face of non-stop technological advances and the constant innovation in the digital information space.

Capability for Maturity

Truly, these models are actually measuring the CAPABILITY of your organization more than the current state of your digital accessibility maturity, as in what you could determine based on an audit of your digital media.

More than a measure of your product, it is an inventory of your tools, materials, policies, practices, quality control, training, research and development, and strategic plan and outlook. Your Accessibility Capability Maturity is a measure of your ability to function and perform as a member of your professional industry and community, as well as in modern society as a whole.

Measuring Your Own Maturity

wooden ruler labeled WCAG 2.1 A-AA-AAAThe World Wide Web Consortium (W3C) provides a robust framework for an Accessibility Maturity Model, which encompasses many excellent considerations. They encourage organizations to make use of it as a starting point for their own models, customizing it to match your structure and needs. You can check it out at: https://www.w3.org/TR/maturity-model/.

 

Accessibility Capability Maturity Models will vary in specifics across organizations, but most will have levels similar to the following:

Initial/Ad Hoc

All organizations begin here, even if they are past this point when they learn about Accessibility Maturity Models. At this level results are sporadic and inconsistent, as are any efforts towards accessibility.

Awareness

At this stage organizations begin to recognize the significance and importance of accessibility. Some sort of effort to raise awareness is made, typically with some introductory training. Guidelines for accessibility might also be introduced.

Compliance

At this level, organizations begin to introduce accessible workflows and focus on satisfying the basic accessibility requirements of different legal and regulatory frameworks. Accessibility audits may be performed, as well as a focused formal effort to address accessibility concerns.

Integration

Accessibility is integrated into the organization’s processes, considered from the beginning of a project’s lifecycle. This is done through formalizing accessibility requirements into the design and development standards, developing the relevant accessibility testing procedures, and providing training to staff.

Optimization

Focusing on continuous improvements in accessibility across the board. Accessibility testing is thorough and robust, combining automated and manual testing with specific usability testing with individuals with disabilities. Accessibility metrics are tracked alongside proactive efforts to discover and address accessibility challenges.

Innovation

At the highest level of maturity, organizations are leading the way with accessibility practices, and go beyond the basic minimum requirements of legal and technical conformance. Organizations at this level seek innovative solutions to accessibility challenges and contribute to accessibility standards and best practices, continuously pushing the boundaries of accessible design and technology.

Benefits of Using an Accessibility Capability Maturity Model

a graph in process of being created on a desk with pens and a ruler

By providing a roadmap for organizations to follow as they evolve from basic reactive approaches to accessibility challenges, the Accessibility Capability Maturity Model helps organizations achieve a more comprehensive, proactive, and effective approach to accessibility.

When an organization progresses through the stages of the Accessibility Capability Maturity Model, they can improve their digital accessibility, increase their customer base, enhance user experiences for people with disabilities, as well as mitigate legal and reputational risks associated with inaccessible content.

Applying the Accessibility Capability Maturity Model to Higher Education

There are many different methods of administration being practiced at the various higher education institutions in the U.S., but the needs of accessibility often lead to similar concerns and challenges.

While most higher educational institutions have unique considerations separate from those of software developers, there are many similarities which make following an Accessibility Maturity Model an effective way to achieve the same goals, and progress through the stages of accessibility improvement.

Following are some of the typical approaches followed by higher educational institutions.

Create Accessibility Policies

Most institutions have established policies requiring all digital content and electronic information systems to meet accessibility standards such as WCAG 2.1 and Section 508.

Providing Training

Faculty and Staff must be given accessibility training in an ongoing basis to ensure currency with new innovations in technology, and with legal standards as more accessibility cases make their way through the courts.

Accessible Procurement

Enforcing requirements for accessibility in the purchase of technology and digital media makes an enormous difference in the ability of an institution to satisfy the legal requirements for accessibility. Effective training on how to evaluate the accessibility of products and media allows institutions to avoid being suckered with a false or misleading VPAT. Establishing penalty structures for accessibility issues discovered in the first year after a purchase can be a great incentive for vendors to provide more accessible products and services.

Collaborate with Disability Services

Engage your local campus Disability Services Office. Most higher education institutions have a wealth of expertise and experience helping students with disabilities every day. Make sure their knowledge and expertise isn’t being ignored or wasted, include them in relevant efforts and activities, include them on procurement committees, accreditation reviews, strategic planning initiatives, etc. Get to know these people, take them out to lunch, listen to what they have to say.

Leverage Accessibility Standards

Most higher education institutions have some sort of legal requirements to follow accessibility standards. Even if they aren’t legally required to follow an accessibility standard, they probably still like to consider themselves as moral and ethical institutions, at the very least. Accessibility standards are not only a roadmap for testing and ensuring accessibility, the implication is that people who follow the standards are good people, and people who do not follow the standards are bad – and probably lazy, immoral, selfish, greedy, puppy-kicking monsters. Let’s be honest here.

Student Involvement

Another invaluable asset all higher education institutions have available to them are students. Students tend to be interested in opportunities to get experience, to make a difference, and to help people. Connecting students with your accessibility efforts is not only a great way to get cheap labor in exchange for valuable life-enriching work, it is a valuable way to increase the likelihood those student workers will carry forth their newly-gained knowledge and concern for accessibility, and spread it around as they live their lives. What a great life-long lesson.

Wooden WCAG Ruler

Take-Aways

Awareness is the first step to maturity. With a little guidance, your natural desire to be excellent can lead you to new heights and empower you to make substantive changes that benefit everyone. Our world grows more wonderful and more worth living in, the more people take on the responsibility of doing good work and looking out for each other. Accessibility Capability Maturity Models are a great way to drive positive change in whatever type of organization you want to lead.

Where is Your Organization on the Accessibility Capability Maturity Model?

Accessibility Capability Maturity Model Icon, hourglass with WCAG ruler and QWERTY keyboard over a blue circle.

 

Sources

https://www.w3.org/TR/maturity-model/

https://www.levelaccess.com/blog/the-digital-accessibility-maturity-model-introduction-to-damm/

https://www.cccaccessibility.org/acmm

https://www.tpgi.com/the-accessibility-maturity-lifecycle/

https://en.wikipedia.org/wiki/Capability_Maturity_Model

 

Assessing a Website for WCAG AA 2.1

man at desk reviews information in front of a wall of multi-color code

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

a hand-held lens reveals a more complete landscape

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

person sorting different media

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?

AI generated image of repeat offender content

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.

a graph in process of being created on a desk with pens and a ruler

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

two sets of hands interact with a computer, one touching the track pad while another points at the screen.

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.

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.

WAVE tool showing contrast results.
WAVE tool showing contrast results.

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

How to Test Online Content for Accessibility

individual interacting with mobile device, surrounded by trails of blue light symbolizing digital information.
Photo by mahdis mousavi on Unsplash

Testing for accessibility can happen in many different ways, from quick and simple to in-depth and technically detailed. In the most general terms, I break accessibility testing into three categories: Automated, Manual, and Usability.

Automated vs. Manual Testing

As the name implies, automated testing is the least labor-intensive form of accessibility testing. Automated testing also typically discovers less than 40% of the issues that affect accessibility. A human brain is required to make several of the determinations that are required for an accessibility assessment.

Because of this limitation, most people who do accessibility testing will employ a combination of automated and manual testing.

Automated testing is a wonderful way to check for all of the programmatic issues that affect accessibility, and a great way to index all of the issues that need to be conformed with in order to satisfy a technical standard such as Section 508 or WCAG.

However, Manual testing is a required element for any thorough accessibility assessment.

Standards vs. Usability

Testing for conformance with accessibility standards is an easy task for automated tools. Testing for Usability is a more varied activity, often times it is best performed by an individual with a disability who regularly uses assistive technology.

For true accessibility you need to satisfy both the standards and the usability requirements that enable the content to be interacted with the same ease of use enjoyed by individuals without disabilities.

Quick and Cursory vs. In-depth and Detailed

For many situations, it is possible to do a quick and cursory test with your keyboard and reveal critical failures that prevent any need for more elaborate testing.

If an app or webpage is not keyboard accessible, it has already failed to conform with the standards and is demonstrably not usable.

AT and Usability Testing

When a student with a disability uses Assistive Technology, they are interacting with your content in different ways than you might expect. Sometimes content is structured in a way that will force students to work harder to engage with the content.

Different types of AT focus on a specific aspect of human communication, and it is not always obvious to people how approaching content from a different sensory perspective and with assistive technology can affect the meaning and understandability of the content.

For the best usability testing, it is recommended to find an individual with a disability who has a high degree of familiarity and comfort with assistive technology. An ideal candidate is someone who uses AT every day as a regular part of their life.

Browser Tools

Most modern browsers will allow you to inspect the code of the web pages you visit. If you are not put off by reading HTML code, the truth is out there and easy to uncover. Just right-click the content and select “Inspect” within the Chrome browser, or select “Inspect Element” within the Firefox browser.

However, for a lot of people, the idea of learning any amount of HTML and trying to read code is a complete deal breaker. That’s OK, you don’t need to get down and nerdy, there are a variety of tools that have been developed for Chrome and Firefox that make it a lot easier to inspect web pages for accessibility.

Here are a few popular options:

  • WAVE Extension: by WebAIM at Utah State University is a free tool for Chrome and Firefox that allows you to perform secure accessibility checks on content within your browser. WAVE applies a graphic overlay with different icons to identify the different types of issues with the content.
  • Color Contrast Analyzer: by North Carolina State University is an extension for Chrome that allows you to check the color contrast ratios of your content and make sure you are satisfying the WCAG 2.1 requirements for contrast.
  • Axe – Web Accessibility Testing from Deque: a free extension for Chrome and Firefox that is helpful in finding issues with content not conforming to the WCAG criteria.

There are many more extensions available in the Chrome Web Store and the Firefox Browser Add-Ons collection.

Try it Out! Keyboard Accessibility

Keyboard with blue and red lighting.
Photo by Jon Spectacle on Unsplash

There is one quick and easy way to do a very basic check of the accessibility of a web page – use the keyboard.

Most of us are so accustomed to using a mouse or trackpad that you might not be aware of how many keyboard commands are available for interacting with your computer. Following are just a handful of common keyboard commands you can start using to test accessibility.

Quick and Cursory

With the keyboard, you can quickly see if there is a basic ability to access interactive elements on a webpage. This is one of the most common accessibility requirements for digital content, and can be a red flag for additional more serious accessibility concerns.

Note: this technique only works if the webpage has interactive content.

Tab it Forward

Before you try this, click inside your internet browser to ensure the computer is focused on the browser.

  • Use the TAB key to move your computer focus from each interactive element on the web page to the next.
  • Try pressing TAB right now and see if you can identify the focus indicator. It is typically a dashed line, though the styling can be overwritten by the website you are visiting.
  • Once you have found the focus indicator, you can track the focus as you press TAB and move through the different interactive elements on the page.

Shift it Backwards

The SHIFT key can be used together with the TAB key to move backwards through the interactive elements on the page.

Interacting with Forms and Menus

If you get to an interactive element that allows you to choose an option, there are standard behaviors that respond to keyboard commands for interacting with the data.

If the content is accessible, you can use the following keys to interact with the options:

  • ARROW keys move between options.
  • SPACE: selects an option.
  • ENTER submits the option.

Considerations for Keyboard Testing

  • When you evaluate web content with the keyboard, consider the overall number of interactive elements.
  • Notice the sequence of interactive elements. Consider whether there are elements that seem like they should be presented sooner than they currently appear in the sequence.
  • Notice whether there is a “Skip to Content” link at the beginning of the page. This will typically take you past the menus for the website – which can take a lot of tabbing to get through.

Keyboard testing is not a conclusive or thorough way of testing accessibility. Also, it is not enough for web content to be keyboard accessible.

Keyboad accessibility is a good start, but there are many other additional considerations for ensuring access of digital content.

With the above information you can start practicing accessibility testing on the content you create and select for your online course.

Thanks for reading!