91·çÃùÄñ³ª

Updating the College's websites

Through the College's (WAM), you are able to edit your:

• Profile pages (Academics, Experiment Station, Extension)
• Publication / scholastic works pages (Academics, Experiment Station, Extension)
• Program pages and subsites (Experiment Station, Extension)
• Directory listings (Experiment Station, Extension)

For help updating web content hosted outside of this system (e.g. academics webpages), request marketing support.

Website marketing strategy

See the College's digital marketing guide.

Logging in

You log in with your full email address and your password, not your NetID. If you ever forget your password, click the reset password link to set a new one.

Required training

The University requires anyone creating online content, such as for websites, social media, WebCampus courses, emails, etc., to complete Basic Web Accessibility Training annually. Between trainings, reference the web accessibility cheat sheet.

How to update your profile page

Adding a profile photo

1. Open a web browser (e.g., FireFox, Chrome, Oprea, etc.) and log into the .
   1. If this is your first time logging into the system, then put your University email (@unr.edu) into the Username box and click RESET Password. Follow the instructions that are emailed to you, then log in with your new password.
2. Click Profile Photos.
3. Scroll down to see bad profile photo examples and good profile photo examples. Choose a profile photo that follows the good examples.
   1. If you need help getting a photo that follows the good examples, contact the Communications Team and we will help put you in touch with someone to take the photo.
4. Photos should be:
   1. 640x640px (1:1 ratio).
   2. Jpeg/jpg.
   3. Less than 800Kb.
5. Click Choose File and upload your properly-sized photo.
6. Add alt text (you can just put your name here).
7. Click Upload Image.

Adding and updating profile information

We encourage you to fill in as much information as possible, as more information is better; however, you can keep it simple to get started.

Tip: Pull up your LinkedIn profile. Many of the fields are the same, so you can just copy-paste.

1. Before logging into the Personnel Management System, create a Word document that includes:
   1. A short description – this is a couple of sentences about your specialties and areas of expertise. This shows up as part of a search engine's description of the link to your page. Limit 670 characters including spaces (approximately 100 words).
      1. The website’s search engine looks at this box, so include keywords related to your specializations and areas of expertise.
   2. A longer, general description – more details about your current efforts. What cool things are you doing in research, teaching and outreach?
   3. A list of keywords
      1. List your keywords left-to-right in order of priority and importance.
      2. Include words that a general audience might Google.
      3. Include common misspellings of keywords.
      4. Include words that might be used in-house, such as jargon and acronyms.
      5. Include your first and last name, including common misspellings.
   4. Optional:
      1. A list of earned honors and awards.
      2. A list of non-job-related volunteer activities (called “Community Service” in the form).
      3. A list of accomplishments.
2. Open a web browser (e.g., FireFox, Chrome, Oprea, etc.) and log into the .
3. If this is your first time logging into the system, then put your University email (@unr.edu) into the Username box and click RESET Password. Follow the instructions that are emailed to you, then log in with your new password.
4. Click Profile Information.
5. Check your general information. Pay special attention to your name, department, position and title. Otherwise, you may be listed as a classified accountant 1, as it sometimes defaults to alphabetical order.
   1. Most people have a working title they want seen instead of the classified or faculty title. To update it, you must have "Yes" selected from the Alternate Title dropdown. WARNING: the alternate title will display instead of the classified or faculty title, so if you want both the working title and the other title displayed, type both in the Alternate title space (e.g. Professor and Extension Educator).
6. CLICK SAVE INFORMATION AT LEAST ONCE PER HOUR – the system will kick you out if you appear “inactive” for an hour, and it doesn’t recognize typing in the description boxes as being active. Saving will remove you from the page – simply click Return Main Menu at the top left of the button ribbon, then click Profile Information.
7. Input relevant education information.
8. Select all relevant program areas – this lets people find you when they find stuff related to you.
9. In the short description box, copy-paste your pre-written short description with no formatting.
   1. Keyboard shortcuts:
      1. Windows: Ctrl + Shift + v
      2. Mac: Command + Shift + v
10. Copy-paste your pre-written list of keywords.
11. Copy-paste your pre-written long, general description with no formatting.
12. List college courses you teach in the "Detailed Description of your teaching efforts" box. If you don't teach a college course, leave this box blank.
13. Copy-paste your optional sections with no formatting.
14. Click Save Changes.

How to create or edit an Extension program page

Adding a new Extension program page

1. Before logging into the , create a Word document that includes:
   1. A short program description – this gives end users a quick summary of what the program is about. Limit 670 characters including spaces (approximately 100 words).
   2. A long program description – for most programs, this is the program’s main webpage. It can include details about the program’s activities, upcoming classes, accomplishments and achievements, impact statement, history, etc.
