Difference between revisions of "Accessible WordPress Pages"
(8 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | + | ||
− | + | <div class="container-fluid"> | |
+ | <div class="row"> | ||
+ | <div class="col-md-8"> | ||
+ | <div class="lead"> | ||
+ | A Guide for Creating Accessible WordPress Pages | ||
+ | </div> | ||
+ | |||
===Accessible WordPress Pages=== | ===Accessible WordPress Pages=== | ||
====Page Template==== | ====Page Template==== | ||
Line 54: | Line 60: | ||
#Use an accessible media player like YouTube or Vimeo. | #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. | 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. | ||
− | + | ||
+ | |||
+ | <!-- end col-md-8 --> | ||
+ | </div> | ||
+ | <div class="col-md-1"></div> | ||
+ | <div class="col-md-3 sidebar"> | ||
====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 Help Page ]] |
+ | *[[Tips_for_Providing_Barrier-Free_Access|Tips for Providing Barrier-Free Access]] | ||
*[[Accessibility_Software|Accessibility Software]] | *[[Accessibility_Software|Accessibility Software]] | ||
*[[Accessibility:_Where_to_Go_for_Help|Accessibility: Where to Go for Help]] | *[[Accessibility:_Where_to_Go_for_Help|Accessibility: Where to Go for Help]] | ||
+ | *[[Optical_Character_Recognition|Optical Character Recognition]] | ||
+ | ====Creating Accessible Content==== | ||
*[[Accessible_Word_Documents|Accessible Word Documents]] | *[[Accessible_Word_Documents|Accessible Word Documents]] | ||
*[[Create_an_Accessible_PDF|Create an Accessible PDF]] | *[[Create_an_Accessible_PDF|Create an Accessible PDF]] | ||
− | |||
− | |||
*[[Creating_Accessible_Math_Resources|Creating Accessible Math Resources]] | *[[Creating_Accessible_Math_Resources|Creating Accessible Math Resources]] | ||
*[[Accessible_Spreadsheets|Accessible Spreadsheets]] | *[[Accessible_Spreadsheets|Accessible Spreadsheets]] | ||
*[[Accessible_Video|Accessible Video]] | *[[Accessible_Video|Accessible Video]] | ||
− | |||
*[[Accessible_Canvas_Pages|Accessible Canvas Pages]] | *[[Accessible_Canvas_Pages|Accessible Canvas 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}} | ||
− | + | ||
+ | <!-- end col-md-3--> | ||
+ | </div> | ||
+ | <!-- end row--> | ||
+ | </div> | ||
+ | <!-- end container--> | ||
+ | </div> | ||
+ | <!-- Generator=Template:TwoColumn --> | ||
+ | __NOTOC__ | ||
+ | __NOEDITSECTION__ | ||
[[Category:Accessibility]] | [[Category:Accessibility]] |
Latest revision as of 13:39, 5 October 2017
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.)
- Examples of WordPress site templates. Use this Help Wiki guide to request/self-select academic resources, Selecting Academic Technologies. Questions? Contact Academic Technologies through help.evergreen.edu.
Headings
Properly format headings, and Use headings in the correct (hierarchical) order When in edit mode for a Page or Post:
- At the editor (in Visual mode), click on the Toolbar Toggle icon at far right of the row of tools.
- Highlight the text you want to apply a header to.
- 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.
- In the Page or Post, click on the image once to highlight it.
- From the pop-up mini-menu, click on the Edit (pencil icon) button
- 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.
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
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:
- Highlight text you want to link to.
- 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
Tables
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.
- No HTML knowledge is needed, table data can be easily edited. Tables can contain any type of data, even formulas that will be evaluated.
- Tables can be inserted into posts, pages, or text widgets.
- 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.
- 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).
- 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.
- See also the TablePress Usage page for more information.
- 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.
- Use the WP LaTeX plugin in WordPress.
For more information, go to the Math & Science page of the handbook.
Multimedia:
- Eliminate or blinking/flashing content to 3 seconds
- Make sure all mouse actions can also be completed with a keyboard alone (without a mouse.)
- 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.