1

How To: Make MarylandPublicSchools.org Accessible

in SharePoint 2013

IMAGES ............................................................................................................................................. 2 Inserting a New Graphic with ALT Text ........................................................................................... 2 Fixing ALT Text on an Existing Graphic .......................................................................................... 4

FILE NAME ........................................................................................................................................ 5 Adding a New Page ........................................................................................................................ 5 Fixing an Existing Page File Name ................................................................................................. 6

PAGE TITLE ...................................................................................................................................... 7 To Add a Page Title ........................................................................................................................ 7 Fixing an Existing Page Title ........................................................................................................... 8

PAGE HEADLINE .............................................................................................................................. 9 To Add a Headline to a New Page .................................................................................................. 9

Plain Text ........................................................................................................................................ 10 Pasting Content in Plain Text – Plan A ......................................................................................... 10 Pasting Content in Plain Text – Plan B ......................................................................................... 11

TABLE HEADERS ........................................................................................................................... 13 Adding a New Table ..................................................................................................................... 13 Fixing an Existing Table ................................................................................................................ 14

LISTS ............................................................................................................................................... 15 Making a Bulleted List ................................................................................................................... 15 Making an Ordered List................................................................................................................. 16

HEADINGS ...................................................................................................................................... 17 How to Designate Headings ......................................................................................................... 17

2

IMAGES Please refer to the Social Security Administration Guide: Alternate text for images booklet to determine what alternate text is appropriate for the graphic you are using and the function you wish it to perform. Inserting a New Graphic with ALT Text

1. Click your cursor in the Content field where you want the graphic to appear. The INSERT tab will appear over the SharePoint Ribbon.

2. Click on INSERT and choose Picture from the Insert Ribbon.

3. Choose where the graphic you want to insert is currently stored and upload or browse to the

graphic and insert it.

4. When you upload a graphic for the first time, you will get a form asking for further information

about the image. Fill it out or not, as you prefer. None of these form fields will affect the accessibility of the graphic. Hit Save to move on.

3

5. Now your photo should appear where you had your cursor.

6. The IMAGE Ribbon should be visible at the top of the page. Please note that the Alt Text field

has been automatically filled in with the file name of the graphic. This MUST be changed.

7. If the graphic is purely decorative and conveys no content to a sighted user, delete the file name

and leave the field blank. (Refer to the SSA Guide for guidance on what a graphic conveys.)

8. If the graphic conveys information to a sighted user, that information must go in the form field.

(“Dachshund wearing a Happy Birthday sweater and party hat, with balloons tied to its tail.”)

9. If the graphic acts as a link or button, or if the graphic is too complex to be explained in alt text

and needs a separate alternate format page:

a. The alt text needs to explain what happens when you click the button: “Happy Birthday Dogs website.” “Narrative description of the How to Dress Your Dog infographic.”

b. Click on INSERT at the top of the browser:

c. Choose Link from the INSERT Ribbon.

d. Choose where the page/document to be linked is located, either From SharePoint or From

Address and link to the graphic.

4

Fixing ALT Text on an Existing Graphic

1. In editing mode, double click on the graphic on which you want to change the alt text.

2. The IMAGE tab will appear over the SharePoint Ribbon. Click on IMAGE.

3. Delete the incorrect alt text.

4. If the graphic is purely decorative and conveys no content to a sighted user, leave the field

blank. (Refer to the SSA Guide for guidance on what a graphic conveys.)

5. If the graphic conveys information to a sighted user, that information must go in the form field.

(“Dachshund wearing a Happy Birthday sweater and party hat, with balloons tied to its tail.”)

6. If the graphic acts as a link or button, or if the graphic is too complex to be explained in alt text

and needs a separate alternate format page:

a. The alt text needs to explain what happens when you click the button: “Happy Birthday Dogs website.” “Narrative description of the How to Dress Your Dog infographic.”

b. Click on INSERT at the top of the browser:

c. Choose Link from the INSERT Ribbon.

d. Choose where the page/document to be linked is located, either From SharePoint or From

Address and link to the graphic.

5

FILE NAME Adding a New Page

1. Choose the Gear Icon at the top of the browser:

2. Choose Add a page:

3. The name of the file should be succinct, contain no spaces and no special characters ( ‘ * ! ) except _ and - .

4. Click Create.

6

Fixing an Existing Page File Name

1. Choose the PAGE button at the top of the browser window:

2. Choose Edit Properties:

3. Find the Name form field:

4. Change the file name to something succinct that contains no spaces and no special characters

( ‘ * ! ) except _ and - .

5. Scroll to the bottom of the form and choose Save.|

7

PAGE TITLE The Page Title is the wording on the tab at the top of your browser:

To Add a Page Title

1. Follow the instructions under FILE NAME (above) to add a new page and give it a file name.

2. On the new page that is created, scroll to the bottom:

|

3. SharePoint will automatically assign the file name you created to be the title of the page. This must be changed to something that will make sense in the tab at the top of the browser.

Page titles should be succinct (less than 100 characters) and convey what makes this page unique from all the other pages in the site – i.e., don’t title every page “Maryland State Department of Education.” Don’t use ALL CAPS.

4. After adding the rest of the page content, save the page. The new page title will be in the tab.

8

Fixing an Existing Page Title

1. Choose the PAGE button at the top of the browser window:

2. Choose Edit Properties:

3. Find the Title form field and change the title to something succinct (less than 100 characters)

that conveys what makes this page unique from all the other pages in the site – i.e., don’t title every page “Maryland State Department of Education.” Don’t use ALL CAPS.

4. Scroll to the bottom of the form and choose Save.|

