Monday, June 5, 2017

Wrapping It Up: 30 Days of Accessibility Testing



The Ministry of Testing has declared that May should be "30 Days of Accessibility Testing". As in the days of yore when I used to take on these challenges and blog regularly, I'm in the mood to get back to doing that. Therefore, I am looking to write a post every day around this topic and as a way to address each line of their checklist.

Yes, it's past May. In fact, it's June 5th. An extended absence for Memorial Day weekend turned into a frantic last week of school for my girls and my having a lot less time to finish strongly, however, a promise is a promise, and I said I was going to do all 30 days, and I'm gonna' cover them all. Therefore, today, you get a "fourfer" and a wrap-up commentary all in one.

27. Learn how to use your mobile device screen reader.

Since I have an iPhone, this is fairly straightforward. iPhone has VoiceOver, and to enable it, you go to Settings: General: Accessibility: VoiceOver.

VoiceOver presents you with a few options to configure, such as:

- VoiceOver speed, which can be slower or faster with a swipe.
- Use Pitch change
- Verbosity: gives you an option for speech hints and to also read out emoji content.
- Voice: select a speaker whose voice you want to hear (you have a few defaults, and you can download other voices as per your preferred gender and accent).
- Pronunciations: If you want to make sure that you have certain words pronounced the way you want to you can create a custom phrase.

The biggest challenge as a sighted user is that the system slows you way down and forces you to select an area, listen to what it is and then press twice to enable that area to do something. Using the keyboard is slow because every key stroke is effectively three steps. First to locate the item and confirm that it is the item in question, and then two taps to make sure that the item has been selected. Even with full sight, I found it frustrating to type in a simple statement. I couldn't imagine keeping track of what I was typing if I was sight-impaired.

In any event, it's an interesting piece of tech and there's quit a few areas I ned to still look at to really get a feel for what it can do. More to play with after the challenge is over (which really, means later today ;) ).

28. Download and test a word document for accessibility issues.

I was hoping this would be an easy thing to test since I trade Word docs back and forth to get the show notes for The Testing Show completed, but alas, it seems that my documents are not interesting. Therefore, I figured I'd find a document somewhere interesting enough to give me an example to work with. I found "Word 2010 Accessibility Guidance - GSA" which let me do exactly that:

Example of analysis using Check Accessibility button

By clicking on Review and selecting the Accessibility Checker button, I can see in a preview window areas that can be improved. Interesting enough, a document based on 508 Accessibility Guidelines for Word Documents could use some Accessibility help. Well, I found that amusing.

29. Find 3 accessibility issues without using an evaluation tool.

Time to pick on Blogger again, or should I say, time to pick on TESTHEAD again ;).

1. Should have a default skip to content link in the tab order as soon as it enters the page. May have to hack my template to make that happen.

2. Numerous images going way back need alt tags. That's my own fault and will be a long process, but if I'm serious, I best get to it, eh :)?

3. Since I'm doing this without a tool, I am looking at the background for my blog (dark gray) and my text (light gray). It may be conformant, but I think it should be more pronounced than it currently is. 

This month's challenge has been interesting in that I was able to come up with those with less than 30 seconds of looking at the page. OK, I've been focused on it for an entire month, but from thinking my site wasn't too bad to be able to think that quickly about what could be improved, not a bad return on investment, in my humble opinion :).

30. Review the complexity of a website’s content with the Hemingway app.

Awww, this is a pay-for app. Nothing against that, but since this is a blog post about a daily challenge, I don't want to specifically purchase an app just to qualify it (at least not just yet), plus I'm already a paid Grammarly User, but Hemingway does offer a "write" option to test it out, so I'm going to take my last full blog entry and see what it says:

an example text analysis from the Hemingway App


OK, so that tells me that "therefore" is a bit stuffy and I could use a simpler word, I have a big sentence that could be cut down a bit, and I can make the page more readable, but as it is it's readable at a 5th grade reading level, and that's cool with me. Always room for improvement, but I don't want or expect my writing to require an English degree to decipher.

