![]() Here I can see – amongst other things – the background colour and font size for text in a specific area on the page:Īdd-ons extend Developer Tools for Chrome: You can use Developer Tools to inspect the code on a page. You can access them by clicking on any element in a web page, right clicking and choosing Inspect. Is the important information first? Developer ToolsĪll browsers have some form of developer tools. See if the content is shown in a logical fashion. In Firefox, go to View > Page style > No Page Style. Make sure that the text is legible and there are no overlapping items. This is how someone with poor vision might see your page. Using CTRL+ (CMD+ on a Mac), zoom the page up to 200% bigger and see what it looks like. You can test for various accessibility features in browsers using their in-built tools, and also extensions and apps. I tried using the keyboard to navigate the form fields and button on this pop-up, and couldn’t manage it. WebAIM use both: a link highlighted with the keyboard shows a dotted outline, a yellow background and a red link colour.Ĭheck that you can navigate to all the parts of a page, including video controls and pop-ups, and don’t get stuck in a loop you can’t get out of. A different colour / background colour for the element.What you want to look for is obvious focus on an element, i.e. Shift + TAB moves you backwards on the page.īuttons can be clicked on by pressing the ENTER key. To test, simply press the TAB key to navigate forward through links and interactive elements like buttons on a page. One of the simplest testing tools, using the keyboard you can simulate the effects of motor disabilities.Īnyone who has difficulty moving a mouse might use the keyboard instead. ![]() You can also check the contrast for different types of colour blindness with this tool, and see how the colour combo would look to those users. Colour contrast for #747474 and #F9BFFF – only large text passes the test at level AA. Larger text can also pass the test where smaller text would not. You may find that a colour combination passes WCAG compliance level AA but not AAA. You’ll get green ticks if they pass the contrast test. Under Luminosity, the display will show the contrast ratio for your two colours. I prefer to use Developer Tools to get the colour code. If it’s text, it tends to pixellate and it’s hard to see what the exact colour is. Sampling colour is easy for flat background colours, but harder for foreground colours. Alternatively, click on the Colour select bar to open up a colour picker to sample the page. You can select a colour by either typing in its hex code in the Hex box. It evaluates the colours according to the WCAG 2.0 colour contrast guidelines (geeky read) and shows you if the colours pass or fail the test. ![]() Ever found it hard to read light grey text on white? I know I do.ĬCA compares the foreground and background colours of elements on a page and lets you know the degree of contrast between them. Watch Graham Armfield demonstrate NVDA in this video from WordCamp Edinburgh:ĭeveloped by the Paciello Group, Colour Contrast Analyser is available for Windows and Mac.Ĭolour contrast issues can affect the visually impaired and colour blind, but also people looking at a screen in direct sunlight. It’s important that the headings and links are ordered well and meaningful, else the user won’t know what to choose. From this list the user can select an item on the page they want to hear about. The NVDA + F7 shortcut brings up the Elements List which is a window showing the links, headings and landmarks for a page. WebAIM’s site has a list of NVDA keyboard shortcuts, and an article on evaluating accessibility using NVDA. The “NVDA” key (Insert by default) is used in conjunction with other keys to navigate. NVDA can take some getting used to! It’s controlled by the keyboard. Screen readers are used by blind and partially sighted people to access the Web and other computer applications. Here is a list of the accessibility testing tools and a little about how they work. Gayle Whittaker of User Vision gave us pointers on making our sites more accessible, and shared a number of tools which help check the accessibility of your web pages.Īll of these tools are free, except perhaps the last. That includes people with temporary impairments – eyestrain, injuries, stress, fatigue – as well as disabled people. Not sure what accessibility is? Read my introduction to accessibility post, which gives an overview.īasically, by being mindful of accessibility you make your site content attainable by everyone. I attended a breakfast briefing on the Top 10 tips for Improving Accessibility on Wednesday 8 March. Why would you need accessibility testing tools?
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |