Opera accessibility: where we’re at

It wont be long until I’ve been at Opera a year during which time I’ve been exploring Opera’s more obvious and less obvious accessibility features. As we look forwards at how we enhance the browser for better accessibility support for both users and developers creating accessible standards compliant websites, I thought I’d share with you some of my favorite bits.

This is not intended as a comprehensive overview of accessibility features – this can be found in the Opera Support section – but rather an overview of what I’ve learnt and really come to appreciate within Opera.

Keyboard accessibility

  1. Spatial navigation – Rather than tab to move through links and elements in a page (and Shift + Tab to go back) Spatial Navigation allows the user to move freely up and down or left and right by simply hitting Shift then using the Arrow buttons (↑, ↓,←, →). This means you are not restricted to linear tabbing and can navigate to content far quicker and efficiently on a page with less input.
    This works really well if you use voice input or are restricted to keyboard only access as it means you don’t have to repeat tab over and over again. This can be crucial if you need to minimise physical movement if you have RSI or repeating the word ‘Tab’ if you are using voice. This is especially important when in drop down menus as you can quickly exit the list without cycling through all the options. Opera is the only browser that has native support for Spatial Navigation.

    As an added bonus Spatial Navigation can trigger :hover styling and fire onmuseover and onmouseout events in Opera. While this is great for users designers shouldn’t rely on :hover to convey information as support is not there in other browsers. If :hover is used also use :active (keeps mobile and Internet Explorer happy) and :hover. Note that :hover is not always handled well by mobile.

  2. Single key shortcuts – Opera has a set of Single Key Shortcuts that allow you to activate main functions without having to use any key combinations. To cycle through headings, for example, all you need to do it hit S to move forward or W to move back.
    This is an obvious benefit to keyboard and voice input users but also for developers. I often use this feature to check the logical flow of my heading structure in a page and quickly navigate long documents.

    We found that having Single Key Shortcuts activated by default confused many users who would hit keys by mistake and inadvertently trigger a change so you’ll need to activate them yourself. To get them working go to Preferences > Advanced > Shortcuts and check ‘Enable single key shortcuts‘.

  3. Access keys – By pressing Shift + Esc you can activate an Access Key menu and view all access keys within a page. The beauty of this is that any conflicts with Opera’s own shortcuts are avoided which makes designing and using the page much easier for the developer and user respectively.
  4. Mouse gestures – Using small movements of your mouse – left or right, with a right click or a left click – you can move forward and back in your history, reload pages, open new tabs, windows and more. Mouse Gestures are really useful it you prefer using a mouse or if you find it hard or move your mouse long distances across the screen to hit a button or can not use a mouse in combination with a keyboard.

Have a look at these and other keyboard access features in our tutorial on using Opera without a mouse for full details on keyboard accessibility support.

Screen reader support

  1. VoiceOver on Mac – Opera has good support for VoiceOver on Mac allowing the user to comfortably navigate within web pages using a Spatial Navigation. You can access links, lists of links and form elements within the page as well as carry out searches and comfortably read paragraphs of text.
    One area that is lacking however is heading support as well as ARIA. While we can fix the heading support VoiceOver still has some improvements to make in ARIA support. As Steve Faulkner shows in his ARIA role tests for Mac,  while Opera 10 Apha beats Safari by exposing 15 ARIA roles to it’s 14 and FireFox’s zero (on a Mac), overall support is almost non existent due to VoiceOver’s lack of support of ARIA.
  2. Windows and Linux – Microsoft Active Accessibility is already available in Opera for Windows with IAccessible2 to follow. This means that current versions of Opera are not fully supported by screen readers on Windows. Getting screen reader vendors to work with us has prolonged the process for fixing this but we are working on it and I hope to be able to report back soon as this is a priority for us.