Wrapping it All Up

Wow, this was an eye-opening month, and this is coming from someone who professes to be an active Accessibility Tester. My thanks to the Dojo for putting this challenge together and giving me a chance to consider anew what I can do to better test for Accessibility and Inclusive Design. 

So what's next? A  few tools are going to get a documentation treatment for my internal testing pages for my company, and even more important, I'm going to do some digging to figure out how to hack my blog template to qualify for WCAG 2.0 AAA rating. I've made a few changes to it this month, but there's plenty of room for improvement, and therefore I should be busy with this challenge well beyond my tardy week past May. 

For those who have read along, I thank you. For those who have taught me much this past month, I thank you even more. For new friends I have made through this challenge, thank you for your patience, your consideration and opening my eyes to ways I can both test better and be a better advocate. 

It's been fun, and I look forward to the next "30 Days of Testing" challenge, whenever it may be. 

Friday, May 26, 2017

Spread the Word: 30 Days of Accessibility Testing

The Ministry of Testing has declared that May should be "30 Days of Accessibility Testing". As in the days of yore when I used to take on these challenges and blog regularly, I'm in the mood to get back to doing that. Therefore, I am looking to write a post every day around this topic and as a way to address each line of their checklist.

26. Find an accessibility issue on a website, and report it.

Since Blogger is my tool of choice for hosting TESTHEAD, it seems only fitting that I look to it to see what I can do to help improve its ability to be a better accessible platform or, barring that, at least accessible as far as what I can actually do to enhance it.

Using WAVE, the following error was the first to pop out:

Errors
Document language missing

What It Means

The language of the document is not identified.

Why It Matters

Identifying the language of the page allows screen readers to read the content in the appropriate language. It also facilitates the automatic translation of content.

How to Fix It

Identify the document language using the attribute (e.g., ).

The Algorithm... in English

The attribute is missing or is empty.

The nice thing about Blogger is they have a "Send feedback" button in the lower right-hand column for the Dashboard, so submitting issues is easy, as well as with screenshots.

Curious to see if in the future we see this enhanced :).

Thursday, May 25, 2017

Shapes of Things: 30 Days of Accessibility Testing

The Ministry of Testing has declared that May should be "30 Days of Accessibility Testing". As in the days of yore when I used to take on these challenges and blog regularly, I'm in the mood to get back to doing that. Therefore, I am looking to write a post every day around this topic and as a way to address each line of their checklist.

Taking a brief moment in this post to reflect on a milestone. Thank you to everyone who reads TESTHEAD. This morning, my one millionth visitor came to this site. I wish I could figure out who that person is, but regardless, I want to say thank you to everyone who has come here over the years, whether it be one time or repeat reading.

25. Explore W3C’s Before and After Demonstration

The subtitle for this page is "Improving a Web site using Web Content Accessibility Guidelines (WCAG) 2.0", and I have to say, this is a nice little resource to see because it gives you some concrete examples of what you could/should do to make a site accessible.

Here are two pictures of the home page they use for their example (there are several pages with before/after examples). 

Before picture of the W3C example site
Here's the "Before" picture example. Notables are the headings for the pictures and the phone number at the bottom only using a hip word spell out.

After picture of the W3C example site
Here's the "After" picture example. Other than some cosmetic variations on the layout, notable changes are having more meaningful headers for the image blocks, and the phone number displays both the digital version and the lettered mnemonic.

What' nice about this example is that you can put the two pages side by side in two separate browser windows and just by looking at the two, you can see why the After picture would be preferable.

If, however, you want to see what can be improved and what was applied in greater depth, each page has annotations to show exactly what needed to be changed and what change was applied. The top nav bar can quickly toggle between Before/After to see what has been changed. 

If you have been curious as to see how cumulative changes can be applied and the rationale behind what they are, then have a look at the Before and After simulation.

