Accessibility refers to making our web content and functionality available to all people regardless of ability, disability, or severity of impairment. While accessibility often focuses on people with more obvious or complex challenges, implementing accessibility standards also improves overall usability and makes web content more accessible to all users whether they consider themselves as having any kind of disability or not. Below are aspects that must be considered when designing accessible web content.
- Visual: Considers those who may be blind, color blind, or vision impaired.
- Hearing: Accounts for deaf, and hearing impaired individuals.
- Cognitive: Includes autistic, dyslexic, and those with learning disabilities.
- Physical: Accommodates physically disabled, injured, and those with motor-skill challenges.
- Age-related limitations: Children and aging populations experience limitations in a number of the previous categories due to their stage of development.
- Device-related challenges: Keyboards, mice, touch, and mobile experiences pose different kinds physical challenges.
- Environmental factors: Indoor, outdoor, low-light, competing noise-levels, and other scenarios.
While it is not possible to cover every possible accessibility requirement here, this section addresses many of the key elements needed in our web marketing scenarios. Accessibility requirements are also built-in to our individual components to the extent possible; additional considerations may be found in the corresponding guidance for each component. For detailed requirements, refer to Microsoft’s accessibility site, MS enable.
Page organization & navigation
The following programmatic elements help users of assistive technologies identify and navigate pages within your site.
Page title elements: Ensure each web page has a descriptive and unique title within the "title" tag that resides within the "head." The page title is the first thing read by screen reader software upon visiting a web page. Page titles appear in search engine results, and are used for browser bookmarks/favorites, and typically display in browser tabs. A descriptive title allows a user to easily identify what web page they are using and to tell when the web page has changed.
- Concisely identify the subject of the web page. For example, Windows 10 – Microsoft Windows.
- Make sense when read out of context, for example by a screen reader or in a site map or list of search results.
- Be unique within the site to which it belongs.
- Identify the site to which it belongs.
Heading elements: Within each webpage, provide heading elements at the beginning of each section of content. Ensure that headings themselves are descriptive and clearly convey the subject at hand, allowing users to easily predict what each section contains. Avoid cute and clever headings devoid of real meaning.
Role attribution: Use ARIA (Accessible Rich Internet Applications) “landmark” roles to help users of assistive technologies identify the role of the various page elements and thus navigate between them more quickly. Add a role attribute to a container element, using the most appropriate role value for the content of the container.
- Standardized “role” attribution should be added to elements of each page.
- Ensure all content resides in a landmark region so no content is orphaned. This way a screen reader user can safely use landmark navigation without missing content. See a visual of standardized landmark role nomenclature as applied to regions of a web page (this example has a left nav, but conveys the overall concept).
Link text: Ensure that all links are accessible by keyboard, and that link text makes sense out of context since many screen reader users navigate from link to link, skipping the text in between. Refer to the hyperlinks section for details.
Keyboard access and visual focus
Some users cannot use a mouse and rely on the keyboard to interact with the web. Keyboard focus must provide a visual focus indicator to ensure that users can orient themselves and track their navigation through a task, scenario or content.
Things to verify
- Tab to all: You can tab to all the elements, including links, form fields, buttons, and media player controls.
- Tab away: You can tab away from all elements that you can tab into.
- Tab order: The tab order follows the logical reading order.
- Visual focus: The focus is clearly visible as you tab through the elements, that is, you can tell which element has focus, e.g., links have a gray outline around them or are highlighted.
- All functionality by keyboard: You can do everything with the keyboard; that is, you don't need the mouse to activate actions, options, visible changes, and other functionality.
- Drop-down lists: After you tab into a drop-down list, you can use the arrow keys to move through all the options without triggering an action.
- Image links: When images are links, they have clear visual focus and can be activated using the keyboard.
Size: Refer to the type ramp in the typography section and adhere to the type sizes listed. Since some users need to enlarge web content considerably in order to read it, verify that the text formats and scales appropriately in all browsers when using the browser’s zoom feature. Since our sites are responsive, your site content should enlarge and scale through the responsive layouts (i.e. as you zoom in on your desktop, you will eventually reach a giant mobile view).
Placement: Do not use raster images of text (e.g, .gif, .jpg) to convey information except when the information that is being conveyed is constrained by or dependent upon the presentation format (e.g., logos, logotypes, font samples).
Some people cannot read text if there is insufficient contrast between text and background. Sufficient contrast ratio is also important when considering environmental factors like sunlight, etc. Current accessibility standards require a luminance contrast ratio of at least 4.5:1 for normal sized text. Refer to the color section for appropriate brand colors and use the contrast analyzer tool (available for download in the resources section on this page) to verify that all text on your site meets or exceeds the minimum ratio.
Hit targets refers to the size of the clickable/touchable area of anything functional (i.e. links, buttons, icons, or other functionality). Sufficiently sized hit targets for clickable elements benefits all users of various touch devices as well as those using a mouse and users who have motor-skill challenges. Refer to the information in the hit target section to ensure the best usability and accessibility across all touch targets.
Text alternatives (“alt text”) is typically not visible, but must be present in the web page markup (HTML) in association with images. Alt text helps visually impaired users understand the visual contents (i.e. pictures, illustrations, charts, etc.) on the page via screen reader software. It also benefits sighted users who have turned off images for faster download speed or to save bandwidth. The alt text also displays in cases where an image fails to load for any reason. Refer to the information in the alt text section to ensure your website images contain helpful and appropriate alt text.
Multimedia (video and audio) alternatives
Audio content is not available to people who are deaf or some people who are hard of hearing, unless it is provided in an alternative format such as captions and text transcripts.
- Captions/Transcripts: Provide captions or a transcript for all new pre-recorded audio-only content owned by, or licensed exclusively to, Microsoft. Audio-only content that is also made available under a non-exclusive license to Microsoft and other companies (e.g., radio talk show, music) is not covered by this requirement unless the content comes accompanied with captions or a transcript under the terms of the license.
Visual information in videos is not available to people who are blind or some people what have low vision, unless it is provided in an alternative format such as audio or text.
- Audio descriptions: Audio description (sometimes known as described video, video description, or visual interpretation) is description of important visual information in a video, in order to make it accessible to people who cannot see. Provide audio descriptions or media alternative for all new pre-recorded media content owned by, or licensed exclusively to, Microsoft. Content that Microsoft is licensing from other companies (e.g., films, TV shows) is covered by this requirement if the content comes accompanied with audio descriptions under the terms of the license. This requirement does not include media generated in real time (such as a Webcam chat service).