BU WordPress and the Responsive Framework theme provide a content management system and framework that complies with accessibility guidelines, but everyone publishing content must be aware of accessibility concerns and learn how to maintain an accessible site. The content you add must remain accessible.
Please review Website Policy and the University's Minimum Web Accessibility Standards.
Accessibility is BU policy.
Web editors using BU WordPress have a link in the editor on every page to run an accessibility evaluation. This submits the page to WAVE: Web Accessibility Evaluation Tool and provides a report for that page.
This tool can only check accessibility requirements that can be verified in an automated fashion.
- For example, it can alert if an ALT attribute is not entered for an image, but it cannot ensure that ALT attributes are truly descriptive and relevant.
- Also for example, the tool cannot ensure that you are using actionable words for your links and not using context-less phrases like "click here."
Automated tools cannot test everything -- it remains the responsibility of all BU web editors to be familiar with web accessibility basics and to use them consistently when you add and maintain web content.
These 10 essential tips will help you maintain an accessible website.
Use unique, descriptive, actionable link text
- WHAT
- Make your link text descriptive and actionable.
- WHY
- A key feature of screen-reading software is a list of only the links on your pages -- this is extremely helpful for blind visitors navigating your website. Your link text needs to be descriptive. "Click here" is bad link text -- it is meaningless out of context, and a bad practice for accessibility.
- HOW
-
- Use descriptive links.
- Use actionable terms.
- Use verbs.
- Use keywords.
- Stop using only "here" or "click here" for link text.
- If you feel your site's audience is new to the web (very young or older) or has other challenges that you absolutely need to use the words "click here" then use them in a phrase and make the entire phrase the clickable link.
- BONUS
- This will also boost your search engine optimization, since it is commonly believed that search engine algorithms give added "search weight" to words contained within the link text.
Use headings to structure content. Use HTML semantically.
- WHAT
- Use headings to structure your content. Use them where you have natural breaks in your content, and use relevant keywords in your headings.
- WHY
- Screen-reading software uses headings to assist blind visitors in navigating content. Your headings should use the appropriate HTML heading tag. Just making text bold does not make it a heading from an accessibility perspective.
- HOW
-
- Your main content title should use <h1> headings. From there, adhere to a correct order of hierarchical heading levels (e.g., don't skip from an <h2> to an <h4>).
- Use HTML semantically -- apply paragraph formatting to paragraphs. If you have a list of items, format them as HTML lists.
- Don't apply heading format to a large block of text just because you need large and bold text. Learn how to create a style instead.
- Don't use images for headings.
- In WordPress editor: highlight your heading text and select the appropriate heading level from the formatting drop-down menu.
- BONUS
- This will also boost your search engine optimization, since it is commonly believed that search engine algorithms give added "search weight" to words contained within heading text.
Use ALT attribute to describe images.
- WHAT
- Use the ALT attribute of the HTML image tag to provide a description of images. Describe in text what the image conveys to your visual visitors. This is especially important for images that convey information, such as infographics.
- WHY
- Screen-reading software uses the ALT text attribute of the image tag to read a description of the image for visually-impaired visitors of your web site.
- HOW
-
- Describe the contents of your image. Include names, locations, and describe any action that is taking place in the image.
- If part of your image includes text, make sure to include the text in your image description.
- Provide alt text for images used as links. Phrase your text clearly to ensure visitors are aware the image is a link.
- Only when an image is used for purely visual decoration should you leave the alt text empty.
- In WordPress editor: fill in your image description in the Alt Text dialogue box.
- BONUS
- Including detailed descriptions of your images in the ALT text attribute will make your images more discoverable by search engines.
Use tables for tabular data and not for content layout.
- WHAT
- In the early days of the Web, site developers used HTML tables for web page layout. With the introduction of stylesheets, using HTML tables for layout is now strongly discouraged. Use HTML tables only when you have tabular data -- rows and columns -- where you need to show relationships between the data in different table cells.
- WHY
- Screen-reading software can have a particularly difficult time with HTML tables. The content may be read out of order and may not make sense to your visitor. Screen readers inform visitors when they encounter a table -- how many rows and columns the table contains. This takes the visitor out of the natural flow of consuming page content.
- HOW
-
- Use an HTML table only when you need to show row/column relationships in tabular data format.
- Always use headers for your rows and columns. In HTML, use TH tags instead of TD tags to indicate a table cell is a row or column header.
- Complex tables with unique relationships between multiple cells should use the HTML "scope" attribute.
- Use table captions (new in HTML 5) to provide additional information about the data in your table.
- In WordPress editor: HTML tables can contain relatively complex HTML code. The visual editor WordPress makes it easy to edit table cell content and removing/adding rows and columns. Indicating which table cells are headers (and other advanced techniques like scope and table captions) need to be manually edited in the text/HTML view.
- BONUS
- Using tables only when you need to show tabular data will ensure the remainder of your page content remains most flexible for responsive designs that work well on a multitude of different device sizes.
Use a publishing platform that supports accessibility.
- WHAT
- Use a content management system that provides an accessible publishing platform and that provides easy-to-use tools to maintain accessible content.
- WHY
- We must always be aware of accessibility concerns in our technology and incorporating accessible publishing procedures is best tackled in the systems we use to edit and publish our content.
- HOW
-
- Learn how to publish accessible content on the web. Use the resources provided here to start.
- Adopt accessible content procedures into your publishing workflow.
- Use an accessible content management system and site design -- like the Responsive Framework theme in BU's central WordPress publishing system.
- If you are not using a content management sytem, learn how to implement accessible content publishing strategies manually in your HTML.
- BONUS
- Most site designs and themes for content management systems that are tested for accessibility are also modern and responsive. Your content will not only be accessible, it will work better on a variety of device sizes, it will be more discoverable, and it will be more usable.
Ensure content can be accessible via a keyboard alone.
- WHAT
- Mobility challenges can present huge hurdles to accessing content for visitors who can use only a keyboard. Disease, birth defect or injury (including repetitive stress) means some visitors temporarily or permanently are unable to use pointing and input devices such as computer mice, trackballs, and trackpads to access your website.
- WHY
- Keyboard-only visitors use the TAB and ARROW keys to navigate within the page and use the SPACEBAR and ENTER keys to interact with forms and selection elements.
- HOW
-
- Ensure the tab order of your content follows a logical progression.
- Provide a "skip to main content" link at the top of each page so keyboard-only users do not have to tab through the site's main navigation hierarchy.
- Include anchor links (jump menu) at the top of long content pages.
- Do not rely on mouseover actions to provide access to content or functionality -- neither screen readers nor keyboard-only users trigger mouseover actions.
Keep your content clean and free of distractions.
- WHAT
- Vistors with learning or cognitive disabilities benefit from clear, concise content in a clean and distraction-free design.
- WHY
- Accessible content extends beyond accommodating those visitors with physical challenges. Visitors with attention deficit disorders, learning disorders, or past brain injuries may have problems comprehending content that is overly complex or presented in a distracting way.
- HOW
-
- Use a clean site design. Don't overuse purely decorative images and graphics. Avoid blinking, moving, and animated text.
- Publish content that appears and functions in predictable ways.
- Use easy, clear and concise language where complexity can be avoided.
- Help users avoid mistakes (e.g. use selection menus rather than open fields on web forms where appropriate).
- Organize your content into distinct, digestible sections that are easy to read and understand.
Provide captions for videos and transcripts for audio content.
- WHAT
- Dynamic website content must also be made accessible. Video content should be captioned for those visitors with hearing impairments. Audio content (e.g. podcasts, etc.) should include a text-only transcript. Transcripts of video content should also contain additional descriptions or commentary that would be beneficial.
- WHY
- Video content can be a particularly effective way to get your message to visitors. Additionally, producing and publishing video content for the web has never been easier. As the use of multimedia content on the web booms, it's more important than ever to focus on the accessibility of this content.
- HOW
-
- Provide captions (equivalent text content of the spoken word) with multimedia content.
- Captions should be synchronized so the text appears simultaneously with the audio.
- Provide transcripts of both video and audio content. Transcripts of video content should contain additional explanatory descriptions in addition to the equivalent of the spoken word.
- BONUS
- Transcripts can provide a huge boost to the search engine optimization of your site. Transcripts make discovery of multimedia content much easier. Captioning also provides a big benefit to visitors whose primary language is different than that of the video.
Create forms that are accessible.
- WHAT
- Publish web-based forms that can be navigated in an intuitive manner with the TAB key, and that provide descriptive labels for each form field.
- WHY
- Web-based forms can be particularly challenging to users of screen reading software. They must be able to navigate to all form fields before reaching the Submit button. Form fields should be labeled decriptively and appopriately.
- HOW
-
- Use appropriately-positioned and descriptive form fields. (For example: don't use "Name" -- use "Full Name" or, if separate fields, use "First Name" and "Last Name.")
- Make sure visitors can use the TAB key to fill out all form fields before they reach the Submit button.
- Group content-related form fields together using fieldsets.
- Indicate required form fields in a manner that is accessible (e.g. don't use only color or an asterisk).
- In WordPress editor: use the "Field Label" function in Gravity Forms to clearly describe each form field. Gravity Forms creates the TAB order from the same order you enter fields in the form builder -- do not put form fields after the Submit button.
Use color appropriately and with care.
- WHAT
- Choose appropriately-contrasting colors, and do not use color alone to convey information.
- WHY
- Types of color blindness and other color deficiencies may affect nearly 10% of the population. These visitors may have problems with low-contrast color combinations, or distinguishing certain colors from one another.
- HOW
-
- Red-green color deficiency is the most common form. Avoid color combinations that are known to be problematic for color blindness.
- Use visual indicators in addition to color when conveying information. Label colors with numbers or symbols and provide a corresponding origin for the numbers/symbols.
- Avoid low-contrast color combinations like red and black, or white and gray.
- Use online tools to evaluate yor color contrasts.
Web Resources
The web has a wealth of accessibility resources available. Here are a few of the best:
