Go to overview: Test development and standards

Target size: screenshots with target boundaries

Updated: 31 May 2017

What would happen if target size became a new WCAG Success Criterion (not yet shown in the WCAG 2.1 working draft)?

I have taken screenshots of nine sites that aim to conform to BITV 2.0 (WCAG 2.0). These include (1) an airport, (2) church-supplied welfare, (3) an info site about doping in sports, (4) health insurance, (5) state info on elderly care, (6) a city transport site, (7) a public statistics site, (8) a public promotion site (efficiency) and (9) a German Federal agency.

The idea was to check against this empirical sample whether minimum target size of 44x44 CSS pixels is already met, and where not, to estmate whether changing the design to accomodate such a new success criterion target size would be easy or difficult.

Note that if the new Success Criterion makes it into WCAG 2.1 (which is far from certain), targets inside blocks of text would probably be exempted. Also exempted would probably be native unstyled controls like selects or checkboxes. The list of possible exceptions is currently still fluid - be aware this is an exploration around draft concepts that might never make it into the final WCAG 2.1. recommendation.

I have outlined targets where target size was not sufficient. In the case of (non-inline) text links that showed sufficient whitespace around text, I have not drawn target boundaries since I assume the target size could be increased by adding padding to the top and bottom of links without necessitating a change of layout.

Summary of results based on this sample

With the recent and relatively modern sites in this sample (most of them responsive), most issues appear in sub-menus of pull-down menus where the line height is often not sufficient. Increasing it does have a penalty in that longer sub-menus might not fit in the viewport if line height / padding of sub-menu items is increased. So there is a design implication of keeping menu item lists from growing too long.

Apart from that, and taking the basis of the pages selected, the changes needed to make these sites meet the new target size SC seem to be relatively trivial.

Note also the scarcity of inline text links on these pages.

(1) Munich airport website

URL: https://www.munich-airport.de/an-abreise-89966

Result: There is little need to increase target size (apart from slightly lincreasing the distance between two lines of language icons)

Screenshot of Munich Airport website

(2) Diakonie Hamburg

URL: https://www.diakonie-hamburg.de/de/presse/pressemitteilungen/Freiheit-und-Recht-gegen-Gewalt-und-Verrohung-verteidigen

Result: Problems exist in the pull-down menus: there is not enough vertical space. Should be easy to fix. Navigation seems to meet the 44x44 minimum target width otherwise.

Screenshot of Diakonie Hamburg website

(3) Gemeinsam gegen Doping

URL: http://athleten.gemeinsam-gegen-doping.de/de/alltagswissen/ernaehrung/energie-aus-lebensmitteln/

Result: Like in the example of Diakonie Hamburg above, problems exist in the pull-down menus: there is not enough vertical space. Would be easy to fix. Other targets seem to meet the 44x44 minimum size requirement.

Screenshot of Gemeinsam gegen Doping website

(4) IKK classic

URL: https://www.ikk-classic.de/oc/de/ikk-classic/ratgeber-gesundheit/gesund-im-job/arbeiten-hitze/

Result: Slight problems where breadcrumb link and sumbmenu overlap. Easy to fix by adding a bit of whitespace on top of the bradcrumb.

Screenshot of IKK classic website

(5) Pflegelotse

URL: http://www.pflegelotse.de/(S(jlbvgff14k3jzq2vgoyzzv5i))/presentation/pl_benutzerhinweise.aspx

Result: Expandable areas a bit below 44px height. Rest f targets OK. Easy to fix.

Screenshot of Pflegelotse website

(6) City transport system

URL: Currently not public

Result: Slight problems with sub-menu overlap, that seem easy to fix. Language icons and text enlargement icons in service navigation would need more distance. Also easy to fix.

Screenshot of city transport website

(7) Statistikamt Nord


Result: Problems with line height of wrapping breadcrumb - easy to fix. Other links meet target size requirement.

Screenshot of Statistikamt Nord website

(8) Deutschland macht's effizient


Result: Stacked in-page links in right-hand navigation not quite high enough, easy to fix. Otherwise targets seem to meet requirements.

Screenshot of Deutschland macht's effizient website

(9) BAFA (Bundesamt für Wirtschaft und Ausfuhrkontrolle)


Result: Line height in sub-menus is too narrow, easy to fix. Otherwise targets seem to meet requirements.

Screenshot of BAFA website