2. , log into the .
3. Click Extension Programs.
4. Click Add New Program.
5. Add the program title.
6. Copy-Paste your short and long descriptions with no formatting; you can reformat afterward. WARNING: Microsoft Word is weird and failure to remove formatting may break accessibility, which means your publication may not be approved for posting to the website.
   1. Keyboard shortcuts:
      1. Windows: Ctrl + Shift + v
      2. Mac: Command + Shift + v
   2. To preview, click Save at the bottom left of the page, then within the Edit Program page, click Preview in the button ribbon at the top.
   3. CLICK SAVE CHANGES AT LEAST ONCE PER HOUR – the system will kick you out if you appear “inactive” for an hour, and it doesn’t recognize typing or formatting in the Long Description box as being active. The button is at the bottom of the page.
   4. The University-required annual training for people who create, edit or post content online will help you in making the webpage version of your publication accessible. Log into  to take the training online or visit Teaching & Learning Technology's website to enroll in an in-person session.
7. Add keywords
   1. List your keywords left-to-right in order of priority and importance.
   2. Include words that a general audience might Google.
   3. Include common misspellings of keywords.
   4. Include words that might be used in-house, such as jargon and acronyms.
   5. Include last names of program leaders and contacts, including common misspellings.
8. Select all relevant website areas – this lets your program show up on related pages.
9. Optional: If your program does have a separate website, you can add the website’s link to the Outside Link section.
   1. If the somewhere else on the web is an Extension website (e.g. livingwithfire.info), it must be accessible.
10. When the page looks the way you want, Click Submit for Review at the bottom right of the page. The communication’s team will receive an email asking them to review your submission for ADA compliance. If it passes, they will allow the program to show up on the website. If not, they will let you know that changes need made.

Editing an existing Extension program page

1. Follow steps 1-3 for Adding a new Extension program page.
2. Find the program you want to edit in the list. Click Edit in the left column.
3. Make edits using steps 5-10 for Adding a new Extension program page as a guide, plus any steps for embedding photos.
   1. To preview, click Save on the bottom left of the page, then within the Edit Program page, click Preview in the button ribbon at the top.
4. When the page looks the way you want, Click Submit for Review at the bottom right of the page.

Adding a calendar widget to an existing Extension program page

1. Visit the University's  link.
2. In the Template dropdown, select Default. (Other selections are not accessible and must not be used.)
3. In the Number of Results field, type 50. This is the maximum number of results that the widget can display.
4. In the Days Ahead field, type 365. This is the maximum number of days that the widget can display.
5. Configure the widget to display only the events related to your program by doing one of the following:
   1. In the Groups dropdown box, select the unit or department for which you are building this widget.
   2. In the Group-Specific Special Topic dropdown box, select the relevant offices and programs. If there is not one specific enough to your program, you can narrow things down further by using the Keywords and Tags box.
      1. If using the Keywords and Tags box, be sure the keyword you enter is unique enough that no other Extension or University program would use it. If the keyword is not unique and it is used by other Extension or University programs, their events will be pulled by the widget onto your program page.
   3. In the Content Must Match dropdown, select At least one place, group, keyword or tag, and one filter item.
   4. In the Widget Type dropdown, select List. (Other selections are not accessible and must not be used.)
   5. In the Style dropdown, select Classic. (Other selections are not accessible and must not be used.)
   6. Click Preview Widget. A new browser tab will open. It will show which upcoming events your widget will pull.
      1. Troubleshooting: If an event should appear here, but it doesn't, check that it's been posted to the calendar. Then, check that it's been tagged with the correct Groups, Group-Specific Special Topics, and Keyword and Tags. There is a delay from when you post or update an event to when the widget code will show it. You may have to wait awhile and press refresh a few times. If that doesn't work, check that none of the widget builder's Excluded Content boxes are completed. If that doesn't work, try different Content Must Match selections.
   7. Once you get the preview to pull events like you would like it to, click Generate Embed Code. Keep this window or browser tab open.
   8. , log into the .
   9. Find the program to which you want to add a calendar widget in the list. Click Edit in the left column.
   10. In the Long description buttons, click Source. This will show you in the text of the Long description box all of the code and content on your program page.
   11. Highlight all of the text in the Long description box, copy it and paste it somewhere safe. The database does not save backup copies of your program webpage. You want to have a copy to restore if adding the widget doesn't go as planned.
   12. Click Source again. This will show you the look and content of your program page.
   13. At the end of the content there (you may have to scroll down in the box), click into the box and type in the box the heading for your calendar. For example, Upcoming Events.
   14. Use the Long description buttons' Format dropdown box to set the appropriate heading level for the heading of your calendar.
   15. Click Source again. Keep this window or browser tab open.
   16. On your other window or browser tab that you kept open from Step 7, click in the Widget Embed Code box, highlight all of the code there and copy it.
   17. On your program website window or browser tab that you kept open from Step 15, scroll all of the way down to the end of the content there below your calendar heading from Steps 13-14. Paste the widget embed code. It should look something like this.

       <div id="localist-widget-70628945" class="localist-widget"></div><script defer type="text/javascript" src="https://events.unr.edu/widget/view?schools=reno&days=31&num=50&container=localist-widget-70628945&template=modern"></script><div id="lclst_widget_footer"><a style="margin-left:auto;margin-right:auto;display:block;width:81px;margin-top:10px;" title="Widget powered by Localist Event Calendar Software" href="https://www.localist.com?utm_source=widget&utm_campaign=widget_footer&utm_medium=branded%20link"><img src="//d3e1o4bcbhmj8g.cloudfront.net/assets/platforms/default/about/widget_footer.png" alt="Localist Online Calendar Software" style="vertical-align: middle;" width="81" height="23"></a></div>

   18. Delete this part of the code that you just pasted:

       <div id="lclst_widget_footer"><a style="margin-left:auto;margin-right:auto;display:block;width:81px;margin-top:10px;" title="Widget powered by Localist Event Calendar Software" href="https://www.localist.com?utm_source=widget&utm_campaign=widget_footer&utm_medium=branded%20link"><img src="//d3e1o4bcbhmj8g.cloudfront.net/assets/platforms/default/about/widget_footer.png" alt="Localist Online Calendar Software" style="vertical-align: middle;" width="81" height="23"></a></div>

   19. To preview, click Save at the bottom left of the page, then within the Edit Program page, click Preview in the button ribbon at the top.
   20. CLICK SAVE CHANGES AT LEAST ONCE PER HOUR – the system will kick you out if you appear “inactive” for an hour, and it doesn’t recognize typing or formatting in the Long Description box as being active. The button is at the bottom of the page.
   21. When the page looks the way you want, Click Submit for Review at the bottom right of the page. The communication’s team will receive an email asking them to review your submission for ADA compliance. If it passes, they will allow the program to show up on the website. If not, they will let you know that changes need made.
       1. One ADA compliance issue common with calendar widgets are events with the same name. If you have multiple events with the same name, enter them on the calendar as one event that repeats, not as separate events. If that's not appropriate for your event and you must enter them as separate events, then customize each event's title so that no two are the same.

