Posts

2.4.3 Focus order & 2.4.7 Focus visible

Image
These two guidelines seem pretty similar. They actually follow on from each other but the former is an A level requirement and the latter, AA. What is focus order? Focus order means that as you tab through a website, the interactive items (links and buttons) that you go through, are in a logical order. Usually, this just happens automatically, especially if the website is quite simple but there are situations where it goes wrong. We recently got new HR and benfits systems at work and I was involved in user testing. One of the main things I test for is keyboard navigation. This was really odd! There were tiles across the screen, and each one was a link to a particular benefit... but when you tabbed through, the order was completely random! They went back to the supplier of course, and it got fixed.  Reading order Reading order is important in PowerPoint. I was sent a PowerPoint presentation to check this week. The author had actually done a really good job of things like alt text - amon

2.4.2 Page titled

Image
This is possibly the most obvious guideline but one that sometimes gets overlooked. I'm going to stretch it a little to cover more than just webpages. The actual guideline says: Webpages have titles that describe the topic or purpose. However, titles are useful for more than just webpages, so we'll do a quick run through of how this applies to documents that you might share online. Webpages Let's start with webpages. When coding in html, you have two main blocks of code:  Head - contains information about the page and links to things like the stylesheet and any javascript Body - the actual content that will be displayed on the page. In the head, you should include a title tag. This displays the title of the page on the tab in the Internet browser. It works like this: <head>     <title>Portfolio</title> </head> And this looks like this: The key thing is that this title needs to be short and to describe what the page contains. Mine probably needs chang

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