Category Archives: Design

Developer friendly AAA accessibility testing process

Accessibility is becoming ever more important and a standard for many pages (hopefully more to come). But there are many different ways of testing whether sites and apps are accessible. There is no set way, as long as the testing passes all the requirements on the WCAG 2.1 guidelines, it will be sufficient. Below I am outlining a simple process that I follow to get the biggest “offenders” out of the way.

Accessibility is not simply passing automated testing and calling it a day, a lot of it is based on actually using the page with the different limitations in place and the tools that people would be using, however this process should get you most of the way there.

Pre-requisites:

  • Google Chrome installed

1) Quick automated scanning / testing (on every page)

2) Valid HTML

Scan the page with the W3’s HTML validator. This is the most basic check and many issues can simply come from having invalid HTML. You can either “view source” on the page and copy/paste the content into the validator, or simply give it the URL to validate (if it’s public). Do this for every page. Think about variations where there’s dynamically added content.

https://validator.w3.org/

3) Hierarchy – Headings

The page should have only 1 H1 tag, all the following H tags need to be in a logical order, i.e.
H1 > H2 > H3 > H4, etc. compared to H1 > H3 > H2.

Use headings to define the page structure!

H tags should be used to title sections of the content. H tags are often used instead of navigation as screen readers allow users to quickly jump between them. This helps users find the relevant section of the page and directly skip to it.

A good tool to test with is:
Chrome: Headings Map

Or you can also use the:

Chrome: WAVE Evaluation Tool


By going to the “Outline” tab

4) Contrast

We are looking for a contrast ratio of around 7:1 for any text size to pass AAA.

Chrome: WCAG Contrast checker

Not as useful, but helps CheckMyColours.com

NB: You will have to test hover states (on buttons, links, etc.) separately. (Hint: you can set the hover state as on in the Chrome developer tools)

5) Keyboard accessible navigation through the page / “Skip to content” / Focus order

  • The user must be allowed to skip the navigation (that should be consistent on every page). This is so that they don’t have to tab through all the links on every page refresh.
    Example: https://webaim.org/techniques/skipnav/
  • The focus order needs to be logical and run through the page in the most semantic way, i.e. not jump from the header to the footer and then to the top navigation and then to the middle of the content. Normally, this is achieved by a logical structuring of the HTML that is not different from the design.

6) Focus visible

  • Focus highlighting must always be clearly visible (standard is a bright sky-blue colour, but any can be used as long as it has sufficient contrast). Any element on the page that is focus-able must have that highlight. This includes form elements, links, buttons or even content in some cases.
  • Make sure focus is also visible transferred if a modal is opened on the page. The focus must move to the modal and its content. Once the modal is closed, the focus must move back to the element that triggered the modal opening in the first place.
  • All of this is necessary so that the user always know where they are on the page when navigating and tabbing through the content.

Bad example:

Good example:

7) Text resizing

Using CMD+ (CTRL+) or CMD- (CTRL-) make sure the text resizes and the page keeps it’s layout without breaking. All the text must maintain a reasonable ratio between the different sizes (i.e. paragraphs and headings should not be massively different and should scale at the same ratio).

8) Text for images (or presentation only specified)

Make sure all images have alt=”” text specified or role=”presentation” if they are to be ignored. Step 1 above should catch any of these issues.

9) Forms – Input labels / error identification / error prevention (help texts)

[to be added]

Resources:

Articles:

Tools:

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Website design is for the visitors not for the owner

Sometimes when clients come and ask for a website they don’t know exactly what they want, but they want a website. Other times they are very specific with their criteria. But in both cases it can come down to the fact that they want a website that they like. This is when it can become difficult to do a good job. Why? Because when a client comes to you, they come to an expert, they want you to tell them how to do things the right way so that they can achieve their goals. If they come and tell you how to do the thing they are paying you to do, how it should look, then they rob themselves of the benefits of your expertise. Continue reading →

Facebooktwittergoogle_plusredditpinterestlinkedinmail

User experience design – what is it?

User experience (UX) is in fact a very general term. It can refer to someone’s experience with a physical product, a customer service personnel, the interaction with a device or software. The environment in which one experiences the specific interactions with a software for example is also part of the user experience, a part we cannot control but that is important to consider. For example, product designers always think about the different situations in which their products will be used – will the button have to be pressed with gloves in cold weather, does it need to be waterproof, etc. Continue reading →

Facebooktwittergoogle_plusredditpinterestlinkedinmail

What is a logo?

A logo is many things to many people, but I believe it is in fact a simple thing. A logo is a vessel, a symbol. Even the most beautifully looking one doesn’t necessarily have to be a good logo. This is because a logo is not just about how it looks, but mainly about what it contains in terms of meaning. Continue reading →

Facebooktwittergoogle_plusredditpinterestlinkedinmail

01 July 2015 – The trustworthy design – Everydays

01_july_2015_poster_mockup

Inspired by Julie Zhuo’s article on Medium.com.

If you place your trust in a good process, then the end result will probably be pretty good. It’s that simple.

There different design processes, but the most important (arguably) part is the critique-solution exploration loop. And here I agree with Zhuo. The more we stay in that loop, the more refined and improved our design will be, because it will encapsulate more variations from multiple angles.

However, it must be noted (in the spirit of MVP) that this is not always possible, especially at the start of a product. Nevertheless, it is a good practice to return to a design and improve it. To think about the reasoning behind your design decisions and over time it will become a habit that reduces the loop, because you would have done it internally for the greater part. It is a skill. As I have mentioned in one of my other posts, being able to receive critique is one of the most important things, not only for a designer, but for anyone. Critique, or seeing your mistakes, is the key to improving them and thus growing.

Fonts used

English:

  • Fairview (“the”, “design”, “process”)
  • Nautilus Pompilius Regular (“Trusthworthy”)
  • Courgette Regular (“Idea”, “Feedback”)
Facebooktwittergoogle_plusredditpinterestlinkedinmail