Difference between revisions of "Accessible WordPress Pages"

From Help Wiki
 
(2 intermediate revisions by one other user not shown)
Line 7: Line 7:
 
</div>
 
</div>
  
===Accessible WordPress Pages===
+
==Accessible WordPress Pages==
====Page Template====
+
===Page Template===
'''Use one of the most current WordPress site templates. (Templates are provided by Academic Technologies and applied automatically upon request.)'''
+
Use one of the most current WordPress site templates. (Templates are provided by Academic Technologies and applied automatically upon request.)
#Examples of WordPress [https://sites.evergreen.edu/site-templates site templates]. Use this Help Wiki guide to request/self-select academic resources, [http://wikis.evergreen.edu/computing/index.php/Selecting_Academic_Technologies Selecting Academic Technologies].  Questions? Contact Academic Technologies through [https://help.evergreen.edu help.evergreen.edu].
+
 
====Headings====  
+
===Headings===
 
'''Properly format headings, and Use headings in the correct (hierarchical) order'''
 
'''Properly format headings, and Use headings in the correct (hierarchical) order'''
 
When in edit mode for a Page or Post:
 
When in edit mode for a Page or Post:
Line 21: Line 21:
 
'''Examples:''' Heading 2 is great for headlines, Heading 3 is good for separating sections of content, and Heading 4 can be used for sub-sections or general sections of content.
 
'''Examples:''' Heading 2 is great for headlines, Heading 3 is good for separating sections of content, and Heading 4 can be used for sub-sections or general sections of content.
 
'''You can also apply styling using CSS in Text mode.'''
 
'''You can also apply styling using CSS in Text mode.'''
====Images:====
+
 
 +
===Images:===
 
'''Add alternative (Alt) text to images.'''
 
'''Add alternative (Alt) text to images.'''
 
#In the Page or Post, click on the image once to highlight it.
 
#In the Page or Post, click on the image once to highlight it.
Line 27: Line 28:
 
#At the Image Details page, enter a description of the image in the Alternative Text field
 
#At the Image Details page, enter a description of the image in the Alternative Text field
 
#Click the blue Update button in the lower right corner to save.
 
#Click the blue Update button in the lower right corner to save.
====Lists:====
+
 
 +
===Lists:===
 
'''Format a list as a list using ordered or unordered lists.'''
 
'''Format a list as a list using ordered or unordered lists.'''
 
#In the Editing field, highlight the content you want to format as a list
 
#In the Editing field, highlight the content you want to format as a list
Line 33: Line 35:
 
drop-down menu.
 
drop-down menu.
 
'''You can also insert a list using CSS in Text mode.'''  
 
'''You can also insert a list using CSS in Text mode.'''  
====Links====  
+
===Links===
 
'''Write meaningful link text that indicates the link’s destination.'''
 
'''Write meaningful link text that indicates the link’s destination.'''
 
To insert a link to a page or post:
 
To insert a link to a page or post:
Line 39: Line 41:
 
# Select the “Insert/edit link” icon (resembles a chain link) from the toolbar
 
# Select the “Insert/edit link” icon (resembles a chain link) from the toolbar
 
# Paste the URL of the site you want to link to into the entry field and click the arrow to apply link
 
# Paste the URL of the site you want to link to into the entry field and click the arrow to apply link
====Tables====
+
 
 +
===Tables===
 
'''Use the TablePress plugin available in WordPress at sites.evergreen.edu and blogs.evergreen.edu.'''
 
'''Use the TablePress plugin available in WordPress at sites.evergreen.edu and blogs.evergreen.edu.'''
 
#Use the TablePress plugin to create and manage tables on your WordPress site.
 
#Use the TablePress plugin to create and manage tables on your WordPress site.
Line 49: Line 52:
 
# See also the [https://tablepress.org/info/#usage TablePress Usage page] for more information.  
 
# See also the [https://tablepress.org/info/#usage TablePress Usage page] for more information.  
 
#Tables can be imported from Excel (.xls and xlsv) CSV and HTML files and also be exported
 
#Tables can be imported from Excel (.xls and xlsv) CSV and HTML files and also be exported
====Color====
+
 
 +
===Color===
 
'''Color choices are handled by your site’s theme and may not be easily editable. If you are using a recommended site template you are already using a theme that adheres to best practices for use of color'''
 
'''Color choices are handled by your site’s theme and may not be easily editable. If you are using a recommended site template you are already using a theme that adheres to best practices for use of color'''
====Math & Science====
+
 
 +
===Math & Science===
 
'''Write math and science equations using LaTeX.'''
 
'''Write math and science equations using LaTeX.'''
 
# Use the WP LaTeX plugin in WordPress.
 
# Use the WP LaTeX plugin in WordPress.
 
For more information, go to the Math & Science page of the handbook.
 
For more information, go to the Math & Science page of the handbook.
====Multimedia:====
+
 
 +
===Multimedia:===
 
#Eliminate or blinking/flashing content to 3 seconds   
 
#Eliminate or blinking/flashing content to 3 seconds   
 
#Make sure all mouse actions can also be completed with a keyboard alone (without a mouse.)
 