9

PAGE HEADLINE The Headline is the wording at the start of your main content, like a newspaper article headline:

All pages in MarylandPublicSchools.org are required to have headlines. Do not type the headline manually into the main_content text box. Use the PageHeadline form field at the bottom of the page. To Add a Headline to a New Page

1. Follow the instructions under FILE NAME (above) to add a new page and give it a file name.

2. On the new page that is created, scroll to the bottom:

|

3. Page headlines titles should be succinct and convey specifically what the main content conveys, like a headline on a newspaper article. Don’t use ALL CAPS.

4. After adding the rest of the page content, save the page.

10

PLAIN TEXT If you are cutting text from a document (e.g., Microsoft Word or Excel, Google Docs, Gmail, PDF) to insert as content on a web page, the text must be pasted as plain text. Otherwise, computer code from Microsoft, Google, etc. gets inserted into the web page as well, which can make it difficult, if not impossible, for screen reading software to read the resulting web page. Pasting Content in Plain Text – Plan A 1. Use your usual method to select and copy text from a document, such as Word.

2. Click your cursor in the Content field where you want the text to appear.

3. Click on the DOWN ARROW beneath the word Paste in the SharePoint Ribbon.

4. Choose Paste plaintext from the Paste dropdown menu.

In a perfect world, this would always work. But it’s a Microsoft world, which means things don’t always work consistently. If the option to Paste or to Paste plaintext is not available, resort to Plan B.

11

Pasting Content in Plain Text – Plan B 1. Use your usual method to select and copy text from a document, such as Word (as above).

2. Windows 7 instructions: a. Click the Start Button in the lower left corner of the screen.

b. The Start Menu will appear. At the bottom of the menu is a form field that says “Search programs and files.”

c. Type the word Notepad and hit ENTER.

d. Choose the Notepad app.

3. Windows 10 instructions: a. Locate the Cortana search box in the bottom left-hand corner of the screen.

b. Type the word Notepad.

c. Choose the Notepad app.

12

All Versions:

4. Type CTRL+V to paste the text you’ve copied into the Notepad app.

5. Type CTRL+A to select all the text you’ve just pasted, and then CTRL+X to cut it. The Notepad

app should be empty when you’re done.

6. Click your cursor in the Content field where you want the text to appear.

7. Type CTRL+V to paste the text, now stripped of all the Microsoft coding, into the content field.

13

TABLE HEADERS These instructions apply to data tables only. Tables used solely for design purposes (“layout tables”) should not have column or row headers. Adding a New Table

1. Click your cursor in the Content field where you want the data table to appear. The INSERT tab will appear over the SharePoint Ribbon.

2. Click on INSERT and choose Table from the Insert Ribbon.

3. Choose Insert Table from the dropdown and then input the number of columns and rows

needed.

4. The grid of the table will appear where you put your cursor.

5. Click anywhere within the table. Two new tabs, Table Layout and Design will appear above the

Ribbon.

14

6. Choose Design. In the Design Ribbon section called “Table Style Options,” there are four check boxes.

7. If your table has a Header Row (see example below), check the box in the upper left side.

8. If your table has both a Header Row and a Header Column (see example below), check both

boxes in the far left.

Fixing an Existing Table

1. Click anywhere within the table. Two new tabs, Table Layout and Design will appear above the Ribbon.

2. Choose Design. In the Design Ribbon section called “Table Style Options,” there are four check

boxes.

3. If your table has a Header Row (see example above), check the box in the upper left side.

4. If your table has both a Header Row and a Header Column (see example above), check both

boxes in the far left.

15

LISTS Making a Bulleted List

1. Type the elements that will make up the list, making sure an ENTER, not a break (<br/>) or a SHIFT+ENTER is typed after each element:

2. Select all the elements in the list. Click the bullet list icon.

3. Bulleted list will be created:

16

Making an Ordered List

1. Type the elements that will make up the list, in the order of ranking, priority, etc. Make sure an ENTER, not a break (<br/>) or a SHIFT+ENTER is typed after each element:

2. Select all the elements in the list. Click the ordered (numbered) list icon.

3. Ordered list will be created:

17

HEADINGS How to Designate Headings

1. Heading level 1 is the PageHeadline. Do not type the headline manually into the content text

box. Use the PageHeadline form field at the bottom of the page. As shown above, PageHeadline is automatically designated and styled as Heading 1.

2. To designate other headings, click your cursor at the beginning of the line of text that will

become a heading.

3. Locate the Styles section of the Format Text Ribbon.

18

4. Click the button for the level of heading you want applied to the text. In the example shown in #2, above, that would be Heading 4.

5. Be careful that you don’t accidentally designate a blank line or a paragraph as a heading. If you

do, click your cursor at the beginning of the blank line or the paragraph.

6. Click the button for Paragraph.

7. That will reset your text back to the default text style.

Note: Do not use the Font Formatting buttons on the ribbon to “fix” text accidentally designated as a heading. Although visually it might look “right,” in the underlying code that the screen reading software uses, it will still be a heading.

19

COLOR CONTRAST Testing Color Contrast

1. Open the webpage to be tested in the Firefox browser.

2. Find the WCAG Contrast Checker in the upper right corner of the FireFox browser and click it.

3. The results of the contrast checker are displayed on the left side of the screen.

The colors that have a in front of them do not meet the color contrast minimum of 4.5.

The colors that have a in front of them meet or exceed the color contrast minimum of 4.5.

4. Click on one of the colors to see where it occurs on the webpage. All elements in that color will display a red box.

20

HOUSE STYLE: LAYOUT & NAVIGATION

To Come