How to add scholastic works to an Extension program page

1. Log in to the .
2. Add the publication to the Website Assets Management System database. Only publications in the database can be added to Extension programs.

To add multiple scholastic works to a single program:

1. Once the publication is in the database, on the Main Menu, click Extension Programs.
2. Find the program you want to add a scholastic work to and click “Pubs” in the fifth column.
3. Use the filters to find the scholastic work you want to add.
4. Click Edit next to the scholastic work.
5. On the far right, mark Add.
6. On the left, click Update.

To add a single scholastic work to multiple programs:

1. Once the publication is in the database, on the Main Menu, click Publications.
2. Find the scholastic work you want to add to the program pages and click “Programs” in the fifth column.
3. Select the program you want from the dropdown list.
4. Click Add Program.
5. Repeat until all desired programs are added.

How to create or edit publication pages

1. Before logging into the , create a Word document that includes:
   1. A short description – this gives end users a quick summary of what the publication is about and why the end user should read it. Limit 320 characters including spaces.
   2. A list of keywords:
      1. List your keywords left-to-right in order of priority and importance.
      2. Include words that a general audience might Google.
      3. Include common misspellings of keywords.
      4. Include words that might be used in-house, such as jargon and acronyms.
      5. Include last names of all authors, including common misspellings.
2. If your scholastic work includes embedded images, . Log into the .
   1. If this is your first time logging into the system, then put your University email (@unr.edu) into the Username box and click RESET Password. Follow the instructions that are emailed to you, then log in with your new password.
3. Click Scholastic Works.
4. Click Add New Records.
5. In the Authors box, list ALL authors in order of authorship.
6. Add all CABNR, Experiment Station and Extension authors from the provided list – this allows the scholastic work to show up on people’s profiles.
7. Fill in the "Year Originally Published," "Title," and "Published In" fields accordingly.
   1. If the publication is not in a specific journal, newspaper, newsletter, etc., you can use the following format for the "Published In" field: "Extension, 91·çÃùÄñ³ª," followed by a category such as Forms or Blog Posts.