Wednesday, May 24, 2017

What is the Law? 30 Days of Accessibility Testing

The Ministry of Testing has declared that May should be "30 Days of Accessibility Testing". As in the days of yore when I used to take on these challenges and blog regularly, I'm in the mood to get back to doing that. Therefore, I am looking to write a post every day around this topic and as a way to address each line of their checklist.

24. Learn about accessibility law in your country.

I live in the U.S.A., and therefore, while WCAG 2.0 is the guidelines I aim for, we usually refer to "Section 508" or features being "508 Compliant" because that is a section of the Rehabilitation Act of 1973. Actually, there are two areas in the Rehabilitation Act that relate to disabilities. The first is Section 504, which declares that the act "prohibits federal agencies, programs, or activities from discriminating and requires reasonable accommodation for qualified individuals with disabilities." Section 508 declares that "agencies must give disabled employees and members of the public access to information that is comparable to access available to others." A basic checklist of Section 508 compliance can be seen by clicking on the link.

Notice anything interesting there? Did you see anything mandating that Accessibility is the law everywhere? Nope. Just in the services and the fund allocated for them by the federal government. Is there a strict standard? Again, nope, but Section 508 by virtue of being a policy of the federal government, and with the sheer volume of software seats that the federal government provides, can carry a lot of weight in regard to the design decisions of companies.

I know for a fact that a large agency of the federal government looking to purchase a lot of software from my company was what initiated a thorough review of Accessibility requirements and areas that needed to be updated in our product so that they would buy it. The dollar amount of that deal most certainly played a part in why we undertook a large-scale retrofit of our product to meet Accessibility standards, and again, the standard we measured for that purpose were the guidelines as described to meet U.S. requirements. To meet the broader WCAG 2.0 requirements means we still have a distance to travel still.


For a nice breakdown of what USA Laws do and don't cover, see http://webaim.org/articles/laws/usa/


Tuesday, May 23, 2017

Mental Hopscotch: 30 Days of Accessibility Testing



The Ministry of Testing has declared that May should be "30 Days of Accessibility Testing". As in the days of yore when I used to take on these challenges and blog regularly, I'm in the mood to get back to doing that. Therefore, I am looking to write a post every day around this topic and as a way to address each line of their checklist.

23. Find missing semantic information (e.g. headers, landmarks, links, and buttons).


Yesterday, we had a look at Semantic HTML and what it is. Today, let's take a look at how well my blog actually uses it (yep, we're picking a fight with TESTHEAD once again :) ). That means, indirectly, I'm also calling out Blogger as to the way it lays out its pages since TESTHEAD is hosted on Blogger.

As I open the source and try to see what each page would be showing me, the fact is, most of the layout for Blogger is not using Semantic HTML in any easy to see manner. Almost everything is a div, with a hierarchy in CSS that is a bit hard to decipher on first glance.


an example of page source showing the DIV's used to construct the page layout.
A quick look at the div listings. They are named, but not using the examples highlighted yesterday.

Here's a look at the navigation section, which does use a header tag:
View Source showing the TESTHEAD navigation links



Granted, Blogger is a template system, and there is a lot of manipulation required to make those templates work with individual customization, so a semantic design may be difficult to pull off, but I wonder if I could work some of the options into my individual posts. I will give it a try tomorrow for comparison.

Monday, May 22, 2017

In a Manner of Speaking: 30 Days of Accessibility Testing



The Ministry of Testing has declared that May should be "30 Days of Accessibility Testing". As in the days of yore when I used to take on these challenges and blog regularly, I'm in the mood to get back to doing that. Therefore, I am looking to write a post every day around this topic and as a way to address each line of their checklist.

The song title puns continue, but this was a stretch. I know this one from Martin Gore, but it's a cover of a Tuxedomoon song. You're welcome ;).

22. Learn why semantic HTML is important.

Put simply, Semantic HTML goes beyond the literal markup of an HTML page and uses tags that have meaning in and of themselves.

