Category Archives: Web Accessibility

ATBar to improve accessibility

ATBar LogoI am trialling the ATBar from the University of Southampton. Click the ATBar button at the centre top of the page and a toolbar will appear with functions such as “Text-to-speak” to allow you to get the website text be read out to you. Take a look at the following link for an explanation of the available tools: https://www.atbar.org/instructions/.  Any feedback welcome

Advertisements

It’s sometimes so simple…

Accessing a website using the keyboard rather than the mouse should be easy. By using the ‘Tab’ key you can jump from link to link. However, on many websites your focus, i.e. the link you have tabbed to, is hardly visible, only framed by a thin dotted line if at all.

Screenshot of a button on a website with thin dotted focus outline

A simple change to the style sheet (style.css) can change this so keyboard users don’t get lost or loose their focus when tabbing through a website.

a:focus {
outline: 2px solid red;
}

Text link in focus with red solid frame

You might need to change other parts of the style sheet too to cover all different manifestations of links on the site, e.g. text link, buttons, etc.