Helping make online text material accessible
When you create any electronic textual work be it something like Word and/or publishing online (content for websites, or teaching materials on learning platforms like Moodle, Blackboard, etc). Do you use the inbuilt heading level styles to help organise work and show headings or do you format each heading individually with an appropriate font/decoration/style (eg bold, italic, underline, different font, etc). It may seem like a daft question, but hopefully, you are doing the former and using the inbuilt heading styles provided.
It’s an HTML thing
Why does it matter? Well, it is because of HTML and one of it’s less obvious benefits. If you already know about HTML (Hyper-Text Markup Language) – fab! skip this very brief overview to the next bit. However, if not – read on.
Essentially HTML is the underlying ‘hidden’ code used in electronic communications to tell your email client, internet browser etc how to display the text. (Word processors, like Microsoft Word, also use a form of HTML to make them work so this is relevant when you use them as well).
For example the sentence below
“Make this text look bold, italic or blue.”
Is the following code sent to your computer:
<p>"Make this text look <strong>bold</strong>, <em>italic</em> or <span style="color:#0000ff">blue</span>."</p> You do NOT need to know HTML, but you need to be aware of it.
Headers (and formatting them)
If you are not already using the built-in header formatting, please, please start doing it now.
If you like to denote what text is a header, by highlighting the text and then applying the formatting you want (eg bold, italic, underlined, increased font size, etc). You should (and for accessibility reasons ‘need’ to) switch to using the inbuilt header levels. Which has a number of advantages:
- It makes your materials more accessible for those who use screen readers etc.
- It improves uniformity in the way materials are presented online.
- It allows users to change the formatting of text to styles that suits them better.
- It helps automate any cataloguing process of materials (eg indexing) ie it makes your material machine-readable semantically.
- It is simpler.
Here’s why you need to change…
Look at the various heading texts below. The very first ‘Header’ is formatted by using bold and italic formatting to make it stand out as a header. The other header is created using this website’s available heading levels (if you are using a screen-reader my apologies, but the example is contained within the Start and End flags of the “HTML heading comparison example”)
[Start of HTML heading comparison example]
Example Header
Created using normal formatting.
Example Header
Created using the inbuilt heading style h6.
[End of HTML heading comparison example]
However, if we look at the underlying code… (I said you need to be aware of HTML!)
<p dir="ltr" style="text-align: left;"><em><strong>Header</strong></em></p>
<p dir="ltr" style="text-align: left;">Created using normal formatting.</p><h6 dir="ltr" style="text-align: left;">Heading (large)</h6>
<p dir="ltr" style="text-align: left;">Created by using the inbuilt heading style h6</p>You should see that the inbuilt heading level uses ‘h6’ which any screen readers and computers ‘see’ and then know that the text contained within the markers/tags is a header and also at heading level 6 (which also suggests that you should use heading levels appropriately and not pick them because you prefer the font)
“But the inbuilt headers are not in a style I like.” – That’s one of the beauties of HTML. You can change the default look of any heading or the main text, especially with word processors and you do not have to stick to the different built-in styles. Yeah, I know for many this is obvious, but there have been plenty who do not realise this.
If you want to learn more a good starter resource is Mozilla’s page on accessibility.
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML
Copying and pasting from documents created in word processors like Microsoft Word, etc into online work.
If you are one of many in the process of converting materials created in a word processor for use online, then you also need to be aware of how you created headers in the word processor in the first place. Particularly if you are planning on copying and pasting the text directly to create the online material.
Documents you create in Microsoft Word, Powerpoint, etc also use a similar markup language (emphasis on ‘similar’). Some elements of the underlying code are the same, some are compatible with HTML, such that if you copy and paste or view it using a web browser, it will be able to translate it. However, some elements are totally unique to the word processor.
An important part of putting your materials online is to work out if the formatting of text created in the word processor was done using the inbuilt heading styles or manually formatted because when you copy over it also copies the underlying structure and formatting provided by the hidden HTML and what looks like a formatted header, in reality, is manually formatted, it’s not using the built-in header levels.
when using the Basic (Elegant) document style.
How to view and use Heading 3, Heading 4, Heading 5 and lower in Word
Word has these built in, but by default hides them and does not display them in the Styles box on the Ribbon immediately for use. There are several ways to make them available.
Word’s automatic display of the next heading level
This is perhaps the simplest as it doesn’t require finding or tweaking any settings in Word. Word automatically shows the next lower Heading level when you select and use the lowest level visible. For example, if you apply Heading 2, Word will automatically make Heading 3 visible in the Styles box. Likewise, on using Heading 3, Word automatically makes Heading 4 visible and so on.
Override the display settings, for Styles, in Word.
At the bottom of the scroll bar to the right of the Styles window, there is an icon of a bar with a downward facing arrow/point underneath it
Right-clicking this expands the Styles box to show all the styles that are visible for use by default (See Image 3).
Overriding what styles are automatically shown in new documents.
More options to edit and display all Styles are available via the icon lower right corner of the Styles graphical interface on the Word Ribbon (Image 4). (You can also open this window using the keys Alt+Ctrl+Shift+S all together).
This displays the Styles Editor window. At this point there are two ways to view all the available styles. The option to make all (or only the Headings you want visible in the Style Ribbon) AND also be automatically visible every time to you create a new document from then on, is to use the ‘Manage Styles’ button (highlighted in Image 5).
In the Manage Styles window that pops up, select the “Recommend” tab and then individually highlight the Headings and/or other styles you want to have visible everytime you use this Word. For each one you want always visible set the “Set whether style shows when viewing recommended styles” to ‘Show’. When you have selected all the styles you always want visible/accessible, check the “New documents based on this template” option and OK to confirm (Image 6). You clear all other windows to carry on editing your document now. When you next open Word and create a new document, you should find those styles are now visible and accessible via the Styles Ribbon.
Caveat: This method applies to the document template you are currently using. This is likely to also be your default template which Word applied to any new documents you create unless you tell it to use a different template. If you use a different template you will have to reapply these settings. Unfortunately I have not yet found a way for Styles to Show to be applied universally to any template.
Use short-cut keys to apply styles to Word
This method is easier once you have already used the style. However, once you have applied a shortcut key sequence you can use the shortcut key directly to apply the style every time in the document you are working on and if wished all future documents that are based on that style.
Select the heading style you want to change (if it’s not visible you need to use one of the previous methods to see it – sorry). Right-click to bring up the contextual menu and select the ‘Modify’ option (Image 7)
The Modify Style window provides a number of options to change the style or various attributes about it. If you select the ‘Format’ button (bottom left) this offers the various attributes you can change including the shortcut key (Image 8).
Selecting ‘Shortcut key…’ opens the Customize Keyboard window (Image 9)
You should find that the cursor is already flashing in the entry area for ‘Press new shortcut key:’. If not just click inside it. Then press the shortcut keys you want to use. In this case the Control key, Shift key and the number 3 key (Ctrl + Shift + 3) were pressed altogether. You can easily ignore the specific key combination used here, but you may find it useful for applying and keeping Headings styles in sequence. Eg [Ctrl + Shift + 1] for Heading level 1, [Ctrl + Shift + 2] for Heading level 2 and so on.
If a key combination you choose is already assigned to something, it will show under ‘Currently assigned to:’ However, you are perfectly at liberty to decide to override what the key combination is already assigned to if it suits your purposes better.
Before closing the window you need to press the ‘Assign’ button. Your new shortcut key choice will then show in the ‘Current keys:’ section. Likewise you can apply more than one combination if it suits. Just press Assign for each key combination.
Lastly before closing note that the ‘Save changes in:’ refers to Normal.dotm. This is the default document template that is applied whenever you start Word and means any changes you make will apply to future sessions when you use Word.
You will need to do this for each of the styles you want to register a new shortcut key combination for, but once you do you shouldn’t need to do it again.