Web Editor Training

Data tables are fairly straightforward, but do require a bit of extra markup to be usable for all. 

• Optional: If not made obvious by intro text or a heading, a table needs a caption to explain its purpose. 
• Required: In the table markup...
  1. Vertical and horizontal headings need the "th" ("table heading") label rather than the "td" label, 
  2. and a "scope" label, which will either be scope="col" or scope="row"
• See more examples of markup in data tables. 

Back in the early (dark) ages of web design, tables and nested tables were often used as a rigid tool to force images and text into pixel-perfect layouts. Hopefully by this point you realize that's no longer the case, and in fact causes serious issues for users.

Web Content Accessibility Guidelines (WCAG) 2.0 puts forth specific guidelines for "A" (lowest), "AA" (mid-range), and "AAA" (highest) levels of conformance for accessibility. We aim for a AA level. For more specific information about this standard, visit the Web Accessibility Initiative. 

That said, many of the items we've already covered mean the key parts of these guidelines are taken care of! 

WCAG 2.0 upholds four principles. Content must be... 

1. Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

   • This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)

2. Operable - User interface components and navigation must be operable.

   • This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)

3. Understandable - Information and the operation of user interface must be understandable.

   • This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)

4. Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

   • This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)

You may already see some echoes of Universal Design values we covered previously. Below are some examples of what this means specifically for content creators.

Accessibility-specific concepts for content creators

If you've read the previous sections, much of this will be familiar!

1. Page structure
   1. Headings, good labels, and lists aren't just for easy reading: assistive devices rely on them. 
2. Alternative ways to consume media
   1. Meaningful alt text for images.
   2. Captions/transcript for videos. Learn more about captioning options at UVA.
3. Color and color contrast
   1. We didn't discuss this much because it's primarily handled at the template (CSS) level. But two key takeaways include: 
      1. Use more than color alone to convey meaning: someone who is colorblind may not be able to differentiate between "  result  " and "  result  "! 
      2. Color contrast
         1. A certain level of contrast between text and background colors is required for readability. 
         2. Test your contrast: https://webaim.org/resources/contrastchecker/
         3. But what if the background is a pattern or image? Use Photoshop to take an "average" reading. Instructions: Banner Image Specifications and Compliance Check
4. Tables
   1. Used only for data (never layout!). 
   2. Include correct markup for vertical and horizontal headings. 
5. Links
   1. Must make sense if taken out of context
      • Navigating between links is a key method, for example, for users who don't utilize a trackpad or a mouse. Make sure that link text is meaningful: it's all they get!
   2. If a link leads to a modal, it must freeze out rest of page so keyboard user can't get "trapped" 
      • This is a rather specific coding example and is only relevant if you're creating modals, but one that's a common weakness for sites. 
      • Find out more: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

For more info about accessibility at UVA, including training opportunities, visit UVA's Digital Accessibility resource.