Using Opera to Check for Accessibility
Article Contents
Enlarge Everything—Up to 1000%!
Most browsers can enlarge the text of a web page, but Opera - external site is unique in that it enlarges the text and the graphics. People with low vision often need this type of enlargement in order to make sense of the content of a web page. Usually, people with low vision buy software such as ZoomText - external link or MAGic - external link that can enlarge everything on their computer screen, including the operating system. Opera will only enlarge web pages, so this isn't usually the software of choice for people who rely on screen enlargement, but it can be the perfect tool for web developers. Rather than buy a full-featured screen enlarger, which can cost several hundred dollars, developers can download a free copy of Opera and emulate the functionality of a screen enlarger by using Opera's zoom feature.
Important
This tutorial demonstrates how to use the accessibility features of Opera 8. Before you can access the accessibility features, you must select the View bar by clicking on the eyeglasses icon found to the right of the address bar.
To
enlarge the web page, use the Ctrl
key and the + and -
keys on the number pad. You can also go to in the menu system, or click on the zoom drop-down list
on the bottom right-hand side of the Opera menu system, as shown in the
screen to the right.
Zoom feature checklist
- Does the page have a fluid layout that minimizes horizontal scrolling? You can't eliminate horizontal scrolling entirely, especially at high zoom levels, but by using percentages rather than absolute units (i.e. pixels), you can keep it to a minimum. With Opera 8, you can select the Fit to window width option in the View bar to scale the page elements so that horizontal scrolling is eliminated. However, this option may dramatically change the layout of the page.
- Is the text easy to read (including text in graphics)? Oftentimes, text within graphics is difficult to read when enlarged. If this is the case with your graphics, either refine the graphics to make the text more legible, or use real text instead of graphics.
- Is the page still usable? Enlarging the page will often change the page layout. You must ensure that page elements, such as navigation, are still readable and usable?
Turn Off Images
Nearly all browsers allow you to turn off the images, but none of them allow you to do it as easily as Opera. You can simply hit Shift + I on the keyboard to toggle images on and off. You can also select the Show images icon in the View bar.
By doing so, Opera will cycle through three image states:
- Show all images
- Hide all images
- Show only cached images (images that were previously downloaded)
When you turn off the images, Opera replaces them with their alt text. This allows developers to see whether or not every image has alternative text, and whether that text is appropriate in the context of the page.
People who use screen readers are not able to see the images, but their screen readers do read the alt text. By turning off the images, you are effectively simulating what it is like to listen to a screen reader read the alt text for the images.
Images checklist
- Do the images have
alttext? Every image should havealttext, no matter what. Images used as spacers should have nullalttext, which will need to be tested another way, such as by using WAVE. - Is the
alttext accurate? - Is the
alttext sufficient yet succinct? You wantalttext to be brief, but not so brief that it is ambiguous or meaningless. - Is the
alttext redundant? Look at the text and other images nearby. Make sure that thealttext of an image does not repeat nearby text or otheralttext.
Turn Off Styles
As with images, Opera allows you to turn off styles with just a click of the mouse. In fact, the icon is located in the same general area: just above the upper left corner of the Web document. The keyboard shortcut is Ctrl + G. You can also activate user mode by going to in the menu system or by selecting the Author mode button on the View bar to toggle between Author Mode and User Mode.
In the default configuration, Opera simply turns off all styles when you enter into User Mode. The concept behind User Mode is a little more complex than this, though. web pages are meant to be configurable by the end user. The programmers of the Opera interface created the User Mode option to allow users to view web pages through their own personalized style sheets. Some users need large, high contrast fonts. Some users prefer certain fonts over others because they are easier to read. The font Verdana, for example, was created especially for viewing on a computer screen. We'll examine these issues later on in the article. For now, it's enough to know that the styles are turned off in User mode in the default configuration.
The benefit of turning all styles off is that it allows you to view your web page without all the visual adornments. When people use screen readers to listen to web pages, they don't have the benefit of seeing the colors, font sizes, and other stylistic cues that others might find useful in understanding the content. Stripping the page of these visual cues helps you to look more closely at the structure of the information, and to judge the information on its own merits, rather than on the way that the information is packaged visually.
Turning off styles will have a dramatic effect on sites that are designed with cascading style sheet (CSS) layouts. Not only will the colors and fonts change, but the page will be linearized. In other words, the page will be displayed in the same order that a screen reader reads it. When a page is linearized, with images and styles turned off, you have an effective visual simulation of the way that a screen reader would read the page out loud. However, sites that use tables for layout, instead of CSS, won't be linearized until tables are turned off, as explained in the next section.
Note
For some reason, Opera does not turn off inline styles when in User Mode. If this is the case with your web content, try selecting both and from the User mode options to achieve a similar effect, without the inline styles.
Styles checklist
- Does the content make sense without the styles? Don't rely on color or other visual cues to convey meaning. This meaning will be lost to people who can't see it.
- Is the page organized in a logical format? Use headings and other structural markup (e.g. bulleted lists, numbered lists) to organize the content.
- Are there textual equivalents for navigational cues? For example, some sites have visual tabs at the top of the page. When a tab is selected, this tab appears to be highlighted. This is a visual cue that the user is inside of the category represented by the tab. You should create textual equivalents for this kind of visual cue.
Turn Off Tables
When you select the disable tables option in Opera, all tables disappear, and the document is displayed in a linear fashion. Since most sites on the Internet use tables for layout, rather than CSS, this step is usually necessary in order to determine whether the reading order of a page makes sense when linearized.
Note that Opera turns off all tables: both layout tables and data tables. Don't worry about the linearization of your data tables. Data tables aren't designed to make sense when linearized. However, layout tables are a different matter entirely. You should pay close attention to the linearization of your layout tables. If your layout tables don't linearize in a logical order, your page will be difficult to understand.
Tables checklist
- Does the page reading order make sense? If not, change the table layout or rearrange the content between table cells.
- Are there textual equivalents for navigational cues? As with CSS, tables are often used to create visual structures that give the user cues as to the site structure and the user's place within that structure. Ensure that similar non-visual cues are available to people who can't see the visual cues.
Try a Few Alternative Styles
You can create your own style sheet for use within Opera and then link it to the User Mode by going to . This may be more trouble than it's worth, though, for most developers, especially if they don't plan on using their own style sheet on a regular basis. Opera has created several User Mode styles that allow developers to view their Web pages through the preferences of other users.
There are several other options available while in User Mode. You can further test accessibility elements with several of these options. Enabling one of the high contrast options can help you test whether your page is accessible to individuals with vision disabilities that use assistive technologies to present page content in high contrast. Emulate text browser shows what the page might look like and how it may function for users of text browsers or wireless devices. Show structural elements displays the structural layout of your page, which may be used to enhance navigation in assistive technologies.
Opera also has voice input and output capabilities. While these are not as advanced as those provided by screen readers, the voice output can allow you to hear your page (along with alternative text for images) and evaluate it in a non-visual way. Doing so may help you to identify accessibility issues that may not be found by analyzing the page visually. To enable voice output, select a portion of the page and press the V key.
Opera has created a layout called: accessibility layout. In this layout, the background is a pastel green, the fonts are enlarged, and images that are links are outlined with a black border. This style may be suitable for people with dyslexia or other reading disorders. Despite being titled: accessibility layout, this layout does not solve a wide range of accessibility errors, but it does serve to illustrate that there are many preferences and styles that a user can apply to a Web page. The trick is to make sure that your web page survives the user configuration process.
Turn Off JavaScript
Modern screen readers can handle some types of JavaScript, but only a limited subset of types. Also, some users choose to turn off JavaScript. Those who choose to turn off JavaScript are exercising their right to do so, and it is a circumstance beyond your control. It could be argued that developers don't need to account for this type of user preference, because the users are choosing to receive incomplete content. However, such is not the case with those who use screen readers, where the screen reader (and browser) are at fault. This is a situation that is beyond the control of the user, and which needs to be taken into account. In order to make sure that your web content is accessible to the maximum number of users, then, it is wise to see if your content works when JavaScript is turned off.
To turn off JavaScript, go to and de-select the option. This option will also display if you press the F12 key.
JavaScript checklist
-
Does the page still function? If not, consider one of these two options:
- Create an additional non-JavaScript method of accessing the same content and functionality
- Eliminate the JavaScript and replace it with a non-JavaScript method of achieving the same purposes
Conclusion
Opera is a wonderful tool for checking the accessibility of web content. It can't catch all of your accessibility errors, but when used in conjunction with other accessibility validators by someone who is familiar with web accessibility concepts, it can be an effective part of the overall web accessibility design process.
Advertisements
WebAIM is an initiative of:
