Posts

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 differen

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

1.4.5 Images of text

Image
This is another of the guidelines that I face almost every time I am asked to check a document for accessibility. The guideline says: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text. There are a couple of exceptions, such as text that is part of a logo, but in general, you should really give this one some thought.  Images of text??? What are images of text and why would you use them? It sounds a bit weird at first, but I'll bet many people do this. Have you ever taken a screenshot of something to use in a document or a web page or as part of a social media post?  I recently had to fix a document and several of the pages were screenshots of a pdf. There were a few icons but the bulk of it was text. By taking a screenshot, you effectively take text and convert it into an image... an image of text.  Here's an example of an image of text: It's only when you really think about it, that you realise