Category Archives: Accessibility

Tweaking My Workshop Accessibility

During the Speakers Dinner of Agile Testing Days 2019 I told Abby Bangser about my attempts to make my workshop accessible.
“It is even possible to add alternative text to images in PowerPoint. If you click on the image, there are several tabs. One tab contains Alternative text. [ … ]

Don’t forget the exclamation mark (!). The screen reader will read it differently.”

Tobias Geyer, another speaker, was confused. I saw him thinking: “Alternative to what?”
I told him about a screen reader which could read information aloud to people. This is handy for people with a visual impairment. Alternative text is used on web sites to add more information to pictures.

If the presentation would be downloadable at the beginning of the presentation, then attendees would be able to hear the information on the slides.

Blind review

Some people state that a blind review is the best one. The reviewer is not distracted by the looks of the speaker or the beauty of the pictures.

One of my reviewers was blind, so I really needed to speak well. Without the use of my slides it was difficult to tell a story. The main feedback was no clear structure.

So I added a mind map which gave a proper view of the workshop. This was really appreciated by the next reviewer.

For the exercises I had already tested the website with a screen reader. Once again it was time for the real thing.

My blind reviewer went through the website without any delay. The reading speed was so high, that it looked like a normal person was skimming the webpages. The feedback was almost instantaneous.

It was strange for me to hear, that bugs were found by clicking around. Navigation was on hearing. My test website passed the accessibility test.

Sound advice

The Friday before Agile Testing Days I had a talk with someone with a bad hearing. I told about my workshop. How should I speak to people who cannot hear well?

“What would be your best advice?”
“Ask whether people can hear you.
It is a professional thing you can do:
“Can you hear me?”

What also helpful is, are pictures. Next to key words on the slides.” This way a talk could be reconstructed, if words would be missed.

Somehow I lost sight on my slides.

I told about the handheld microphones seen on one of the pictures. Most of the time I put it in front of my mouth.
“It can be lowered. The quality will not decrease much, but people are able to see your mouth.” Lip reading for the win.

In the days before the workshop I focused on big fonts on my slides and my cards. I increased the contrast between the text and the background.

What could go wrong?

What went wrong?

I completely forgot to ask the audience whether they could hear me. Where was my checklist?
I had none.
Oh.

The most embarrassing part of the downloadable stuff was, that there were no files on the promised location at the start of my workshop.
Big oops from my side.

After this painful discovery I repeated all the steps: I went to my github and uploaded my presentation. This time I scrolled down. A commit button?! I forgot to press it.

Github is git in the cloud. It can be used to store different versions of files. I still wrestle with it. As Janet Gregory stated in her talk it is about deliberate practice. I had only practiced once. In my case I had cut one corner too many.

Days after my workshop I checked the alternative text in the pdf file of my presentation on my laptop. I double clicked the file and the file was opened in my browser.

The text of the slide was told aloud by the screen reader. I hovered above a picture. Not a sound. I was also silent.

Last weekend I did another attempt to get some sound of a picture. I double clicked the file on my PC and Acrobat reader opened the file.

I searched a picture and placed my mouse pointer on it. A hover text was shown and read aloud. That’s what I liked to hear.

So Acrobat reader can handle alternative text of pictures, but my favourite browser not. And I had not made Acrobat reader a requisite for the workshop. A bit late, but alternative text can be used.

What went right?

I maximised pictures. Leaving out irrelevant parts from the slides.

In the right top corner of the slides I used small pictures to show the state of the test session.

During my preparation I looked at the presentation. There were no spots shining on the screen, so the contrast was good.

During the demo part I used a headset microphone. Attendees could hear me and I could talk at a normal volume. Most important is the fact, that the small microphone did not hide my mouth.

A Bit More Responsive

Years ago some websites looked terrible on my smartphone. They looked like websites viewed from 6 meters distance.

The first time I visited my blog with my smartphone, I was really anxious: “Does it look right?”

