People with disabilities rely on interface controls that are used programmatically. These controls have a visual label, as well as a programmatic label, known as its Accessible Name. Users have a much better experience if the visible text labels of controls match their accessible names.
Speech input users can navigate by speaking the visible text labels of menus, links and buttons that appear on the screen. It’s confusing to speech input users when they say a visible text label they see, but the speech input does not work because the accessible name that is enabled as a speech input command does not match the visible label.
Placement of controls affects their ease of use. For example, for a search feature, the “submit” button should be positioned right after the input field. Appearance and positioning are particularly important when providing a control that supports “destructive” actions, such as a “delete” or “clear” button. In these cases, ensure that these controls are clearly differentiated .... Read more about ✎ Technique: Differentiating controls
Color-contrast-checking tools can compare two colors and report on the contrast ratio between them. Some tools will allow you to adjust these values until the ratio is sufficient, helping you to choose a color scheme that avoids contrast problems.... Read more about ✎ Technique: Checking color contrast
The most important part of any page is its content, which is made up of paragraph text and sometimes supplementary media like images or video. Headings are used to group and label sections of content, giving visual structure to the page and providing a means of navigation to screen-reader users.... Read more about ✎ Technique: Writing headings
Avoid referring to a button, menu, or other item in the page only by its position on the page; instead, use additional information that describes the content.
Referring to a specific item in the page content by only its visual position prevents people who use screen readers from being able to make sense of this visual description. Another downside to referring to items by their position is that their position might change when the page is viewed at different screen sizes, such as on...
Lists are collections of related content. For example, a navigation bar is a list of links or a set of instructions may be an ordered (numbered) list. Clearly identifying a set of items as a list helps people understand that relationship. When you include a list in your page content, this relationship needs to be conveyed visually, and it also needs to be conveyed to people using screen readers.... Read more about ✎ Technique: Identifying lists of content
Headings are important orientation aids, and they help people quickly identify the content on your page. When headings are correctly identified, they also allow screen-reader users to quickly navigate from heading to heading using the screen reader's heading navigation functionality.
The best way to do this is to ensure that headings are identified in HTML. When using a web-content editor or a word-processing application, you can do this by making use of the heading options in the styles menu. ...
Some people understand complex information best when it's presented visually, such as as a chart or diagram, while others find that reading the information suits them better. For people who use screen readers, a good text equivalent of the information that’s presented graphically is essential for their understanding.
For simple graphics, providing a succinct, informative text alternative is usually fine. But for complex graphics, it's not enough to provide a screen reader user with only short alternative...
Consistency is one of the cornerstones of good usability. Although it is possible in advanced CMSs to create radically different page layouts according to content type, it's important that areas outside of the page’s content area remain consistent across the site for wayfinding purposes. This can be controlled through carefully designing and implementing page templates.... Read more about ✎ Technique: Consistent layout
Paragraphs of text are a fundamental core of web content, so it's important to display them in a fashion that is optimally readable to the majority of your audience without requiring them to change their display settings. For people who do need to customize display of text to make it easier to read, it's important to support this customization rather than forcing them to read the text the way you specify.
For the most part, this means applying typesetting best practices, which predate the web.
Some people with reading difficulties or visual impairments need to customize the display of text to make it easier to read. When text is presented as an image of text, that limits their ability to change the appearance of that text. So wherever possible, use text along with CSS to apply styling (such as color, typeface, or size).
If you use an online content editor to write content, the styling will happen automatically. If you feel that you need text that deviates from the style, formatting options...
Some people with color deficit have trouble differentiating between specific colors, such as between red and green or red and black. Screen reader users do not access content visually, so they do not have access to color information.
Color is a powerful visual means of presenting or distinguishing information, but when you use color to identify or distinguish information, make sure that this information is still available to people who can't perceive color.
Some people with reduced visual acuity may not need screen magnification software or screen readers but might still have problems reading smaller fonts. So the ability to allow easy enlargement of text size is important.
There are a number of ways to zoom web-page content in to enlarge text without needing to provide explicit controls to do so. To avoid diminishing this variety of user control, you have to be careful how you code font sizes.
The most appropriate alternative text for an image depends very much on the context of the image in question. You must provide information for that image that takes into account its purpose and also the surrounding text on the page. The same image might need different alternative text depending on how it's used.... Read more about ✎ Technique: Writing alternative text