articles tagged with: accessibility
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
Sure, I was hungry but I wasn't just there for the sandwiches. When I heard Accessible Bristol was hosting an event for anyone interested in the web and accessibility, I saw it as an opportunity to ensure our clients get what they want. Here at Focus we work with a lot of local authorities and for websites such as theirs, accessibility is key.
I was keen to hear from one of the most recognisable and respected people in the web accessibility industry; Steve Faulkner (pictured). An enthusiastic man who has dedicated 15 years to web accessibility. In 2001 he started his career with vision Australia. Today he has kept his accent and is Principal Accessibility Engineer at The Paciello Group as well as being co-editor of the W3C HTML5 specification, and a contributor to other specifications including Accessible Rich Internet Applications (ARIA).
Sitting excitedly in the front row I was pleasantly surprised when the casually dressed, relaxed man sat amongst us took to the stage. This immediately likeable character delivered a highly knowledgeable presentation and although it was very much focused at developers rather than designers such as myself, I still felt included despite being somewhat outnumbered by the 'techies' in the audience.
Steve went through an alphabet themed slideshow; A is for ARIA, B is for Button, C is for Canvas and so on (view slides). Admittedly it was like learning a new language but I always strive to be a better designer, and if learning 'techie talk' and understanding ways I can work more in sync with the development team will help towards that, then count me in.
Once the sandwiches were scoffed and the slideshow slowed to a stop, it was question time. I plucked up the courage to ask a design focused question and felt all eyes on me, then a few more of us admitted to being in the design 'camp' and conversation started to flow. Talk ranged from not knowing where to begin with a blank canvas, to a woman with dyslexia and dyspraxia expressing her frustration when surfing the net.
When it all came to an end, the message that stood out for me as a designer was this;
“Think about accessibility first and foremost, because if you get it right for disabled people, you get it right for everyone.”
If you would like to know more about accessibility, Steve recommended the website http://webaim.org. On there you can find a simple checklist that presents Webaim's recommendations for implementing HTML-related principles and techniques: http://webaim.org/standards/wcag/checklist
You can keep up to date with all Steve has to share by following him over on Twitter @stevefaulkner
Created on Wednesday January 28 2015 12:09 AM
World Usability Day 2013 at the M Shed this year had a host of great talks from usability professionals and enthusiasts from around the world. One talk really caught my attention and that was "BBC Olympics: An Accessibility Study" by Alistair Duggin the lead front-end developer at Money Advice Service. The talk looked back on the BBC Olympics website and the huge task taken on by the BBC to cover the Olympics in the digital age They wanted to make 24 HD live streams, over 2500 hours worth of video coverage as well as huge amounts of stats and data available world wide to a massive audience across mobile, tablet, PC and connected TV.
By the end of the project there had been 37 million UK browses, 66% of the adult population had visited the website as well as having 57 million global browses with 111 million video requests across all available platforms. These numbers were not the only difficulties of the project, the team at the BBC had an immovable deadline of a huge profile event and were working with teams of mixed knowledge in terms of accessibility. On top of this for added pressure the Australian olympics had been sued for being inaccessible.
So the team had one page for each of the 10,000 athletes, 205 countries, 36 sports, 304 medal winning events and 30 venues that they had to make usable and accessible for people with a range of visual, auditory, motor and cognitive abilities. This is where I was really surprised by the talk, I was expecting a full range of teams running huge usability studies and endless testing to make sure everything was perfect deploying more resources than is possible in a normal sized project. In reality the methodology and practices followed by Alistair and his team were reusable on any scale and in fact should be used on all web projects. It is not spending a lot of time changing designs and code to make it accessible, if you have accessibility in the back of your head when creating websites then you should only have to do it one time.
These are all the kind of coding practices that we can all follow on our websites but not necessarily something we check as often as how a page looks in IE7 or displays on a mobile device. I learned a lot from Alistair's talk, especially coming from the view point of a front end developer it showed me how important accessibility is for users, we should not be thinking about making it better for a minority of users but instead creating universal accessibility. He also talked about having a website that is one hundred percent accessible as not being realistic and that we need to prioritise in real world projects but that accessibility does not have to compromise design or ingenuity in websites.
Created on Monday December 09 2013 10:00 AM
'Big Wecil' has been the affectionate name throughout the summer for one of our larger and more complex projects - which gets it's first serious airing tomorrow (Wednesday 11th September) at Disability Somerset - the south west's leading independent living exhibition.
We're not going to give too much away at this stage, but it's a hugely exciting and innovative way for adults who require social care to plan their care and manage their personal budgets - all in line with the ongoing requirements from government for more personal choice and decision making.
'Big Wecil' has been designed from scratch to work across all platforms and devices, such as iPads and iPhones, includes lots of features to enhance accessibility, and throughout the project there's been a real focus on system usability. The software looks set to provide a truly collaborative environment for professionals such as GPs, social workers and health visitors.
With the BBC and other news outlets at tomorrow's exhibition, we're looking forward to revealing a little more about the project - meanwhile as we might be on telly, we need to go and check our hair.....
Created on Tuesday September 10 2013 11:36 AM
Another go-live during our busy Summer was the dedicated Mobile site for Findability Bristol, an online directory for disabled children and their families.
Since the main site went live back in March 2012, we're been monitoring the Analytics, and seen a month-on-month increase in visits from Mobile devices. The figures spoke for themselves - a 481% increase in Mobile visitors in May this year compared to May 2012 - and it was only increasing. This, along with a need by the Family Information Services team at Bristol City Council to make information available and accessible to as many families as they can, made the case for developing a dedicated Mobile site a compelling one.
- The number of visits made using a mobile device had almost tripled compared to the first 6 months of launch.
- A 21% drop in pages-per-visit suggests people have grown to expect websites to be mobile compatible - and are losing patience with those that aren't.
- The average visit duration when accessing via a mobile device had dropped to less than a minute.
- Almost a 10% increase in new visits being made using a mobile device.
- 14.36% rise in bounce rate suggests users are getting increasingly deterred as soon as they see the site is incompatible with mobile.
So, we set about developing an easy-to-use site that kept the fundamental features of the desktop version, plus a couple of extras to make full use of the mobile environment - for example, smart phone users who have geolocation enabled, this plots your location and the nearest organisations to you from your search!
- The mobile home page features clear navigation to key area, plus keyword and location search of organisations and events.
- Search results are displayed along with a Google Map - this links through to view full Google Map and associated functionality - including "show me directions from my current location".
- The events calendar provides users with a menu offering 'view events for current week' - organised by today, tomorrow, remaining days of that week.
- Clicking a specific event takes the user through to an individual page for that event, including a Google Map.
- It's also easy to make contact, provide feedback, and visit the related Facebook (mobile) page.
It's only been a couple of weeks since go live, so we'll be keen to view the analytics in due course and report back on the difference having the dedicated Mobile site has made. We hope this will be more returning visitors, who spend the right amount of time on the right pages, finding what they need quickly and easily.
We'll report back later in the year!
If you'd like to know more about dedicated Mobile sites, please get in touch.
Created on Tuesday August 06 2013 12:07 PM
Recently at a focus knowledge share I talked to the team about Information Architecture and its role within the user centred design process. I also talked through best practice methods and techniques that could be used within a digital project. I like to think of Information Architecture or IA as the art of organising websites or software to support usability. IA can be used outside of digital projects but this is what I focused upon.
Information Architecture can identify the goals of your website and help you to create a digital blueprint or wireframe of your potential users' process through your website. It is an important part of the strategy and solution design process right at the start of a web project. You can use it to eventually group up and define the taxonomy of all of the website's contents, products and features in a user driven way.
IA is just one part of the user centred design process, analysing your users needs and assessing the journey they want to complete on your website. It is using key usability principles such as visibility, accessibility and consistency to create the basis for what will become your final deliverable. The user centred design process as a whole incorporates a lot of real world testing to ensure no assumptions are made during the design process. IA starts off this real world testing at a very early stage, ensuring first of all you know the correct audience to test! Designers and developers must be experts in our fields, however we do not know often the intricacies of the end user and need to form our opinions on a basis of research to then take back to the client.
There is always a different amount of research required with every project. The methodology, processes and opinions of IA I am talking about just refer to common approaches rather than quoting from an exact guide to IA.
At the very beginning of any size IA process it is important to ask yourselves, your users and your client questions. What are the short term goals of the website? Why would people come to the website? We need at this stage to establish an audience, this is going to be very important as we will base the majority of our research gathering from this audience. At this point we have to really think through what different elements that make up a website's audience and how they will use the website differently from each other. You can create scenarios of them coming to the website, what their goals are and what difficulties they might have. From here we can gauge our competitors and start to address gaps in functionality in the market for the audience. This is only the start of your UX and IA journey, next you can start to define core content and the functional requirements of your website, this will lead you down a path of wireframes and lo-fi designs until you have your perfect blueprint for the website of your user's dreams!
Some of the core methods and techniques of IA were the reason I enjoyed it so much in university. Card sorting and content discussions with your peers either as part of the user group or as a facilitator is always fascinating and insightful. It helps to outline potential issues and golden points to your website that you have not thought of yet.
Creating sitemaps, wireframes and discussing the user flow throughout a website will help your designers. When they open the graphics tool of their choice they are equipped not only with their expert knowledge of the web but a knowledge of what the user needs and what goals have to be achieved by their design. Personas can often really bring a website to life, when you are discussing how best Jimmy the iPhone fanatic will achieve his goals of buying your client's products you can start to feel the website being out in the real world before it is fully created.
A full user centred design process is not always what the client has in mind when they bring a project to you, it is often the case that there is not a budget to go out and spend weeks creating personas and testing how the website flow using paper based designs. However small bits of IA and the user centred design process will always fall into a web-creative's design process, we want to create the dream websites for our users and the only people who know exactly what the dream is, is the users themselves.
Created on Thursday February 07 2013 03:38 PM
- 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)
- August 2014 (1)
- June 2014 (1)
- May 2014 (2)
- April 2014 (2)
Bristol: 0117 949 8008