Hour 22. Making Bootstrap Accessible
What You’ll Learn in This Hour:
What web accessibility is
General accessibility rules
How to improve Bootstrap accessibility
Specific things you can do to make your Bootstrap site accessible
Accessibility is one of those web design tasks that many designers either don’t know about or ignore, hoping it will solve itself. To some extent, because you’re using Bootstrap, your site will be more accessible than not. But there are still some things to do to ensure that people using assistive technology (AT) can use your site as well as others.
In this hour you learn what accessibility means when it comes to websites and how to make specific Bootstrap components and plugins accessible. You also learn how to evaluate your site for accessibility so you know what you do and don’t need to do.
What Is Accessibility?
When designing web pages, you should think inclusion. Including as many people as possible means that you will have the largest possible audience. This means taking into consideration things like age, economic situation, location, and language. It also means considering people with disabilities. Accessibility usually focuses on people with disabilities, but, in general, web designers should focus on inclusive design.
According to Johns Hopkins University, “Web accessibility refers to a standard of inclusive website development based on the idea that information should be equally available to all people, regardless of physical or developmental abilities or impairments” (http://webaccessibility.jhu.edu/what-is-accessibility/).
Accessible Design Practices
When you practice inclusive or accessible design, you need to keep a few basic things in mind:
How do your pages look? Ask yourself whether there is enough contrast between colors. Are the colors different enough to be clear? How would a color-blind person perceive the page?
How usable are your pages? Consider whether your pages require a mouse, or can a keyboard navigate the links? Are the elements far enough apart to be clicked or tapped on for someone with reduced motor skills or even “fat fingers”?
How does your website sound? Think about whether sound is required to use your site. If someone used a screen reader, would all the content be available to them?
How complicated is your website? Consider whether a lot of steps are required to complete various tasks. Are there things that might be distracting or make it difficult to focus on the page?
The nice thing about accessibility is that you don’t have to make a lot of major changes to your website. You should just be aware of how your site might look or sound to someone with differing abilities to your own.
Here are the guidelines for building an accessible web page:
Provide equivalent alternatives for auditory and visual content—If you have video or sound content on your site, you should have a text version for screen readers to read. For example, if you have a video, it should have captions and you should write out the text.
Do not rely on color alone to convey information—You should also include text that provides the same information. For example, if you mark warning messages with a red background color, you should also include the word Warning on the page.
Use HTML, CSS, and JavaScript correctly, as per the specifications—Invalid code can cause problems for screen readers that might not be as current on browser trends. For example, even though you can write an HTML table without the closing </table> tag and have it render on most browsers, you should include the closing tag.
Clarify natural language usage—Be sure to identify the language of your web page with the lang attribute. For example, on an English language page, you should write <html lang="en">.
Make sure your tables are responsive—It’s best to use tables for tabular data rather than layout.
Provide alternatives for new technologies—Fallback options and alternative text are important.
Allow users to control time-related content changes—Blinking, rotating, and animated text and images can be difficult to read.
Design for device independence—Responsive web design accounts for a lot of this, but this also includes things like text links as an alternative to image maps and using the tabindex attribute to help people without mice tab between links.
Provide contextual information, even if you think it won’t be visible—Things like titles for tables and links, descriptive text, and alternative text all give assistive devices more information for your customers.
Use clear and consistent navigation structures—This includes links in the text of your pages. Remember that screen readers might read links as navigation and remove them from the context of surrounding text, so links that say only “click here” do not provide enough information.
Keep your pages as simple and clear as possible—This will ensure that they are easy for everyone to use.
The WAI-ARIA and Accessibility
WAI-ARIA is the Web Accessibility Initiative’s Accessible Rich Internet Applications Suite. It defines a way to make the Web more accessible to people with disabilities. This is done through the use of a number of attributes, and most ARIA attributes start with aria-*. Here is a list of the attributes most often used to create accessible pages:
aria-controls—This attribute tells assistive technology (AT) that the element is a control element. It contains the ID of the controlled element.
aria-describedby—This attribute tells AT where the descriptive text is. It contains the ID of an element that holds the descriptive text. For example, if you have a table and provide descriptive text in a <div id="tableDesc">, you point to it in the table tag: <table class="table" aria-describedby="tableDesc">.
aria-expanded—This attribute tells AT that the element is an expandable element like an accordion. Set it to true if the element is open or false if it’s closed.
aria-hidden—The aria-hidden="true" attribute tells the AT device that the element is hidden.
aria-invalid—If you have a form control that is invalid, you can assign the aria-invalid="true" attribute to let AT know that it is invalid.
aria-label—The aria-label attribute points to the ID of the element it is labeling. It is similar to the for attribute on <label> tags.
aria-labeledby—The aria-labeledby attribute points to the ID of the element by which it is labeled. It is similar to the aria-describedby attribute.
aria-pressed—The aria-pressed="true" attribute tells AT that a button with the .active state is pressed or active.
role—The role attribute tells the assistive device what the element’s purpose is. This is used to ensure that screen readers and other AT reference those elements correctly. It will not change how an element looks to non-AT browsers. For example, <h1 role="button">I am a Button</h1> will display as an <h1> headline, but AT will see it as a button.
title—The title attribute is an HTML attribute you can use to give any element a title. Some non-AT browsers will display the title on some elements, so be sure to test this.
There are many more ARIA attributes you can use to make your pages accessible.
Accessible Design in Bootstrap
Here are a number of things you can do with your Bootstrap web pages to start making your pages more accessible.
Avoid using pop-up windows as much as possible. Bootstrap does not provide any built-in plugins for pop-up windows, and the plugins it does provide keep accessibility in mind.
Use form labels and group form elements with the <fieldset> tag. It’s best if your labels come before the form fields. Bootstrap forms work best with the <label> tag, as you learned in Hour 9, “Styling Forms.”
Use placeholders in form input tags such as <textarea> and <input> until all user agents handle empty form controls correctly.
Use alternate text on all images, video, audio, and other plugins.
Provide text alternatives for tables.
Include non-linked space or text characters between adjacent links.
Skip Navigation
Skip links or skip navigation is an important part of an accessible web page design, especially in designs that contain a large group of navigation links at the top of the page. A skip link lets someone using AT skip the navigation and get directly to the content of the page. Bootstrap lets you easily create a skip link that is shown to only screen readers and other AT. Listing 22.1 shows how you would add a skip link.
LISTING 22.1 A Bootstrap Skip Link
<body>
<a href="#main" class="sr-only sr-only-focusable">Skip to primary content</a>
...
<div class="container" id="main" tabindex="-1">
<!-- The main page content -->
</div>
</body>
As is shown in Listing 22.1, the first thing inside the <body> tag is the skip link. This points to an anchor lower on the page. The classes .sr-only and .sr-only-focusable hide the link from browsers that are not screen readers (as you learned in Hour 13, “Bootstrap Utilities”). Then the first container is given the id of main, and that is where the link points.
Caution: Don’t Forget the tabindex Attribute
A few browsers (Chrome and Internet Explorer) will not focus on the skip link programmatically without the tabindex attribute. Leaving off the tabindex makes any in-page link you are using inaccessible for keyboard users, not just the skip navigation. So it’s a good idea to include it on any element where the id will be used as a link target. Bootstrap also recommends suppressing the visible focus indication on the target of your skip link with the CSS: #main:focus { outline: none; }.
Nested Headings
Even though HTML5 suggests that you can use the <h1> tag for every headline on a page using CSS to provide styles, it is better to use the <h#> tags in a hierarchy. The <h1> tag is first and should be the title for the entire page. Then use <h2> tags to title the page sections, with <h3> as subtitles and so on. If you keep these tags in a logical order, then screen readers can create a table of contents out of them.
Color Contrast
Many designers think of color blindness when they are designing their color scheme, but contrast can sometimes fall by the wayside. Some of the default Bootstrap colors have a low contrast ratio. The recommended minimum ratio is 4.5:1.
You should check the colors on the following Bootstrap elements to ensure that they have a good contrast ratio:
Highlighting colors for basic code blocks (refer to Hour 7, “Bootstrap Typography”)
The .bg-primary contextual background helper class (refer to Hour 7)
The default link color on a white background
Note: Bootstrap Is Always Changing
During the writing of this book, the Bootstrap customizer was changed to make the @brand-primary colors have better contrast. Bootstrap is constantly being updated and improved, so continue to check the site periodically.
Tricks for Making Bootstrap Sites Accessible
You can do a lot of things to make your Bootstrap CSS and components more accessible.
When you’re building forms, you should use labels with the <label> tag for every input field. But if you don’t want the labels to display, you can hide them with the .sr-only class as you learned in Hour 9.
With the .has-feedback class and the proper icon, Bootstrap fields will show a small icon on the right. But this is not accessible by itself. To make it accessible, you need to add both a text description of the icon and the aria-describedby attribute pointing to that description. Listing 22.2 shows that you can hide the description with the .sr-only or .sr-only-focusable classes.
LISTING 22.2 A Form Field with Icon Made Accessible
<div class="form-group has-success has-feedback">
<label class="control-label" for="fullname">Fill in Your Full
Name</label>
<input type="text" class="form-control" id="fullname"
aria-describedby="fullnameStatus" placeholder="Full Name">
<span class="glyphicon glyphicon-ok form-control-feedback"
aria-hidden="true"></span>
<span id="fullnameStatus" class="sr-only">(success)</span>
</div>
When using the Bootstrap Glyphicons, you can make them more accessible by adding descriptive text, but you should also hide them with the aria-hidden="true" attribute. Modern AT devices will announce CSS-generated content, like the Glyphicons, unless you explicitly hide it. But make sure if the icon is meant to convey meaning that you provide alternative text.
The Bootstrap navigation menus and navbars can be made more accessible by putting the role="navigation" attribute on the parent container element. This tells AT that the contained list is navigation. Be sure you do not put it on the <ul> element itself because this would prevent the device from announcing the list. Also, it’s best that the container element be an HTML5 <nav> element.
Give button groups a role of group and toolbars a role of toolbar. Then if you include an aria-labeledby attribute, AT devices will announce them correctly using the label.
You should always add the role="dialog" attribute to modals. Next, you should use the aria-labelledby attribute to point to the modal title. You also can describe your modal and use the aria-describedby attribute to point to that text. Use the aria-hidden="true" attribute to tell AT to skip the modal’s DOM elements.
Collapsible elements use the aria-expanded attribute. If the collapsed element is closed by default, it should have the aria-expanded="false" attribute. If it is open by default using the .in class, it should have the aria-expanded="true" attribute set. You also should place the aria-controls attribute on an element that controls one collapsible element. It should point to the ID of the collapsible element.
Summary
In this hour you learned what accessibility is when it comes to websites. You learned about the WAI-ARIA and basic accessibility principles. You also learned about how Bootstrap is set up to be accessible as well as some techniques for making Bootstrap sites more accessible.
You learned why skip navigation is important and how to build it. You learned how to create nested headings so that assistive technology can create a table of contents for your pages, and you learned about color contrasts and some places where the contrast is not ideal in the Bootstrap theme.
Workshop
The workshop contains quiz questions to help you process what you’ve learned in this hour. Try to answer all the questions before you read the answers.
Q&A
Q. Are there laws about website accessibility?
A. This depends on the country and municipality where you live. But most countries have laws requiring government and public sector websites be accessible. Additionally, some private companies have been sued because their websites were inaccessible.
Ultimately, you should not be making your site accessible because of fear of a lawsuit. Instead, you should keep in mind that accessibility is just a way of including more customers—and the more customers you have, the more business your website will do.
Q. Is there any special way to make video accessible?
A. Just like with images and other multimedia content, you should always have a transcript of the speech in the video. If you have audible content, then you should include a description of those sounds. The best way to get a transcript is to type it yourself or pay someone to do it. However, you can use software tools that use speech recognition. Captions also make videos more accessible.
Quiz
1. Which is more important: accessible design or inclusive design?
a. Accessible design.
b. Inclusive design.
c. They are both equally important.
d. Neither, you should focus on usable design.
2. Which of the following is NOT something you should consider when working on accessibility?
a. The design complexity
b. The number of images
c. Audio and video content
d. Colors
3. What makes this HTML less accessible?
<a href="page.html">Click here</a> to read more...
a. The link is too short to click on.
b. The link URL is not descriptive enough.
c. The link text is not descriptive enough.
d. The link doesn’t have a role attribute.
4. Which attribute points to the ID of a block of text that explains a nontextual element like a video?
a. aria-described
b. aria-describedby
c. aria-description
d. aria-label
5. Where do you place skip navigation?
a. At the very bottom of the HTML document, just before the </html> tag.
b. At the very bottom of the web page, just before the </body> tag.
c. At the very top of the HTML document, just after the <html> tag.
d. At the very top of the web page, just after the <body> tag.
6. Why do you need the tabindex attribute on in-page links?
a. Because some browsers won’t focus on in-page links without an explicit tab order.
b. Because it is a required attribute for AT devices to read links.
c. Because in-page links don’t work without it.
d. You don’t need the tabindex attribute.
7. True or False: Using headlines in a numerical hierarchy enables AT to create tables of contents for web pages.
8. What are ways that color can cause accessibility issues?
a. Colors that look similar to color blind people
b. Colors with too low a contrast
c. Colors that provide information with no fallback
d. All of the above
9. Which Bootstrap class allows you to hide content from all but AT devices?
a. .at-only
b. .at-visible
c. .sr-only
d. .sr-visible
10. What does AT stand for?
a. Accessible technology
b. Assistive technology
c. Assistive terminal
d. Accessible terminal
Quiz Answers
1. c. They are both equally important.
2. b. The number of images is not important to an accessible design, as long as they have alternative text or a defined role for AT.
3. c. The link text “Click here” is not descriptive enough.
4. b. aria-describedby
5. d. At the very top of the web page, just after the <body> tag.
6. a. Because some browsers won’t focus on in-page links without an explicit tab order.
7. True
8. d. All of the above.
9. c. .sr-only
10. b. Assistive technology
Exercises
1. Check how accessible your website is by testing the navigation using only your keyboard. Turn off or unplug your mouse, and then use the Tab key to browse the page and use the Enter key to select elements. Next, try to navigate through forms using the arrow keys. This is not a definitive accessibility test, but it can give you an idea of possible problems.
2. Find a color contrast analysis tool online, and test your site with it. A good one is the Colour Contrast Analyzer (http://www.paciellogroup.com/resources/contrastanalyser/), which has a Windows and a Macintosh version. It will test against recognized accessibility standards.