Zooming

  1. Zooming – We were the first browser to implement Full page Zooming which means scaling up everything on the page and not just text. This has obvious benefits for when you need larger text to read but don’t have, or need,  access technologies such as screen magnification or text-to-speech software. It’s perfect also for sites that use fixed fonts and wont allow the user to scale text. You can zoom pages either via View > Zoom or from the menu on the bottom right of the chrome.
  2. Small screen rendering – One of my personal favorites is Small Screen rendering which essentially reformats your content into a single column and removes some images and formatting. It works especially well together with a screen magnifier or page zoom as it removes large empty spaces that in turn lead to disorientation.
    I’ve written in more detail about this in zooming and removing horizontal scrolling in Opera. If you’re a web developer small screen rendering gives you an idea of how your web page may render on mobile browsers, such as Opera Mobile, that support single column layouts.
  3. Full screen zoom – As with all modern browsers you can also opt for removing the chrome and having your web pages fill up the entire screen. Many people find this useful when wanting to do away with the many toolbar and menu options found on the browser shell. You can activate this by selecting View > Full Screen. Just hit Esc to return the page to the browser shell.

Customisation

To say we are all different as human beings is an understatement so customisation is essential to a smooth browsing experience.  It’s difficult to ever know how any one person may want to customise the browser, as user testing will show you, but there are key things that we think need to be flexible. There are a number of options that can be found either in the Preferences Menu or quick shortcuts via the Quick Preferences menu. These can be found in the Opera menu:

  1. Pop-up management – You can block all pop-ups, certain pop-ups or set pop-ups to work in the background. This is ideal if you’re using a screen reader and don’t want to have your focus bumped off elsewhere unknowingly.
  2. Enable / Disable Animated images – Animations can be distracting and cause difficulties when reading. Disabling them prevent unnecessary intrusions.
  3. Enable / Disable Sound in web pages – Many sites tend to load with sound playing automatically. While in some cases this is expected on sites such as YouTube, this can be problematic when using a screen reader that can become drowned out by additional uninvited noise.
  4. Enable / Disable Java, plugins or JavaScript – Java, plugins (such as Flash) and JavaScript can be made technically accessible (in most instances) to assistive technologies however the behaviour can confuse people’s understanding of a page. A dynamically updating page that refreshes every 15 seconds can cause a screen reader user to lose where they are in the page if they are unable so stop the refresh.

Other customisation options available elsewhere include:

  1. Icons – In Tools > Appearance > Skin you can choose the percentage size of your icons that appear on the browser chrome.
  2. Image – Not everyone wants images, especially when on dial up or low band width. You can easily switch images of by either selecting no images on the icons on the Status bar at the bottom right of the browser, or by selecting  Preferences > Web page > Images and make your selection.
  3. Colours – Again in Tools > Appearance > Skin you can choose a different colours scheme.
  4. Fonts and colours – Not all web pages will be styled however using Tools > Web you can select your preferred fonts and styling for links

User CSS

You can switch between two modes for viewing pages in Opera: “Author” and “User”.  “Author” mode renders the page as the author intended it whilst “User” mode allows you to choose how the page appears. This benefits almost any type of user who especially people who struggle to read on screen such as people with low vision or cognitive impairments, are elderly or have reading problems.

These options are designed to cater to different browsing preferences and enhance accessibility for the visually impaired. You can switch between “Author” and “User” modes with Shift+G or by selecting View > Style > Author mode or user mode.

Technologies

As we constantly improve on how we deliver content online standards evolve and emerge. A key factor to making these standards work is ensuring that accessibility is at it’s core:

  1. WAI-ARIA – Aria is widely expected to become a W3C specification this year. With all the major screen readers (Jaws, WindowEyes, NVDA, FireVox) working hard to support it as well as large and small sites alike implementing it ARIA is becoming an essential staple of the web which we are working to support.
  2. Scalable Vector Graphics –  Scalable Vector Graphics are graphics that do just that, scale. One of the drawbacks of scaling regular gif and jpeg images on the web is that they become distorted and blurred, this is especially a problem when the image is of text. With SVG however you get nice crisp images that retain all of their original sharpness.
    An example of SVG can be found in the form of a world map on our Jobs page (note this wont work in Internet Explorer which doesn’t support SVG). This is a widely overlooked yet excellent way of avoiding using images of text that do not scale well, image maps and many uses of canvas. Opera was one of the first browsers to support some form of SVG from version 9.
  3. HTML5 – With it’s focus on providing application like functionality HTML5 is key. While the specification is not expected to be complete until 2022 it is possible to implement some parts of HTML5 now. Despite some issues around accessibility that are yet to be ironed out the premise of HTML5 is that accessibility is ‘built in’ rather than ‘bolt on’ so that through a combination of browser implementation and page author coding some of the accessibility issues we experience today should be dealt with seamlessly by the spec tomorrow.
    For example, common practice today is to add skip links at the top of the page to allow the user to jump to key sections such as navigation and main content. With new structural elements introduced such as <header>, <nav>, <article>, <section>, <aside> and <footer> this work around becomes less necessary as these elements should provide additional navigation. See the shelf life of a skip link for details on this.