8. Copy-paste your list of keywords.
9. Fill in the "Category," "Peer Reviewed," "Featured Publication," "Language," and "Peer Reviewed" fields accordingly. 
10. Select all relevant website areas – this lets your publication show up on related pages.
11. Copy-paste your pre-written short description.
12. Any of the following:
    1. Copy-Paste from the document to create a webpage version. This is recommended for smaller publications such as Fact Sheets and Special Publications, as it is easier to make them ADA compliant. CLICK SUBMIT INFORMATION AT LEAST ONCE PER HOUR – the system will kick you out if you appear “inactive” for an hour, and it doesn’t recognize typing or formatting in the webpage version box as being active. The button is at the bottom of the page.
       1. The University-required annual training for people who create, edit or post content online will help you in making the webpage version of your publication accessible. Log into  to take the training online or visit Teaching & Learning Technology's website to enroll in an in-person session.
       2. Paste with no formatting; you can reformat afterward. WARNING: Microsoft Word is weird and failure to remove formatting may break accessibility, which means your publication may not be approved for posting to the website.
          1. Windows: Ctrl + Shift + v
          2. Mac: Command + Shift + v
          3. To preview, click Submit Information, then within the Edit Publication page, click Preview in the button ribbon at the top.
    2. Upload the publication as a pdf. WARNING: uploaded documents that are not ADA compliant will not be approved for posting to the website.
13. Optional: If your scholastic work shows up somewhere else on the web, such as a blog post, Nevada Today article or a journal article, you can add the website’s link to the Outside Link section.
    1. If the somewhere else on the web is an Extension website (e.g. livingwithfire.info), it must be accessible.
14. If you want this to be one of the top 10 scholastic works on your personal profile page, select YES.
15. Click Submit. Robert and Ashley will receive an email asking them to review your submission for ADA compliance. If it passes, they will allow the publication to show up on the website. If not, they will let you know that changes need made.

How to create or edit an events page

All happenings hosted by our College, including those that are a part of a program, should be posted to . This events platform, powered by a software called Localist, populates all events calendars, pages and widgets across all University, College, unit, department, office and program webpages.

Simple events should be posted using the . Complex events should be posted using the .

The use of either form will result in the creation of a webpage for the event. Additionally, the proper completion of the event tags section of the form will result in the event’s inclusion on all relevant University, College, unit, department, office and program webpages.

For detailed instructions, see the University's Localist guide. It includes information and links on:

• How to submit an event
• How to add images and alternate text to your events
• How event feeds and Group tags help you promote your events
• How to become an event admin, able to edit and manage events for your unit or department
• The Localist platform and using Localist for conferences

Running a paid event? See our Eventbrite guide for details and resources for paid events.

Images

Image accessibility

Because of the funding the University receives, we are bound by federal law on accessibility to make sure everyone is able to experience the content on our site. A recent legal agreement between the University and the Office of Civil Rights in Washington, D.C. also obligates us to make our site content accessible. Plus, Extension’s purpose is to help people, including people who have an ability difference.

Alternate text, also known as alt text, helps people with visual impairments who use screen readers; however, not everyone with a visual impairment uses a screen reader. So, adding alt. text to an image with text on it will still leave some people with disabilities unable to experience the content on our site.

The accessibility checker that is used to monitor the University’s compliance with the legal agreement has a manual check in place that causes every single image to be examined for text. If an image without text cannot be found, the University’s placeholder image for missing visuals will automatically show up.

Adding alternate text to images

Alternate text is a short, written description of an image that captures in text what the image conveys visually.

When added to an image, alternate text:

• Helps people who use screen readers to understand the information the image conveys.
• Provides extra info to search engines, helping our pages to show up well in search results.
• Shows up in place of the image, if the image fails to load. Sometimes website visitors with limited data or on slow connections change their settings to ensure images don't show up. They'll see the alternate text instead.

To add alternate text:

• Follow the instructions below for adding images.
• They cover adding the alt text to the image and include basic tips on writing good alt text for images.

Embedding images

Images must be jpegs that are no wider or taller than 586px. They can be smaller.
Tip: Check out  for videos on how to prepare images for the web.

1. Place your cursor where you want the image to appear.
2. Click the Image icon found in the second row of formatting buttons – the box with mountains.
3. Click Upload, the third tab across the top.
4. Click Browse and select your jpeg image.
5. Click Sent it to the Server. This will automatically bounce you back to the Image Info tab.
   1. This will also give your image a url. If you save this url, then you can embed the image in other programs and publications on the website without having to re-upload it.
