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 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.
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.
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.
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.
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.
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.
Because I had only used block quotes for quotes, all quotes in my blog were automatically modified.
- 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.
- 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.