#Make sure all mouse actions can also be completed with a keyboard alone (without a mouse.)
Line 68: Line 74:
 
====Accessibility Reasorces====
 
====Accessibility Reasorces====
 
*[https://www.evergreen.edu/accessibility Evergreen's Guide on Accessible Technology ]
 
*[https://www.evergreen.edu/accessibility Evergreen's Guide on Accessible Technology ]
*[[Accessibility_Help|Accessibility Home Page ]]
+
*[[Accessibility_Help|Accessibility Help Page ]]
 
*[[Tips_for_Providing_Barrier-Free_Access|Tips for Providing Barrier-Free Access]]
 
*[[Tips_for_Providing_Barrier-Free_Access|Tips for Providing Barrier-Free Access]]
 
*[[Accessibility_Software|Accessibility Software]]
 
*[[Accessibility_Software|Accessibility Software]]
Line 81: Line 87:
 
*[[Accessible_Canvas_Pages|Accessible Canvas Pages]]
 
*[[Accessible_Canvas_Pages|Accessible Canvas Pages]]
 
*[[Accessible_WordPress_Pages|Accessible WordPress Pages ]]
 
*[[Accessible_WordPress_Pages|Accessible WordPress Pages ]]
 +
*[[Accessibility_Within_Canvas_Checklist|Accessibility Within Canvas Checklist]]
 +
*[[Learn_more_about_Accessibiliity_and_Inclusive_Design|Learn more about Accessibiliity and Inclusive Design]]
 
----
 
----
 
{{GetHelp}}
 
{{GetHelp}}

Latest revision as of 16:45, 17 March 2026

A Guide for Creating Accessible WordPress Pages

Accessible WordPress Pages

Page Template

Use one of the most current WordPress site templates. (Templates are provided by Academic Technologies and applied automatically upon request.)

Headings

Properly format headings, and Use headings in the correct (hierarchical) order When in edit mode for a Page or Post:

  1. At the editor (in Visual mode), click on the Toolbar Toggle icon at far right of the row of tools.
  2. Highlight the text you want to apply a header to.
  3. Click on the Paragraph drop-down to select and apply a header

A WordPress page/post title uses Heading 1. There should be only one h1 per page but there can be multiple h2, h3, h4, h5, h6. DO NOT skip main heading levels and apply consistently throughout page. Examples: Heading 2 is great for headlines, Heading 3 is good for separating sections of content, and Heading 4 can be used for sub-sections or general sections of content. You can also apply styling using CSS in Text mode.

Images:

Add alternative (Alt) text to images.

  1. In the Page or Post, click on the image once to highlight it.
  2. From the pop-up mini-menu, click on the Edit (pencil icon) button
  3. At the Image Details page, enter a description of the image in the Alternative Text field
  4. Click the blue Update button in the lower right corner to save.

Lists:

Format a list as a list using ordered or unordered lists.

  1. In the Editing field, highlight the content you want to format as a list

If the order doesn’t matter, click on the Bulleted list button and desired bulleting shape from the drop-down menu. For an ordered list, click on the Numbered list button and desired formatting option from the drop-down menu. You can also insert a list using CSS in Text mode.

Links

Write meaningful link text that indicates the link’s destination. To insert a link to a page or post:

  1. Highlight text you want to link to.
  2. Select the “Insert/edit link” icon (resembles a chain link) from the toolbar
  3. Paste the URL of the site you want to link to into the entry field and click the arrow to apply link

Tables

Use the TablePress plugin available in WordPress at sites.evergreen.edu and blogs.evergreen.edu.

  1. Use the TablePress plugin to create and manage tables on your WordPress site.
  2. No HTML knowledge is needed, table data can be easily edited. Tables can contain any type of data, even formulas that will be evaluated.
  3. Tables can be inserted into posts, pages, or text widgets.
  4. After installing the plugin, you can add, import, export, edit, copy, and delete tables via the “TablePress” section in your admin menu. Everything should be self-explaining there.
  5. To show one of your tables in a post, on a page, or in a text widget just include the Shortcode [tableid=<the-ID> /] into your post/page/text widget, where <the-ID> is the ID of your table (can be found on the left side of the “All Tables” screen in TablePress).
  6. You can also click on the “Table” button in the toolbar of the post/page editor to see a list of your tables. If you click “Insert” then, the correct Shortcode will be inserted for you automatically.
  7. See also the TablePress Usage page for more information.
  8. Tables can be imported from Excel (.xls and xlsv) CSV and HTML files and also be exported

Color

Color choices are handled by your site’s theme and may not be easily editable. If you are using a recommended site template you are already using a theme that adheres to best practices for use of color

Math & Science

Write math and science equations using LaTeX.

  1. Use the WP LaTeX plugin in WordPress.

For more information, go to the Math & Science page of the handbook.

Multimedia:

  1. Eliminate or blinking/flashing content to 3 seconds
  2. Make sure all mouse actions can also be completed with a keyboard alone (without a mouse.)
  3. Use an accessible media player like YouTube or Vimeo.

Accessible media embeds are built-in with WordPress. Simply paste the URL to your media object hosted at YouTube, Vimeo, etc., on its own line in your page or post.