Use a yellow outline to indicate where a user has tabbed

[magdalenadrafiova]

From the accessibility testing another issue is that we should implement a yellow outline to indicate where a user has tabbed rather than a dotted outline to make navigation by keyboard only easier and consider adding a skip to main content link

[johnpinto1]

Attached screen shot of issue on IE

[johnpinto1]

@magdalenadrafiova @dsisu @sjDCC @xsrust @briri
Please give feedback that this is what we want or not (cf., screen shots of Roadmap on IE11)
I can implement this change with a simple CSS changes:

• add yellow to _colours.scss

$color-yellow: #ff0; // Focus colors $color-focus: $color-yellow;

• add to _accessibility.scss
  a, button, input, .form-control { &:focus, &:hover, &:active { outline-style: solid !important; outline-color: $color-focus !important; outline-width: 4px !important; } }

[johnpinto1]

@magdalenadrafiova @dsisu @sjDCC @xsrust @briri @killiandunne2 After this morning's discussion changed highlighting to Darkest Alice Blue (which we use for links).

Here are some screen shots of results:

[sjDCC]

Looks good. Thanks @johnpinto1

[johnpinto1]

@xsrust has pointed out an issue with highlighting links in a table. He pointed out that it would be better to highlight the table cell in such cases. So will try to see if I can sort this out.

[johnpinto1]

Following @xsrust 's suggesttion I have added an outline to table cells when in focus. Attached are sone screen shots. We might want to discuss this change.

[sjDCC]

Looks good. Closing out

[magdalenadrafiova]

Looks good