Digital accessibility Archives • TechNotes Blog

As digital technology advances, it is becoming increasingly important to expedite everyone’s access to websites, apps, and other digital products. Web accessibility is a key factor in creating a successful web project. It not only provides an essential service for those with disabilities but also opens up the online presence to a much wider user base.

Let’s explore the importance of web accessibility, why it should be a priority for every web project, how web accessibility can make websites more accessible and inclusive to all, and how accessibility has a positive impact on user experience.

What Makes a Website Accessible?

Accessible websites are designed with features that allow users with disabilities to access the content more easily and efficiently, which includes using ARIA attributes, semantic HTML elements, and color contrast ratios that meet the standards of accessibility guidelines.

The challenge with web accessibility is to integrate it into every phase of the web development process, from design to deployment. This means making sure that user experience (UX) meets the needs of all users, including those with visual impairments, hearing impairments, physical disabilities, cognitive disabilities, and more.

When designing, developing, and deploying a website, think about how users with disabilities will interact with the site. Take the time to plan out a website’s accessibility early in the process by incorporating the following features. Doing so will save time down the line in testing for compliance.

This infographic shares three considerations (taken from the article) for accessibility planning.

Title: Website Accessibility Planning Phase

1. Keyboard Navigation: Plan to provide the ability to easily tab through website content using cursor keys, tab keys, and access keys without needing to use a mouse or touchpad.

2. High-contrast color: Plan to use a combination of two or more contrasting colors for background and foreground elements (text, icons, images) on pages to differentiate elements on pages.

3. Alt Text for Images: Plan to add alternative text to images to provide concise, accurate, and meaningful descriptions of images for visually impaired users.

Planning Phase

Keyboard Navigation

With keyboard navigation, users can easily tab through the content on a website without needing to use a mouse or touchpad. This allows them to quickly and efficiently move around the page as required. For example, keyboard navigation allows cursor keys to move around the page, tab keys to navigate between links and fields, and access keys for shortcuts to specific parts of a site.

High-Contrast Colors

High-contrast colors, a combination of two or more contrasting hues, and highlight important information, making it easier for users to find what they are looking for. High-contrast colors can be used for background and foreground elements, including text, icons, and images, to differentiate between elements on the page and facilitate access to the content. When using high-contrast colors, choose the right color combinations that are both aesthetically pleasing and legible so that users can navigate a website without any trouble.

Alternative Text (alt text) for Images

Alternative text allows visually impaired users to understand the image and its context. It also helps search engine robots understand and index the content of a page more easily. When writing alt text, describe the content of an image using simple terms. Write concisely, accurately, and in a meaningful manner to someone who cannot see the image. It should also be short enough that it does not distract everyone else from the overall experience.

Design Phase

Accessibility on desktop and mobile

Designing web accessibility for desktop and mobile browsers requires special attention to establish that all parts of the website are accessible and usable on both devices. That means considering keyboard navigation, screen reader compatibility, color contrast, font size, etc. It involves writing clean, semantic code for the elements on a page and ensuring all images, videos, and other interactive features are easily accessible without relying on a mouse or keyboard.

Keyboard users with visual impairments

Designing a website with keyboard users in mind means that all page elements are clearly presented and easily available with keyboard navigation. It also provides alternative methods for users who cannot see the content on the page, such as those who have difficulty using a mouse or cannot see certain colors.

Users with visual and hearing impairments

Designing a website accessible for the visually and hearing impaired makes all the difference in providing an enjoyable experience for those who may not have access to all of the standard website features. This includes providing images with alternative text, proper heading hierarchies, and high-contrast color combinations. In addition, developers should also offer audio transcripts for videos and include captions for audio content to provide users with a convenient user experience.

Users with cognitive disabilities

These users may need help understanding complex visual layouts or comprehending large amounts of text. Therefore, ensure the design is simple, intuitive, and easy to use. This involves using user-friendly language, minimal visual clutter, simple navigation, clear visual cues and prompts, and audio or visual options and text descriptions. In addition, ensure users can interact with a website with assistive technologies such as screen readers, magnifiers, or voice input devices.

This infographic shares four considerations (taken from the article) for accessibility design.

1. Accessibility on desktop and mobile: Write clean, semantic code for the elements on a page and ensure all images, videos, and other interactive features are easily accessible without relying on a mouse or keyboard.

2: Keyboard users with visual impairments: Present all elements clearly and ensure they are easily available with keyboard navigation and alternative methods for users who cannot see content on the page.

3: Users with visual and hearing impairments: Use proper heading hierarchies, high-contrast color combinations for page elements, and provide alternative text for images. For any audio content, offer transcripts and include captions.

4: Users with cognitive disabilities: Design a site with user-friendly language, minimal visual clutter, simple navigation, audio or visual options, text descriptions, and the ability to interact with assistive technologies such as screen readers, magnifiers, or voice input devices.

Implementation Phase

During the implementation phase, designing user interfaces that are accessible and compliant with W3C (World Wide Web Consortium) and WCAG (Web Content Accessibility Guidelines) is essential. This involves ensuring that a website’s content meets accessibility standards, such as providing alternative text for images, adding captions to videos, and providing transcripts of audio recordings.

