We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you agree to our cookie-policy

SEO ENQUIRY

First, we need your contact details…

SEO ENQUIRY

Which SEO services are you interested in?

SEO ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

SEO ENQUIRY

How soon are you looking to kick off this project?

SEO ENQUIRY

What budget guidance are you working on this project?

SEO ENQUIRY

What budget guidance are you working on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
YELLOWBALL LITE

Unfortunately, you don’t qualify for a bespoke project, but there is good news!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

VISIT YELLOWBALL LITE

Step 1

of 6

WEB DESIGN ENQUIRY

First, we need your contact details…

WEB DESIGN ENQUIRY

Which web design services are you interested in?

WEB DESIGN ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

SEO ENQUIRY

How soon are you looking to kick off this project?

WEB DESIGN ENQUIRY

What budget guidance are you working on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
YELLOWBALL LITE

The end-to-end delivery of bespoke web project akin to the style and quality of our portfolio typically start from £25,000.

Based on your budget guidance, we’d recommend exploring Yellowball Lite – our flexible WordPress theme that is perfect for small businesses, startups, consultancies and charities. Learn more about Yellowball Lite and speak to one of our specialists on this dedicated site. It’s all the best from Yellowball, now fast, affordable and available anyone, anywhere.

VISIT YELLOWBALL LITE

Step 1

of 5

GRAPHIC DESIGN ENQUIRY

First, we need your contact details…

GRAPHIC DESIGN ENQUIRY

Which design services are you interested in?

GRAPHIC DESIGN ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

GRAPHIC DESIGN ENQUIRY

How soon are you looking to kick off this project?

GRAPHIC DESIGN ENQUIRY

What budget guidance are you working to on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
GRAPHIC DESIGN ENQUIRY

Most design projects at Yellowball are typically more than £500 and our agency-wide hourly rate is £145 plus VAT.

We’re probably not a good strategic fit for this project but you could try the freelancer networks at Fivver.com or upwork.com.

Step 1

of 5

PPC ENQUIRY

First, we need your contact details…

PPC ENQUIRY

Which PPC services are you interested in?

PPC ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

PPC ENQUIRY

How soon are you looking to kick off this project?

PPC ENQUIRY

What budget guidance are you working on this project?

PPC ENQUIRY

What budget guidance are you working on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
YELLOWBALL LITE

Unfortunately, you don’t qualify for a bespoke project, but there is good news!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

VISIT YELLOWBALL LITE

Step 1

of 6

GOOGLE ANALYTICS ENQUIRY

First, we need your contact details...

GOOGLE ANALYTICS ENQUIRY

Which Google Analytics services are you interested in?

GOOGLE ANALYTICS ENQUIRY

Anything you'd like to share with us at this stage?

GOOGLE ANALYTICS ENQUIRY

How soon are you looking to kick off this project?

GOOGLE ANALYTICS ENQUIRY

What budget guidance are you working to on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE

Step 1

of 5

Mobile Menu
Mobile Menu

Award-winning work, focussed on results

Yellowball
Web Design

Air X

Yellowball
Web Design

City & Guilds

Yellowball
Web Design

Ballet with Isabella

Yellowball
Web Design

Tomatin

SEE All PROJECTS
Jul 2017
9 MIN READ

Tips for an inclusive design: accessibility in UI

Nic Lapham

As web interfaces continue to evolve, it is becoming increasingly important not to get distracted from the main purpose of a site: to deliver a message. In order for this message to successfully reach your audience, the website needs to be easy to use – intuitive, with good information architecture and (preferably) beautiful.

As the web has evolved, it has become an alternative world – a new “dimension” where we while away hours upon hours. Crucially, the web is all-inclusive and accessible. Therefore one factor we must not forget when it comes to designing a great website is to make it look beautiful for as many people as possible. We build buses, streets, buildings and underground stations with the accessibility of disabled citizens at the forefront of our minds and it should be no different for the web.

In 2011, the World Health Organisation (WHO) published a report in which they estimated an average of 15.6% of the current world population has significant disabilities. According to the Global Burden of Disease Study, this number rises to 19% if we consider people with smaller difficulties. This means there are more people with disabilities than the whole population of China (1.3 billion). Whilst not all of these people will have disabilities affecting how they use websites, it highlights the need to be inclusive.

Web designers have the social responsibility of determining how to design flat and multimedia content that does not exclude. This is applicable for people with hearing, sight, mobility or cognitive difficulties. According to BBC’s study on accessibility, a design that is accessible for everyone will combine Usability, Web standards and Assistive technology.

A good way to start is, as always, to put yourself in the shoes of these users. Test responsiveness, navigate with your keyboard instead of a mouse, try the colour blindness tool on Illustrator/Photoshop. Appreciate some of the frustrations and feel empowered to create interfaces that minimise them.