Accessibility layout

The accessibility layout has most text formatting disabled and replaced by basic formatting. Font size, word, letter, and line spacing are increased and the page width is limited. A lime green background gives good contrast with black text and linked images are outlined by a black border. Links are also outlined in a blue box when tabbed onto for better visibility.

You can switch to the Accessibility Layout via View > Style > Accessibility layout.

Table of keyboard shortcuts

Action Windows Mac
Spatial navigation Shift+Alt + Arrows Shift + Arrow keys
Single key shortcuts Preferences > Advanced > Shortcuts Opera > Preferences > Advanced > Shortcuts and check ‘Enable single key shortcuts’
Toggle access Keys Shift + Esc Shift + Esc
Enter access Keys A-z and 0-9 A-z and 0-9
Zoom Ctrl + Plus and Ctrl + Minus Shift + Plus and Shift + Minus
Small screen rendering View > Small small screen View > Small small screen
Full screen zoom View > Fullscreen View > Full
Pop-up management Tools > Quick Preferences > Enable Popups etc Opera > Quick Preferences > Enable Popups etc
Enable/Disable animated images Preferences > Web page > Images Opera > Quick Preferences > Enable animated images
Enable / Disable sound Tools > Quick Preferences > Enable sound Opera > Quick Preferences > Enable sound
Enable / Disable Java, plugins or JavaScript Tools > Quick Preferences > Enable Java, plugins or JavaScript Opera > Quick Preferences > Enable Java, plugins or JavaScript
Icon size Tools > Appearance > Skin Tools > Appearance > Skin
Images on/off Tools > Preferences > Web page > Images or Icon on bottom right of browser Preferences > Web page > Images or Icon on bottom right of browser
Colours (browser) Tools > Preferences > Web page > Colour Tools > Appearance > Skin
Fonts Tools > Preferences > Web page > Fonts Tools > Web
User CSS View > Style > Author/User mode View > Style > Author/User mode or Shift + G
Accessibility layout View > Style > Accessibility layout View > Style > Accessibility layout

Finally

As I mentioned at the start I’ve not covered every bit in detail; this you can find in the Opera Knowledge database and Support sections of the site. We know we have some areas to work on and we are working to get these addressed. Particular areas I’d like to see improved upon are screen reader support on Windows and Linux as well as more advanced keyboard accessibility.  Stay tuned for updates on that and in the meantime keep your feedback coming.

