Author Archives: Smilyan

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

One writes

An immensely strong message that I feel and recognise, given by Eduardo Galeano, 1978:

One writes out of a need to communicate and to commune with others, to denounce that which gives pain and to share that which gives happiness. One writes against one’s solitude and against the solitude of others. One assumes that literature transmits knowledge and affects the behaviour and language of those who read… One writes, in reality, for the people whose luck or misfortune one identifies with – the hungry, the sleepless, the rebels, and the wretched of this earth – and the majority of them are illiterate.

… We are what we do, especially what we do to change what we are…

Subscribe to receive the next post in your mailbox

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Why the struggle to be better for others?

Why do we feel guilty when we don’t help and do something for others? Ignoring that friend’s message when we know he needs us but we don’t have the energy for it. When we promised to do something for someone, but those dishes really need washing. The time to do it is there, but we just can’t be bothered to get it started. When there is no obvious benefit for us. Continue reading →

Facebooktwittergoogle_plusredditpinterestlinkedinmail

The women’s day

Every day is women’s day, but today we get to be reminded of that!

I believe that women are strong, enduring and often wiser than men. I have seen this in the women in my life, in fact, they have taught me what it means to persevere, to work hard and with dedication. To love, but not the selfish “love”, rather the one where you are ready to give everything away for your love.

With the greatest respect and appreciation, happy women’s day! You make us better, keep smiling, forgiving and loving!

Special thanks and best wishes to my mom, my sister, my grandmothers and my dear better half.

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Annual Plan 2018

Reviewing 2017 made me appreciate what worked throughout the year. It also exposed a few places where things didn’t go as I wished, which is OK, but I hope to improve them this year. Overall, last year was great in from my experience and I hope this one will go similarly. Continue reading →

Facebooktwittergoogle_plusredditpinterestlinkedinmail