universitybion.blogg.se - Wave browser extension

WAVE BROWSER EXTENSION HOW TO
WAVE BROWSER EXTENSION FULL
WAVE BROWSER EXTENSION CODE
WAVE BROWSER EXTENSION SERIES

WAVE BROWSER EXTENSION SERIES

Axe is a free browser extension that can run a series of tests on a single page at a time. When we click a button to show a date picker, modal, accordion, navigation etc, this interactive content is exposed to both the DOM and the accessibility tree, the previously hidden elements often expose a litany of accessibility issues.Īxe is available on Chrome, Firefox and Edge sadly it’s unavailable on Safari. We often run tools on a page that has interactive widgets and it can at times look quite positive, not too many errors, nothing difficult to resolve for the developers.

It’s also worth noting that Semi-automated tools won’t test content that is hidden in the DOM, as an example, if you had a page with a modal, you’d need to test the page with the modal closed and then again with it open and this applies to all disclosure type widgets.

To access the DevTools, you can right-click anywhere on the page and selecting Inspect or Inspect Element, alternatively, you can just press the F12 key and it will open up (depending on your keyboard, you may need to press the function or fn key, along with F12).

WAVE BROWSER EXTENSION CODE

Some of these tools reside in the "DevTools", when we reference "DevTools", we're referring to the browsers' code inspectors, where we can view all of the HTML, CSS and much more for the current page.There's a couple of considerations to be aware of before we delve into the tools:

WAVE BROWSER EXTENSION FULL

Tell me about the toolsĮvery accessibility professional will have a toolkit, usually a folder full of bookmarks, several browser extensions and some bookmarklets that test specific things, these will naturally differ between individuals, so this list is again not exhaustive. It’s also worth noting that these tools are not perfect, no tool can completely test a page, in fact, automated or semi-automated tools typically only pick up around 40% of known accessibility issues, but they are a invaluable tools and it’s great practice to familiarise yourself with them and check your pages or sites to get a basic overview of the accessibility. The list above is by no means exhaustive, but they are some of the most common issues detected. A good heading hierarchy and page structure, using landmarks which help users of assistive technologies easily find interesting bits of content.

Focus order, which ensures that users using keyboards to consume and navigate web content reach the content in a logical order, that matches the source code.Misuse of or missing ARIA (Accessible Rich Internet Applications, the attributes that help assistive technologies understand parts of a webpage, where the HTML alone does not provide sufficient meaning).

Controls such as buttons or links, without an accessible name.These tools can provide a vital first line of defence against many common accessibility issues, such as: Where digital accessibility is concerned, semi-automated testing is the use of third-party tools to check for any detectable accessibility issues on webpages (usually 1 page at a time, hence why it is semi-automated). Firefox and Safari have their own underlying technologies.Īside: It’s also recommended to follow long on a laptop or desktop (MacOS, Windows or Linux) as installing extensions isn’t always possible on tablets and phones. It’s also worth noting that where we refer to Google Chrome, the installation process is the same for Microsoft Edge and the Brave browser, as these use the same underlying technologies as Chrome, called Chromium. We’re primarily going to use Google Chrome for installing any extensions, but where extensions are available on other browsers, we will of course provide links to those extensions and state if they’re unavailable on a particular browser.

WAVE BROWSER EXTENSION HOW TO

In this article we are going to learn how to use semi-automated tools on webpages, using a range of freely available tools.