For example, developers must consider how users with visual impairments will access content on the website by providing text alternatives to images or other multimedia elements. Ultimately, adhering to these standards during the implementation phase will help to create an equitable online experience for all users.

Test Phase

Web accessibility testing is an integral component of the web development process to confirm that a website meets current accessibility standards such as ADA (Americans with Disabilities Act) and WCAG. It also ensures that the site creates an inclusive digital experience for all users.

During this phase, developers check the accessibility status of their website to identify any user-experience issues and verify that the site is easy to use regardless of any disability.

Furthermore, the team should conduct usability tests with disabled people to get feedback on how they interact with the site to identify any remaining issues that can be addressed before launch. Checkpoints include checking for color contrast, keyboard navigation, and other features to make the website more accessible for people with different needs.

Finally, run accessibility tests using online tools like checkers or web browser extensions that provide a free accessibility audit. However, such tests should also be conducted regularly throughout the development process to identify and resolve potential issues before launch.

Web accessibility provides a level playing field for people with disabilities, allowing them to take advantage of opportunities available on the internet. Ultimately, all stakeholders should strive to make the web a place where everyone has equal access to resources and information. By following best practices in web accessibility, businesses can create a user-friendly, inclusive website that is accessible to everyone with ease.

Supporting digital accessibility remains a key priority for schools and organizations. As a blogger and website designer, I often despaired of my efforts in the area of digital accessibility. What actions should I take to make content more accessible for others? How could I better optimize my text for screen readers?

When I began working as a school district technology director, I was able to address the issue, and I’ll share several digital accessibility rubrics.

Did You Know about WAVE?
WAVE is suite of tools to help web you make your web content more accessible. Use the form at https://wave.webaim.org/, enter the web page address of your page and submit the form. You can find Firefox and Chrome extensions for evaluating pages. You can also find site-wide WAVE tools for evaluating pages. Learn More.

Why Make Content Accessible

For me, the answer is simple. When I don’t make content accessible, there is a world of people who are cut off from the content. As Kaitlyn Nielsen points out, accessible content improves access for all. She says:

Content is a critical part of your accessibility strategy. It improves the web experience for all users, not just people with disabilities.

In 2020, Raymond Rose, a TCEA member, wrote this as a comment on a previous blog entry:

“I wish that you’d include some information about making the website fully accessible (WCAG 2.1 AA). A survey of some 6k LEA websites a year ago found that only ~60% passed the webAim WAVE review.

We know that tool does not pick up all the accessibility issues. If teachers are doing websites for communications, they should be communicating with everyone.”

As you might surmise, there are a wealth of tools available to content creators. The question I have: How can we leverage these tools to improve digital accessibility? It’s an important question, and one that I can’t take credit for asking.

The Need for a Simple Rubric

In a recent TCEA Community chat, Raymond made an assertion I had to respond to.

“It would be nice if there were a simple rubric to assess digital accessibility,” said Raymond Rose. He then said, “Unfortunately, that doesn’t exist.” How could I resist the challenge of trying to make a simple rubric?

The rubric I curated and adapted addresses some key areas that Raymond identifies as important, as well as others. In his TCEA Community remarks, he highlights the United States Department of Justice. The US DOJ says:

…businesses “can currently choose how they will ensure” web accessibility. DOJ identifies the “Web Content Accessibility Guidelines (WCAG) and the Section 508 Standards. The federal government uses these for its own websites… (Source: Morgan Lewis)

Keep in mind that creating a simple rubric can be difficult. The topics are tough and can be technical. It’s important to have some way to assess the tools we use as educators.

I wish that you’d also include a comment about the accessibility or lack of accessibility for students with disabilities for each tool you review. Teachers should not be using a tool if it is not fully accessible. Source: Raymond Rose

It’s easy to get lost in the weeds, especially with a holistic or analytic rubric. To avoid confusion, I decided to use a single point rubric format.

The Single Point Rubric

Mary Dietz (2000) created the single point rubric. As Jennifer Gonzalez (Cult of Pedagogy) points out:

For teachers, they are easier and faster to create. Why? You don’t have to spend time thinking up ways people can fail to achieve the ideal.
For students, they are simpler to understand and process.

You can also use them to focus users on reflection, as you will see in my version of the single point rubric. It’s simple! The header has three columns:

Glows: How do you address this in your work?
Outcome(s): Identify intended outcome
Grows: How can you get better at this in your work?

When I first started, I had more complex column headers. I stripped out unnecessary words. The rest of the rubric tries to do the same. Give it a try, either for your organization or for your content and resources.

View complete rubric | Get a copy of the Google Doc

Reading and reflecting on the Grows question for my own work, I could see there might be room for growth. How would such indicators and questions cause your organization to grow?

More Rubrics and Resources

What? You wish there were more rubrics? You wish the rubric above addressed more areas? You may be longing for more complexity. If you’d like to see other examples, explore this Wakelet Collection.

View Wakelet Collection

Feature Image Source

Screenshot by author

Digital accessibility

How to Make Your Website More Accessible