Skip to content Skip to navigation

Designer

Mobile

Introduction

Mobile accessibility has much in common with the principles of general web accessibility. Assuring adequate contrast, including alt text for meaningful images, and checking keyboard (and touch) navigation and interaction are important. At the same time, there are some different and additional considerations. For example, applications built on the Android or IOS platform have specific accessibility conventions that must be followed, and it is important to learn how to test accessibility-related functionality via those operating systems.

Forms

Forms are one of the most ubiquitous and important features on many websites. Whether searching for content, reporting a problem, or applying to college, forms provide a structure for users to communicate their needs or supply information.

Much has been written about designing usable forms, but design trade-offs often depend on the context of use. Web Form Design: Filling in the Blanks by Luke Wroblewski is an excellent reference for all things related to online forms.

Frames

In and of themselves, neither frames or iframes are inaccessible. They tend to cause more issues with usability than accessibility. For example, users cannot link directly to content that a frame or iframe may contain, and that content cannot be bookmarked. Users may also find that frames "break the 'back' button."

When you implement frames, however, you'll want to make sure that you:

Tables

As most Web developers know, tables should be used to present data, rather than to assure proper page layout. This is simply best practice, in terms of coding.

Menus for Navigation

Many websites use a series of menus, usually arranged horizontally across the top of the page, to provide links to other areas of the site. While there are different ways to design and code navigation menus for accessibility, it is important to consider user expectations for navigating the menus themselves and to encourage consistency across Stanford's many websites.

Fonts and Typography

While font-choice and typography are generally a matter of design, it is important to remember that designs should be flexible enough to permit end-users to make adjustments to them. Assuring access to the content on the site is essential. Some of this flexibility is possible based on best coding practices such as using relative units for font size, and implementing CSS, coupled with strategic implementation of semantic markup.

The Fonts article from WebAIM includes the following list of key concepts:

CSS

CSS is a powerful tool. However, as you consider accessibility issues it is important to implement it wisely and take care to assess the ramifications of your decisions. Using CSS to separate content from presentation remains an essential concept to keep in mind. Remember, too, that using proper semantic markup and aligning visual layout with reading order help assistive technologies to offer a predictable reading experience for end-users. Using native HTML markup for heading levels, emphasized text, list-bullets, etc. can also help you streamline the use of CSS across your site.

Page Structure

One of the most important contributions to improving web accessibility you can make is to follow best practices when developing and coding sites, especially in terms of the page structure. Screen readers and other assistive technologies take advantage of semantic markup to provide end-users with a rich and consistent site experience.

Here are some "do"s and "don't"s to consider when gathering requirements and developing a site.

Alerts

Alert Boxes, Error Messages, and Pop-up Windows

Don't hide warnings, disclaimers, or error messages with JavaScript or other client-side scripting. If a message is important, it is always important to all site visitors. Hidden content in dynamic pages will not be available to web devices that don't support the particular script language. If you cannot imagine showing a warning or disclaimer before it is necessary, then try to develop a server-side solution that will rebuild and serve a modified page with the warning embedded in it.

Visible Focus

When navigating a website with a keyboard, there is no visible cursor that is being controlled by a mouse. As a result, there needs to be a way to show the user what element has focus.

In addition, whether or not your site visitors are using a mouse or a keyboard, easily visible focus should always be retained. Focus allows a wide range of users to know when they are about to activate a link, button, form control, etc.

Pages

Subscribe to RSS - Designer