Accessibility Workshop on OER for Queens College

Finding accessible-ready WordPress.Org themes

1. Go to https://wordpress.org/themes/
2. Click "Feature Filter"
3. Check the "Accessibility Ready" box in the "Features" column
4. Click "Apply Features"

Page or Post Title

• Page and Post titles should be brief, clear, informative, and unique.

 

Use Headings

• Headings help in organizing a web page or post.
• When creating headings in WordPress classic editor make sure to use the actual heading option and don't just make them visually look different by changing font or color.
• When selecting headings, don't use <h1>.  Your page or post title is already an <h1> and there should only be one <h1> per page.

 

Create Alt-text for Images

• Adding alt-text to your images is an accessibility best practice.
• In WordPress classic editor there are several ways to add alt-text to images to your site.
• You can add "default" alt-text to an image so that each time you reuse the image its default alt-text will be attached.
  • This greatly increases the odds alt-text won't be overlooked (especially for images in your shared library.)
  • You can edit this "default" alt-text on individual pages (option four)

Option One: Adding Default Alt-text to Image via Media Button

1. Select <Add Media> button from within a page or post
2. In the "Add Media" pop-up window, select an image already uploaded (you will see a check-mark next to the image you select)
   1. If you need to upload an image first then, select upload files tab, upload your image and then do step 2.
3. Once an image is selected you will see the "Attachment Details" box on the right hand side of your window.
4. Type in the image's "Alt-text" in the Alternative Text box.

 

Option Two: Adding Default Alt-text to Image via "Media" left side-bar option & "Add New" button

1. Select "Media" on the left side-bar
2. Click on the <Add New> button located in the "Media Library" window
3. Drag & drop image or search computer to upload image
4. Once an image is uploaded, select it (you will see a check-mark next to the image you select)
5. Once an image is selected you will see the "Attachment Details" box.
6. Type in the image's "Alt-text" in the Alternative Text box.

Option Three: Adding Default Alt-text to Image via left side-bar option "Media" - "Add New"

1. Select on "Media" on the left side-bar to open up drop down menu
2. Click on "Add New", located under "Media" and "Library".
3. Drag & drop image or search computer to upload image.
4. As your image is being uploaded you will see a progress bar saying "crunching".
5. After image is uploaded, click on the work "Edit" (located on the bottom right) 
6. A new window will open, an "Edit Media" window.
7. Type in the image's "Alt-text" in the Alternative Text box.

 

Option Four: Customizing Alt-text of images on individual pages or posts

1. Click <Add Media> button from within a page or post
2. In the "Add Media" pop-up window, select an image already uploaded (you will see a check-mark next to the image you select).
3. Click on <Insert into page> button.
4. Once back on the page or post, click on the image you just uploaded.
5. A new editing bar will pop-up
6. Click on the pencil "edit" icon
7. An "Image Details" page will pop-up.
8. Here you can edit the alt-text without changing the "default" alt-text of the image.

 

How to create Lists

• Do not create lists manually, use the built in formatting.

 

Check Color Contrast

• Check to see if the colors you've picked for your tabs and background are accessible.
• Use these color contrast evaluation tools.