BCcampus: Open Textbook Accessibility Webinar
•Download as PPTX, PDF•
1 like•435 views
The document provides guidelines for making open textbooks accessible. It discusses the four principles of web accessibility - perceivable, operable, understandable, and robust. It provides information on screen readers like NVDA and their keyboard shortcuts. It also provides tips for making documents accessible including using descriptive links and alt text, ensuring proper color contrast, using accessible tables, and evaluating accessibility with tools like WAVE.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to BCcampus: Open Textbook Accessibility Webinar
Similar to BCcampus: Open Textbook Accessibility Webinar (20)
More from BCcampus
More from BCcampus (20)
Recently uploaded
Recently uploaded (20)
BCcampus: Open Textbook Accessibility Webinar
- 1. Open Textbook Accessibility • Amanda Coolidge and Josie Gray • Victoria B.C. • December 6, 2016
- 2. Web Content Accessibility Guidelines (WCAG) Four Principles of Web Accessibility 1. Perceivable 2. Operable 3. Understandable 4. Robust Understanding Web Accessibility: http://courses.idrc.ocadu.ca/understandinga11y/ How to Meet WCAG 2.0: https://www.w3.org/WAI/WCAG20/quickref/
- 3. Screen Readers NVDA: http://www.nvaccess.org/ NVDA Keyboard Shortcuts: http://webaim.org/resources/shortcuts/nvda
- 4. “As a result of the ionic character, silicon becomes a cation (with a charge of +4) and oxygen becomes an anion (with a charge of –2).”
- 5. Document Structure - Headings In addition to facilitating formatting and styling, assigning heading levels to the subsections of a chapter allows a screen reader user to easily jump from heading to heading. Sample Markup: <h1>Chapter 1: An Introduction to Sociology</h1> <h3>Learning Objectives</h3> <h2>Introduction</h2> <h2>1.1 What is Sociology</h2> <h3>What are Society and Culture? Micro, Macro, and Global Perspectives</h3>
- 6. Accessible Links Descriptive • The text of a link should make sense when heard out of context Ex 1. “Click here for practise questions.” vs “Complete the practise questions.” Ex 2. “Open Google: https://www.google.ca” vs “Open Google: https://google.ca No new windows or tabs • Links should not open to a new window or tab but in the same page • replace target=“_blank” with target=“_self”, or delete target information Ex 3. <a href=“https://www.youtube.com” target=“_self”>YouTube</a> <a href=“https://www.uvic.ca”>UVIC Homepage</a> If opening a new window is unavoidable • If opening a new window in unavoidable, make it clear in the link what will happen Ex 4. <a href=“https://google.ca”>Google [New Window]</a> • If the link opens an unexpected page format, make that clear also Ex 5. <a href=“https://www.uvic.ca/humanities/history/assets/docs/Sample %20Qualicum%20Program%20-%202014%20Conference.pdf”>Sample Qualicum Program [PDF]</a>
- 7. Colour and Accessibility 1. Using colour to convey information. 2. Text- or image based content on a coloured or textured background 3. Links 0 1 2 3 4 5 6 Series 1 Series 2 Series 3 0 1 2 3 4 5 6 Series 1 Series 2 Series 3
- 8. Colour Contrast Download the Colour Contrast Analyzer: www.paciellogroup.com/resources/contrastanalyser/
- 9. Colour Contrast Download the Colour Contrast Analyzer: www.paciellogroup.com/resources/contrastanalyser/
- 11. Alt Tags and Screen Readers alt=“Rows of individual office cubicles”
- 12. Decorative/Non-Essential Images When not to include an alt tag Image courtesy of Wikimedia Commons. alt="" Vs. alt="""" Source: Introduction to Sociology 2nd Canadian Edition
- 13. Long Descriptions Alternate text description: A twitter post reading: 5 ways to help: call Egypt consul in SF, host petition on your blog, write a letter 2 editor, Digg the CNN story, email. In the replies, people are calling on authorities to release Mohammed, who was still missing. Limit alt tags to 100 characters (including spaces). If an image requires a longer description, provide a link to a long description.
- 14. Figure 8.9 These Twitter updates…. On the political stage. <a href=“#fig8.9”>[Long Description]</a> (Photo courtesy of….) <strong id="fig8.9">Figure 8.9 Long Description:</strong> A twitter post reading: 5 ways to help: call Egypt consul in SF, host petition on your blog, write a letter 2 editor, Digg the CNN story, email. In the replies, people are calling on authorities to release Mohammed, who was still missing. <a href="#attachment_119">[Return to Figure 8.9]</a>. Visual Appearance Text Editor
- 16. Tables and Graphs – Visual vs. Data Graphs showing trends – Prioritizing the visual Image courtesy of AltimeterGroup/Flikr alt="Statistics show that divorce rates in Maine and the consumption of margarine fell and rose at the same rate" Figure 2.7. Correlation does not imply causation
- 17. Tables and Graphs – Visual vs. Data Graphs showing trends and data – Providing options alt=“Marriage satisfaction. Long description available." Source: Introduction to Sociology 2nd Canadian Edition
- 18. Tables and Graphs – Visual vs. Data Graphs showing trends and data – Providing options
- 19. Tables and Graphs – Visual vs. Data Replacing Images of Tables with HTML Replace images of tables and graphs with HTML when there is nothing to be gained visually by the image. Source: Introduction to Sociology 2nd Canadian Edition
- 20. Tables and Graphs – Visual vs. Data Replacing Images of Tables with HTML
- 22. Accessible Table Markup <table> <caption>Table 10.1 Statistics such as infant mortality rate and life expectancy vary greatly by country of origin.</caption> <thead> <tr> <th>Country</th> </th>Infant Mortality Rate</th> <th>Life Expectancy</th> </tr> </thead> <tbody> <tr> <td>Canada</td> <td>4.9 deaths per 1,000 live births.</td> <td>81 years</td> </tr> <tr> <td>Democratic Republic of the Congo</td> <td>17.2 deaths per 1,000 live births.</td> <td>55 years</td> </tr> </tbody> </table>
- 23. Layout Table Markup <table> <tbody> <tr> <td><strong>Rank<strong></td> <td><strong>Year<strong></td> <td><strong>Month<strong></td> <td><strong>Date<strong></td> <td><strong>Stage (m) <strong></td> <td><strong>Discharge (m3/s) <strong></td> </tr> <tr> <td>1</td> <td>1948</td> <td>May</td> <td>31</td> <td>11.0</td> <td>15,200</td> </tr> … </tbody> </table>
- 24. Option to Skip a Table <table> <caption>Table 20.1 Varying Fertility… by Country<caption> <thead> <tr> <td colspan=“5”><a href=“#table20.1”>[Skip Table]</a></td> </tr> <tr> <th>Country</th> </th>Population (in millions)</th> <th>Fertility Rate</th> <th>Mortality Rate</th> <th>Sex Ratio Male to Female</th> </tr> </thead> <tbody> … </tbody> </table> <p id=“skiptable20.1”>As Table 20.1 illustrates, countries vary greatly….
- 25. WAVE Web Accessibility Evaluation Tool http://wave.webaim.org/
Editor's Notes
- Thank you for joining us today to listen to the exciting work that has been happening in the area of accessibility and open textbooks. As many of you know in 2014 Sue Doner, Tara Robertson and I created the BC Open Textbook Accessibility Toolkit. The purpose of the toolkit is to help instructional designers and faculty have a better understanding of how to make educational materials accessible. We conducted user testing with students who have a range of visual disabilities and from that user testing it was identified where we,as the open textbook project could make changes to ensure all of our open textbooks are accessible. We were able to work on a few of the books, but because of a small team, we had to put that project on hold until this fall when we hired Josie Gray, a History Major from UVIC. Josie has been instrumental in researching best practices in accessibility and in implementing many changes throughout the open textbooks to comply with accessibility standards. I would like to hand the presentation over to Josie who will be talking about the lessons learned with regards to accessibility and she will guide you through changes you can make to your own educational materials.
- WCAG is a set of Web Content Accessibility Guidelines which describe the minimum standards a web page must adhere to for it to be considered accessible. There are three levels: A is the lowest standard and AAA is the highest. When I first started my position at BCcampus, my first exposure to concepts of web accessibility was WCAG. There are four principles of web accessibility: Content must be Perceivable – That is, information and user interface components must be presented to users in ways they can perceive. This involves things like text size, colour contrast, and text alternatives for images. User interface components and navigation must be Operable. Users must be able to navigate around the page and access all information. Content must be Understandable – This principle expands on Principle 1 and 2. Just because a user can perceive and use the content on a webpage, does not guarantee they can understand it. Robust – The content is displayed and functions as it is supposed to and the markup has little to no errors. I’ve provided two links to helpful resources when getting started with web accessibility. The first, Understanding Web Accessibility, is an open, self guided course that walks you through the four principles of web accessibility and their specifics. The second, How to Meet WCAG 2.0, allows you to filter the guidelines for levels (A, AA or AAA) and the specific aspects of accessibility you are focused on. For example, if you only want to know how to make web links conform to WCAG AAA, you can select “Links” and “AAA” in the filter window in the left side of the screen and it will show you the specifics for only that. Ultimately, I am presenting on web accessibility in the context of online textbooks. The practises described in the following slides will help improve accessibility for people who access BCcampus‘ textbooks in all types of formats, including on the web, PDF, Mobi, epub, and word files. For BCcampus’ textbooks, we decided that WCAG level AA would be the standard we would conform to. I won’t go into too much detail about the specifics of WCAG specifically because a lot of it is not relevant to online textbooks. Instead, I will use examples from textbooks I have worked on to illustrate potential problems that are common in these textbooks and demonstrate the solutions I have developed.
- I used a number of tools to help me test for potential accessibility issues and they will be described more later on. However, becoming familiar how a screen reader works and ensuring that all of the important information can be accessed when using a screen reader proved to be absolutely vital to the accessibility editing process. The way screen readers present information can be quite different from how visual users are used to accessing information and once I became for comfortable with using a screen reader, I realized how much I took for granted as a visual user and the many barriers a non-signed user faces when accessing web contenet. I spent a lot of time learning how to work NVDA, which is an open source screen reader available for download on any Windows computer. I’ve attached links to the NDVA webpage where you can download the software and also a page which provides a list of keyboard shortcuts that help you navigate with NVDA. Other Screen Readers include JAWS, VoiceOver, and Windows Eyes. Once I figured out how to navigate through the textbooks using NVDA and a keyboard, I began to realize that there was a lot I could do to make navigation easier. In addition I found things what I assumed would be accessible to everyone, but clearly would not be for screen reader users. For example, the Physical Geology textbook has a large section on elements and chemical formulas.
- Here is a sentence from the text book: As a result of the ionic character, silicon becomes a cation (with a charge of positive 4) and oxygen becomes an anion (with a charge of negative 2). However, when a screen reader reads this sentence it says, “As a result of the ionic character, silicon becomes a cation with a charge of plus 4) and oxygen becomes an anion (with a charge of 2).” Instead of saying positive 4 and negative 2, it reads a plus sign and ignores the negative sign which it interprets as a dash. This is a huge problem for screen reader users because not only does it makes the sentence confusing, it also makes it wrong. This is an issue which I am still trying to figure out how to fix. However, I bring it up to illustrate how important it is to use a screen reader to test for accessibility for sighted users, who might not otherwise notice barriers that exist only for non-sighted users.
- Headings are important because they help identify the structure of a document such as sections and sub-sections. Headings provide a visual cue that helps sighted readers quickly skim through content until they find a section they are looking for. Similarly, non-sighteds users can navigate a page or document easily using a screen reader by jumping between headings. While changing the font and type size of text may be enough for a sighted reader to comprehend divisions in the document, a screen reader wont identify bolded or larger text as a heading. Instead, a screen reader will just “read” through the text of a heading as if it were part of another paragraph of content. Screen readers can jump from heading to heading in a document by pressing the [H] key. For example, this is what it would a screen reader user would hear if they wanted to jump from heading to heading in Chapter 1 of Introduction to Sociology: “Chapter 1: An introduction to sociology heading level 1. Learning Objectives heading level 3. Introduction to sociology heading level 2. 1.1 What is Sociology Heading level 2. What are Society and Culture? Micro, Macro, and Global Perspectives heading level 3, etcetera. By marking up the subsections of this chapter, a screen reader user can skip from heading to heading to get an idea about what the chapter is about, understand how the different sections relate to each other, and skip the parts that they want to read. Without headings, a screen reader user would be forced to read the entire chapter through from beginning to end every time they wanted to find specific information on a page.
- Links are fairly straightforward. The two main requirements are that they are descriptive and that they don’t open in any new windows or tabs. Like headings, screen reader users can use the [Tab] key to jump between links on the page. For this reason, the text of a link should be able to describe the content of the link when read out of context. While things like “click here for practise questions” would make sense to a sighted reader, if a screen reader user tried to skip through the links, all they would hear is “Link: here” and would have no idea about the content of the link. This can be fixed by making the link text “practise questions” as shown in the first example. The second example shows the web address as the linked text. While it is better than the first example, it can still be confusing when a screen reader reads out a web address, especially if it is long and complicated. If it is important to include the web address (such as when there is a possibility of the page being printed), then put the hyper link on the words that describe the link and provide the unlinked web address next to it. Links should not open into new windows or tabs as it can be disorienting and confusing if the user – sighted and non-sighted – is not expecting it. The only time a link will open in a new tab is if its markup contains target=“_blank”. To ensure a link will open in the same page, either delete the target information completely or replace _blank with _self. If opening a link in a new window is unavoidable, or if the file being liked to is in a different format which requires a new window – such as a PDF – that should be indicated in the link, as shown in example 4 and 5. If a screen reader user was to use the tab key to skip through the links on this slide they would hear, “Link here. Link practise questions. Link https://www.google.ca. Link Google. Link YouTube. Link UVIC Homepage. Link Google New Window. Link Sample Qualicum program PDF. In addition, although links are usually identified by their colour, it is best if there is some other visual marker that helps people identify links located within text. This is most easily accomplished by underlining the link, as shown in the above examples.
- Paying attention to the use of colour and colour contrast in web content is important for people who have low vision, poor contrast vision, are colour blind, or for those who use a device with a monochrome display. WCAG 2.0 sets a standard for colour contrast at A, AA, and AAA levels and generally recommends that information never be conveyed by colour alone. For example, in the two graphs pictured here, information is conveyed by colour alone. When seen in black and white, it becomes really difficult to tell which bar corresponds with which series. This may be a serious barrier for someone who has a hard time differentiating between colours for whatever reason. As a general rule, it is best practice to never use colour alone to convey information.
- Adequate contrast between colours is important for people who have poor eyesight or are colour blind. This Colour Contrast Analyzer shown in the screenshot can be downloaded for both Windows and OS X systems. It evaluates the contrast of two colours based on standards set by WCAG 2.0 at both AA and AAA levels. This tool is useful because you can select colours from a palette and it will provide the corresponding HTML colour codes or you can enter the colour codes and it will show the colour. In addition, it tells you the colour contrast between selected colours and whether it passes or fails at various levels. When I first started, this is what table headings in our open textbooks looked like. The light grey text on an even lighter grey background made the table headers quite hard to read, with a colour contrast ratio of only 3 to 1. As you can see the in Colour Contrast Analyzer, that fails both AA and AAA levels. For level AA, the minimum contrast ration for regular text is 4.5:1 and large text can have a contrast ratio of 3:1. The required contrast ratio is larger for level AAA.
- I brought the colour contrast problem to the person who looks after the CSS code for open textbooks and was able to increase the colour contrast ratio between the background colour and text. This is what our tables look like now. The black on light grey has a colour contrast of 11.5 to 1, so tables now satisfy both AA and AAA levels of WCAG in regards to colour contrast.
- Providing an alternate text description for images will ensure screen reader users, or those whose computers will not load the images, can still access all of the important information in an image. I will describe what the markup looks like and how screen readers interpret images and alt tags, what to do with decorative images that convey no useful information, how to provide a link to a long description, and what to do with tables and graphs presented as images.
- Alt tags are absolutely vital in web accessibility. When a screen reader comes across an image, it reads out the content of the alt tag and then continues on with the text. In this case, a NVDA screen reader would say “Graphic: Rows of individual office cubicles. Figure 2.16: Field research happens in real locations. What type of environment do work spaces foster? What would a sociologist discover after blending in?”
- There are many cases where an image doesn’t need an alternate description. This may be when an image is purely decorative or when the content of the image is already adequately described in the caption or surrounding text. This picture of Emile Durkheim, while interesting to a sighted user, provides no useful information. The caption already tells us who is pictured and in this context, his appearance is insignificant. When no description is required, leave the alt tag blank – do not delete it. When a screen reader comes across a blank alt tag, it knows to skip the image. However, if the image lacks an alt tag, a screen reader will read out useless information like the source file name. From all that I have read, if an image can be skipped, the alt tag should be empty like the first example with two quotation marks. However, through my experimentation with NVDA, that still causes the screen reader to read out the file information. I've solved the problem by having an extra two quotation marks within the alt tag the second example. In this case, an NVDA screen reader would say, “Graphic. Figure 15.16 Emile Durkheim (1857-1917)”
- Screen readers do this really annoying this where they say “graphic” again after a certain number of characters when reading out the alt tag. For example, the alt text for the above image is quite long – over 250 characters (including spaces). If left in the alt tag, a screen reader would likely interrupt the flow of text at least twice to say “graphic” which can be confusing. To avoid this, I create a link to a long description which is located at the end of the chapter. There are a few websites online which talk about how to do long descriptions – supposedly there is or used to be a <longdesc> tag – but I wasn’t able to find anything that worked. Instead, I developed my own way to provide long descriptions. This process does require a certain knowledge and comfort with HTML.
- Using the twitter post from there previous slide as an example, here is how to use HTML to link to a long description. I’ve divided the slide by how it looks visually in the textbook and what the markup would look like in a text editor. The first row shows the image caption. On the left, you can see the caption followed by a link that says long description. The right shows the link markup. The <a> tag is a link tag and the href attribute provides the location of what you are linking to. Because the link is on the same page, there is no need to provide a web address, just a unique ID. In this case, I chose “fig8.9,” to keep it simple. The second row shows the long description which is located at the end of the chapter but on the same page. The link id can go in any tag. In this case, I put it inside the strong tag. Although created for non-sighted users, any digital user of the textbook can click on this link to access the long description. People using printed versions can also access the long description; they just have to flip to the end of the chapter to find it. At the end of the long description, I’ve also provided a link back to the image. This makes it easy for a screen reader user to tell when the long description is done, and allows all users to easily return to their place in the chapter.
- When presented as images, the data in graphs and tables is completely inaccessible to non-sighted users. In the example above, the small text size and low colour contrast may also be an obstacles for people with colour blindness or who have poor eyesight. There are three possible solutions: Describe the table in the alt tag or link to a long description. Link to a long description where there is the table or graph in HTML. Replace the table or graph completely with an HTML table. The best solution depends on the table or graph and what is most important about it. I will go through three examples that are applicable to each solution.
- This image shows a graph comparing the divorce rate in Maine to the per capita consumption of margarine. The caption explains that “Correlation does not imply causation.” In this example, the visual trend of the graph is more important than the individual data points. The rate at which they fell from 2000 to 2005 does not matter as much as the fact that the graph shows them falling and rising again at almost exactly the same rate. Instead of replacing this image with a data table, a short description describing the point of the image is more useful. In this case, an NVDA screen reader would say: “Graphic. Statistics show that divorce rates in Maine and the consumption of margarine fell and rose at the same rate.” Figure 2.7. Correlation does not imply causation.”
- This table shows the number of husbands and wives in different stages of family life who described their marriage as “highly satisfying.” In this case, while the visual graph is useful for sighted users, it would be quite difficult to describe in an alt tag. The best solution here is to provide an accessible table based on this graph in a long description. Although created for non-sighted users, any digital user of the textbook can click on this link to view the html table. This table’s use of colour also poses another accessibility issue. Notice how the “Husbands” and “Wives” lines are differentiated only by colour? For people who are colour blind, it may be impossible to tell which line refers to whom.
- Here is the table I produced based on the previous image. Although it doesn’t show the trends visually, it allows non-sighted users to judge the statistics for themselves and to see the differences between genders – both of which would be near impossible without a page long alternate text description. By linking to this table from the original image rather than replacing the graph, visual users lose nothing. In addition, I added what each of the Stages signify, which was omitted from the original image. The stages are described earlier in the chapter, but by putting that information right into the table, I save anyone using this table from having to go back to try to find that information.
- Images of data tables, like the one pictured here, that offer nothing visual for sighted users should be replaced directly in the text with an HTML table that can be accessed by screen readers.
- This is a screenshot of a table that can now be found in the sociology textbook. As very little has changed visually, there was no reason to keep this table’s image in the book. I will cover how create accessible tables next. This is an example where an accessibility edit can have more than one benefit. Not only can screen reader users now access the data in the table, it will also make the table easier to read in other formats.
- Again, creating accessible tables does require some comfort with html. Depending on how the table is formated will determine how a screen reader will read it out. Ultimately, there are two types of tables: Lay out tables, which screen readers read out from left to right, top to bottom. And data tables, which are still read from left to right and top to bottom, but the screen reader will continuously refer back to the table headers that correspond to the data. I’ve listed some useful tags and attributes to remember.
- Here is an example of an accessible table and its corresponding markup (I’ve left out the third row to make it all fit). Notice how all of the elements of the table are identified with specific tags. The title of the table is in the <caption> tag marked in green, the table headings are in th tags (marked in orange) which are grouped together by thead tags in pink. The data of the table is contained in td tags (purple) which are grouped within the tbody tags (blue). The entire table is encompassed by the <table> tags (brown). These tags make a huge difference in how a screen reader will read out a table. Like heading levels and links, screen reader users can also jump between tables on a page using the key board. If a table has a caption tag, the screen reader will tell the listener what the name of each table is. This is what it would sound like if a screen reader read out the first two rows of this table: “Table 10.1 Statistics such as infant mortality rates and life expectancy vary greatly by country of origin. Central Intelligence Agency, 2011. Table with 4 rows and three columns. Row 1 column 1 Country. Column 2 Infant Mortality Rate. Colum 3 Life expectancy. Row 2 Country column 1 Canada. Infant mortality Rate column 2, 4.9 deaths per 1,000 live births. Life expectancy column 3, 81 years.
- This is an example of a data table that has been marked up as a layout table. All of the cells are marked as data cells. The <strong> tag bolds the words in the first row, which tells sighted users that those words represent table headings. However, <strong> tags mean nothing to screen readers and a screen reader will simply read the contents of the cells all the way through, from right to left, row by row. By reading the information this way, the data becomes meaningless. For example, a screen reader reading the sixth row would say, “row six column one, 5. Column two, 1977. Column three, June, Column four, 5. Column five, 9.5. Column 6, 11,300.” It would be up to the listener to remember what each column refers to. In addition, the caption is located at the end of the table without any markup that shows it is associated with the above table.
- Here is the markup showing how to provide a link to skip the table. Options to skip a table are helpful for screen reader users who would otherwise have to listen to the screen reader read out each and every cell. This is especially important when there are large data tables containing information that while interesting, might not be useful or important. As you can see on the left, I left out the body of the table to save space. The [Skip Table] link is placed within the thead tags, but in a row before the table header content. As it is not a header itself, it is put in a data cell, or a <td> tag, not a header cell. The colspan=“5” attribute allows the cell to span all five columns. Without it, the [Skip Table] cell be stuck above “Country.” The reason I’ve placed the link within the table itself, rather than right before it, is because this way the caption will be read first so someone using a screen reader will know the content of the table before being given the option to skip it. A screen reader would say something like this: “Table 20.1 Varying Fertility and Mortality Rates by Country. (Chart Courtesy of CIA Worl Factbook 2014). Table with six rows and five columns. Row 1 column 1. Link Skip Table. Out of table. As Table 20.1 illustrates, countries vary… The link itself is created in the exact same way as links to long descriptions are created. Come up with a unique id. In this case, I used “table20.1”. In this case, I am linking to the paragraph immediately after the table, so I put the id in the p tag that contains that paragraph. The id can go in any tag, including heading tags, other table tags, and strong tags – it just depends on what kind of text immediately follows the table.
- WAVE is a tool I use to test the textbooks I am working on to help me catch things I might have missed. It is easy to use and although it not perfect, it is quite comprehensive. All it requires is a web address. In this case, I am linking to Chapter 16 of the Intro to Sociology book. Wave can be accessed at wave.webaim.org.
- Here is a screen shot of what comes up immediately after providing a link. As you can see, this tool will label the page with features and problems it identifies. This makes it easy to visually evaluate the page without having to comb through the HTML markup to find things you might have missed. On the left, WAVE provides a summary of Errors, Alerts, Features, Structural Elements and more. To see a detailed report, click the flag along the left side, to switch from the Summary to Details about specific aspects of the web page.
- The details section names features and potential errors and alerts and provides links to those problems. For example, the screen shot on the right describes the features of the webpage. In this chapter, there are 8 images with alternative text. By clicking on one of those green boxes, I can quickly skip between those images.
- Wave allows you to see the content of the alt tag which is normal not visible on the webpage. In this case, I can easily make sure the caption, the image, and the alt tag fit together.
- Here, you can see that Wave has labeled various aspects of the web page. Pictured here are two headings and two unordered lists.
- Wave will also alert you to all links that are PDFs. Here, you can see that I have already gone though and added [PDF] to the link text.
- If a table has been marked up properly, Wave will identify all of its components including the caption, table headings.
- In contrast, if a table has not been marked up with accessibility in mind, Wave wont mark it as an error but as a “Layout table.” As previously mentioned, screen readers read layout tables different than data tables.
- In the panel on the left, you can see that WAVE has identified 9 alerts regarding the alt text of images. By clicking on one of those errors, I am redirected to the above image. This image has been marked as having “redundant alternative text” and “long alternative text.” In this case, the alternate text is exactly the same as the figure caption and is 162 characters long. To fix it, I would likely edit the alt tag and provide a link to a long description that described the graph.