Conference Digest Mind Map

This is my small tribute to Tony Buzan, who died on April 13th 2019. He was the inventor of the mind map. Rest in peace Tony.

Mind map with central object "Todo Wordcamp Rdam 2019 v1a" with main branches presentations, Notes, Goodies, Books, and Actions. Main branch presentation has sub branches Stomme post, Hashtag, http headers, Get fast and Live.  Sub branch Hash tag has sub sub branches #ewmrtc and a part of an URL. Sub branches  Goodies has sub branches Camera sticker and highlighter. The main branch Actions has sub branches 404, host, security.txt, xmrpx.php. Markers, and “words pictures”. The sub branch Markers has sub sub branch Backpack. The sub branch host has Csp and .htacess. The sub branch Books has sub branches “safe website”, “performance wordpress site”, and “SEO starters”!

Quick breakdown of my mind map

On my smartphone I use Mindjet Mindmanager. It is a rather dull looking mind map program. I can add colour, but that will slow me down. For me mind mapping is jotting ideas as fast as possible.

My first action was to make my conference notes readable. My handwriting is quite awful. The use of sketchnotes did not improve the quality significantly.
Just wait and see.

My notes were about WordCamp Rotterdam 2019. There were some really technical talks. It is almost impossible to translate technical stuff like settings of analytics programs or Cascading Style Sheets to images.
Yeah. You’re right.

Okay. The Notes branch was needed as a reminder that I would read my notes without thinking too long.

Almost immediately I added a branch with presentations. If needed, I would read the presentations in slow speed. Just before blogging I realized I made an error. I opened Twitter search and entered the hashtag “#wcrtm” and “slides”. #wcrtm stands for WordCamp RotTerdaM. All the presentations of the interesting talks popped up.

Another branch is Goodies. These are gifts of sponsors. I lost my highlighter somewhere. I marked this branch with a red cross. Then I remembered that I had a camera sticker from a previous conference, which I found and placed. So I marked this branch with a green V. For the English people: Jack in the box.

I got some booklets / books about SEO or Search Engine Optimalisation, performance of a website and website security. The reason, that I did put this branch under the central object, was to balance the tree. This tip was given by a business consultant. The way I interpreted was that I had to avoid a mindmap with too few main branches.

Back to my Books branch. This branch contained information which I could use. Not immediately, but it was something I could not put away lightly. The Goodies branch was more like: done and forget.

Now comes the most important main branch in my mind map: Actions. Sub branches were added during my note cleanup.

This website still had no proper 404 screen. Yes, there are some plug ins, but is there a more elegant way to solve this problem? Also too many plug ins will slow down my website.

During the conference there were lots of configuration suggestions. As a newbie WordPress administrator I asked, how I could configure this. The answer was to contact the host provider. Actions from my side could collide with actions from the host provider. Bracing for impact.

I still have to place a security.txt on my website. More information can be found in securitytxt.org.

On the web I read some disturbing information about Xmlrpc.php. On the conference it was strongly suggested to remove it.

Another action was to collect all my markers for future notes. A final action was to put extra information about text in my pictures in the Alt Text.

Depending on my progress and feedback of my host provider I will adjust my actions in my mind map.

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.