5 seconds later “What did I worry about?”

Disclaimer

I am not a legal expert. So please have a look at my used sources. Or contact a legal expert.

I am just a tester finding test ideas about accessibility. Thanks for joining in advance.

Some test responsiveness stories

My first tablet app to be tested was intended for an iPad. I had a Windows PC instead of the tablet. This was not right.

My solution was to install Safari and let it emulate an iPad. In other words: “I know you are a Windows machine. Now you function like an iPad.”
It sounds like a hypnosis act.
“What did I worry about?”

This work around did not stop me to demand an iPad. There is nothing like the real thing.

Responsive web design is basically about creating the best possible user experience in the assigned space on the screen.

This blog looks good on a mobile device and a laptop. The same features are shown only in a different order and in a different way, but it feels the same. Really responsive.

The last years I learned CSS or Cascading Style Sheets. CSS determines how the websites looks. It is even possible to change the locations of web elements.

If I look to this website in a browser on a laptop, I can make the window smaller by resizing the window. The effect is that elements of the web page are resized or relocated or not shown any more.

During a debriefing a developer showed me this resizing trick.
Resize and look for bad things like hidden buttons or partially shown texts.
It is a fast way for the first impression.

Can not install on my machine

All that resizing stuff is not an exact science and Safari … cannot simply be installed on a company laptop because of a company policy. So I did a bit of research. If you don’t mind.

Firefox has a special feature Dev Tools. It can be accessed using the F12 key. In the upper right corner of this sub window there is a button with two rectangles, which look like a smartphone and a tablet.
A green eclipse marking a button with a smartphone and a tablet in the menu bar of Dev Tools!

This opens a lot of options to test smartphones and tablets.

It also support the screen orientation like portrait and landscape.

Just look to this website on a mobile phone while holding it in portrait mode. Then change it to landscape. In portrait mode only the headers of my last blog posts are shown, in the landscape mode the last complete blogs posts are shown. Courtesy of my website software.

Chrome and Edge also have Dev Tools which can be accessed using F12 key. Both Dev Tools windows have an emulator tab for mobile devices.

Concerning responsiveness

One of the biggest search engines decided to give a higher ranking to mobile friendly websites. So support for small screens can give a positive boost to let a user find a website.

Most people have a PC or laptop with 1 screen. It is sometimes tedious to switch application. So I tend to resize the applications to fit more of them on my screen. My preference is squeezed and usable.

Another thing for responsiveness is language. Some customers prefer to use a website or application in their own language. OK is translated to OK, but Cancel to Annuleren or Annullieren. So the button should be resized after translation.

Responsiveness is not only about reshuffling web page elements. It is also about resizing the web page elements in case of bigger fonts.

Suppose I have bad eyes, then I need to make fonts bigger so that I can actually read the text. Pressing the Ctrl key and the + key at the same time will enlarge the text in browsers and Windows applications.

Problem solved?
No, I am so sorry.

As a user I have to scroll a lot. It is like watching a picture which is split over three different screens. I have to change my seat to get the whole picture.

In 2024 this could have some legal consequences in Europe.
In Annex 1 of the European Accessibility Act “flexible magnification” is mandatory for specific commercial websites.

In case of American customers for an e-commerce website there is a law already in place at this very moment. Americans with Disabilities Act (ADA) explicitly points to  the WCAG or Web Content Accessibility Guidelines on page 196 of Americans with Disabilities Act Title III Regulations.

In WCAG  also attention must be paid to screen size and orientation.

One more chat

“How would you like your website?”
“Responsive please.”
“No problem.”
“Thank you, my dear.”
“You are welcome, grandma.”

Tweaking My Blog Accessibility

Accessibility is something which is within my reach. It just took me some years to use it properly.

If you are in a hurry, just go to the Accessibility Tips. If you have more time, you can start with the next paragraph. Next.

Sleight of thought

For my blog I use a default WordPress theme. I try to compensate this standard look and feel with humour. Am I kidding? No.

