articles tagged with: accessibility
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
Last week we proudly launched a great new site for Findability Bristol. It’s an online directory for disabled children and their families, offering information about services, organisations and events in Bristol.
We’ve loved working on the site with the Findability team, and especially enjoyed developing some of its more engaging features, including:
• Changing home page image every time you visit
• Advanced search, enabling postcode and category filters
• Scrolling events calendar
• Site accessibility features such as Text Resize and Text Only
• Blog – enabling the Findability team to keep in touch with users.
Findability is a Bristol-based portal site for 1Big Database, an online community database we set up for Bristol, Bath & North East Somerset and South Gloucestershire back in 2004. Findability filters data from 1BD for it’s relevance to disability, and reflects this in the results it shows to the user. It’s an ongoing project, relying on the listees’ details being updated regularly and accurately, therefore providing better and more relevant results for users as time goes on.
We’re delighted to have been a part of such a worthwhile project, and would thank the partnership involved:
• 1Big Database (Bristol City Council, Bath & North East Somerset Council, South Gloucestershire Council)
• Bristol Parent Carers
• BCC Disability Communications Group.
Check out the site here!
Created on Tuesday March 13 2012 10:10 AM
I started to look into other features that we had implemented to help with accessibility and just to update my knowledge on the biggest problems for users with reduced access. There were several issues that you would expect to see high up the list, such as; missing alt tags, poor keyboard accessibility and inaccessible flash. The most problematic item however was captcha. Captcha is Completely Automated Public Turing test to tell Computers and Humans Apart, you will often see it when trying to complete forms.
Captcha has the issue of needing to provide security against bots whilst allowing users to still gain access. On some websites I will get the captcha wrong several times so I can imagine a user with poor eyesight would find it impossible. W3 suggests logic puzzles, sound output and non-interactive checks such as heuristic checks (detecting bots using the volume of data the user requests and other background methods) as good possible solutions to solve adding security to websites without reducing access.
We have been implementing a logic captcha gem which produces questions such as "In the following list how many animals are there: cat, blue, red, lion, yellow?" This gives the user the chance to prove they are not a bot but does not need any extra features for text only or high contrast versions. reCAPTCHA also has improved accessibility from previous versions, adding better keyboard support and sound output. There are several other implementations with positives and negatives as well.
The accessibility and usability of the websites we create will always be a high priority however we can only keep up these standards if our knowledge of what users need is up to date. Our 'next text captcha' is an example of how we try to implement accessibility best practices across our websites.
Created on Friday February 17 2012 02:41 PM
There have been a large number of articles over the last few months on the rise of mobile internet with more people now using mobile devices to view websites. This is something which interests us a lot here at Focus Towers as we’ve always believed mobile phones and tablets would become a key way for people to access the web.
I also read yesterday about how social media is helping to maintain the interest in TV shows such as X Factor and Strictly Come Dancing on a Saturday. I would imagine the people using social media while watching TV are using a mobile phone or tablet to ‘tweet’ or ‘comment’ about what they are watching. I for one was on Twitter (on my iPhone) last night while watching Young Apprentice and chuckling at some of the comments which were made and observations made by people which I had also noticed.
“Almost half of UK internet users are going online via mobile phones, according to the Office for National Statistics.”
Source: BBC News, 31 August 2011
It’s not just TV shows, you can now use your mobile phone to check prices of items online before purchase in store or using your phone to find the closest coffee shop. There is a huge buzz around app currently and I have 100’s downloaded to my phone, but I’m using mobile sites more and more for things like banking, shopping, checking out the latest film or train times. I even used Heathrow’s mobile site to check on arrival times for a friend’s flight. I also use the Amazon mobile site rather than the iPhone app because I find that it’s quicker and easier to make a purchase.
A recent study commissioned by Barclays Corporate found that almost 63% of all mobile owners use their device during the online purchase process at present but that this still accounts for just 5% of total ecommerce spend (£26bn) for 2011. However, the research predicts that this figure will rise to £19.3bn a year by 2021 due to the growing popularity of smart phones and tablet devices, sales of which are set to hit 6m by the end of this year alone.
Building a mobile version of a web site isn’t complicated and doesn’t require extensive additional coding (as the same data sources can be used for both ‘standard’ and ‘mobile’ sites) - but it does require some thought due to the reduced processing power and screen real estate of such devices.
We find the key is to focus on your ‘call to action’ and ensure it can be completed easily within the given restrictions. One of the other main differences is that smart phones tend to rely on touch screen for interaction with the user - so the design should lend itself to big graphical buttons that can be viewed and ‘clicked upon’ easily with the finger - rather than a cursor.
If you want to see our own mobile site just type www.thisisfocus.co.uk into your phones browser and you’ll see how we have made our desktop site an easy to use and view mobile version.
Created on Tuesday October 25 2011 12:11 PM
- 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)
- January 2014 (1)
- December 2013 (2)
- November 2013 (2)
- October 2013 (1)
- September 2013 (3)
Bristol: 0117 949 8008