Here we share some practical tips that can easily be applied to your web interface design.

Web Structure

According to the W3C’s standards within their Web Accessibility Initiative, it is essential to make content appear in predictable ways throughout a website. As the largest web standards regulator states, “many people rely on predictable user interfaces and are disoriented or distracted by inconsistent appearance or behavior.”

Tips:
  • Repeat any navigation and key elements throughout multiple pages, ensuring that they always appear in the same place
  • Apply consistent labelling and structure throughout the site
  • Remember that significant changes on a page should not happen without the user’s input
See it in action:

Consistency and predictability are essential on ecommerce and services websites with multiple pages. Airbnb’s website repeats the same templates and symbols across different pages. When opening a new page, the user already knows where to look in order to find the information they are seeking.

 

Images

Visual representations should never be the only means of showing an idea. Making sure there’s equivalent text will allow colour blind and visually impaired people to still have access to the same information through tools such as device speech, enlarge to custom sizes or read on braille devices.

Tips:
  • Be sure to label every image
  • Text within images should be avoided, although if there is no alternative then you can use ALT labels (Alternative Text) which translate the same information into typed text
  • Add short descriptions next to your charts, diagrams and illustrations
  • When using audio and video files, add a short text description next to them
  • Use labels on your forms, input and other user interface elements.
See it in action:

News channels need to be especially careful with making sure information is clear and accessible to everyone. On The Guardian’s website, you’ll find that all pictures and videos are followed by a description.

 

Text

People with dyslexia, autism or low vision have to put in additional effort when reading text content on a website. Cutting down on overly long content and making it more readable is a general requirement that will improve the user experience for everyone.

Tips:
  • Create content that is concise, clear and simple. Break it up with subheadings, images and videos, as this makes content more dynamic and easier to read.
  • Ensure your text is set at a readable size. Although there is no universal rule as it depends on the actual font, the device and the reading angle, you can find very good tips in this article. If you want to play it safe then we recommend a minimum size of 18px.
  • Test whether you are following contrast standards between text and its background, using tools such as Colorsafe and WebAIM’s Contrast Checker.
  • As mentioned above, images of text should either be avoided or accompanied with matching ALT text.
See it in action:

Apple is the classic example of minimal design, in which they apply text standards for accessibility by keeping it short and concise.

 

Colour

When highlighting or assigning interactions to UI elements, colour should never be used as the only distinguishing element. This will avoid creating perception barriers to people with sight disabilities – people who are colour blind (1 in 12 men / 1 in 200 women), have low vision (1 in 30 people) or are blind (1 in 188 people). Jesse Hausler, the Accessibility Specialist at Salesforce, provides some valuable advice in his post on what every designer needs to know about accessibility.

Tips:
  • Use colour to highlight or complement what is already visible
  • Use text, shapes or sizes together with colour to convey information (for example, use a cross next to your red error message);
  • Choose content/background colour combinations which provide sufficient contrast
  • When designing forms, make sure borders and labels are clear and visible
See it in action:

TransferWise’s forms have clear borders and symbols that complement their meanings.

 

Multimedia content

A great characteristic of the web is how it allows us to have control over time and speed. So why not give users full power to do so? Although people with hearing and learning difficulties will benefit the most from these tips, they will also provide a better experience for everyone else.

Tips:
  • Allow users enough time to read and use content.
  • Give the option to pause, stop, or adjust the volume of audio on multimedia content
  • If you have audio background, have the option to turn it down or mute
  • Use subtitles on videos
See it in action:

TED not only includes the option to have video subtitles on every one of their videos, but also provides transcripts and footnotes.

 

Interaction

Interaction elements are usually the features that you are aiming to draw the user’s attention to. Ultimately, you wouldn’t want someone to miss a button or misinterpret the information on a form. These interaction elements can sometimes be challenging for people with motor related disabilities.

Tips:
  • Enable visual focus indication for keyboard navigation
  • Make primary elements visible, not just on hover; this is a limitation for assistive software, since it can only read items that are visible on the screen
  • Help users avoid and correct mistakes, for example by using predictive text on forms
  • Make sure your clickable hotspots are large to avoid demanding precision
See it in action:

Twitter’s hover and keyboard focus provides a text explanation for each of the icon’s functions.

 

Get creative!

Now that you have the main tools to create a website that is inclusive, you can proceed with the creative process. Designing for accessibility doesn’t mean that you’re limiting your creative freedom. Since this is something that not everyone is doing, you’ve got plenty of room for experimenting!

It may take a little longer at first to try including all these features into your designs, but you’ll get used to them in time and eventually they will become natural specs for your projects.

BACK TO ALL POSTS

Let's work together

Ready to start your next project? Call, live chat or send us a message today. We're here 9am to 6pm Monday to Friday






    I would like to receive news and information from Yellowball