Topcoder and Accessibility

Simple things should be simple, complex things should be possible.-Alan Kay

This article will talk about looking at the Topcoder website for accessibility. As part of the Accessibility series, Designing for Accessibility and Digital Accessibility were covered in previous articles. In this post, the reader will understand the areas where the Topcoder website needs to be modified and redesigned for accessibility.

HTML5 logo

A typical website is developed using a web framework. A web application consists of sites, content, media types and technology platform related components. The accessibility project is related to web accessibility requirements, user impact, design changes and web code level enhancements. Accessibility standards are based on section 508 (US Rehabilitation act), WCAG1 and WCAG 2. The best practices from these standards consist of subsections which have samples, recommendations and evaluation methods. The samples demonstrate both compliant and non-compliant practices in the best practices.

HTML5 has section 508 standard based techniques to help out users who need help in reading web pages.  HTML5 is supported by most browsers and is recommended by the World Wide Web Consortium.

The goal is to have all the web pages designed for accessibility. The key factors are looking at browsers and success criterion for accessibility. The content needs to be conformed for accessibility design based on WCAG guidelines.

Website Design : Accessibility

Web Page Content and Language

Web page content and language is an important design factor. You need to avoid line breaks within the words in a sentence. Alternative pages need to be avoided as much as possible. Natural language modifications need to be found in line. The content needs to have easily understandable language. The hovering or focusable content needs to be persistent. The instructions need to be independent of sensory characteristics. The web pages should have substituted pages to provide accessibility functionality. The text direction needs to be presented in line. The pages need to be designed with elements having similar functionality. The language of the document needs to be set at the design stage.

Topcoder Home Page

We start by looking at the Topcoder home page and evaluating it for key design principles. One of the key design principles for accessibility is to provide text alternatives for any non-text content. The image and the user settings photo are missing alt text attribute value. 

 HTML - Topcoder Home Page

The html shown below presents the alt text value missing for the image with id equal to user-settings-photo. You need to add the Input Assistance. This helps users to avoid and correct mistakes.

Let us look at the home page search menu and its design.

Topcoder - Search Menu

The html design has elements where the description is not mentioned correctly.

 Label text is empty and missing for the search input field.

HTML - Topcoder Search Menu

HTML - Topcoder Search Input

In the second case, the label text and the placeholder value do not match.

Web Page Elements Contrast and Color

Web page elements need to have active user interface components with required contrast. The web charts and infographics need to have a contrast level setting. The content needs to be decoupled from color meaning that the color need not be the only way to indicate and communicate the message and information and the selection should not be based on color. Graphical objects, text, images, link text, and other content need to have contrast as per guidelines. The content’s background and foreground color need to be set through CSS. The content which is not used for decoration should not have before, after and pseudo-elements. The elements should allow text resizing and the text needs to be readable. Screen reader specific content needs to be rendered offscreen. The reading order of the web page elements and content needs to be specified correctly and the icon fonts need to have text equivalents.

Let us look at the Topcoder home page for contrast and color. The menu “How It Works” is not right from the perspective of the color of the text. The content needs to be distinguishable. You could make it easier for users to see and hear content by separating the foreground from background.

Topcoder Home Page - Menu

The contrast between the color of text and its background is not sufficient to meet WCAG2.0 Level AA. In the html, color value needs to be different to meet the contrast guidelines.

HTML - Topcoder Home Page Menu Item _ How It Works

To repair the problem, you can use a color contrast evaluator to determine if text and background colors provide a contrast ratio of 4.5:1 for standard text, or 3:1 for larger text, then change color codes to produce sufficient contrast. Here is the guideline link for contrast factor. 

Web Page Content: Images

Image maps need to have area of alternative text set. It needs to be clear, informative, and meaningful. You need to include substitutes for server side image maps. Alt text for images should not be redundant with adjacent links or text. The alt text needs to be spelled correctly and spaced properly. The complex images need to have long descriptions. Background images in CSS need to have descriptions with meaningful text equivalents. Textual images need to be avoided. Instead, the text needs to be presented. Progress bars and meters need to have accessible textual representations and names. Mathematical formulas need to be in a special markup appropriate for math.

Topcoder Home Page - Topcoder logo

Let us take a look at the Topcoder home page. In the below scenario, the logo for Topcoder and the html require modification for image alt text value for a longer description.

 HTML - Topcoder Home Page - Topcoder logo

Now, you can look at the Topcoder home page team photo.The image presented below is from the Topcoder home page.

Topcoder - Team Photo

Sample-content-box-1.jpg image has alt text as box-image which does not convey the same information as the image itself.

HTML - Topcoder - Team Photo

HTML - Topcoder Home Page - Topcoder logo

The content needs to be distinguishable. You can make it easier for users to see and hear content including separating foreground from background. Images may be using color alone.  Images may contain text with poor contrast or input possibly using color alone.

Topcoder Profile Menu

Next, let us see the menu for profile and settings. The settings menu takes you to the user settings photo. Javascript may use color alone for user-settings-photo. The fore color and background color needs to be separated.

JavaScript - UserSettings Photo

After that, we look at the title of the home page. The title of the page might not describe the document.

Topcoder Home Page - title

It is good for branding but does not help the user to understand the context.

HTML - Topcoder Home Page title

Another area is switching to the community pages. The web page has the menu to switch to the community or connect.

Topcoder Menu - Switch to

The design of the page is navigable. You need to provide ways to help users navigate, find content, and determine where they are.

HTML -  Topcoder Switching

Link text may not be meaningful.  The text description does not help the user to understand the context. For example, switching to connect pages description is not meaningful.

HTML - User Settings

We need to look at other areas in the Topcoder home page such as  frames, forms, data tables, charts, graphs, keyboard accessibility, trees and outlines, page tabs, dialogs, calendar controls, animations, dynamic content, authoring tools, layout tables, multimedia, multimedia control playback, navigation, page structure and typography.