29 thoughts on “Opera accessibility: where we’re at

  1. How about fixing all the existing broken stuff before adding more?

    The fact I can’t even add a “read feeds” to the Panel is mighty frustrating, even more so when useless things like Links and Unite are there….

  2. “Enable / Disable Sound in web pages – Many sites tend to load with sound playing automatically. While in some cases this is expected on sites such as YouTube, this can be problematic when using a screen reader that can become drowned out by additional uninvited noise.”
    Well, actually this doesn’t work with YouTube (i.e. Flash). But it would be really great to be able to switch the sound off of specific tabs!

  3. Not an accessibility issue, but I would use Opera much more as my day-to-day browser if not for the fact that I have an iPhone, and it is Safari’s bookmarks that the iPhone syncs with, not Opera’s. Would it be possible to introduce a preference setting that tells Opera to write its bookmarks to the Safari bookmarks file as well as its own? I don’t know enough about OS limitations to know if this is possible but it would mean that I could use Opera on my laptop and Mobile Safari on the iPhone without having to use third party apps to merge bookmark files — which I inevitably forget to do until it’s too late.

  4. spatial nav looks to be a useful time and energy saver for all including screenreader users but you might come a cropper with that key combination for Windows as it is the same as for navigating within tables for many of the screenreader products, howabout Windows key +ctrl, or ctrl +shift instead. also having key shortcuts assigned to some of thoseuseful access preferences would really help E.G sound and java on/off, often I do want to hear the sound, but when I’m ready, so I want it off until I find my way to the bit of the page I’m looking for, then I’m ready to listen, or I want it off for a few seconds while I’m reading another screen, but then I want it back on again. same for Java, I want it off while I get past this page but then I want it back on where it’s useful and not a barrier.

  5. @Mark – Thanks for that, we do have a feature request for this in our Bug Tracking System :)

    @Martin – This is an interesting idea, thanks. Feel free to add a feature request if you want to our bug tracking system.

    @goetsu We have a fair amount of work going on around Flash support which you an track via the Opera Desktop team blog. If you follow posts there you’ll get regular updates of what has been addressed and fixed in each release and snapshot build. Note also that Flash integration is also very much down to the guys at Adobe as well as us.

    @Rick Lecoat the same goes for your suggestion – if you feedback through BTS we can track if it’s in there and/or what thoughts are around it.

  6. @Martin That would be extremely useful for me!

    “Colours – Again in Tools > Appearance > Skin you can choose a different colours scheme.”

    Yes, but when I choose system color scheme (on Win XP) it always change to light brown (should be blue). Will this “bug” ever be fixed? Or maybe you could add more color schemes, like gray or black.

    As for mouse gestures – IMO there should be easier way to change them (noob-friendly ;)) like it is in “All-in-One Gestures” extension for Firefox.

  7. Pingback: codepo8 (Christian Heilmann)

  8. Hi Adrian, thanks for your feedback there is indeed a typo in the table and Spat Nav should be Shift, I’ve updated this.

    Regarding keyboard shortcuts on Preferences we do have a bug filed for this. I agree that just being able to tab around it isn’t sufficient and really does need a shortcut key to quickly toggle settings. This would not only help people when browsing with just a keyboard but would also be a really handy tool for developers and testers building web pages who wanted to test content.

    Keep the comments coming – these are all really useful!

  9. Please allow us to customize the default tab shortcuts. Right now Command + click on an Apple opens in a foreground tab, while Command + Shift + click opens in a background tab.

    While I understand that Opera was the first on the block with tabs, it’s keyboard shortcuts for opening links in new tabs are the complete opposite of the default of every browser out there, and the one thing keeping me from using Opera as my primary browser, as it leads to nothing but aggrivation (Command + Shift makes me contort my hand on my little 12″ iBook in an unnatural way too).

  10. I can’t even begin to tell you how excruciatingly frustrating it has been for me and other users to get Opera to finally FIX the Voice plug-in. The SST feature hasn’t worked since version 9.27, neither has the KB Nav within TTS. Since IBM abandoned the desktop, in favor of Websphere…we’re “SOL” it seems, since Dragon NS doesn’t “play nice” with Opera’s IBM “crippled” plug-in. So, PLEASE tell us Voice users IF you will finally help us! I’ve tried Microsucks, NVDA (eSpeak) and they all sound “robotic” compared to Opera’s Voice. Please, PLEASE…I beg you guys, HELP US!

  11. “Particular areas I’d like to see improved upon are screen reader support on Windows and Linux …” iheni

    FINALLY! It’s about time you guys either fixed the apparently abandoned and broken Voice plug-in so we can use SST and have KB support back for TTS…without the persistent “flakiness” we’ve have to deal with since IBM “lost their marbles” abandoning all things desktop in favor of Websphere.

    I can’t tell you what it’ll mean to us frustrated Voice lovers.

  12. Pingback: ILovemyhybrid (Bob Francis)

  13. @Mark: Having a feeds panel might be one of the most requested features out there. I know I would much like to have one myself. A dirty away around that is to set up a dummy email account in Opera and telling it not to check the account. That way you can access your feeds from the Mail panel. It’s dirty, but it’s much better than the ridiculous feeds menu in any case.

    @Martin: You can enable or disable sound on webpages in Opera on a site-to-site basis already by accessing the site’s preferences by right-clicking on a webpage and going to “Edit Site Preferences”. From there you go to the content tab on the dialog box and check or uncheck “Enable sound in webpages”. It’ll enable or disable sound on that domain only. Site preferences should be more accessible, however. Without customizing the menu itself I don’t think it’s possible to access those preferences without right-clicking.

    My personal belief is that accessibility also pertains to usability as they should go hand in hand. Menu customization for one is only accessible to advanced users of Opera by editing ini files manually. There’s no easy to use interface for such. For the most part the mouse and keyboard shortcut systems are confusing. You should be able to just press the key combination or do the gesture while in the dialog box and have Opera register that instead of manually having to type out “shift a” or whatever it is. It’d certainly be easier for the end user.

  14. Pingback: janstandal (Jan Standal)

  15. Thanks all for all these suggestion. While some are not accessibility per se I think that Dustin has hit the nail on the head in that “accessibility also pertains to usability”.

    Discoverability of features is something that we’re having a big think about and really appreciate feedback on. We’re currently looking at how we can make things simpler without confusing the average users. I’m hoping that some informal user testing will give us some further pointers there.

    @Pundamentalist, I hear your pain and really hope we can bring you some good stuff on Windows soon regarding Voice. Bare with us though. These things can’t happen overnight but we do very much want to push the browser forward and improve things.

    @FataL, thanks for your comments. I’m aware of discussions in the forums as well as internally. All useful stuff.

  16. Pingback: Wait till I come! » Blog Archive » TTMMHTM: Braille body mods, Tesco hack, Placemaker talk video, old superheroes, steampunk, accessible Opera and cat control

  17. We’re using a website where we’re giving input to fields in forms. Next to many of the fields are clickable buttons which will pop up a new window with all valid inputs. When in Firefox, the cursor automatically starts in the first field of the form. Tab takes me to next field or button – if it’s a button, enter will activate.

    Opera, on the other hand, requires me to click the first field of the form, while tab skips the buttons and jump to next input field. I would be OK with this if I could find a way to tell Opera to behave the way I want, but so far no luck.

    The site is heavily depending on javascript, maybe this is the culprit. I’m quite impressed in general by Opera, but the way it handles tab key in forms will stick me to Firefox for now.

  18. Hi Al,
    With no URL it’s kind of difficult to say for sure whether it is the JavaScript or something else.

    One thing that is worth noting is that while having the cursor automatically start in the first form field may be a benefit for some it can be an accessibility fail for others. Screen reader users especially have a hard time as they will expect to have their virtual cursor at the start of the page and then do a simple keyboard command to jump to the first form field to start working in a form. Having the cursor in the first form field can completely disorientate them. I think having a cursor automatically set in a form field goes against WCAG 2.0 as well.

    Anyway, if you have a link to the page I can have a quick look for you.

  19. Thanks for answering!

    I’m sorry I can’t give you a helpful url, the culprit is available only after login (site for accounting). It’s possible to create a demo login in several languages at http://e-conomic.com/ – which is more work than I expect you’d be willing to do :-)

  20. Henry, I wanted to share Cepstral.com with your audience – they offer high-quality TTS voices for all relevant operating systems.

    As well, they offer a new TTS web-service at VoiceForge.com. If you integrated the VoiceForge API … users could access over 50 voices without the need for any downloaded or installed voice software.

    This could enable Opera to be accessible on Android or other mobile platforms where installed voice software may not exist.

  21. Pingback: Using Opera 10 Beta with VoiceOver » iheni :: making the web worldwide

  22. Pingback: welikethis (Lady Vero and Moon)

  23. I’ve just updated the post with some interesting information about Spatial Navigation and support for :hover:

    As an added bonus Spatial Navigation can trigger :hover styling and fire onmuseover and onmouseout events in Opera. While this is great for users designers shouldn’t rely on :hover to convey information as support is not there in other browsers. If :hover is used also use :active (keeps mobile and Internet Explorer happy) and :focus. Note that :hover is not always handled well by mobile.

    Hat tip to Patrick Lauke for pointing this out.

  24. I would like to see NVDA support for Opera improved, and the menus won’t read properly. What’s up with that? Firefox, Chrome, and IE are all reasonably accessible and it makes me :( [sadface] when I can’t use NVDA or JAWS in the same way.

Comments are closed.