6. Add alt text. Make sure it’s a brief and literal description of the photo, tying it to the program if possible (e.g. “two 4-H girls doing backflips,” “Master Gardener taking grape-inspection notes on a clipboard” or “peaches on a tree”).
7. Delete the numbers in the Width and Height fields, leaving them blank. This keeps the image from getting distorted on tablet and mobile phone screens.
8. Make sure words don’t touch the image by adding values to the HSpace (horizontal padding) and VSpace (vertical padding) fields.
9. If you want the image to float to the right with text filling the left side change the “Alignment” to right. The opposite will occur if “Alignment” is set to the left.
10. Click OK, then preview your page by clicking Save Changes at the bottom of the edit screen, which will return you to your list of programs. Click Edit next to the program again, then click Preview Page at the top of the edit screen.
11. To edit your image, click the image and click the Image icon. Rinse and repeat until the page looks like you want it.
12. When you’re happy with the preview, click Submit for Review. Robert and Ashley will receive an email asking them to review your submission for ADA compliance. If it passes, they will allow the changes to show up on the live site. If not, they will let you know it needs fixed.

WARNING: unlike preset image types, embedded images require you to click Submit for Review when finished. Failure to submit for review means changes will not be approved for posting to the live site.

Preset images

There are three preset image types for programs and scholastic works: content blocks, banners and thumbnails. These image types show up with program and scholastic works titles and descriptions throughout the website.

Preset images are added separately and are not part of the process of adding a program or scholastic work to the database.

Each program or scholastic work can have only one of each of these image types.

Content blocks

Content blocks and thumbnails are required for a program page to be approved to show up on the website. However, after the initial approval, they can be updated without needing to contact the communication team. For programs, these images show up on the , in the Featured Programs ribbon and as related programs within website areas and in the sidebar on publication webpages.

For publications, these images show up in the Featured Publications ribbon on the Learn About pages.

Content blocks must be:
•    800x600px (4:3 ratio)
•    .jpg
•    Less than 500kb

Banners

Banners are the long, skinny images that show up behind the program or publication name on the program or publication web page. These are optional – if you don’t add one, a stock one will be used.

Banners must be:
•    1,200 x 500px
•    .jpg
•    Less than 800kb

Thumbnails

For programs, thumbnails are what show up next to programs when a keyword search is performed in the “What do you want to learn about?” search field.

For publications, thumbnails are what show up next to publications at the bottom of Extension program pages and when a keyword search is performed in the “What do you want to learn about?” search field.

Thumbnails must be:
•    300x300px (1:1 ratio)
•    .jpg
•    Less than 200kb

How to add a preset image to a program page:

1.  to log into the .
2. Click Extension Programs.
3. Find the program you want to add a photo to and click Images in the fourth column.
4. Click Browse and select your properly-sized jpeg image.
5. Add alt. text. Make sure it’s a brief and literal description of the photo, tying it to the program if possible (e.g. “two 4-H girls doing backflips,” “Master Gardener taking grape-inspection notes on a clipboard,” or “peaches on a tree”).
6. Mark either “Banner,” “Content Block” or “Thumbnail.”
7. Click Upload Photo. Your image will immediately show up on the live site.

How to add a preset image to a publication page:

1.     to log into the .
2.    Click Publications.
3.    Find the publication you want to add a photo to and click “Images” in the eighth column.
4.    Scroll to the section on the preset image type you'd like to add (e.g. Add Thumbnail Image, Add Content Block Image or Add Banner Image).
5.    Click Browse and select your properly-sized jpeg image.
6.    Add alt text. Make sure it’s a brief and literal description of the photo, tying it to the program if possible (e.g. “two 4-H girls doing backflips,” “Master Gardener taking grape-inspection notes on a clipboard,” or “peaches on a tree”).
7.    Click the Add button for the preset image type you're adding (e.g. 1x1 Thumbnail Image, 4x3 Block Image or Banner).

Links

Links disclaimer

Use when you build a webpage with links to other entities:

These links are provided for informational purposes only. Extension does not guarantee the accuracy or completeness of the information which the listed sites may contain nor does Extension endorse any products or services these sites may provide or advocate.

Creating NevadaBox links

If you’re going to house a file in NevadaBox and link to it from your website, here are to secure the document from editing and to make sure that it’s available to website users.

Sept. 29, 2009

Policy on purchasing internet domain names

What's a domain name?

A domain name or host name is a name which, when entered into the address box on an internet browser, points/forwards the browser to a specific server on the internet. Extension's domain name is extension.unr.edu. Sometimes, a shorter domain name that is specific to a program name is purchased for marketing purposes. This shorter domain name would point/forward a user to a specific location on a website, such as the Extension website.

If I want to purchase a domain name, what do I need to do?

First, contact the College's director of communications and get permission to purchase a domain name. Domain names are generally a multi-year commitment, i.e. a name we want our audiences to remember and use to find us well into the future. Once approved, the following information should be sent to the College's webmaster:

1. The domain name you want to purchase.
2. The URL you want the domain name to point to, i.e. the page on one of the College's websites that you want the user linked to when they type the domain name into their address box.
3. The account number the purchase should be charged to.

Important notes

Domain names should only be purchased when:

• Continual funding is available
• There is an ongoing staffing commitment for keeping the site updated
• The program ongoing.

