Posts

Alt text

Image
I have already covered this guideline (back at the end of December) but in the last few weeks, it has cropped up in some of my work. I have been really encouraged, over the last year, to see the commitment my main client has towards meeting WCAG in all their content. They have invested in training for their staff, to ensure that any new content is accessible. It has been fantastic to see the efforts that individuals are making too. Though, naturally, not everyone gets it right all the time (including me). One of the common areas where I have seen mistakes recently, is in alt text. Some of the things I have seen are: Missing alt text (though this is now rare) Automatically generated alt text that is incorrect or inadequate Images incorrectly marked as decorative Images that are not inline with the text. However, the one thing that I get asked most about, is what to write. People find it very difficult to write alt text that is descriptive enough and gets the intended information across....

2.4.1 Bypass blocks

Image
I thought this one would be easier to show than write about, so I made a 10 minute video. Hopefully, it also gives you an idea of how Dragon works, as well as what this guideline is about and how to achieve it.

2.3 Seizures and physical reactions

Like my last post, I'm going to cover the wider section and gloss over the subsections within it. This guideline says: Do not design content in a way that is known to cause seizures or physical reactions. I would like to hope that in 2021, people are aware that flashing lights can cause seizures for people with certain conditions. From personal experience of photosensitivity, they can also trigger migraines. Who knows what else?  I would question why you would use flashing, given that this is known to be problematic but like the safety note on suppositories that tells you not to take them orally, you know someone is trying it. PowerPoint I have to confess that I'm not the greatest fan of PowerPoint. I was a primary school teacher back in the day when it was all new and exciting. Y6 children (initially) were taught how to use PowerPoint and then gave endless presentations to their class, the school, the staff, different classes, etc. They made all the rookie errors, because we (...

2.2 Enough time

I think this is a very simple guideline: Provide users enough time to read and use content. Most of the sub-guidelines in this section are about web pages that include forms. I remember getting caught out by several of these, donkey's years ago, when we had dial-up Internet. I would contribute to a discussion and by the time it had sent, it had timed out. Even now, if I type a large forum post, I tend to copy it (ctrl+C) before clicking the send button... just in case it times out. Timed content I am really not a fan of timed content. One of my predecessors at work had a habit of setting timings in their eLearning, so that the user couldn't progress without reading the slide. It would drive me mad! I read quickly and I would read it and then have to sit and wait to move on. So irritating! When we lived in Finland though, I had the opposite problem. Anything I have to/had to read in Finnish takes me longer than it would take a Finn. Reading in a second language is often slower t...

2.1.1 Keyboard problem solving

Image
In this post, I'm going to explain how I solved the problem of my photography portfolio not working with keyboard navigation. Previous/next buttons If I was navigating by keyboard, I would expect the next tab after the menu to take me to the previous and then the next buttons that sit half way up my photo. So I had a look at the html for those and this is what I found: <a class="prev" onclick="plusSlides(-1)">Prev</a> <a class="next" onclick="plusSlides(1)">Next</a> For those that don't speak fluent html, the <a> tag is what tells the internet browser that the text or image that follows is going to be a hyperlink.  Initially, I just saw that they begin with an <a> tag and thought that should be fine but I did notice that the <a> tags don't have an href element and that is odd. Maybe that is the problem. I wanted to be sure that this was the problem, so I googled it and found one of the top sol...

2.1.1 Keyboard

Image
For this guideline, I am going to use my own website. I have been revamping my porfolio website to update it but also to provide more examples of my work and some better functionality. I recently updated my colour scheme and (obviously) checked that it all met WCAG guidelines.  The most recent piece of work, has been to develop some photography pages. These are organised by theme. Although I have ensured that all of the prior content meets WCAG guidelines, I have just checked the photography pages and they fail this guideline.  Keyboard Guideline All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. So, if you visit one of my photography pages and try to tab through, using the keyboard, you will soon spot the problem. You will notice that as you hit the TAB key, the dif...

2.1 Keyboard Accessible

 I have skipped the last few in the previous section because they were mainly to do with HTML and CSS issues, which the vast majority of people don't work with... unless they are developers, in which case, they should be able to read the guidance and put it into practice themselves. So I have jumped to the next section, section 2, which is about operability . Basically, all user interface components and navigation must be operable - be able to be used. The first guidelines in this section address keyboard navigation. All functionality should be achieveable by keyboard only. That means... unplug your mouse and check that you can still use whatever it is you have designed. Challenge Before we start delving into the specifics of this one, I would like to challenge you to live for a day or two without your mouse. Unlug it! Put it in the drawer. Do everything with your keyboard. Why is this important? Because you will begin to understand some of the challenges of keyboard navigation. Yo...