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
It's interesting to see that Amazon have opened their first 'bricks and mortar' store in University Village, Seattle - a clear departure for an organisation previously critised for helping to end the presence of many bookstores at cost to local communities.
Data plays a huge role in the way the new store operates, with Amazon tapping in to their countless sources of product and customer data which as you'd expect, allows them to do things a little differently. Books are presented on shelves based on customer ratings ("all books on this shelf are rated 4.5 and above") which means titles that are little known, but well loved, get just the same exposure as more recognised books and authors.
There's also shelves for 'most recommend cookbooks' and 'best books for 6 to 12 year olds' and customer reviews are placed on cards directly below each book.
Amazon have also made the decision to lay all books out 'cover facing', rather than stacked with only their spine showing. Whilst this obviously reduces the number of books that can be displayed, Amazon feel it's more important to give each book as much and as equal exposure as they can.
Another advantage Amazon will have is utilising their huge selling power on unsold stock, something that high street bookstores have consistently struggled with.
And more stores? An Amazon spokesperson said "We hope this is not our only one. But we’ll see."
It may be another step on the marketing juggernaut that is Amazon, but it's interesting to see how data from the web experience is being used in the physical world.
Created on Thursday November 05 2015 09:04 AM
Monday 19th October saw Simon and Annette travel north to join Hartlepool Borough Council for the launch of Hartlepool Now, a new web site created by the team at Focus that helps the local authority meet new information duties from The Care Act 2014.
Taking place at Hartlepool College of Further Education, the launch event was a great success. Attendees had a number of workshops to choose from including a run through of the web site itself, a demonstration of the new online Equipment Finder and a chance to see The Ricochet Project from local charity Incontrolable, which lends tablets to disabled people in the community and provides basic training in using them.
Following the workshops, Hartlepool Now was officially launched by council Chief Executive Gill Alexander, who stated that the new web site "helped Hartlepool set a new standard for publishing clear information and advice".
Our branded cupcakes went down a treat as well.
A massive thanks to the project team at Hartlepool for inviting us to the launch, it was great to be part of the event and hear the positive feedback the web site is already receiving.
Created on Friday October 23 2015 11:36 AM
Rife Guide is a dynamic online platform where young people can keep up to date with what’s happening in Bristol and get involved in a wide range of activities. Part of Bristol City Council's pioneering online virtual youth service and created by Focus in partnership with Watershed, Rife Guide is managed by a team of talented young journalists, content creators and editors who know what’s important to Bristol’s young people.
Rife Guide includes a calendar of events and activities in Bristol as well as information and advice on important issues such as housing, drugs and sexual health. What’s more, visitors can create a login that will give them access to a portal of content that is appropriate to them - events and services are suited to their age and preferences and then pushed to them every time they log in, without the need to search.
As well as being a hub for young people, Rife Guide is also a platform where local businesses, organisations and providers can promote their services - they too can create a login and upload the details of their organisation or event which is then moderated by the Rife team before being published to the website.
Annette Ryske of Focus says the involvement of young people at all stages of the project has been crucial in it's success:
"Consultation was key. From the very beginning, we worked closely with Watershed on a series of workshops and engagement sessions with both service providers and target users. This involved visiting local schools, youth groups, clubs and children in local authority care. Our work with providers led the development of systems for publishing their information quickly and efficiently."
"Working with young people showed us that the majority of their internet use was via mobile, they were using social media to share content and the content itself should consist of less text and be rich in images and video."
Now that Rife Guide is live, ongoing engagement with young people is more important than ever, and we are already planning new content and features based on feedback from users.
Created on Friday October 23 2015 09:39 AM
For some it's driving fast cars, for others it's a risky bungee jump, for me I get plenty of excitement from discovering handy tools like this accessible colour palette generator! colorsafe.co
Stay with me, I'll get a life right after I tell you why this is worth shouting about...
Colour is super important in web design. It's not only used to make the website visually appealnig but also to increase it's usability and accessibility.
What we must remember is not to assign too much meaning to colour in web design as this is of no use to users who cannot view the colour as you intend them to. That’s why when designing a website you should ensure that the information conveyed with colour is also provided through another means.
We must also ensure there is sufficient color contrast for all content. The goal is to make sure that all visual designs meet the minimum color-contrast ratio for normal and large text on a background. There is a lot to consider but this colour palette generator does much of the thinking for you. It is based on WCAG Guidelines of text and background contrast ratios.
You simply set up the canvas and text by entering a background color and the styling of your text. Then accessible text colours are generated with WCAG Guidelines recommended contrast ratios. Ready for you to simply pick your favourite!
Created on Tuesday October 20 2015 10:48 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
This week my eyes have been opened as to how poorly it appears some businesses appear to be monitoring enquiries sent through their web site.
As things are growing rapidly here at Focus I've been seeking a new supplier for some financial related services. On Tuesday night (the 1st September) I made three enquiries to Bristol based businesses that provide exactly the thing I'm looking for - through the 'Enquiry / Contact Us' forms on their web site (because a) it was 10pm, and b) I really do prefer doing this sort of thing over email, especially initially).
As I write this at 4pm on Friday 4th, not one of them has replied to my business enquiry - which is as pretty close to a hot sales lead as you can get.
I won't name and shame these businesses; but they are not one man bands - they are established names all claiming on their web sites to consist of large teams and proactive staff. I know I'd be disappointed if we at Focus failed to follow up enquiries like this. Colleagues have mentioned this sort of thing before and excuses have included "James deals with enquiries, and he's off sick", or even "I'm not sure who looks after the web site". Not good enough by a long shot, not these days.
So SME's and businesses - having invested in your web site, and probably taken the time to update it with news, and probably paying someone to tweet on your behalf - why not check for a moment and see if anyone is actually dealing with enquiries you might be receiving.
As for me, maybe if I send a fax to those three companies, they'll get in touch....
Created on Friday September 04 2015 03:09 PM
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 very pleased to announce Stefano Franzin has joined the technical team at Focus.
Originally from Italy, Stefano is a full stack web developer with many, many years of open source coding behind him in both PHP and Ruby on Rails. Stefano brings a wealth of experience and expertise to the team and is already knee deep in some of our larger projects.
When not coding Stefano enjoys travel - especially out and about on his 600cc motorbike - and making his own musical instruments. We're currently persuading him to try both at the same time.
Created on Friday August 21 2015 03:04 PM
2015 marks 25 years of photoshop.
Some of you reading this will no doubt be younger than this incredible software (!) and wondering how on earth people ever coped without it. For those of you who remember just how you managed, consider this a walk down memory lane…
This Lynda.com video is fascinating and walks you through the process designers used to go through before they could "photoshop".
Watch it, and you will be in awe. You'll understand why things are the way they are in Photoshop and just how difficult things once were that are so simple today. 30 years ago, to get a piece of type, designers would have to jot down the required copy and request for example 'Helvetica, 24pt, on 24pt leading', send it to a typographer, wait 24 hours, and only then would they receive it printed on paper for them to glue to their mock-up. And if it didn't look right? same again, including another 24 hour wait. Deadlines must have been tough to meet!
Never again will I moan about anything to do with photoshop. It's only Wednesday but I have managed to roll my eyes at something every day this week:
Monday: "How dare auto select, auto select when I don't want it to be activated anymore but hadn't actually deselected the option?"
Tuesday: "Why doesn't Photoshop simply know which layer I clearly had in mind for that effect?"
Wednesday: "My computer is soooo slow, I just had to wait like 0.5 seconds before what I was typing would appear" - at least it wasn't 24 hours!
Is anybody else with me on these or have you got even 'better' ones? We'd love to read your comments!
As an 80's baby, I have reached an age where I'm socially permitted to bleat on about "When I was at school" so here it is:
When I was at school… I studied Graphic Design and it wasn't all fancy software and special effects at the click of a button, oh no, it was of course tasks like build a buggy that can protect an egg. Useful.
It wasn't until I began university as a 'mature student' (seriously? - I was only 23!) that I discovered the joys of Photoshop. I must admit though, it terrified me and initially I avoided it when and where I could. My classmates were only 5 years younger than me but they had used it throughout school and it came so naturally to them.
Now, millions of people use Photoshop everyday and do wonderful things with it, bringing our imagination to life. It has totally transformed our visual culture and changed how we see the world we live in. Adobe have created an intriguing timeline that may just surprise you. Take a look back at the years.
Happy 25th Year Photoshop (and thank you for making life sweet!).
Created on Wednesday July 29 2015 02:20 PM
Bristol: 0117 949 8008