Expired domain names can be purchased by anyone and repointed to anywhere they please. Reportedly some organizations have let their domain names expire and those domain names were subsequently purchased by devious companies who pointed them to porn sites. When the organizations asked to buy the domain names back, the domain names were held hostage and they were asked to pay thousands of dollars.

When considering the purchase of a domain name, please recognize the name will direct users to a location other than our websites' homepages. Preferably, we want to direct users to our websites' homepages to get a broad overview of our diverse programs and read our feature stories and news. This way, they'll:

• Have an idea of the important issues our College is addressing.
• Help spread the word to their family, friends, neighbors and decision makers.

While a limited number of domain names will direct specific audiences to the resources they seek, too many domain names will bypass our websites' homepages and could hinder efforts to market our diverse programs to multiple audiences.

Making graphs and charts accessible

Images of graphs and charts are inherently inaccessible. Information in them is not conveyed at all to people who are viewing them using a screen reader. And, information in graphs and charts can be hard to read for people with colorblindness or low vision. To make our graphs and charts as accessible as possible for all viewers, we should design our graphs and charts with accessibility and universal design principles in mind, and include extra information with our graphs and charts.

This is not only the right thing to do and the thing to do if we want our information to reach all of the communities we serve, it's required by law, University policy and our legal agreement with the Office for Civil Rights.

When designing graphs and charts

• Title graphs and charts descriptively.
• Label axes clearly.
• Add labels for each line or bar.
• Add values to bar charts.
• Use colors that have enough contrast to each other and the chart’s background color.
• Stay away from combinations of colors that people with colorblindness have trouble perceiving:
  • Blue & grey
  • Blue & purple
  • Light green & yellow
  • Green & black
  • Green & blue
  • Green & brown
  • Green & grey
  • Green & red
• Make sure the graph or chart is readable in black and white / grayscale.
• Use patterns, texture and/or symbols in your graphs and charts so that no information in them is conveyed only by color. (Example: Dot the blue line and dash the black line in your line chart and your line chart’s key.)
• Stay away from special effects.

Then, include a text summary of the graph or chart and a properly coded table of the data in the graph or chart near the graph or chart. And, in the alternate text of the graph or chart, very succinctly state the type of chart, what key trends it’s showing and “See table for data.” Also describe trends shown by the graph or chart, conclusions, and calculations in the surrounding text.

Adding accessible tables to webpages

These instructions will help people to create tables in Extension publication webpages and on Extension program webpages, provided that the tables:

• Are created to display data, not for layout
• Are simple, without merged columns or cells and without blank cells
• Include a table title (known as a caption)
• Include table headers

Note: To meet the requirements of federal law and University policies on accessibility, if tables for Extension publication and program webpages were not created as described above, you may need to adjust them and/or learn more about using HTML to create tables. Common adjustments for tables not created with accessibility in mind include:

• Changing the columns in a complex table to simplify its layout
• Splitting complex tables into multiple simple tables
• Inserting provided snippets of HTML code

To learn more, see the section on complex tables below.

Features of a properly coded table

• Caption
• Column and row headers
• Data cells associated with their headers
• No blank or merged data cells

Making simple tables accessible

1. Click the Create Table button in the WYSIWYG.
   • WYSIWYG stands for "what you see is what you get." It's the system that allows you to create and edit web content without having to know too much code. Its similar to how Word allows you to create and edit documents. It looks like two rows of big friendly buttons, including the buttons to bold and italicize text.
   • When working on an Extension publication webpage, the WYSIWYG is located directly under the "Webpage Version of Publications" header. When working on an Extension program webpage, the WYSIWYG is located directly under the "Long Description - serving as your program's webpage" header.
   • The table button is in the WYSIWYG's second row's sixth button group. It looks like a dark gray and white rectangle that is divided into smaller squares.
     
2. Once you click the Create Table button, a Table Properties box will pop up.
3. On the box's Table Properties tab, complete the following fields.
   • Rows: Enter the number of rows you expect to have. You can change the number of rows in your table later.
   • Columns: Enter the number of columns you expect to have. You can change the number of columns in your table later.
   • Headers: Headers allow screen reader users to experience the table similarly to how sighted users do visually. Your table must have headers. If it doesn't, it's not accessible. Per University policy, inaccessible tables cannot be posted on our websites.
     • First Row: Select if the first row of your table is labels for each column.
     • First Column: Select if the first column of your table is labels for each row.
     • Both: Select if the first row of your table is labels for each column AND the first column of your table is labels for each row. 
   • Caption: The table caption is the title of the table. For example, "Table 1: Top competitive banana eaters 2020." Your table must have a caption. If it doesn't, it's not accessible. Per University policy, inaccessible tables cannot be posted on our websites.
     
   • Note: Completing the header and caption fields provides enough accessibility markup for most simple tables. If you have a complex table on your hands, you may need to adjust it, split it into multiple tables and/or learn more about using HTML to create tables. See the section on complex tables below.
