Tests for Web 2.0 Services

3rd Edition, published 14 Jun 2020

Web 2.0 Services

How We Test

Please use Version 3 as the latest update to Web2Access checks for the review system.

It should be noted that this site takes the view that check-lists and tests for usability and accessibility are not an ideal way to address the issue of how easy it may be to use a website or online application. A more holistic approach* is needed. However, the W3C WCAG Guidelines are "stable, referenceable technical standards" that aim to prevent many barriers to access. *See Reflections on the Development of a Holistic Approach to Web Accessibility.

1

Login, Signup and Other Forms

This covers all aspects of registering with a service or site, then returning to sign-in and finally to work with forms. Those who use screen readers and keyboard access need to be able to reach the forms and exit to the rest of the site. Good labelling enables users to understand the type of content required. Users should be able to perceive error alerts if form submission fails. Forms should also work effectively when using alternative input devices, including touch screens.

2

Content Description and Text Alternatives

Informative images need to have what is commonly known as an 'alt-tag' or text alternative, so that a screen reader user can hear an image description. Some screen readers will read the file name or some say 'image' if the attribute is omitted. The alt-tag should be appropriate for the content and succinct. Text should be accessible for text-to-speech tools and screen-readers but decorative images should be hidden from assistive technologies.

3

Link Target Definitions

Where links are used for menus and navigation or to send users to a different site or area on the page, the text for all links needs to be understandable when seen out of context. Navigation elements, such as buttons, should have the correct role assigned to them. Alternative navigation elements, such as a breadcrumb trail, sitemap or search facility are beneficial. Use of link target icons should be consistent, familiar and labelled appropriately to be fully accessible.

4

Logical Page Structure and Order

Frames should have titles so that screen reader users know where they are in the page or which piece of content to read next. Providing a mechanism for users to skip to the main content aids navigation on content heavy sites. Navigational tags, such as ARIA live-regions can help assistive technology users identify the structure of the page. Content needs to be marked up in code in the order it will be recognised by screen reader users.

5

Reading Order

Cascading Style Sheets can be used to provide layout for many aspects within a set of web pages, without the use of tables or frames. They allow web page designers to set out the presentation for a web site separately from the content. It makes it much easier to control the main items on web pages such as navigational elements. If the structure is well done it can help accessibility by allowing the user to change colours, fonts and read the site in a linear manner. This means there is always a meaningful sequence to the content on each web page.

6

Audio and Video Features

For those who have sensory disabilities such as deafness or a hearing impairment and for those who may have cognitive learning disabilities offering alternatives for videos with audio, podcasts or audio files for download is essential. Increased download speeds and more use of multimedia on the web means that additional text transcripts, captioning and sign language must be considered in a way that is appropriate for the content. There should also be mechanisms for the user to pause, stop, or hide moving, blinking and scrolling media both visual and audio as well as to be able to control the frequency of auto updates.

For those who have visual impairments offering alternatives for animations or videos where there are long scenes with no descriptive dialogue is essential. This is particularly true if they are an important part of the web service content. Additional text transcripts and audio descriptions can make this type of media accessible.

7

Appropriate use of Tables

The layout of the contents of a web page can be set in tables but this can mean that a screen reader user has to listen to what comes first as the software reads across the page from left to right. It may not read down individual columns before crossing to the next row so it is best to keep tables just for data. The order of content within the table and the use of row and column headers is important.

8

Page Functionality with Keyboard and Touch Screen

It is important that all functions can be accessed through keyboard tabbing and using enter or space to activate elements. If the site makes use of access keys (keyboard shortcuts), it should be possible to discover these through site documentation. Screen readers depend on navigational elements on touch screens being voiced. The gestures tend to change when a screen reader is used with double tap to activate elements and a different number of fingers being used to flip pages.

Parts of the web pages that receive keyboard focus must be "in an order that preserves meaning and operability" as well as being visible. Any media moving, scrolling or auto updating, whether visual or audio content, must be keyboard accessible so that the motion or sound can paused, stopped or hidden.

9

Appropriate Feedback

Once a user has submitted text to a form or editable area, it is important that correct feedback is received to prevent confusion. Clearly identifying required fields also prevents a keyboard only user from submitting a form without all the necessary information for completion. There should be no time restrictions and clear methods for pausing items or returning to a page to correct an error. The addition of labels and instructions should be provided where content requires user input or uses unfamiliar icons. Accessible help or support materials can assist the user with interacting with the content.

10

Contrast and Colour Check

It is important for everyone to have an enjoyable experience when reading web sites and content should have good levels of colour contrast and no distracting elements. Colour can be a useful way to highlight different types of information, such a necessary action or specific type of message. Interface controls can come in various shapes as buttons with a range of colours. They should have other obvious differences to help those with colour deficiencies (colour blindness).

11

Page Integrity when Zooming, Resizing Text or using Device Motion

Most browsers allow text and images to be enlarged through a zoom feature or text-resize. This has become more and more useful as web developers appear to be reducing the general size of fonts used which can affect those with visual acuity difficulties and older people. Zooming can improve readability but there are times when it also affects the layout of websites - reflow needs to be possible at 400% and no overlaps at 200%. Users may wish to change text and line spacing, checks need to be undertaken to see no overlaps or clipping of content occurs.

When content changes or action alter on a device by rotating or shaking, alternatives must be provided. For example a fixed device or one used by a person who cannot change the orientation or use motion for an action still offers a way of making the change in an alternative manner.

12

Language, Readability and Flashing elements

Items that flash or blink at a certain rate can cause seizures and should be avoided. They can also be very distracting and make other elements on a page hard to read. Complex text can make text harder to read for some people with cognitive learning disabilities and specific learning differences including dyslexia. The language used needs to be understandable for all users and where other languages are introduced on a page there needs to be markup language added to elements and attributes that can accessed by assistive technology such as screen readers to ensure the correct pronunciation - this means it can be 'programmatically determined'.