My first blog post was a struggle with looks. I did not like header 1. The font was too big. I just used bold to make the headers. That looked just right.

During an online computer course I had my first encounter with a screen reader. Users with bad or no view can use this program to read a web page aloud.

My trick for nice headers using bold was backfiring: a screen reader would not recognise them as headers. I really needed some header tag. So I ended up with header 6. This looked good, but it was still not right.

Just a little more

After tensome blogs I started to use the alternative text of the image.

In the attachment details of the pciture the location of the Alt text has been marked!!
In the past this was primarily used for people with slow internet connection. This way they still could get an impression of the webpage, when the text was shown.

In another online course I learned that the screen reader could use this for the communication. Then I read a tweet about using a proper description. So “another mindmap” was not really helpful.

Now I had to compress the information in a picture in a few sentences. That was really tricky, if some graph was involved.
A line graph is shown with three different colours: orange for beginners, green for proficient, and blue for expert. There is a green circle "Skill IQ 135" in the green line, which is connectd to a vertical line with "40th percentile" at the foot!"
The Alt text is as follows:
“A line graph is shown with three different colours: orange for beginners, green for proficient, and blue for expert. There is a green circle “Skill IQ 135” in the green line, which is connected to a vertical line with “40th percentile” at the foot!”

Maybe you noticed the exclamation mark or ! at the end of the text. This is a trick I learned later one: the screen reader reads this text differently aloud.

I even made a blog post with a few screen reader tricks. In this particular post a screen reader user has a big advantage over a user using a normal view.

More exploration from my side

The trick with header 6 was not right. I just knew. A lot of people start counting from 1, programmers from 0. But 6 is not the right exception.

It was a matter of months that I read about a confused screen reader. So I better start from header 1. Which was not my big favourite.

On Twitter I saw a tweet of a user with a bad view complaining about bad contrast. Within minutes another blogger reacted by adjusting his website.

My turn

I did quick check of my blog. It was all black characters on a white background. Then I noticed that my quotes were vague.

Now I had to find a way to change my headers and quotes. Time to explore the Content Management System or software to maintain my blog. Mine is called WordPress.

I first focused on the desired look of my header. I opened my word processor for note taking. My goal was to have my header 1 to look like header 6.

There was a nice tool in my browser: Dev Tools or Developer Tools. In my browser on my Windows machine I pressed F12, scrolled down to a header, selected the element, and saw the properties.

After the selection of header 6 in the upper window the properties of this element are shown in the right bottom window!

I did the same sequence for the quote. In HTML it is called blockquote. Fine with me.

The colour was grayish. I started to play with all kinds of colour codes. Until I realised that “black” was also good description for a font colour.

Dev Tools allowed me to experiment with the properties of the block quote without an intimidating program.

The color of the bloack quote has temporarily been changed to black!

Easy does it.

Now I had two pieces of code. Somewhere I had to fit them in. I started touring the CMS or Content Management System and found Additional CSS using the following path
Dashboard => Appearance => Customize => Additional CSS.

CSS stands for Cascading Style Sheets. Suppose I change the look of header 1 at 1 place. It will affect the look of all headers 1 in my whole blog. Cascading is cool.

I was too early for claiming my victory. Header 1 did not change in the visual editor. I did a preview and it looked right. Okay, found something.

In the left window Header 1 is shown in the Visual Eidotr, in the right window header 1 is shown in the preview!

At the end I had changed all headers 6 to headers 1.
So I only had to modify all the headers of my remaining blog posts. Great. Extra work.

The change of colour in the block quote went smoothly. But I was not pleased with the vertical alignment of the quote. It was too close to the left margin.

On the web I discovered that margin of an object was used to place a rectangle around the quote. Another search led to padding. If I could pad the text in the quote, then it would shift to the right. Left padding was enough.

Additional Css contains: "blockquote { 	color: black; 	padding-left: 5%; }  h1 {     font-size: 16px;     line-height: 1.5; } "!

