Disabled people do not like hamburgers!
Did you know that disabled people do not like hamburgers?
Here is why…
Hamburgers are generally not good for your health and yet many of us love them.
It is the same with websites.
Hamburger menus are almost always inaccessible for disabled people and yet most web designers love them.
You generally see them when you are looking at the version website on a mobile but I have reviewed many websites that have them on the desktop version as well.
It consists of 3 lines in a box with rounded corners. When you select it with your mouse, it opens up, so you can see all the pages and choose what you want.
The problem is that disabled people using assistive technology such as screen readers or voice recognition usually find one of two things:
- They cannot use the hamburger menu at all
- They can only use part of it
This means that they are not able to navigate the website, which is kind of important.
Here is how to fix it
However, there is a simple solution to this.
A sitemap.
A sitemap of your website allows disabled people to navigate to any page on your website via a clean, bulleted list.
Add a Skip Link to that Site Map, so that anyone can go straight to it and your problem is solved. This is because you have provided an accessible alternative.
Simple.
If you want to see an example of this in action, hit the tab key twice. Look at the top left corner of your browser and you will see a link:
Follow this link and you will see the Site Map.
#Business #WebDesign #Diversity #Inclusion #Accessibility
Caption: a hamburger with a big red x on top of it. Next to it is a line drawing of a blind person with dark glasses and a walking stick.
Would you like to find out more?
If you would like to find out more about website accessibility, please follow these links:
Watch my TED Talk
Find out more about website accessibility audits
Discuss having an accessibility audit of your website
Have a 1-hour consultation on any aspect of website accessibility
Clive Loseby
Access by Design
Beautiful, WCAG Compliant, Accessible Website Design
Delivering an Outstanding Website Accessibility Audit
Award-winning Web Design, Chichester
Dynamic content - the elephant in the room
Has something changed?
Web pages are traditionally static. You go to a page, you see what is there and then you perhaps click on something that performs an action, such as submitting a form. You then get taken to another page that confirms that you have done this.
Simple really.
However, web designers like to make the journey smoother, more visually attractive and they will often use techniques to change what is on a web page without having to reload it.
The difficulty is that you are not actually changing anything on the page. What you actually have to do is load everything first and then hide stuff that may or may not get shown later.
The problem with this approach is that, although something may change visually, a blind person using a screen reader will not be aware that anything has changed, as the page itself has not reloaded.
Intervention is needed
I see this repeatedly in our audits:
A graphic or an important warning message will magically appear
A set of extra questions on a form will be shown
A selection of available courses will change
and so on
I have to then tell my Teamie what has changed so they can use their screen reader to find this new content.
Sometimes it can be easy to find, just pressing their arrow keys a couple of times would be enough to read the message that has just appeared.
However, sometimes, even when I have told them it is there, it can take them ages to find it. It may be visible right in the middle of the screen but their screen reader has to go to the very bottom of the code to find it!
There are elements on web pages that people using screen readers are blissfully unaware of and, of course, the web designers do not know it is an issue themselves as no-one has ever raised it!
This is why having disabled people test your website is so important. Once you are aware of these issues, you can then develop strategies that will be far more inclusive.
This is also one of the many reasons why I get so excited about helping others with their digital accessibility. It is not about constraining creativity, it is about ensuring that everyone can be included in that creative experience.
Caption: a happy cartoon mouse. Behind him is a cartoon elephant that is so faded so that it can hardly be seen. Text reads “What elephant? There is no elephant!!”
Would you like to find out more?
If you would like to find out more about website accessibility, please follow these links:
Watch my TED Talk
Find out more about website accessibility audits
Discuss having an accessibility audit of your website
Have a 1-hour consultation on any aspect of website accessibility
Clive Loseby
Access by Design
Beautiful, WCAG Compliant, Accessible Website Design
Delivering an Outstanding Website Accessibility Audit
Award-winning Web Design, Chichester
Which of these Alt Tags is the most appropriate?
3 Alt Tags for 3 images
- Work, lifestyle and business concept. Good-looking focused european female in trendy glasses sitting in cafe near laptop, working on notebook, surrounded with books, making notes for lesson with kids
- About_hero
These are the Alt tags on a website I came across yesterday on the Home Page. They went with the featured stock images that were grouped together, as the prominent images.
I think that perhaps most people would agree that “good-looking” is both subjective and inappropriate.
“Work, lifestyle and business concept“ might be more appropriate in a caption, if used at all.
However, at least it is possible to get some sense of the photo, whereas the other two are clearly of no use.
AI does have its uses!
I put these images into PowerPoint and it used AI to autogenerate the descriptions, which I have put in the Alt Tag myself. They were:
- A person sitting at a table using a computer
- A group of people sitting at a table
- A group of young girls running in a hallway
Please add alt tags to your images, even if you are not certain about how much or how little to say, please at least say something or use AI to do it for you! Something is better than nothing!
#Business #WebDesign #Diversity #Inclusion #Accessibility
Would you like to find out more?
If you would like to find out more about website accessibility, please follow these links:
Watch my TED Talk
Find out more about website accessibility audits
Discuss having an accessibility audit of your website
Have a 1-hour consultation on any aspect of website accessibility
Clive Loseby
Access by Design
Beautiful, WCAG Compliant, Accessible Website Design
Delivering an Outstanding Website Accessibility Audit
Award-winning Web Design, Chichester
What should be in an Alt tag?
What is an Alt Tag?
An Alt Tag is a tag that is attached to an image that helps a blind person understand what it is an iamge of.
A live example
I was in a live website accessibility audit with Mede the other day. She is completely blind and uses a screen reader. She was not born blind but instead developed a degenerative eye condition whilst she was a child. In other words, she can still remember and understand visual concepts.
We were reviewing a series of images of staff members on the about us page of the organisation. There were no alt tags, so I began describing each person to Mede and, as I did so, I began to wonder what would be appropriate to say and what is not.
Mede said she likes descriptions that give her more of a sense of what someone looks like, rather than their job title, such as Head of Communications, so I began to look for characteristics such as their hairstyle, hair colour, if they were wearing glasses etc..
Food for thought
I instinctively steered away from race and age but it got me thinking.
Is it offensive for an alt tag to describe someone as young, older or middle-aged? To describe the colour of their skin or their ethnicity?
Writing Alt tags is a subjective business and it is better to write one than not at all, of course.
What are your thoughts? Please do get in touch and let me know.
Caption: Clive is 54 years old and has hazel eyes. What little hair he has left is mostly brown, whereas his stubble has far more grey in it. He is wearing a dark blue hoodie and is smiling. His hoodie has Saints emblazoned on it, which is the nickname of his favourite football team, Southampton, who finally seem to be on a decent winning streak in the Championship, after a rather shaky start.
Would you like to find out more?
If you would like to find out more about website accessbility, please follow these links:
Watch my TED Talk
Find out more about website accessibility audits
Discuss having an accessibility audit of your website
Have a 1-hour consultation on any aspect of website accessibility
Clive Loseby
Access by Design
Beautiful, WCAG Compliant, Accessible Website Design
Delivering an Outstanding Website Accessibility Audit
Award-winning Web Design, Chichester
Breaking the Law!!
I hate Cookie Banners
I do not dislike them. I hate them. They have set Website Accessibility back 10 years.
However, if you use any kind of analytics on your website, the law requires you to have one.
Here is one reason why
Recently I was joined by Iona, on a live audit of a NHS Trust website. It had a Cookie Banner, provided by a well-known 3rd party.
Iona cannot use her hands without great pain and relies on Dragon Dictation to navigate websites. She uses a mouse when she has no other choice but her degenerative condition means that one day she will not be able to use a mouse at all. This is why what she does, as part of my team of Accessibility Testers, is so important.
On the website, she was actually able to open the Cookie Banner and was presented with a choice of which Cookies to allow (beyond the necessary ones).
Unfortunately, she was not able to turn any of the optional Cookies off, due to the fact that the banner used an overlay that did not respond to voice control. So she was forced to accept all the Cookies, whether she wanted to or not.
Breaking two laws!
This means that the website is currently breaking both Data Privacy Law and the Equality Act.
Maybe some people may think this is no big deal. I happen to think it is.
Which is better, break one law intentionally to avoid breaking another one, or break both?
Data Privacy is important but I think the fact that over 96% of the top 1 million websites still fail basic accessibility tests in 2023 is far more important.
If you would like an introduction to website accessibility, please watch my TED Talk.
Caption: A man wearing a balaclava is trying to break into a house using a crowbar. Text reads "Breaking the law!"
Would you like to find out more?
If you would like to find out more about website accessibility, please follow these links:
Find out more about website accessibility audits
Discuss having an accessibility audit of your website
Have a 1-hour consultation on any aspect of website accessibility
Clive Loseby
Access by Design
Beautiful, WCAG Compliant, Accessible Website Design
Delivering an Outstanding Website Accessibility Audit
Award-winning Web Design, Chichester
Confirmation Bias
A pat on the back
I would guess that we all like to know we are doing something right. It gives us a feeling of calm reassurance.
But not for everyone
One of the difficulties that blind people have when they are interacting with a website, such as filling in a form, is that they miss out on such confirmations.
What happens is that messages such as “Thank you for completing our form” or “File Upload Successful” will appear on the screen and their screen reader will be unaware of it and they will not know it is there unless they are told.
This happens a lot with my Team when we are on a Live Accessibility Audit. A message will appear and my blind Team Members (Mede, Krista and Lleona) will be unaware of it until I tell them it is there. They can then find it, although sometimes not very easily, from then on they will automatically hunt for such a message when doing other interactivity on the website. Such is their lived experience.
A better experience!
However, they all had a very different experience when we audited a Portal recently!
There were a lot of technical tasks, involving a lot of interactivity, such as uploading files, adding email addresses, choosing dates, selecting from multiple checkboxes, dropdowns and hitting a button to save their changes.
When the Save Button was selected, a nice friendly message appeared in a box on the top of the screen, stating exactly what action had just been taken.
I must admit, I was rather sceptical in my initial assessments that these messages would be read by my Team’s screen readers but to my total astonishment (and that of my Team), the messages were read by their screen readers!
I won’t go into the technicalities of how it was done but suffice it to say it was simply brilliant and all of Team was very impressed!
However
The only problem was that not every confirmation message was coded in this way and, when they were not read by their screen readers, they just assumed there was no message. They were disappointed to be told that this message had appeared and even more so when they discovered that it was not actually possible to read it at all!
Inconsistency is one of the greatest challenges my team face with websites. The good news is that it can be easily fixed and this portal will then be one of the most accessible I have ever worked with.
It is always lovely to come across a solution that someone has found for a common accessibility problem that I have not seen before.
Caption: a cat is relaxing in a treatment room in a spa. Its head is reasting on a rolled up flannel and it has a towel covered its body. It looks calm and peaceful, reflecting the calm we all feel when we know we are doing something correctly. The words Confirmation Bias are above it.
Would you like to find out more?
If you would like to find out more about website accessibility, please follow these links:
Watch my TED Talk
Find out more about website accessibility audits
Discuss having an accessibility audit of your website
Have a 1-hour consultation on any aspect of website accessibility
Clive Loseby
Access by Design
Beautiful, WCAG Compliant, Accessible Website Design
Delivering an Outstanding Website Accessibility Audit
Award-winning Web Design, Chichester
The Importance of Website Accessibility
Ensuring Inclusivity and Compliance
In today's digital age, having an online presence is essential for individuals, businesses, and organizations of all kinds. However, ensuring that your website is accessible to everyone is not just a matter of good practice; it's a legal and moral imperative. In this article, we will explore why website accessibility matters and how to determine if your website needs to be accessible.
Accessibility legislation varies from country to country, but in the United Kingdom and many other nations, website accessibility is primarily divided into two categories: websites within the Public Sector and all other websites.
Websites within the Public Sector
- Public sector websites encompass entities like local and national governments, schools, colleges, hospitals, and more.
- In 2018, the UK government issued specific guidelines detailing the standards required for accessibility in public sector websites.
Every Other Website
- All other websites, including those operated by businesses, organizations, and individuals, fall under this category.
- Regardless of their nature, these websites are also subject to accessibility requirements as defined by the Equality Act, which was enacted in 2010.
So, how do you know if your website needs to be accessible? The answer is straightforward: if your website can be accessed from within the UK, it must be accessible to disabled people. Failure to ensure accessibility can have serious consequences.
Why Website Accessibility Matters
When a website is not accessible, it creates barriers for disabled individuals, making it difficult or impossible for them to use it. This exclusion not only goes against principles of inclusivity but also has legal ramifications.
Loss of Potential Customers
- If your website is inaccessible, you risk alienating potential customers with disabilities. They may simply choose not to engage with your website and opt for accessible alternatives.
Legal Consequences
- Under the Equality Act, disabled individuals have the right to take legal action if they encounter discrimination due to inaccessible websites. This can lead to legal disputes, settlements, and financial penalties.
Public Sector Implications
- Public sector websites that fail to meet accessibility standards may face sanctions from the government. Non-compliance can damage an organization's reputation and hinder its ability to serve the public effectively.
Additional Costs
- Even if you eventually decide to make your website accessible after facing legal issues, the process can be costly and time-consuming. It's more cost-effective and prudent to prioritize accessibility from the outset.
Website accessibility is not an option; it's a necessity.
Ensuring that your website is accessible to all is not only the right thing to do but also a legal obligation in many countries, including the UK. Failure to comply can result in lost customers, legal action, financial penalties, and a tarnished reputation. So, if you are wondering whether your website needs to be accessible, the answer is a resounding yes. It's time to make inclusivity a priority and create a digital space where everyone can access information and services without barriers.
Would you like to find out more?
If you would like to find out more about website accessibility, please follow these links:
Watch my TED Talk
Find out more about website accessibility audits
Discuss having an accessibility audit of your website
Have a 1-hour consultation on any aspect of website accessibility
Clive Loseby
Access by Design
Beautiful, WCAG Compliant, Accessible Website Design
Delivering an Outstanding Website Accessibility Audit
Award-winning Web Design, Chichester
We are going on a scavenger hunt!
Have you ever been on a scavenger hunt?
It is an exciting and interactive recreational game in which participants work individually or in teams to find a list of specific items, solve riddles, or complete tasks within a designated area or timeframe. Typically organized for fun and adventure, scavenger hunts encourage participants to use their problem-solving skills, creativity, and teamwork to track down clues and complete challenges, often leading to a rewarding sense of accomplishment when the hunt is successfully completed. These events can be tailored for various occasions, from children's birthday parties to corporate team-building activities, making them a versatile and enjoyable pastime for people of all ages.
How about a digital one?
Sara, one of my fab website accessibility audit team has been on one recently. This one was on a portal that we audited recently.
The portal itself was quite a technical one. One of the tasks involved changing options in an admin section and hitting a button called Save Settings, to save the changes.
The difficulty was that, even though each page of the portal looked very similar, the Save Settings button was in a different place on some of the pages. Sometimes it would be in the top right corner, sometimes it would be in the bottom right corner and sometimes it would be in a seemingly random place.
Sara is neurodivergent. She has extreme ADHD and dyspraxia. Lack of consistency is something that she particularly struggles with and she said she felt like this part of the audit was like a scavenger hunt, trying to find the buttons to save the changes.
Going but not gone!
It didn’t help that this button was also faded out, which made it appear inactive.
There were other buttons on the website that were also faded out but these were actually inactive, until a certain option had been chosen. At this point, they would become active and clearly defined.
This Save Settings button, however, always looked inactive. Add this to the fact that it was often in a different position and you can begin to understand that something as seemingly innocuous as this can be problematic!
Easily fixed!
These two issues are, of course, easy to resolve and when they are done, they will give most visitors a greater feeling of confidence in using the portal. I say most visitors, rather than just neurodivergent people, as consistency is a tenant of good website design.
What other things on websites give you feelings of either reassurance or anxiety? I would love to hear your thoughts. Do let me know.
Caption: Hand-drawn map lying on grass next to a bow and arrow. The map shows a river, trees, mountains and a dotted line meandering across it, leading to a big red X.
Would you like to find out more?
If you would like to find out more about website accessibility, please follow these links:
Watch my TED Talk
Find out more about website accessibility audits
Discuss having an accessibility audit of your website
Have a 1-hour consultation on any aspect of website accessibility
Clive Loseby
Access by Design
Beautiful, WCAG Compliant, Accessible Website Design
Delivering an Outstanding Website Accessibility Audit
Award-winning Web Design, Chichester
How do you balance aesthetics with accessibility?
Two images, same website
There are two images above. The image on the left is of our website. The image on the right is also of our website. The content is identical. One perhaps looks rather more attractive than the other but if you are blind and are using a screen reader, they are the same.
The difference between the two is the stylesheet. The stylesheet determines how a page is laid out, which fonts are used, the size of the text, the colour palette and so on.
Mobiles, tablets and monitors all have different screen sizes so the stylesheet is used to display the content in a way that works most effectively for that screen size.
This is all pretty basic stuff. The stylesheet controls how the website looks and, as the screen size is changed, the content gets laid out differently.
What else can we do with a stylesheet?
With accessible web design, we just take this concept and extend it a little further.
Rather than just specifying the size of the font in the standard view, we can also specify the font size in the large size version and extra-large size version.
Rather than just specifying the foreground and background colours, we can also specify different combinations of foreground and background colours, so people can choose a combination that works for them.
We can offer a plain text version and even allow visitors to choose a different colour combination, in case white backgrounds give them headaches.
Put all of that into a toolbar and there you have it. Giving people a choice over how the website looks whilst defining their choices allows you to strike that balance between aesthetics and accessibility.
Do not use a 3rd party accessibility overlay!
By the way, this has to be done within the website’s code. Do not use 3rd party software to do this for you. This may appear to give your visitors similar choices but actually makes your website inaccessible for many disabled people.
A journey of discovery
I work web designers when I undertake my accessibility audits and it is a journey of discovery for them. Once they realise that technically it is actually not that difficult, it can completely change their mindset, which is why I love what I do!
Caption: On the left is a screenshot of the Access by Design website, showing their accessibility tool, navigation, and a large interactive graphic displaying some of their portfolio.
If a mouse hovers over any one of them, it is raised gently and settles down again as the mouse moves away from it.
On the right is a screenshot of the same website in a plain format, with all of the accessibility options, page links and text over a plain white background
Would you like to find out more?
If you would like to find out more about website accessibility, please follow these links:
Watch my TED Talk
Find out more about website accessibility audits
Discuss having an accessibility audit of your website
Have a 1-hour consultation on any aspect of website accessibility
Clive Loseby
Access by Design
Beautiful, WCAG Compliant, Accessible Website Design
Delivering an Outstanding Website Accessibility Audit
Award-winning Web Design, Chichester
The Web Content Accessibility Guidelines, otherwise known as WCAG
What are the Web Content Accessibility Guidelines?
This is perhaps the most common starting point when you first come across this thing called Website Accessibility. These guidelines, when followed, will help ensure your website is more accessible for disabled people.
There seem to be two favoured ways of pronouncing WCAG.
The acronym “w cag” where the sound of the w is used, rather than spelling the letter
The abbreviation “w c a g”, is where each letter is spelt out separately.
This phrase is, of course, used rather a lot when people are engaged in conversations about website accessibility. I always use the abbreviation but that is just my personal preference.
What about screen readers?
Anyway, it got me thinking about screen readers and how they might pronounce it. I then made a very short video using NVDA.
If you have watched or heard it, you will see or hear that the abbreviation is the one that is most difficult to hear. Putting a space between W and CAG ensures that it is spelt out correctly.
I realise that those who use screen readers would perhaps spell out each letter if they were unsure of what the word was and, after a while, get used to hearing it anyway but it is an interesting thought. Should language evolve to become more inclusive or should screen readers spell out abbreviations by default?
Would you like to find out more?
If you would like to find out more about website accessibility, please follow these links:
Watch my TED Talk
Find out more about website accessibility audits
Discuss having an accessibility audit of your website
Have a 1-hour consultation on any aspect of website accessibility
Clive Loseby
Access by Design
Beautiful, WCAG Compliant, Accessible Website Design
Delivering an Outstanding Website Accessibility Audit
Award-winning Web Design, Chichester