I am quite late with writing this annual review, but it is something that takes a lot of time, actual reviewing, summarising and thinking. Nevertheless, here it is and I did enjoy writing it. Continue reading
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)
- aXe or straight Chrome: aXe
- Chrome: Lighthouse / Chrome: Accessibility Developer Tools
- Chrome: Siteimprove Accessibility Checker
- Chrome: WAVE Evaluation Tool
- AChecker
- Tenon (but can cost for the best results)
- Pa11y Tool (command line tool, if needed for extra testing, but the previous ones should be enough)
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.
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:
4) Contrast
We are looking for a contrast ratio of around 7:1 for any text size to pass AAA.
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:
- https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/
- https://css-tricks.com/accessibility-testing-tools/
- https://design.google/library/designing-global-accessibility-part-1/
- https://design.google/library/designing-global-accessibility-part-2/
- https://design.google/library/designing-global-accessibility-part-iii/
Tools:
The most expensive glasses
Life brings us all different types of experiences. Happy, sad, angry, ones in humility, empathy and more. They are profoundly different perspectives of the world, as if you had put different glasses with which to see it. Continue reading
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
Vulnerable
Loving and having a family makes us vulnerable, we need to open up and to expose ourselves and wait to see if it will come back in return. Caring for others is painful when they suffer and there’s nothing you can do about it. Continue reading
So confusing
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
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.
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
Annual Review 2017
This is my third annual review (you can see the second one here).
I will base it on the annual plan I made in the beginning of the year. So I will review what worked and didn’t work based on my goals for the year plus any extra insights as usual. Continue reading