Joe's blog

Author: Nostromo

  • List Live Regions

    Don’t want to read all the below? Here’s the bookmarklet: List live regions

    When using ARIA live regions, it is best practise to ensure the live region container is present on page load. Content can be dynamically added as it’s needed.

    It is not always easy to locate existing live regions in code to verify they are present on page load. So I put together this bookmarklet. It simply scans the DOM for any live regions of the following types, and then lists them in a new window.

    • polite
    • assertive
    • alert
    • status
    • log
    • timer
    • marquee

    And here’s the output looks like:

    Screenshot showing 2 live regions found, along with their associated HTML

    You can check the pen below. Fork it. Make it better!

  • Reading Roundup 19/02/2021

    UI costs Citibank $500 million

    Difficulty navigating a UI by a bank employee costs Citibank half a billion dollars.

    This was apparently caused by incorrect fields being filled in, a potential failure of WCAG 2.1 SC 3.3.2: Provide labels or instructions when user input is required

    https://arstechnica.com/tech-policy/2021/02/citibank-just-got-a-500-million-lesson-in-the-importance-of-ui-design/

    How much would it have cost to run an audit and/or usability test on that UI? Probably not $500 million.

    Proposal to add aria-expanded support for radio buttons

    ARIA 1.2 allows for aria-expanded use on checkboxes; select a checkbox to display further content and this can be conveyed programmatically through use of the aria-expanded attribute.

    Here’s a detailed proposal, from Oliver Byford, of why this should be extended to include radio buttons too.

    Related: https://twitter.com/36degrees

    Firefox showing the tabbing order

    Firefox has added a “show tabbing order” option to the accessibility panel. This overlays a number onto each focusable element, showing its place in the linear tab order of the page. Great to this feature natively in the browsers. I did experience some memory (RAM) issues occasionally when using this feature, slowing my browser down. But it’s early days yet, so these will be hopefully resolved.

    Get Firefox

    BBC homepage showing tab order

  • Total Immersion Keyboard Testing

    Keyboard testing is a critical aspect of an accessibility review. All functionality on a site should be available via the keyboard, which opens access to a wide range of assistive technologies.

    Testing with the keyboard is usually one of the simpler aspects of accessibility testing. It can be tempting to reach for the mouse though. That’s why I wrote this Total Immersion Keyboard Testing bookmarklet.

    It simply removes the mouse cursor, and prevents all pointer events. You can no longer use the mouse!

    The only way out of this (currently) is to refresh the page. I’ll try to add a shortcut to re-enable the cursor to make this easier.

    As with any bookmarklet, drag the link below onto favourites bar, or bookmark it. Or try first by selecting the link here!

    Total Immersion Keyboard Testing bookmarklet

    Here’s the script itself: 

    javascript:(function(){
	var styleEl=document.createElement('style');
	document.head.appendChild(styleEl);
	var styleSheet=styleEl.sheet;
	styleSheet.insertRule('*{cursor: none !important; pointer-events: none;}')
})();

  • NVDA Testing Tips

    Here’s a collection of tips for testing using the NVDA screen reader. I’ll add to this as time goes on.

    Speech display verbosity

    NVD has a speech viewer tool; this displays the text spoken by NVDA, including both onscreen text and any interaction information. This is useful when you are either unsure what NVDA just said, or you want a screen shot to illustrate a particular problem.

    This screenshot shows the speech viewer after I interacted with the BBC website.

    Display the speech viewer with the keyboard shortcut NVDA+n, t, s. This does the following:

    • NVDA+n opens the NVDA menu
    • t displays the tools sub-menu
    • s displays the speech viewer

    You may find, as a mouse user, that using the speech viewer whilst also using the mouse causes the speech viewer to become populated with extra commands and feedback resulting from the mouse use. This is caused by an NVDA feature called mouse tracking, which is enabled by default.

    Whilst useful for sighted mouse users who need reading support, mouse tracking rapidly fills the speech viewer with extraneous content. Toggle mouse tracking off (and back on again) with NVDA+m. With mouse tracking off, the speech viewer will only display content and functionality resulting from keyboard interaction.

    In brief: speech verbosity

    To get more verbose feedback when using the NVDA speech viewer:

    • Enable the NVDA speech viewer with NVDA+n, t, s
    • Toggle mouse tracking off with NVDA+m
    • NVDA+1, NVDA+2 respectively toggle character and word echo when typing. Toggle both to off to further streamline feedback.

    Disable NVDA for current application

    Often I’ll be using NVDA to review a website or application, whilst taking screenshots and making notes as I go.

    I don’t need the NVDA feedback whilst I’m also writing into a Word doc. Handily, it is easy to disable NVDA (or set it to sleep) for the current application, with the keyboard command NVDA+shift+s. This toggles sleep mode for the current application.

    This works well when alt+tabbing between the app being reviewed and an associated notes doc.

  • New Year, new site

    I have setup a blog. Yay! I’ve created my own, very minimal, WordPress theme using the fabulous underscores.me theme starter. Banner image was put together in Illustrator and is embedded as an SVG. It’s a little too big (29kb) to have inline.

    I had (have) a long list of amends for this site, but figured it was best just to go live and start posting and sort things out as I go along.

    A blank page is always off-putting so I’ll try not to overthink things and just post without too much of a filter to encourage myself into writing.

  • I’m an NVDA Certified Expert!

    In November 2019, I passed the NVDA certified expert exam.

    NVDA Certified Expert

    I wanted to take the exam to help solidify my learning and understanding. I’ve used NVDA for a while in my day to day accessibility testing, so had a working knowledge of it. I felt pretty comfortable at basic web tasks:

    • Navigating pages using elements and land marks
    • Reading page titles
    • Interacting with forms

    There was a lot I didn’t know and which will be useful in testing websites more effectively, particularly:

    • Review cursor; this is a separate cursor allowing you to read text – typically nearby – without moving the actual cursor
    • Shortcuts for modifying the speech rate (speed); lengthy pages can be time consuming to evaluate purely due to the amount of content. As you get more comfortable with NVDA, increasing the speech rate helps test pages far quicker.