articles tagged with: accessibility
Negotiators of the European Parliament, the Council and the Commission have just this month agreed on the first EU-wide rules to make the websites and mobile apps of public sector bodies more accessible.
In the world of web, these adjustments are about introducing steps to make a website or service accessible for people with visual impairments, manual dexterity issues or learning difficulties.
The internet has become a key way of accessing and providing information and services, it is now crucial we ensure absolutely everybody can do so, regardless of ability. Accessibility enables people with disabilities to understand, navigate, interact with and contribute to websites and apps.
Statistics tell us that about 80 million people in the EU are affected by a disability. This figure is expected to increase to 120 million by 2020 as the EU population ages.
The Directive will cover public sector bodies' websites and mobile apps, this could be administrations, courts and police departments or public hospitals, universities and libraries. They will be accessible for all citizens - in particular the blind, hard of hearing, deaf, and those with low vision and functional disabilities.
Vice-President for the Digital Single Market, Andrus Ansip, is understandably all for the agreement and said: "Tonight's agreement is an important step towards a Digital Single Market, which is about removing barriers so that all Europeans can get the best from the digital world."
The Commissioner for the Digital Economy and Society, Günther H. Oettinger, was equally enthusiastic: "It is not acceptable that millions of European citizens are left behind in the digital society. The agreement that we have just reached will ensure that everyone has the same opportunity to enjoy the benefits of the internet and mobile apps."
The following is the agreed text of the Directive:
- covers websites and mobile apps of public sector bodies with a limited number of exceptions (e.g. broadcasters, livestreaming).
- refers to the standards to make websites and mobile apps more accessible. For example, such standards foresee that there should be a text for images or that websites can be browsed without a mouse which can be difficult to use for some people with disabilities.
- requires regular monitoring and reporting of public sector websites and mobile apps by Member States. These reports have to be communicated to the Commission and to be made public. The Directive on web accessibility along with the European Accessibility Act proposed in December 2015 (press release) which covers a much wider number of products and services, are both part of the efforts of the Commission to help people with disabilities to participate fully in society.
The text will now have to be formally approved by the European Parliament and the Council. After that it will be published in the Official Journal and will officially enter into force. Member States will have 21 months to transpose the text into their national legislation.
So many people avoid using the vast amount of support and opportunities available to them online, all because of unnecessary barriers they are faced with. These can be avoided. If you want to lead in improving accessibility, we can help you with that, a good place to start is to get in touch with us.
Created on Wednesday May 25 2016 10:33 AM
Last year bad User Experience (UX) reportedly cost LInkedIn over £9 million.
Attention to detail is imperative when it comes to producing great design with a smooth UX. But with so much involved in the design process, there is a risk of things going unnoticed.
It doesn't take much to damage the users experience so here are some things worth checking before a design is signed off and deemed good to go...
Don't rely on colour to convery a purpose, heierarchy or content
We are big on accessibility here at focus so to us producing a website that is accessible is not considered a nice-to-have but a must-have. People with visual disabilities for example colour blindness, would not be able to use your site effectively if you were to rely on colour, they would therefore become an excluded demographic.
Test it: colorfilter.wickline.org will let you put a color filter on top of your webpage and test it for different kinds of color blindnesses.
Avoid / reduce repetitive actions where possible
An example of a repetitive action is filling in a form that asks for your address more than once, you may have seen this being tackled with a tickbox you can select to say your billing adddress is the same as your shipping address. If you're not careful, users will grow tired and search for an alternative option (like a competitor!) where they can achieve their goals better and faster.
Test it: Make sure there is a way of facilitating repetitive actions such as an option to use previously entered information.
Accessing help does not get in the way of progress
Users ask for help when they're stuck so of course It is important for help to be an extension of what they are already doing, they should be able to easily return to that once they have received the help they need.
Test it: Put yourself in the place of the user, consider where they will ask for help, and see whether their progress are interrupted.
Users have to be able to find their way around and achieve their goals no matter what page they find themselves on.
Test it: Make sure that navigation is reachable on every page and that your pathways are as intuitive as possible.
Foreground and background are sufficiently contrasted
This is especially important for people with visual disabilities. It also improves a user’s understanding. Clear distinction aids with navigation, draws more attention to buttons and increases usability.
Test it: You could capture the screen, apply a gaussian blur to a Radius of around 3px to 5px then see if you can easily tell what’s in the foreground and what’s in the background. Then alter accordingly.
Don't use much more than two distinct font families
Although this isn’t a strict rule it is best for accessibility. For usability and visual purposes, sticking to two simplifies your typographic hierarchy, which improves comprehension.
Test it: Simply check that your design isn’t mixing more than two type families. You should also make sure that the ones you choose are properly matched, you can find out more on this.
Text fonts are no smaller than 12 pixels
Again, it’s not a fixed rule but generally speaking readability is severely reduced for sizes below 12 pixels. Ideally a minimum of 14px is said to be better for accessibility.
Test it: Pretty obvious I suppose, check all of your content to ensure all fonts used are at least 12px.
Reserve uppercase words for labels, headers, or acronyms
Limiting the use of uppercase words is less visually heavy and easier for the user to digest. It should be used specifically for emphasis or very restricted cases such as acronyms.
Test it: A thorough content check to make sure that uppercase words are kept to a minimum and only used where necessary.
You're stil wondering what LinkedIn did so wrong aren't you? A settlement in California resulted in LinkedIn dishing out over £9 million to compensate users who were manipulated by the site’s deceptive UX into handing over their address books, which LinkedIn then used to spam their contacts with connection requests.
See, bad UX can cost you!
Created on Monday May 09 2016 02:14 PM
Time is money for you business folk so let's answer this quickly and efficently: What is accessibility?
It's designing and developing your website so that people with disabilities can perceive, understand, navigate, interact with and contribute to the web. It's providing the same functionality and experience to users with disabilities as those without.
Disabilities come in many forms, so to break it down for you, these are:
Blind or low vision users that are potentially using screen readers, screen magnification or even a braille display.
Deaf or hard of hearing that may require closed or open captions or transcripts for all of the rich, multimedia content that exists such as audio files or video files.
Ambulatory / motor skills
People with difficulties or inability to use a mouse, that may only be using a keyboard to navigate the website. Or possibly even speech to text software.
People with learning disabilities or the inability to remember or focus on large amounts of information. They may rely on thoughtful layout. They may also be using an array of the previously mentioned technologies.
Web content needs to be made available to the senses, sight, hearing and/or touch. Get accessibility right and it can better your business by:
- Improving your brand reputation
- Helping to meet the needs of a constantly evolving market
- Increasing Search Engine Optimisation (SEO)
- Improving use across mobile devices and tablets
- Reducing your litigation risks
The most obvious financial benefit to building accessible websites and web apps comes from the increased market, the more people you can connect with through your website, the more of your content is being consumed. Resulting in more clients, customers, subscribers, and those seeking your services.
Also, who doesn't like to save money? Well that's what web accessibility may do for you too. Some companies have reported noticeable cost savings in the form of lower maintenance costs, a reduced requirement to provide web alternatives, and even in avoiding expensive legal fees and fines.
Financial benefits are of course a driver to make your site accessible but more importantly, we should all be working towards making the web a hospitable place for everyone, whatever their abilities.
Created on Friday April 15 2016 09:15 AM
When Tim Berners-Lee invented the world wide web, he intended it to be an open platform for society to connect, improve communication and build knowledge. It was a way to provide everyone with vast amounts of information, not just some or a select privileged few. It is said that building accessibility was his vision for bettering the globe.
If you want to stay in Tim's good books, you might want to avoid these incredibly common accessibility mistakes:
1. Alt text for images
Images are often not properly marked up with alternative text for those who can't see images, or separated so that only the relevant images are relayed to the user, or conveyed.
2. Keyboard Accessibility
Users can find themselves 'trapped' inside of a page's content and be prevented from interacting unless they're using a mouse.
3. Dynamic Content Focus
Content appears based on a users action without any indication to those who can't see it. This could be form errors or a date picker: Equally frustrating for those who can see it but can't use it.
4. Focus indicators
No knowledge of where a user is on the page when they're only using a keyboard. Making it very difficult to navigate the site.
5. Data tables
Tables that have corresponding column and row heading associations that cannot be deciphered with ease.
6. Poor heading structures
Undetermined list content where it's conveyed like a list but not structured like one.
7. Colour cues
Using colour alone to convey a part of the page, for example 'For further information select the red button below'. Those with a colour deficiency are going to struggle.
Missing captions from instructional or informative web experiences.
9. Skip to content
Someone who is unable to use a mouse is forced to repeat their steps if there is no skip to content option. This would be extremely tedious on pages containing unchanging content such as a content heavy main navigation.
10. Page titles
It's a small but very important element that is the very first thing users hear on a page. It indicates what the user is about to discover. Without it, users don't know what to expect.
Get accessibility right and it can even better your business. We'll tell you how in our next blog - so watch this space!
Created on Tuesday March 22 2016 01:27 PM
It's that time of year again where I give up everything I consider to be fun food: crisps, chocolate, sweets and more.
So when I push down the red velvet seat to watch Deadpool on the big screen, without stifling my laughter with popcorn, the experience feels somewhat incomplete. Equally a rendition of Happy Birthday has a much flatter tone when I know I won't be getting cake at the end of it. The moral of the story here isn't 'don't be greedy' (wise words though!) I am pointing out the fact that I didn't involve everything I needed to, to make the experience a success. I denied myself of what I felt was the ultimate experience.
If we as web professionals were to try to achieve web accessibility with either design or development, our users would suffer the same disappointment, well, worse in fact. These aspects are complementary. We need to consider both design and development in order for accessibility to succeed. The only way it will is if you make sure you’ve got accessibility taken care of as part of your process.
We follow a design and development cycle and hopefully we can integrate accessibility into several different phases: content planning, wireframing, visual design, development and so on. Your process may differ but what should remain the same is your goal to prevent accessibility issues in the first place rather than trying to fix them at a later stage.
Many concentrate mainly on just one aspect, either design or development. For accessibility to really work though, the two must go hand in hand. A flawed design coded perfectly is just as useless as a brilliant design coded poorly.
Accessibility is the responsibility of the developers and the designers. If you can find a team that work closely together and understand each other, the way we here at focus do, then that's the best start you could possibly have.
Yes, a lot of accessibility is totally development. People seem to believe that accessibility is something that is created programmatically, mostly in the domain of the web developer. They're close. There is indeed a lot that needs to be done programmatically to ensure that what you create is accessible to people with disabilities. But you can’t rely on programmatic accessibility alone. Yes it's what we need to provide for most screen reader users. But what about those with low-vision? They rely on the visual aspects of a design to be able to make sense of it and perceive the interface as intended. And there are cognitive difficulties to take in to consideration as well as language barriers. These need the visual aspects of a design to speak to them in a voice that they can connect with. There is a lot more to it than just programmatic accessibility.
And that’s where I come in, as the designer. Accessibility is super important in the design phase of a project. We can usually predict which areas will be a problem just by looking at wireframes (the 'skeleton' of the design layout). We look at the layouts, how design elements will harmonise together, hierarchy of information and all sorts like that. This provides us with insight into what is likely going to be a challenge for people with disabilities.
Accessibility issues should be pointed out and addressed as early as possible in the design process. The longer you wait, the more costly it will be to change or fix later.
Created on Friday February 26 2016 12:54 PM
Making websites accessible for people with disabilities is an integral part of high quality websites (in some cases, it's a legal requirement!).
As a designer at Focus, that's a big responsibility. It's easy to get overwhelmed by all the things to consider when designing for accessibility. I'm an active member of the web accessibility community in Bristol and often attend presentations that can get very technical and propel me far from the safety of my design knowledge. It's at this point that I call on a skill I've had my whole life: empathy. An important thing to remember is that accessibility is about understanding people and the barriers that they face.
Many of the barriers people with disabilities are faced with, also effect people using mobile devices when interacting with web content. Some examples of this include the fact that mobile phone users will struggle if a website's navigation requires the use of a mouse. Similarly, desktop computer users with a motor disability will have a hard time using a website if they can't use a mouse.
Some shared experiences are comparable to temporary disability; If you need to use your mobile to access a website when you're at a concert, the noise that surrounds you likely means you are experiencing the website similar to how a deaf person would. Equally you may struggle reading small text as those with low vision do with most text. The iPhone is less than 10% of a typical desktop screen. 'Fat fingers' denying you all accuracy could equate to difficulties faced by those with hand tremors. A 40 pixel finger is big on a small target! Mobile is disabling for everyone.
There are guidelines to help you keep accessibility in mind, such as the BBC's mobile accessibility guidelines http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile and of course Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/TR/WCAG20/
Getting your own experience of accessibility helps you to put yourself in the shoes of others and keep accessibility in mind when building and testing your website.
So next time you wonder whether a design feature is accessible and immediately rely on tools such as a colour contrast checker, first consider disabilities of all levels and the struggles faced by others and maybe even yourself . Surely I'm not the only one who's complained of 'fat fingers'?
Created on Thursday December 24 2015 10:24 AM
I sit, staring at a screen more blank than my expression. Sometimes it can be so hard to write a blog, let alone write one that's accessible to people with disabilities. When doing so, there are many things to consider, for example Screenreader compatibility. Below is a list of things to keep in mind that may help you.
(So that you don't abandon my blog to instead watch a YouTube cat playing the piano, I've kept it brief, plus we all love a bullet point, right?)
- Use real text not text within graphics.
- Choose simple, easy to read, sans serif fonts such as Arial.
- Limit number of fonts.
- Ensure sufficient contrast between the text and the background.
- Avoid small font sizes (less than 12pt).
- Limit the use of font variations such as bold, italics, and ALL CAPITAL LETTERS.
- Underlining is best kept for hyperlinks.
- Numbers: Use symbols (1,2,3), not words.
- Avoid jargon.
- Avoid too much information on one page/blog.
- Bullet points should be used to break up information (avoid numbered lists).
- Abbreviations and acronyms should be avoided if possible. If not possible, first refer to it in full with the acronym in brackets for example ‘Web Content Accessibility Guidelines (WCAG)’
- Always check spelling and grammar before publishing.
- Don’t use 'eg / ie', write ‘for example / specifically’.
- Don’t use '&', write ‘and’.
And a few final points:
- Images should be used as much as possible.
- Blogs should have meaningful titles that help users identify the page in search results.
- Avoid using ‘click here’. Ideally the purpose of a link is clear, even when the link is viewed on its own.
For those of you who aren't by now listening to the sweet sound of paws on a piano. Here are some links to my other blogs about accessibility that may also be of help:
Created on Wednesday November 11 2015 10:53 AM
Guesswork can only get you so far before it becomes a problem. My 'genius' theory of 'If in doubt choose B' served me well in my multiple choice French exam. It proved less useful in my oral exam when I told my teacher I keep a large duck in my kitchen every other day.
Yet it's come to light that many people with disabilities are navigating websites with the help of good guesswork, such as assuming the 'Contact' button will be the last link in the navigation bar.
A website should be intuitive to anybody who chooses to use it. Nobody should have to guess their way around and risk missing much of it's content. Accessibility enables people with disabilities to perceive, understand, navigate, interact with, and contribute to the web.
Alastair Campbell oversees both usability and development aspects at Nomense, a company that believes, just as we at focus do, that everybody has the right to access inclusive design, regardless of ability. He spoke with us about the importance of considering accessibility right from the start of the design process. We want to share a few of those things with you.
The main content is often not the first thing on a web page. Keyboard and screen reader users tend to have to navigate a long list of links, sub-lists, corporate icons and more before ever arriving at the main content. So these users will thank you for enabling them to bypass or 'skip' over repetitive web page content. You can press the tab key on the Nomensa site for an example of a skip link http://www.nomensa.com/
You should be able to achieve everything with keyboard controls alone.
• tab key to progress through links and controls
• shift-tab to reverse
• enter to follow links
• space to select form controls (e.g. tick boxes)
• cntl-f / cmd-f to find a link or text
On many sites, the closer you zoom in, the more of the site's content is lost off-screen. Not with the Microsoft website: https://www.microsoft.com/en-gb/ this responsive site behaves as if you are viewing it on a smaller device each time you zoom, so eventually you are looking at a mobile view with all content still easily accessible.
Make sure the results of user input happens close to where they perform the action. To experience the difficulties that incur if you don't, zoom in on this website https://www.overclockers.co.uk/index.php and add something to the basket. When you do, you're left wondering as nothing appears to change, unless of course you navigate all the way to the top right of the screen and view your basket. Do the same on amazon and an 'Added to Basket' notice immediately appears within view. Yes, that ab-cruncher I'll never use is mine all mine!
Alistair, photographed above, says there are 4 questions to ask yourself:
• Can you use it with a keyboard?
• Can you see it when zoomed?
• Does it provide appropriate information to
• Is it easy to understand?
Yes, it's a lot to take in and on the surface it may seem that this will limit your creativity. If anything, these guidelines will push these limits as you discover visually pleasing designs that improve the online experience for a wider set of users. And that's a fact. Even in French.
Created on Friday October 16 2015 11:42 AM
I watch as person after person pulls furiously on a door handle before giving it a shove, flying through the doorway much to their surprise and quickly patting down their disheveled attire.
(I'm allowed to laugh as it makes me feel better about doing it myself shortly before, only much less gracefully).
The problem here? The door handle was giving the wrong message. What looked like a handle was indeed a hinge.
My point is, the need for accessibility is everywhere and it is as important in web design as it is in architecture.
When designing for web we must consider various factors such as colour contrast and text size but many forget to consider screenreader users (Screen readers are audio interfaces that convert text into synthesised speech so that users can listen to the content). Luckily there are a few simple things that can be done in order to improve usability for screenreader users, and ultimately all web users...
Unlike sighted web users who can scan a web page and pull out at random what they consider to be the important information. Screen reader users tend to listen to a page from start to finish, top to bottom, left to right. So it is best to have the important parts towards the top of the page.
Descriptive page title
The first thing a screen reader user hears is the page title. It is imperative that this gives users a clear idea of what to expect from that page. Obviously this benefits everyone as anyone can use the page title to orientate themselves and confirm they are where they want to be on the website.
One of the most important usability features for screen reader users is on-page headings. The page structure can then be more easily understood. Although text on the page may appear to be a heading for sighted users, screen readers read through the HTML code so it must be labelled as a heading within that. The screen reader will then announce it as such.
Descriptive link text
Screen reader users can call up a list of on-page links and browse a web page that way. They simply activate links of interest to them. Therefore non-descriptive link text like ‘click here’ is meaningless out of context so avoid it like the plague!
Using lists within the HTML code is super useful as screen readers announce the number of items in each list before reading them out. This way screenreader users have a better idea of what to expect when hearing a list of items, for example site navigation.
A bit like the way an answer machine tells you how many messages you have received rather than just reeling them off one after the other. You feel more prepared for what you're about to listen to. The use of lists (using the <li> tag) is a behind-the-scenes change to the code that shouldn't really affect what the website looks like.
The great thing about these screenreader friendly tips is that each and every one of them will improve overall user experience.
We as humans like to know what to expect and are comfortable with what feels familiar. It's always good to bear this in mind when designing for web and there is no reason this should jeopardise your creativity. Maybe give the web equivalent of dodgy door handles a miss though, just a thought!
Created on Wednesday August 26 2015 03:06 PM
"We are drowning in information but starved for knowledge" - know who said that? You have two guesses... if neither of them were author John Naisbitt, you don't win a prize (well you don't win one either way but it feels good to be right doesn't it?)
Accessible Communications Consultant, Katie Grant, kicked off her engaging talk with that very quote. Katie quite rightly pointed out that information often comes at us faster than we can make sense of it, regardless of disability. So if you're the one dishing out all that know-how, you might want to consider whether it is meaning as much to your audience as it is to you. You should be thinking about:
Language - keep it clear and simple.
Tone of voice - is it appropriate to your audience and your organisation?
Message - should be clear and targeted.
Structure - have a clear intro and overview of the subject.
Content - keep complex data separate.
Readability - pitch at the correct reading level.
Web accessibility should focus on people with all types of disabilities - visual, auditory, physical, speech, cognitive, and neurological disabilities - including older people with age-related impairments.
Potential audience groups who may benefit from an accessible website also include:
- people with long term health conditions.
- those for whom English is not their first language.
- people with low literacy levels / poor social access.
- people with neurodiversity conditions such as autism.
Some say what has caused a lack of awareness is a lack of empathy. Hearing from those who require accessible websites is so valuable and there was a lady present who kindly shared her needs and preferences with us. She has a few conditions including dyslexia and favours websites with accessibility bars that have the option to change the background colour (you can see this on many sites designed by Focus i.e. www.afclocaloffer.org.uk)
Focus work with many charities and enjoy enriching the lives of others through our technology but there are benefits to be had by all when accessibility is considered seriously. Legal & General spent a lot of time and money making their website accessible. In doing so they experienced many side benefits: visitor numbers almost doubled, maintenance costs halved and there was a huge increase in traffic to the site. Even though it's a few years old their case study is an inspiring read and you can view their case study online.
The message is simple. It's a pretty good idea to make accessibility the aim behind communicating any information. Whatever your reasons are for doing so, the benefits are countless.
Created on Monday June 01 2015 12:18 PM
- May 2016 (2)
- April 2016 (2)
- March 2016 (1)
- February 2016 (1)
- January 2016 (1)
- December 2015 (4)
- November 2015 (2)
- October 2015 (4)
- September 2015 (1)
- August 2015 (2)
- July 2015 (1)
- June 2015 (1)
- April 2015 (3)
- March 2015 (3)
- February 2015 (3)
- January 2015 (1)
- December 2014 (4)
- October 2014 (3)
- September 2014 (3)
Bristol: 0117 949 8008