Ensuring that all of Dell’s global sites and pages can be used by the widest possible audience, including people with disabilities, in a way that is comparable to that provided to individuals without disabilities.
Types of short-term and long-term impairment:
Perceivable – Web content is made available to the senses – sight, hearing and touch.
Operable – Interface forms, controls and navigation are operable.
Understandable – Content and interfaces are understandable.
Robust – Content can be used reliably by a wide variety of user agents, including assistive technologies.
1.1 For all non-text content, text alternatives can be created and changed into other equivalent forms that users may need, such as large print, braille, speech, symbols or simpler language.
For example: Create text alternatives and detailed long descriptions for images to communicate their meaning to users. Provide appropriate alternate text that can serve as a functional replacement for the image or describe the meaning and content of the image in the correct language for that region. This includes banners, buttons, and any other image except those that do not used purely for decoration or does not convey a meaning such as a spacer or vertical divider line image.
A few short text alternative and long description examples:
For more information, see W3C ARIA Usage.
1.2 Time-based media, audio and or video content, is provided in various alternate formats.
For example: For video only content, provide an audio and text description. For audio only content or audio with video, provide text captions.
1.3 Create content that can be presented in different ways without losing information or structure.
For example: Design for clear hierarchy and page purpose without relying on sensory characteristics (shape, size, visual location, orientation or sound). Use semantic markup appropriately, with the reading and navigation order determined by code order being logical and intuitive.
Example of semantic markup:
For more information, see WebAIM.
1.4 Make it easy for users to see and hear content.
Do not use color or other visual cues as the only means of conveying information or distinguishing elements.
Reduce or eliminate the use of alphanumeric characters as decorative elements.
2.1 All functionality of content is operable through keyboard interface without time limitations, in addition to other input devices.
Example of keyboard handling:
Whenever possible, document keyboard shortcuts in reference and procedural documentation:
2.2 Provide users enough time to read and use content.
2.3 Do not design content in a way that is known to cause seizures.
2.4 Provide ways to help users navigate, find content and determine where they are.
Allow users to bypass or skip blocks of content that are repeated on multiple pages, such as the masthead.
Ensure pages have titles that describe the topic or purpose.
The focus order in pages preserves meaning and operability.
The purpose of each link can be determined from the link text alone. “Click Here” is not a meaningful text link that describes the purpose or destination of that hyperlink.
Headings and labels describe the topic or purpose of content in order.
* Note the importance of having only one h4 tag.
3.1 Make text content readable and understandable.
The default human language of the page can be programmatically determined.
Example of showing the language of a page:
Limit acronym use.
Limit the use of text styling as the only way to convey information.
3.2 Make the web page appear and operate in predictable ways.
3.3 Help users avoid and correct mistakes.
If an input error is automatically detected, the item is identified and the error is described in text and not only in color.
Example of error messaging:
4.1 Maximize compatibility with current and future user agents, including assistive technologies.
Ensure code is complete, clean and understandable so that assistive technologies can accurately interpret and parse content.
Summary: Semantic structure refers to the way we use language to convey meaning. In the context of web design, it refers the way the content is laid out on the page through the proper use of heading elements.
What is meant by semantic page structure?
Proper semantic structure allows users to understand the organization of the content of the page. Standard HTML enables hierarchical structure by use of the heading elements (h1, h2 and so on). When used correctly, headings set up a parent/child relationship that orders content in an outline format which helps to organize material into relevant sections.
Sometimes headings are used differently than the way they were intended by the originators of HTML, who didn’t anticipate the graphic potential of the web. When headings are used solely for visual effect, either in isolation or outside of the outline structure, it can interrupt page hierarchy in a way that can cause confusion to non-sighted users who use keyboard navigation to tab through page sections by moving from header to header, effectively skimming the document to understand the overall subject of the page as well as the points covered section by section.
Example of proper heading structure:
Example of improper structure:
Good page structure can and should be planned for and reinforced at every step of the design process.
UX architects can create wireframes that are organized hierarchically.
Copywriters/editors can ensure that the content is written so that it’s presented in logical page sections and that it has a clear progression.
Designers can make decisions about the presentation that include the appropriate HTML and CSS attributes, or make recommendations for updating the CSS when and if the need for a new style arises.
Keeping semantic structure in mind throughout the design process will make it easier for front-end developers to code to accessibility standards. The more thought given to page structure up front, the less the dev teams will need to come up with workarounds to implement accessible code (or even worse, be forced to ignore the guidelines altogether).
Summary: Color contrast is the ratio between the color of the text in the foreground vs. the color of the background. It is important to have enough visual separation to make the text readable for those who are color blind, people with vision impairments such as the farsighted or those with cataracts or other age related vision degradation. It can also benefit people reading in less than ideal conditions, such as glare on their monitor screen.
Minimum Contrast Ratio: Dell adheres to the W3C Web Content Accessibility Guidelines (WCAG) 2.0, Level AA standard, which is:
Color contrast may be measured using the Web AIM Contrast Checker tool.
Black or Carbon on White = always good
Dell Blue on white = pass
Carbon on Quartz = pass
Dell Blue on Quartz = fail at normal, pass at large
Do not place information in font sizes or color combinations that do not provide sufficient contrast.
Use the Dell Technologies colors.
Normal text size to pass Level AA WCAG 2.0 standards:
Large text size to pass Level AA WCAG 2.0 standards:
Use white text on these background colors, or use these as text colors on a white background, at any text size.
Use white text on these background colors, or use these as text colors on a white background, only at large text sizes (shown here).
Use black text on these background colors.
DO NOT USE these colors combined with white.
All other color combinations need to be checked using a tool such as the WebAIM contrast checker to ensure they can be used.
Summary: Images by their very nature convey visual information. If you use images on your site that contain crucial information then you must include a text alternative.
Alt vs. title attribute: Use the alt attribute of the image tag for alternative text (“alt” in this case literally means “alternative”). The intended purpose of this attribute is to provide text that can be read by screen readers or for when images are turned off in the user’s browser settings. Do not use the title attribute to convey crucial information, as it is not universally recognized by screen readers and will not always be read.
Images used for decoration: If you are using images solely for decoration/enhancement (slice of life imagery, visual separators, flourishes) then you most likely do not need a text alternative. There is no hard and fast rule. One must determine whether the image extends the comprehension of the content on the page or whether the text alone provides enough understanding.
Images that are specifically used to present information to the user, such as graphs, maps, diagrams, among other examples, will likely require alternative text, if the relevant information is not also included in the page copy.
Embedded text: Numbers & alpha characters should be true text (html) and not embedded within images.
Color: Do not use color alone to convey meaning or context as a person with color blindness or low vision will have difficulty discerning distinctions when color is the sole means of differentiation.
Icons: Icons should be treated as other images. If the icon is not accompanied by a true text equivalent, then use alternative text to convey the meaning.
Logos: Logos are exempted from the WCAG requirement for alternative text.
Summary: The ability to navigate by keyboard is one of the most important mechanisms for achieving accessible web presentation. It factors in to the use of screen readers, and is also instrumental for people with limited motor skills, poor manual dexterity, those with paralysis and anyone else who may not want to or be able to use a mouse to interact with screen elements.
Use of Tab key: Keyboard only users can use the Tab key to jump through to links/CTAs, skipping over the content to set cursor focus on the actionable areas of the page. For sighted users, it is crucial to include a visual indicator (such as a border or outline) to illustrate where the cursor is positioned, thus allowing them to understand their location within the page.
Keys commonly used in keyboard navigation:
Keyboard navigation and screen readers: Screen readers can also use the tab key (and in most cases number keys 1-6) to “skim” the page by setting focus on the heading elements, which allows them to get a sense of the page topic and the general subject of each section. Refer to the documentation on semantic structure for information on proper page formatting.
Screen reader shortcut keys:
Skip to Content: Keyboard/screen reader users may not have a need to tab through or listen to every element in the masthead or global navigation, especially if they have previously encountered a page with those same options. Including a “skip to content” link allows users to bypass this repetitive content. There are several approaches to incorporating this type of link:
Differentiating Links: Since keyboard navigation lets users move from CTA to CTA it is important, particularly for screen reader users, to make each link/CTA distinct and their purpose self-evident. A series of “Learn More” or “Shop Now” links on your page does not tell the user what to expect without the context of surrounding content. There are a couple of methods of addressing this issue:
Example of hidden text styling:
Design Approach: Creating a keyboard accessible page isn’t just a coding exercise. Good accessibility practices start with good page design.
Key Takeaways: A sizable percentage of your audience will interact with your site without using a mouse for navigation. Keep their perspective in mind while deciding how the page will be laid out, how to demonstrate when elements are “in focus” and how they will be interpreted by screen readers.
Summary: Accessible forms are laid out logically, are easy to perceive and understand, and require a minimum of trial and error to complete. Though accessibility concerns mainly focus on solutions for keyboard only access and screen reader usage, well-designed forms will benefit everyone.
Simplicity: Make sure that your form is laid out intuitively and that the instructions are clear. Ensure that required fields are obvious (we recommend actually spelling out the word “required” if space allows, as asterisks can be difficult to discern at times for users with poor vision). Avoid using tables for layout (forms do not qualify as tabular data) and keep in mind the order that screen readers will encounter the information. A simple, linear form will be of particular benefit to users with certain types of cognitive disabilities, who might otherwise struggle with complex instructions.
Formatting: Unsighted users rely on clear labels and well defined structure in order to understand the purpose of a form and the information being collected. Use the following markup to increase the accessibility of your form code, especially as it is perceived by screen readers:
Example of formatting:
Default text within text fields: Pre-filling text fields with default values, whether used as sample responses, help tips or the field labels themselves can cause usability and accessibility issues.
Errors – messaging and recovery: Error messages should be easy to understand and should state the issue in terms that make sense to the user (as opposed to using technical jargon that makes sense only to a developer). The error should be associated directly with the value that needs to be corrected, and the recovery instructions should be easy to both follow and execute. Again, this is not only beneficial to those with disabilities but is also good overall user experience.
Design Approach: Creating an accessible form starts with a simple, straightforward design.
Summary: When it comes to data tables, the best practice is to keep it simple. A flat, simple data structure will help keep the content comprehensible when read by a screen reader.
Purpose: Do not use tables for layout. Use CSS to define page structure. Screen readers will read page content in the order that it is presented (e.g. top to bottom, left to right), so if this is not the order that the user is expected to consume the information, those relying on assistive technology will have difficulty comprehending.
Table formatting: Unsighted users rely on clear labels and well defined structure in order to understand the purpose of a data table and the information provided within.
Example of table formatting:
A screen reader will read the above as follows: “Contact information by day of the week. Hours: Monday 9 a.m. to 6 p.m., Tuesday. 9 a.m. to 6 p.m…”
Complex tables: Tables with two or more levels of headings and/or spanned cells introduce even more complexity, and require even more definition to ensure that associations between headings and cell data are preserved. For this reason, they should be avoided unless absolutely necessary. If required, please refer to the W3C guidelines for Complex Tables.
Proportional sizing, not absolute sizing: A table with fixed dimensions can cause problems for people who larger fonts or magnified screen views. The best practice is to let the browser window determine the width of the table whenever possible, to reduce the horizontal scrolling required of those with low vision. If cell widths need to be defined, use relative values, such a percentages, rather than pixel values.
Design approach: The best way to design for accessible tables is to make sure that they are used for their primary purpose: tabular data. When a table layout is called for, keep in mind how the data will be perceived when heard and ensure that the context is always clear.
Summary: Video and audio files present significant obstacles for not only people with hearing disabilities but also for the visually impaired, people who are not native speakers of the language being used and others who may not be able or wish to access digital multimedia content.
Captioning: Captions are the text equivalent of audio content. Primarily used by people with hearing disabilities and impairments, captions are also useful for those who may not be fluent in the language used in the presentation. Captions can be open (present for all consumers) or closed (able to be turned on or off). Closed captioning is the preferred method for making audio/visual files accessible for the following reasons:
Transcripts: Transcripts are also an important component in providing accessible alternatives to the digital media content. Transcripts that provide descriptions of the visuals (what is happening on screen) and non-verbal audio cues (such as laughter or an explosion) can allow someone using a screen reader or braille translator to receive a close approximation of the experience.
Audio: If any audio automatically plays for more than 3 seconds, controls must be available to pause, stop or reduce the audio volume independently from the overall system volume.
Summary: Accessibility considerations for mobile displays are no different than from traditional desktop presentations. WCAG 2.0 guidelines should still be the guiding principles. However, there are some characteristics of interaction that are particular to the mobile experience.
Prevalence: Mobile adoption continues to grow among people with disabilities just as it has with the population at large. According to a WebAIM survey from January, 2014, 82 % of screen reader users browse the web via a mobile device (often in addition to a desktop or laptop), up 10 % from May 2012.
Native accessibility features: Manufacturers are increasingly building accessibility features directly into their products, including native screen readers, the ability to control font size and display color, the ability to add subtitles or captioning, and more. Though keep in mind that built-in features won’t correct inaccessible design.
Touch Navigation: Touch screen interfaces present some unique interaction considerations. Here are some things to consider for people with disabilities using touch controls.