Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Accessibility on the web has been an issue for over a decade, and it remains a crucial--but often overlooked--element of web design. Instructor Zoe Gillenwater explains the concept of accessibility as it applies to the web, and describes how it affects the audience. She also covers how to set up accessibility testing, and how to apply accessibility principles to new and existing sites using standards-compliant markup and CSS. Exercise files accompany the tutorials.
>> The size of the text and its ability to resize is not the only aspect of its style that effects how easy it is to read. The amount of contrast its color has compared to the background color is also very important. Let's look at how color contrast is measured, see if our page has sufficient color contrast so far and make changes where necessary. Color contrast is not specifically mentioned in section 508, but it is part of WCAG 1.0 and 2.0. in WCAG 1.0 the standard states ensure that foreground and background color combinations provide sufficient color contrast when viewed by someone having color deficits of when viewed on a black and white screen.
No actual measurement is given in the standard so we have no way of knowing what sufficient contrast means. There are a couple of ways of measuring color contrast that are currently being proposed. WCAG 2.0 sets a luminosity ratio that must be met. It states that the contrast ration of text and background must be at least five to one, except if the text is pure decoration. For larger scale text, which is text that is 18 points or larger, or if it's bold, 14 points or larger, it could have a ratio of three to one.
Another working group within the W3C, the Accessibility Evaluation and Repair Tools, or AERT, developed their own way of testing color contrast by looking at the difference in brightness and the difference in color. AERT recommends a difference in brightness of greater than 125 and a difference in color of greater than 500. It's not important to know the actually algorithms used to measure color contrast in both of these standards as we can use the analyzer tools that we downloaded and bookmarked in an earlier chapter to test this.
Remember also that neither one of these are recommendations yet, so you don't have to comply with them, but they are useful to look at so they give us concrete numbers to test with and get an idea if our text is pretty high contrast or pretty low contrast and we can start preparing for whatever standard is ultimately adopted. If you're following along with the exercise files, open the page visitors.html in Firefox. It's in the 04_07 folder of the chapter four exercise files. This is the same page that we've been working on throughout this chapter.
Let's take a break from styling this page to check our existing styles and see if they meet color contrast guidelines. We can use the color contrast analyzer extension that we previously downloaded into Firefox to test this. To access the tool, right click if you're on Windows or control click if you're on a MAC, on the page. This brings up a Context menu. Scroll down and select color contrast analyzer. You have the option of testing against both of the guidelines that we just talked about. Let's choose all tests.
This opens a new tab with the results of our test. Every text element on the page is analyzed for its contrast between foreground and background. The names of the elements that were tested are listed along the left side of the results table. You can also see a sample of the foreground and background colors used for each element. Any elements that do not pass all three of the test will have a yellow highlight to their row in the report. The details of which tests we passed and failed are given in the last three columns of the table.
It passes the luminosity contrast ratio tests. It also passes the difference in brightness test. But, if fails the difference in color test. However, it's very close to the guideline value of 500, so we might not have to change the color values too much in order to pass this test. Scroll down the page to see all of the results. The second row from the bottom is for the heading within the footer. We're not going to worry about passing or failing its test since it is not visible on the screen.
Other than that heading, most of these headings are pretty close to the values needed to pass, so let's go into Dreamweaver and change our color values just a little bit to see if we can make the contrast a little bit greater. I have the same file, visitors.html, open in Dreamweaver. Open the CSS styles panel and scroll through the list of styles at the top. Choose the H1 rule. We need to modify its color, so click on the color value.
Highlight over the numbers that are currently being used and delete them then type 195F6E. This color is also from the logo of the site, the darker color used in the flowers of the logo. Hit enter or return to accept this value. You can see that our H1 text is now a little bit darker. Go back into the CSS styles panel and click on this color again. Hit control C or command C on your keyboard to copy the value then click on the H2 rule above, now select its color value and hit control V or command V to paste in the new value.
Finally, select the H3 rule above. Click on its color value and again press control V or command V then press enter or return to accept the value. Scroll down the page in design view to see the change in our headings. The color isn't too far off from what it was set to before, but it might be enough to help us pass all three tests. Go to the File menu and save the page.
Then go back to Firefox, click on the tab where the visitor's page is still open and hit the reload button for it to show the new changes to the page. We can now run the color contrast analyzer again. Right click or control click on the page and select color contrast analyzer from the menu then all tests. This time you can see that the only row highlighted in yellow is the header and footer.
Since this is not visible, we don't need to worry about it. We've passed all the other tests for all the other text on the page, so our page is now at a point where it has the basic structure and styles for the text in place and tested. There are a number of other HTML elements related to text that we can add to the page to enhance its accessibility. In the next few movies we'll go over the HTML for creating emphasized text, quotations and lists.
There are currently no FAQs about Web Accessibility Principles.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.