If you’re new to website accessibility or even if you’re an experienced developer, understanding how your site behaves for users with disabilities can be a challenge. It’s why you should look into website accessibility tests — to understand the experience you’re providing these visitors.
There are many different types of disabilities.
Some impair the hearing and vision of users. Others make it difficult for people to use their hands or fingers or even move. There are also times when someone may want to access a website but cannot read text on their screen due to illness or knowledge differences (such as reading materials in another language).
All these groups have different needs regarding web content and functionality. It’s up to developers and website owners to ensure that your websites are accessible to as many people as possible—and not just because it’s the law!
Taking the first step
The first step to making sure your website is accessible is to expose yourself to the techniques and tools that people are using to navigate the web.
In this article, we’ll take a look at three different types of website accessibility tests that you can perform to determine how accessible a site is. These tests are:
- A color blindness test
- A keyboard-only test
- A screen reader test
3 simple website accessibility tests
There are a few different ways of testing your site for accessibility issues. Let’s look at three simple website accessibility tests.
1. Test website for color blindness
To get a good idea of how your website looks to those with color blindness, try adding your page to the Toptal Colorblind Web Page Filter tool.
You can choose from four different color filters:
- Protanopia — Red/green color blindness; anomalous red cones
- Deutanopia — Red/green color blindness; anomalous green cones
- Tritanopia — Blue/yellow color blindness; anomalous blue cones
- Grayscale/acromatopsia — Quick check for all forms of color blindness
Look at the colors used on the page, especially those with contrast issues. Some of these issues are easy to fix, like swapping a blue background with a purple one with better contrast. For others, like using red text on a white background or vice versa, it might take some time and research to find an alternative color scheme that will work better for people with color blindness.
Using the grayscale filter: if certain parts of your site are still readable in these conditions, then they’re probably fine for most people. However, there may still be some areas where this isn’t true — and these would need to be fixed before publishing your new design online (or after).
For example: If you have text overlaid on imagery, the background opacity may need to be adjusted because some or all of the image may not have sufficient contrast.
Another excellent tool for testing different color combinations on the fly is the Colour Contrast Analyser (CCA) from TPGi. You can download it for free on Windows and Mac. The tool allows you to easily find the contrast ratio of two colors using an eyedropper tool. It will also report compliance indicators and even has a color blindness simulator.
2. Test website for keyboard-only navigation
Before getting into the keyboard test, it’s necessary to point out the importance of your website’s overall structure.
Begin by looking at the heading structure. A good rule of thumb for accessible websites is that every page should have a unique title (<h1>) and headings that follow (e.g. <h2>, <h3>, and so on).
This is particularly useful for people who use screen readers and other assistive devices as they will be able to navigate your website with ease.
Headings help structure the content of a web page by organizing information into different sections by rank or level. The most important heading, for example, has the rank of 1 ( <h1> ), and the least important heading ranks 6 ( <h6> ). They help users scan the page, find information quickly, and are essential for assistive technologies to navigate a web page.
Test page structure with WAVE
You can check website page headings using the WAVE web accessibility evaluation tool and click on the ‘structure’ tab. WAVE by WebAim is a website accessibility test that provides visual feedback by inserting icons and indicators directly into a web page.
To test the headings, click on the ‘structure’ tab. WAVE will insert icons next to each heading and provide you with feedback about its accessibility. If a heading is not marked, properly will be highlighted red, and you’ll see a status message like this:
You can also check your page content using an automated tool like LERA by AdvancedBytez. Automated tools look at various factors that make up good web design for people with disabilities.
Keyboard shortcuts
Another way you can experience what it’s like to use assistive technology is by tabbing through your website, or using your keyboard to ‘tab’ to navigate through the page elements.
Test how accessible your page structure is by using the “keyboard shortcuts” or “tabindex” (the HTML attribute that specifies the tab order of an element or when the “tab” button is used for navigating).
This means that when you press Tab (forward) or Shift-Tab (reverse) while on the webpage, it highlights each link and, if using a screen reader, reads aloud what it was doing there.
You should be able to see what happens when you tab through and which element is ‘focused.’ But if not, then this will help show you whether there are any issues with focus management or focusability.
A keyboard user typically uses the Tab key to navigate through interactive elements on a web page — links, buttons, fields for inputting text, etc. When an item is tabbed to, it has keyboard “focus” and can be activated or manipulated with the keyboard.
Does your website support the ‘tabindex’ attribute?
This attribute can be used to set the order in which elements receive focus when using the Tab key. The value of this attribute should be set to a positive integer (1 being higher than 0) if you want an element to receive focus before other elements on your page.
If there are multiple elements with a value of zero (such as those that aren’t clickable), then they will all receive focus at once when you press Tab at that point in your code.
3. Test alt attributes with keyboard-only navigation & screenreader
The third of 0ur suggested website accessibility tests involves image text alternatives (“alt text”). While you’re using the Tab key to navigate (like in our second test), try turning on your device’s accessibility features to use a screen reader while doing so.
Most devices — whether desktop, tablet, or mobile — have built-in accessibility features.
While many know this is important for SEO, it’s also a key factor in making your website more accessible. Text alternatives describe the purpose of images, illustrations, and charts and are helpful for those who do not see them.
The text should be functional and provide a positive user experience but not necessarily describe the image. For example, a good alt text for a search button would be “search” and not “magnifying glass”. On the other hand, if an image is simply decorative and people do not need to know about the image, then it should have “null” alt text.
Imagine someone has a visual impairment that prevents them from seeing the images on your site, and they want to know what’s in that picture or graphic. You want to make sure that each image has an alt tag so people can tell what’s inside by reading the description aloud or by scanning through a screen reader.
WebAIM suggests using plain language when writing alt tags so they are easily understood by all users, not just those with disabilities. Harvard further suggests that to write good alt text for images, you should:
- Add alt text to all non-decorative images
- Keep it short and descriptive, like a tweet
- Don’t include ‘image of’ or ‘photo of’
- Leave alt text blank if the image is decorative (‘null’)
- Don’t worry about adding text to the Title field
An example of alt text with various contexts
- No context: a beach
- On a page about beach vacations: High-end beach resort with a guest parachuting over the ocean
- On a page about bucket lists: Person parachuting over a beautiful beach
Closing thoughts on website accessibility tests
These three basic website accessibility tests are the most straightforward ways to check your site’s accessibility. All you need is a few minutes and you’ll have a better understanding of how users of all abilities will experience your website.
The post How accessible is your website? 3 website accessibility tests to try appeared first on GoDaddy Blog.
Source: Go Daddy Garage
Originally posted 2022-09-27 01:47:38. Republished by Blog Post Promoter