4. Click the OK button. You should now see a blank table in the WYSIWYG's text box. Important: The blank table should include a caption, and its header cells should be a different color than the regular cells. If the table you're seeing doesn't match this description, you'll need to delete the table and try again.
   
5. Enter your table's data by clicking in each of its cells and typing in the cells' values.
   • Copy and paste the values without formatting if working from an existing table. To do this, paste by holding down ctrl+shift+v. If you don't, the WYSIWYG will attempt to carry over formatting from the original document. It likely won't work well and may make your table fail to meet branding and/or accessibility requirements. If you forget this step, you may be able to fix it by clicking the remove format button in the WYSIWYG. It's the last button in the first row. It looks like an italicized and underlined capital T next to a subscript x.
     
   • Complete all cells. Do not leave cells blank. If you are working from a table created without accessibility in mind, you may have to figure out what a blank cell meant in the mind of the table's original author. Did it mean the data collected for that cell was 0? Did it mean data for that cell was not collected at all? You may need to ask the table's original author to clarify. Then, enter the appropriate value. It's OK to enter 0, N/A or not applicable, if that's indeed what should go there. Your table must not have blank cells. If it does, it's not accessible. Per University policy, inaccessible tables cannot be posted on our websites.
   • Leave cells separate. Do not merge cells. It's tempting, but for accessibility, do not merge cells. If you are working from a table created without accessibility in mind, you may need to change or add more columns to avoid merged cells. Or, you may need to split the complex table into several simple tables to avoid merged cells. To learn more, see the section on complex tables below. Your table must not have merged cells. If it does, it's not accessible. Per University policy, inaccessible tables cannot be posted on our websites.
   • Add columns and rows, as needed. But remember, the number of columns and rows in the table must be uniform throughout it. Do not add or delete cells so that a row or column is longer or shorter than the others. Your table must have a uniform number of rows and columns. If it doesn't, it's not accessible. Per University policy, inaccessible tables cannot be posted on our websites.
     • To add another row to the table, right click in it. Choose row in the box that pops up. Then, choose insert row before or insert row after. Or, click in the last cell of the last row of the table. Then, press the Tab key on your keyboard. To delete a row from the table, right click in it. Choose row in the box that pops up. Then, choose delete row.
       
     • To add another column to the table, right click in it. Choose column in the box that pops up. Then, choose insert column before or insert column after. To delete a column from the table, right click in it. Choose column in the box that pops up. Then, choose delete column.

Strategies to make complex tables accessible

Change it

This table isn't accessible. First, it's posted as an image, and text on images isn't accessible. It can't be read by screen reader users, and users who magnify the screen will struggle with a pixelated image that they have to scroll back and forth to view. Second, it includes multiple merged header cells. This would make it impossible for a screen reader to read the table to a user in a way that makes sense.

To make the above table accessible, we can change the table's layout. Be mindful that changing the table's layout can change how the data in the table is perceived. For example, changing the layout to the following places emphasis on and orders the data by the competitive banana eater's name. If the publication author or program lead would rather draw attention to and order the data by the state or number of bananas eaten instead, then we'd need to order the columns differently. Knowing the purpose of the table, the point it's trying to convey, will help you to choose the most appropriate accessible layout.

Split it

Another way to make the above inaccessible table accessible is to split it in two. Again, be mindful of how the change in layout may impact how well the table gets its point across.

Code it

Another way we can make complex tables more accessible is by sharpening our HTML skills.

Code a total row

If your table includes a total row, you'll need to add a snippet of code to your table to help make it easier to read. This doesn't do anything for screen reader users, but it does set the row apart visually for sighted users. This can increase comprehension, especially among people with cognitive impairments.

1. First, complete all of the steps under the making simple tables accessible section.
2. Then, click on the source button in the WYSIWYG. It's the first button in the first row of the WYSIWYG. It says source on it and looks like a piece of paper with a clipped right corner.
   
3. Find your table in the code by either scrolling to it or using ctrl+f to search for something unique in the table's contents.
4. Once you find your table in the code, you'll paste the following code after the closing caption tag </caption> and before the opening table header tag <thead>: <tfoot> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tfoot>
   
5. Now, switch back to regular view by clicking the source button in the WYSIWYG.
6. If the total row of your table has four cells in it, you're all set. If not, you'll need to add or remove cells from the total row until it has the same number of cells as the other rows in the table. To add cells, you'll right click in the total row, choose cell and select insert cell before or insert cell after. To remove cells, you'll right click in the total row, choose cell and select delete cell. It's important not to skip this step. Your table must have a uniform number of rows and columns. If it doesn't, it's not accessible. Per University policy, inaccessible tables cannot be posted on our websites.
7. Finally, enter your total row's data by clicking in each cell of the row and typing in the cells' values.

