Accessibility Guidelines for Application Developers

Making a website accessible both for people with disabilities and mobile devices.

UMB websites should be designed and developed so that they are accessible using a mobile device and for people with disabilities. It is important to understand the significant overlap between making a site accessible for a mobile device and for people with disabilities. Developers can more effectively save time and resources by addressing both issues simultaneously when developing, redesigning, or updating websites.

Websites should not be developed based on desktop-sized displays; this results in poor and unusable sites for people using mobile devices. Content will often appear laid out in a different manner due to the limited screen size of mobile devices and their limitations on the type and amount of material that can be viewed. As a result, content on the page could be missed or lost. Important information on a page may require considerable scrolling before it is visible, especially if the top of the page is occupied by images and navigation links. This can cause confusion and frustration by someone visiting the site since they do not know whether they have retrieved the right content without significant scrolling and effort.

• Visitors with severe visual impairment use text readers that read information on a website aloud. Text readers work in a linear fashion and can only read text; as a result, webpages that contain frames, tables, or graphics such as animations, graphs, image maps, or other non-text items could be misread or missed completely by the text reader if they are not designed properly.
• Visitors with moderate visual impairment may use screen enlargers. Webpages that use absolute vs. relative units (pixels vs. percent) cause unnecessary scrolling from the left to right to see all the content on the page, thus making it difficult to understand the content that it on the page.
• Visitors with motor impairments may not be able to use a mouse and may operate a computer using only the keyboard. As a result, using tab order and properly designed navigation and layout is important.
• Visitors with hearing impairment would need transcribed text for any audio portions of a site and synchronized captioning for video clips.
• Visitors with cognitive impairment would benefit from well-organized and simple layout and designs that have clearly defined navigational features.

Some of the barriers that people using mobile devices and those with disabilities are similar. 