Because I had only used block quotes for quotes, all quotes in my blog were automatically modified.

Accessibility tips

  • Use header to mark headers instead of making them bold.
  • Add an alternative text ending with an exclamation mark to all pictures.
  • Make the contrast of the colours of the text and background bigger instead of using some gray colour on a white background.
  • Use Additional CSS in WordPress, if you are still not pleased with the look of the elements on the page.
  • Look for other ideas on the Global Accessibility Awareness Day website. For the record it is the third Thursday of May every year.GAAD almost encircled by a powercard attached to a keyboard!

Ending notes

  • I know that there are enough readers willing to check the accessibility of my blog. The status of accessibility on my blog is in progress.
  • At the moment of publishing this post there are still words in bold who look like headers in my first blog posts. There are still pictures without an alternative text and/ or exclamation mark.
  • I would not be surprised that there is still work to be done after all these updates.

2024 Testing

This year I wrote some blog posts about legal and certification stuff. like January Testing and May 2018 Testing. So it would be appropriate to shed some light on accessibility and laws.

Disclaimer

I am not a legal expert. So please have a look at my used sources. Or contact a legal expert.

I am just a tester finding test ideas about accessibility. Thanks for joining in advance.

What?

During #30DaysOfTesting I recommended to follow Karl Groves and Albert Gareev on Twitter for accessibility. Karl had interesting news for European software suppliers. Some law for accessibility was coming.

Accessibility is coming to EU.
[On the melody of “Santa Claus is coming to town.”]

I started my search engine and found the European Accessibility Act or EAA.
Great, a new abbreviation for upsetting the PO.

On November 8 the EU wrote a proposal to improve accessibility. In section 3.5 “The proposal” of Annex 1 is written, that the implementation should take place within 6 years.

A lot of readers might think:
“No worries, mate.
2024 is beyond the horizon.”

So what?

A lot of companies would think, that this is a rehearsal of the GDPR situation. A lot of companies still think, that everything is under control. Just have a read over a forgotten test.

Okay, a typical reaction about accessibility is:
“There is no law in place.”

Let me give several comments to this statement.

  • It is not ethical. People are dependent from the internet. There are online shops, online bank portals, online government points of access, and so on. People with limitations have a right to use them.
  • There are human rights and right no 9 states, that things must be accessible. Basically the EU bought companies some time.
  • The global organisation World Wide Web Consortium or W3C created Web Content Accessibility Guidelines to help people and companies to make applications accessible. WCAG or Web Content Accessibility Guidelines is mentioned in EAA. So it is a set of practical information to make websites accessible.
  • Actually there are American laws for accessibility.
    These laws are based on WCAG.

    Accessibility is coming from the States.
    [On the melody of “Santa Claus is coming to town.”]

    Companies are being sued because of these laws at this very moment. So watch out with shipping your software to the States.

  • Websites for European institutions must be accessible.
  • Maybe at the end of this blog post I have some other comments.
    : )
    Just scroll down and up.
    I can wait.

What now?

As a reader you have the right to ask for test ideas.
OK, let’s have a look at an OK button.

  • Is it possible to navigate to this button using the keyboard?
  • Is the contrast of the text “OK” and the background big enough?
  • Is OK written in clear font?
  • Are symbols and colours used to indicate, that a press of the button is a confirmation?
  • Is OK not offensive in this context?
  • Does the screen reader recognise the OK button?
  • Etc.

Imagine the dialog with the “OK” button.
Roll up your sleeves.

  • Are the consequences of pressing the OK button clear?
  • Is a pop up dialog really necessary?
  • And so on. And so forth.

What are we waiting for?

It takes time to find the right combination for accessibility.

Did I already mention, that American companies have a clear advantage?
Or the fact, that government websites in the Netherlands must be accessible to a certain degree.

Accessibility on Dutch goverment websites.
[On the melody of “Santa Claus is coming to town.”]