To borrow from W3Schools explanation of semantic elements:

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements:  "div" and "span"  - Tells nothing about its content.
Examples of semantic elements: "form", "table", and "article" - Clearly defines its content.

Examples of Semantic HTML elements as seen on W3Schools site.
Examples of semantic HTML elements (W3Schools).

HTML 5 has taken this a step further by making it possible to structure documents by using more readily understandable terms. Tags such as "article", "aside", "details", "footer", "header", "nav", "progress",  "mark", and "time" all give clues as to what the element is meant to represent, much more quickly than a general "div" or "span" will tell you.

By using Semantic markup, we don't just make pages that are easier for users to understand, we make pages that are easier for developers to understand as well.

Sunday, May 21, 2017

I Feel Like I'm Invisible: 30 Days of Accessibility Testing

The Ministry of Testing has declared that May should be "30 Days of Accessibility Testing". As in the days of yore when I used to take on these challenges and blog regularly, I'm in the mood to get back to doing that. Therefore, I am looking to write a post every day around this topic and as a way to address each line of their checklist.

Bad song lyric puns continue, with apologies to Alison Moyet ;).


21. Look for invisible keyboard focus when tabbing through a page.

First of all, what exactly is that? It means that we have spots on the page that do not allow us to select items or don't give us any indication as to where on the page we actually are. 

Here's a quick example. Since I figure it's only fair to call out stuff that is mine or that I actively use, let's look at the TESTHEAD site again.

If we look at the first picture, we see that I have tabbed over the element that features the Twitter link. As you can see, it has a highlight around it to show the keyboard focus being over that element:


Let's press the tab three times so that we can highlight the G+ element:


Notice anything interesting? The G+ element has no highlight around it. Let's see what happens when we turn on VoiceOver:



VoiceOver creates its own keyboard focus element, and we see/hear the words stated when we are tabbing through the document. Turn off VoiceOver and there's no indication that G+ is selected. If we press Enter while we have tabbed to the G+ element, even if we don't see the highlight, the element is where the keyboard focus is, so pressing Enter brings up the G+ dialog.

There you go, a simple example. You might be saying "OK, but so what. Just turn your screen reader on and problem solved." Do you want to have a screen reader on all the time? If you aren't a person with low vision but have a motor disability, do you want to hear that voice all the time? More to the point, what if you look away for a bit and need to get back to the keyboard, do you know where you are? Sure, you can Shift+Tab and then Tab again to get back to where you are (a process I do very frequently for this very purpose), but it's not something I look forward to. Plain and simple, if we have an option to highlight where we are on the page, do so. If something doesn't get highlighted that should be, raise attention to that fact. 


Saturday, May 20, 2017

Checking the List: 30 Days of Accessibility Testing

The Ministry of Testing has declared that May should be "30 Days of Accessibility Testing". As in the days of yore when I used to take on these challenges and blog regularly, I'm in the mood to get back to doing that. Therefore, I am looking to write a post every day around this topic and as a way to address each line of their checklist.

20.  Write a Simple Accessibility Checklist

I don't like claiming work as my own that I've used from other sources, so I'm going to level with you. My checklist has already been compiled and it's here:

https://www.wuhcag.com/wcag-checklist/

Why this list? I like it because it takes Accessibility in three tiers (A, AA, and AAA, or Beginner, Intermediate and Advanced). To borrow from Wuhcag's page:

"Wuhcag is all about holistic web accessibility – that means taking everything about your website into account. That’s why I don’t rush you to make every web accessibility change at once – it’s too much for you to do and so it’s bad for your users. I love a structured approach to everything in life, and your website is no exception."

Each level allows the user to consider a broad range of "what if" questions. Many of these could be automated, but many of them definitely need some personal observation. Remember, it's not enough to say that a site is "compliant". It's more important that the site is usable and can provide an experience for the end user that would be comparable or in line with what a normative user would experience.