• If the navigation on a website requires the use of a mouse to click or enable menus to appear, this will create an obstacle. Mobile users typically only have an alphanumeric keypad and people with disabilities may not use a mouse with their desktop and rely on special devices or readers.
• All form controls should be labeled appropriately and explicitly associate labels with form controls so that it's easier to see what information each element in a form is expecting or how it is being used.
• Many screens have limited color palettes and are often used in a diverse range of lighting conditions. As a result, information on a website that is highlighted in a color may not be visible. If color is used to indicate a feature, the feature should not be color dependent.
• Using background images can make it difficult to view content, especially with the limited contrast often found on mobile devices. Using other techniques to achieve similar objectives on your site should be considered, so that people can view the content regardless if the background image is shown or not.
• Many mobile devices do not support frames, and they are generally problematic and should be avoided.
• Tables do not work well on size-limited screens and may result in having to scroll horizontally to read them. Putting navigation links into tables could make it necessary for visitors to scroll both horizontally and vertically to see the possible navigation choices.
• Most webpages are designed with navigation elements at the top of the page, including menu bars, breadcrumb trails, and search functions. Although this is a convenient approach for large displays, mobile devices with limited displays can end up having a significant amount of navigation appearing instead of actual content when a page is first retrieved. It is important for visitors to have an idea of the content of the page on initial view; therefore, navigation, decorative images, advertising, and other material that is not central to the user's experience of the page should be limited. People should not have to scroll significantly to find the primary content of the page.
• Graphics should not be used for spacing. Using 1-pixel graphics for absolute positioning does not work on some screens. Large graphics that cannot be rendered by a device should not be used. Avoid large or high-resolution images except when critical information would otherwise be lost. The loading speed of a website can be negatively impacted and cause people to skip the site completely because it takes too long to load.
• Image resizing should be done at the server level if they have an intrinsic size (i.e., bitmaps). By providing the size of the image to the browser in advance, having to re-flow the page when it receives it is avoided. Resizing images at the server level reduces the amount of data transferred and the amount of processing the device has to carry out to scale the image.
• It is more difficult to input content on a mobile device compared to a desktop that has a keyboard. Mobile devices have limited keypads with smaller keys and usually lack a pointing mechanism. As a result, typing lengthy URLs can be difficult and may lead to mistakes by the person typing them, especially those with a lot of punctuation.
• Not all devices provide back buttons or users may not know how to use the functionality on them. As a result, it may be difficult for them to recover from errors, broken links, etc.
• Mobile devices are usually slower when compared to fixed-data connections; therefore, it is not uncommon to experience long retrieval times for lengthy content and large graphics. Mobile data transfer often costs money and supports only limited types of content, so it is important that visitors can retrieve information that is usable on their device. Even if content can be interpreted by their device, visitors may leave the site unsatisfied if for example, larger images were only viewable in small pieces and require considerable scrolling.
• Some mechanisms that are commonly used for advertising or providing supplemental information (such as pop-ups, pop-unders and large banners) do not work well on small devices. Advertising needs to be used and added to a website in an effective manner to ensure that visitors with disabilities and those using mobile devices can still access information.
• Websites should avoid using pixel and absolute measures so that the browser can adapt content to fit the display. Use percentage and relative measures such as em, ex, bolder, larger and thick.
• Mobile browsers vary and often do not support scripting or plug-ins. This means that there is a limitation on the range of content that can be supported. In many cases, the user has no choice of browser and upgrading is not an option. For example, iPhones do not support Adobe Flash.
• Mobile devices range in style sheet support — some provide full implementation including caching of external style sheets while others do not, some do not support the style element, some do not support more than one style sheet, and some do not support any at all. If style sheets are turned off or not supported, content will be rendered in document order, so it is important that the content makes sense when read that way.
• Displaying new windows without warning is very confusing to non-sighted users because some screen readers do not give any indication when new windows appear. If you cannot avoid displaying a new window, insert a warning like the following: "This link will open in a new window."
• You should include a link to download Acrobat Reader. When a web page requires that an applet, plug-in, or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet.
• When creating style sheets, use CSS media types (use both in the @media rule and in the media attribute of the link element) to specify styles that apply to handheld rendering. The CCS Media types that apply are "handheld" and "all."  If handheld rendering is not specified, browsers may download other style sheets even if they are identified as applicable to non-handheld rendering.
• IMG Border, Vspace and Hspace attributes are deprecated in HTML 4.01.  Use CSS margin and border attributes instead. For example: img { margin-top: 10px; margin-bottom: 10px; } { border: 1px solid red; } img { border: none; }
• Omitting IMG WIDTH or HEIGHT attributes means page text jumps about as images load. This makes the page very hard to read while it's loading. Add width and height attributes to the img tag matching the image dimensions.
• Identify row and column headers in data tables using TH elements. If the table has headers marked up using TD, then change these to TH. If the table has no headers, add TH elements describing each row and/or column.
• TD WIDTH attribute is deprecated in HTML 4.01. Replace width attributes with CSS rules. For example: td.two-column { width: 50%; }
• Cookies may not be supported or implemented by some mobile devices and should not be used to carry out session management for identifying users and/or storing user preferences.
• Font-related styling has limited support on mobile devices; therefore, font sizes and effects (bold, italic, etc.) used to highlight or stress words on a web page may not achieve their desired effect.
• Use document order to control layout and tab order to help improve how visitors navigate through a page from various fields and/or objects. This will ensure they appear in a logical order and is especially important since they may not all appear at the same time as the focus item.
• Capitalize the first letter of the first word in lists. Only the first letter of the first word should be capitalized unless the item contains another word that would normally be capitalized.

The W3C organization has developed guidelines, standards, and best practices for making web content accessible. It has developed the web content accessibility guidelines (WCAG) as a guide for making websites accessible for people with disabilities. Some of the information above has been summarized from the mobile web best practices (MWBP), which can be used as a guide for making sites usable from a mobile device.  

Use the following 508 compliancy checklist to help make sure your website can be accessible by users with disabilities or use these solutions for visitors with disabilities. In addition, you can use this reference and video tutorial to learn how to address ARIA. The accessibility section of the website manual developed by the Office of Communications and Public Affairs also can be used to get more information about making your site accessible. 

Websites should be tested in a range of browsers, including mobile browsers that often show significantly different characteristics than desktop browsers. Web developers may need to adjust their designs and content to make it suitable for display in reduced format. Developing a style sheet specific for mobile devices could be used as a way to adjust what and how content is presented and viewed. Developers also should test with specific features disabled, such as using text-only modes and with scripting disabled. Emulators can be used as a preliminary tool for testing, but ultimately a wide range of real devices and specific software versions should be used when possible.