articles tagged with: accessibility
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 everyhting I needed to, to make the experience a success. I denied myself 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
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
- 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)
- August 2014 (1)
- June 2014 (1)
- May 2014 (2)
Bristol: 0117 949 8008