Monday, February 20, 2017
Top 10 Tips for Making Your Website Accessible
Top 10 Tips for Making Your Website Accessible
1. Choose a content management system that supports accessibility.
There are many content management systems available to help you build your website. Common examples include Dru pal and WordPress, but there are many other options available.
Once youve chosen a CMS that suits your needs, make sure to choose a theme/template that is accessible. Consult the themes documentation for notes on accessibility and tips for creating accessible content and layouts for that theme. Be sure to follow the same guidelines when selecting modules, plugins, or widgets.
For elements like editing toolbars and video players, make sure that they support creating accessible content. For example, editing toolbars should include options for headings and accessible tables, and video players should include closed captioning. The CMS administration options (such as creating a blog post or posting a comment) should be accessible as well.
2. Use headings correctly to organize the structure of your content.
Screen reader users can use heading structure to navigate content. By using headings (<h1>, <h2>, etc.) correctly and strategically, the content of your website will be well-organized and easily interpreted by screen readers.
Be sure to adhere to the correct order of headings, and separate presentation from structure by using CSS (Cascading Style Sheets). Do not pick a header just because it looks good visually (which can confuse screen reader users); instead, create a new CSS class to style your text.
Examples of proper use of headings:
3. Include proper alt text for images.
Alt text should be provided for images, so that screen reader users can understand the message conveyed by the use of images on the page. This is especially important for informative images (such as infographics). When creating the alt text, the text should contain the message you wish to convey through that image, and if the image includes text, that text should also be included in the alt.
The exception to this rule is when an image is used purely for decoration; in this case, the alt text can be left empty so that the screen reader user is not distracted from the more important content on the page.
If an image is the only content of a link, the screen reader will read the file name if alt text is not provided. Always provide alt text for images that are used as links.
4. Give your links unique and descriptive names.
When including links in your content, use text that properly describes where the link will go. Using "click here" is not considered descriptive, and is ineffective for a screen reader user.
Just like sighted users scan the page for linked text, visually-impaired users can use their screen readers to scan for links. As a result, screen reader users often do not read the link within the context of the rest of the page. Using descriptive text properly explains the context of links to the screen reader user.
The most unique content of the link should be presented first, as screen reader users will often navigate the links list by searching via the first letter.
For example, if you are pointing visitors to a page called "About Us":
5. Use color with care.
The most common form of color deficiency, red-green color deficiency, affects approximately 8% of the population. Using ONLY colors such as these (especially to indicate required fields in a form) will prevent these individuals from understanding your message.
Other groups of people with disabilities, particularly users with learning disabilities, benefit greatly from color when used to distinguish and organize your content.
To satisfy both groups, use color, but also be sure to use other visual indicators, such as an asterisk or question mark. Be sure to also distinguish blocks of content from one another using visual separation (such as whitespace or borders).
6. Design your forms for accessibility.
When form fields are not labeled appropriately, the screen reader user does not have the same cues available as the sighted user. It may be impossible to tell what type of content should be entered into a form field.
Each field in your form should have a well-positioned, descriptive label. For example, if the field is for a persons name, it should be labeled appropriately as either "Full Name" or have two separate fields labeled as "First Name" and "Last Name." Use the <label> tag or an ARIA property (see tip #9) to associate the label text with the form field.
As you are going through a form field, a person should be able to tab through the form and fill out all the fields before getting to the "Submit" button, or they may not even realize that additional fields exist. Essentially, the tab order should follow the visual order.
If you have fields that are related or similar, consider grouping them together using fieldsets. For example, fields like "Full Name" and "Date of Birth" could be grouped together as "Personal Information." This type of form organization can help a screen reader user keep track of progress, and can provide the context that might be lost while filling out the form.
If certain form fields are required, the field should be labeled accordingly, and configured to alert the screen reader user. Commonly, required fields are noted as such with an asterisk, which will not be spoken by some screen readers. Asterisks (or similar visual indications) should still be used for sighted users, people with learning disabilities or people who speak English as a second language. Indicating that a field is required to a screen reader can be accomplished by adding ARIA required="true" and ARIA required="false" for optional fields. After submitting the form, user will need to be alerted to submission confirmation and any submission errors. We recommend including any error counts in the page title (after the user has submitted), so the user will immediately be informed that there are errors on the page. If a user submits a form with errors, the user should be brought to a submission page that indicates what the errors are, and provides an easy way to navigate to those errors.