Using data visualizations in webpages

These instructions will help people to add data visualizations to Extension scholastic works and program webpages in ways that are more accessible, provided those visualizations:

• Are simple.
• Use good color contrast.
• Use the appropriate chart type for the data.
• Feature clear axes labels, and legends and keys.
• Are accompanied by source and contact information.
• Use appropriate, clear and ethical scales for the data.
• Use secondary indicators of meaning,such as patterns or shapes, when meaning is conveyed by color.
• Where possible, use code to display the visualization instead of an image.
• Where possible, spell out the data's values.

Note: To meet the requirements of federal law and University policies on accessibility, if visualizations for Extension publication and program webpages were not created as described above, you may need to redesign them. Complex visualizations, such as infographics, are particularly challenging to design well. One tactic that may work is splitting complex visualizations into several simple ones. To learn more about working with complex images, see the .

Images of a data visualizations

1. First, ensure your data visualization was designed with accessibility in mind. See the introduction above to learn more. If it wasn't designed with accessibility in mind, you will need to redesign it before moving to the next step.
2. Insert the data viz into the webpage as an image, following the instructions on embedding images.
3. Then, follow this formula to create alternate text for the image of the data visualization: "Chart type of type of data where reason for including the chart." (Cesal). Here are a few examples:
   • Example 1: Graph or chart - "Line graph of number of bananas eaten per day in 2020 where more bananas are eaten during the COVID-19 pandemic."
   • Example 2: Diagram - "Lifecycle of the banana plant where its two phases are vegetative and reproductive."
4. Include a link to where a person can obtain all of the data/info that was presented visually in the data visualization in its image caption. Here are a few image caption examples:
   • Example 1: Data you got from somewhere else - "Figure 1: Bananas eaten per day in 2020. Data from the USDA's 2020 Bananas Report." Link the text "USDA's 2020 Bananas Report" to the report on the USDA's webpage.
     • If the data isn't available on the USDA's website (at the time of publication and/or publication recertification), either:
       • Best option: Add "See Table 1." to the end of the caption, insert a table in the publication that contains all of the data from the chart, and link the text "See Table 1" to the table. See the instructions on adding accessible tables to webpages.
       • Other option: Add info on requesting the report to the caption. "The report is available by request to bananas@usda.gov." Know that you will need to field requests from people if the USDA cannot fulfill requests accessibly, quickly or at all.
   • Example 2: Data you collected - "Figure 1: Bananas eaten per day in 2020. See Table 1." Insert a table in the publication that contains all of the data from the chart, and link the text "See Table 1" to the table. See the instructions on adding accessible tables to webpages.
   • Example 3: Diagram with info that was explained in the webpage - "Figure 1: The lifecycle of a banana plant. See Where do bananas come from?" Link the "See Where do bananas come from?" text to that heading in the document.

     

   • Example 4: Diagram with info that was not explained in the webpage - First, consider adding a section to your webpage to explain your diagram. This will help everyone to better understand both your webpage and your diagram. If you make this change, you'll then follow Example 3 above. If you don't (WHY??!), then you'll follow this example: "Figure 1: The lifecycle of a banana plant includes two phases. The first phase is the vegetative phase. In this stage, the plant... The second is the reproductive phase. In this stage, the plant... (include all detail from the graphic)."
   • Note: People pay attention to captions. You can take advantage of that attention to drive home the point of your data viz. This will help people with cognitive impairments to understand your point. Here's how:
     • Traditional caption: "Figure 1: Bananas eaten per day in 2020. See Table 1."
     • Point-driven caption: "Figure 1: Banana consumption soars during the pandemic. See table 1."

Important: The alternate text and the image caption should not be identical.

Coding data visualizations

If you know how to code, you may insert data visualizations into Extension publication and program webpages provided that your code is accessible. Accessible materials are defined by the WC3 as perceivable, operable, understandable and robust. Here are standards and recommendations to guide you:

• University accessibility policy
• University benchmarks for accessibility
• WC3 standards for animation: ,  and
• WC3 standards for color: ,  and 
• WC3 standards for interaction: ,  and 
• WC3 

Here are layouts and  to use in your designs.

When you paste your code into the webpage, do so in the source view of the WYSIWYG. To switch to the source view, click the source button in the WYSIWYG. It's the first button in the first row of the WYSIWYG. It says source on it and looks like a piece of paper with a clipped right corner.

For an accessible simple infographic example, see the Kickoff to Kindergarten story in volume 33 of our College's newsletter.

References

• Cesal, A. (2020, August 11). .