Does that sound like a challenge? It certainly is, and it means that there will be lots of opportunities for human interaction for at least the near future. Not sure what to look for or where to direct your efforts. The above three checklists are certainly good places to start.

Some Cool People To Follow on Twitter: 30 Days of Accessibility Testing

The Ministry of Testing has declared that May should be "30 Days of Accessibility Testing". As in the days of yore when I used to take on these challenges and blog regularly, I'm in the mood to get back to doing that. Therefore, I am looking to write a post every day around this topic and as a way to address each line of their checklist.

19. Find 5 accessibility experts to follow on Twitter.

1. Albert Gareev (@AGareev): Albert and I have been friends/compatriots/writing partners/co-presenters for seven years when I made the commitment to get more involved in the testing community in the first place. It turned out that Albert was also actively involved in Accessibility, and thus, when I started working on it as part of my work, Albert became a lifeline of ideas and encouragement. We've worked on several things together, and the "HUMBLE" mnemonic is rightly his, though both of us present it.

2. Alicia Jarvis (@AJarvis728): Alicia has likewise been active in the Canadian Accessibility community along with Albert, and has been a source of advocacy, passion and focus that I've reached out to many times. My first association with Inclusive Design and thinking about it was because of her tweets and advocacy.

3. Ellen Parfitt (@deafieblogger): Ellen is a new one for me, in that I came across her work during this challenge. Her site HearingLikeMe.com has a lot of great insights dealing with hearing loss and working with technology to enhance the experience for those with hearing loss (both primary and incidental).

4. Neil Milliken (@NeilMilliken): Lots of stuff I could point to for Neil, but the AXS Chat Community is a good enough place to start :).

5. Alice Boxhall (@sundress):
 Another recent discovery during this 30 days challenge. I've enjoyed learning about her and the initiatives she takes part in.

There are of course much more, but if I were to name all of them, we'd be here all day. Start with these five, read what they have written and commented about, and who they interact with. My guess is you'll discover a lot of people worthy of your time and attention.

Thursday, May 18, 2017

A Certain Shade of Green: 30 Days of Accessibility Testing

The Ministry of Testing has declared that May should be "30 Days of Accessibility Testing". As in the days of yore when I used to take on these challenges and blog regularly, I'm in the mood to get back to doing that. Therefore, I am looking to write a post every day around this topic and as a way to address each line of their checklist.

18. Use a tool to test for colour contrast problems.

It seems I'm giving WebAim a lot of love this month, and there's a reason for that. They do a good job of taking Accessibility concepts and breaking them down into hands-on tools that a user can play with to understand what they are looking at and ways to play how-to scenarios with them. WebAim's Color Contrast Checker fits squarely into that niche as well.


The Color Contrast checker needs two values, a background color & a foreground color. You can choose any of the hex values that make up a color code and either enter them into the two text boxes provided, or you can enter them into the URL directly like so:


The resulting screen will display the values, and then give you options to lighten or darken the foreground and/or background, and see both the Contrast Ratio as well as what the contrast would look like on a page if it were used.

As we can see, that's not a really good ratio, and that would be hard to read even for normative vision users. 

Let's adjust those values to something a little more reasonable, shall we?

By clicking the Lighter/Darker links, we can change broadly the shade that is selected. By clicking on the actual text box, we can bring up a color picker and choose a color that we like:


The color picker gives you two regions. One gives a large selectable color palette, and the other provides an arrow slider so you can select the level of saturation for that hue. Regardless, the end result is a hex value that is represented in the corresponding text box. With that, you can see if your contrast level passes, and the contrast ratio value.

What's this useful for? If you are responsible for reviewing CSS or otherwise determining contrast levels for text, backgrounds, widgets, etc. This allows you to look at corresponding colors, experiment with variations, and see what works both aesthetically and numerically. Granted, it's not going to let you look at your pages directly (there's other stuff for that, and I'll post links later in the challenge) but for now, if you want to get your feet wet, here's a good place to start.