Category: Uncategorized

Walk in the Shoe of a Screen Reader User: Navigate New and Old site

On By AWGIn UncategorizedLeave a comment

A while ago, I was asking a screen reader to help out testing a new web application. An interesting topic came up about how much harder it is for a screen reader user to get used to a new site. This leads to the feedback of how every little bit of what we can do to make a website accessible improves their user experience.

Imagine your area has a new grocery store that opened up. During your first visit, you usually browse around to get a sense which aisle has certain products. Next time you go in, you spent less time looking for the location of the product. Same concept applies to navigating website even for a regular sighted user.

Now imagine again but with your eyes closed……. For screen reader users, they need to learn a new website using keyboard shortcuts for their first few visits to a new site. If we can make the website more accessible, it will make their life a lot easier.

Accessible Date Picker

On By AWGIn UncategorizedLeave a comment

I met with a screen reader user who had mentioned a great example of accessible date form control:

Greyhound Canada has a accessible date picker control which allows screen reader user to edit the date with up and down arrow keys and also navigate using the pop-up calendar.

Greyhound Canada’s accessible calendar picker

There is also an accessible Bootstrap date picker available: ab-datepicker This date picker can be customized and has great accessible features when I put it to test with NVDA screen reader. When user navigate to the pop-up calendar it announces with detailed description about the calendar picker. If you are looking to add a accessible date picker to your page, this one is worth checking out for.

JavaScript Jump Menu

On By AWGIn UncategorizedLeave a comment

JavaScript Jump Menu is a common accessibility error seen on dynamic web pages with drop down menu that has onchange / onclick event:

This is a sample accessibility validation result using WAVE showing jump menu error

Solution 1

The easiest solution I found is to use jQuery:

First, assign a class name to the drop down list:

<select class =”myselect” ……>

Second, use the jQuery change event to trigger your method of events:

$(“. myselect”).change(function () {

myEvent();

});

Solution 2

You can also use JavaScript in a similar matter for the same result. Cory LaViska has a detailed explanation of removing jump menus error using JavaScript.