H.D.S. The High Descriptive Standard for Screen Reader Website Accessibility
Morgan Dynamic Research has developed a new standard formatting methodology to ensure optimal comfort, ease of use, and quality of perception for screen reader compatible websites.
The H.D.S. is an ongoing series of flexible formatting principles and considerations that will be outlined below. H.D.S. is best designed for PC and laptop style of browser access on platforms such as Windows and Mac. However, H.D.S. is an excellent standard to apply to all screen reader accessible websites. H.D.S. allows a screen reader user to simply tab through all text on a page with prepared target identification of most lines. A user can navigate an H.D.S. compatible site with primarily tab and enter. The PC Text version of this site is an example of H.D.S. in application.
Note: We use the term PC to include all non-mobile platforms and more specifically hardware running on operating systems such as Windows, Mac, or a Linux derivative that would include a tab and enter key. Mobile platforms are considered to include hardware running on Android, iOS, or other proprietary mobile OS that will generally not include the function of a separate tab and enter key.
As we further develop H.D.S. we will reflect these changes and additions here.
Last Updated: July 5th, 2018
We strongly advise the use of Skip Links for all blind accessible websites. Skip Links allow a screen reader equipped user to simply use tab and enter to be directed to the navigation bar and again to the main content of a given page. It is very easy to implement and the benefit to accessibility users is substantial. This site uses “WP Accessibility” by Joe Dolson which can be found here.
The following guide requires a working knowledge of HTML and web design and functions to implement H.D.S. correctly and effectively. A sense of humor and some patience are also recommended.
Section 1 – Website Structure
We advise that H.D.S. be an independent version of a given website that is accessible through a Skip Link referenced Accessibility Toolbar. As in the design of this website, we have simply established a fully separate reflection of the main pages and adapted the navigation to H.D.S. within that alternate version of this site. The alternate version of this site uses the same theme and standards except for where the display of content is concerned. For each page to be included in the H.D.S. formatted version of the site, we have simply proceeded the name of each page with “Text – ” as can be seen here. All inter-page links for the alternate version are contained within a separate navigation index system that operates aside from the main pages navigation. Page titles can be differentiated in a number of ways such as Main – Text, Main – HDS, and Main_. The choice is up to the individual, we merely advise consistency in structural design.
Since and H.D.S. formatted page will be using a separate navigation standard, we strongly advise that for ease of flow you include the up a level or back button functionality in the form of a link back to the parent page and a link back to the main page at the top and bottom of each page. Furthermore, as each page will begin with Top of Page we advise the each page end with End of Page.
Section 2 – The Jump Link
The jump link, or anchor link is the basis for basic tab indexability on an H.D.S. formatted website. This works because the tab key shifts across fields and hyperlinks. H.D.S. uses this hyperlink feature to allow a user to simple tab from object to object and sentence to sentence, where that user would alternatively need to scan around with their mouse or touch-pad to read the body of a page. The implementation of a jump link is simple HTML that can be embedded in almost any page, including most, if not all, WordPress sites.
First H.D.S. embeds:
<p id=”#T”><em>Top of Page</em></p>
or a variant of such a line at the top of each H.D.S. formatted page. This acts as a return point for all linked text to follow, although we have observed that function to be unreliable on larger sites. Remember, the text just needs to be a link for tab indexing and does not actually need to serve a higher function.
Every line entered into a page that is not a link to another page or site will be linked to #T in this example. We advise you to apply all jump links after arranging the page by the standards to follow.
Quotes and tagged items are generally linked as a whole. Untagged body text is typically linked per sentence. Some large tagged items can be broken into linked sentences, however this will introduce ambiguity into your pages. Large tagged paragraphs can be broken into several smaller and redundant tagged paragraphs to compensate for this.
Items on indexes and lists are always linked separately. Image descriptions usually are only two parts: The basic beginning and then the Detail section. There is more information about these notes in the following sections.
Section 3 – Page Header
At the beginning of each H.D.S. formatted page we include the following lines:
- Notice: This is the Morgan Dynamic Research High Descriptive Standard (H.D.S.) Screen Reader Compatible Text Version of Morgan Dynamic Research dot com
- Use the tab key to advance down through these Screen Reader Compatible pages and shift plus tab to move back or upward.
- Each line of text will be a link that will either do nothing or return you to the top of the page.
- Links to other pages will be titled: This is a Link. Click or Press Enter on these links to follow them. (Note: This tag may be excluded if the line begins Click or Press Enter Here To Go To <Target Page Here> although we advise that external links always use this tag.)
- Click or Press Enter Here To Go To Standard Website Interface
These lines are show as a bulleted list for illustrative purposes only.
These lines, or their equivalent, would be set as either jump links or links to another location.
Section 4 – Symbol Formatting
Symbols and addresses are generally written out such as Contact at-symbol Morgan Dynamic Research dot com. This only applies to characters that you wish to be communicated. Here are some suggestions for symbol replacement. The choice of replacement will depend on the preference of the formatter and the context of the application. A space may sometimes need to be stated as in code examples. For this scenario we use Space-Character. Also, the -Symbol is formal formatting and can be omitted at the discretion of the formatter. It is also advised to separate letter in acronyms and other non-proper words to ensure that screen readers state the letters correctly. You can also simply state Line Break to indicate a horizontal line or other delineation.
Furthermore, it is recommended to simply imagine how a line of text will be read to the user. Years such as 1999 will sometimes be read as one thousand ninety nine, where it may be more commonly spoken as nineteen ninety nine. To achieve this simple modification, we can insert a space a such: 19 99. Some years will not call for this such as 2002. Additionally, acronyms can be simplified for a screen reader by eliminating the periods and introducing spaces so that the individual letter will be spoken. H.D.S. would become H D S. This also prevents the screen reader from trying to say the acronym as a word such as HDS.
Format: Symbol = Text
~ = Tilde-Symbol
` = Accent-Symbol
! =Exclamation-Symbol
@ = At-Symbol
# = Pound-Symbol OR Hashtag-Symbol
$ = Dollar-Symbol
% = Percent-Symbol
^ = Caret-Symbol OR Hat-Symbol
& = And-Symbol
* = Asterisk-Symbol OR Star-Symbol
( = Open-Parenthesis-Symbol
) = Close-Parenthesis-Symbol
– = Minus-Symbol OR Dash-Symbol
+ = Plus-Symbol
_ = Underscore-Symbol
= = Equals-Symbol
[ =Open-Bracket-Symbol
] = Close-Bracket-Symbol
{ = Open-Brace-Symbol
} = Close-Brace-Symbol
: = Colon-Symbol
; = Semi-Colon-Symbol
” = Double-Quote-Symbol OR Quote-Symbol
‘ = Single-Quote-Symbol OR Quote-Symbol
< =Less-Than-Symbol OR Open-Chevron-Symbol
> = Greater-Than-Symbol OR Close-Chevron-Symbol
. = Period-Symbol OR Dot-Symbol
, = Comma-Symbol
/ = Slash-Symbol
\ = Backslash-Symbol
| = Vertical-Line-Symbol
? = Question-Mark-Symbol OR Question-Symbol
© = Copyright-Symbol
™ = Trademark-Symbol
Section 5 – Single Object Formatting
The following formatting guide is a flexible series of standards and considerations for how to label your content. The main concept is to do just that: Label Your Content. Please note that we typically italicize tags, but this is a flourish and not of specific use. Also, plain body text is not usually tagged.
Format: Tag: Example
Page Title: <Page Title Here>
Bold Text: THIS IS BOLD TEXT
Highlighted Text: THIS IS HIGHLIGHTED TEXT or Highlighted Blue Text: THIS IS HIGHLIGHTED TEXT
Underlined Text: EXAMPLE TEXT
Bold Highlighted Underlined Text: YOU PROBABLY GET THE POINT BY NOW
This is a Link: <Text That Has Been Hyperlinked> (Note: You should link the whole line including “This is a Link”)
Section Title: Section 9 – A Section To Far
This is body text (Note the lack of any tag.)
The Following Text is Code: <p id=”#EXAMPLE”><em>EXAMPLE</em></p>
Section 6 – Multi-Object Formatting
Multi-object formatting involves multiple separate lines of text that relate to each other. Examples will be show as bulleted items for easy of interpretation, but that is neither included nor recommended in H.D.S. Also, Items are usually linked as a whole.
- Quote: “He Has Something To Say”
- Quote Attribution: He Who Said It
- [Image X – Title of Image] (Note: X is a number that starts at 1 and counts up with successive images. Brackets are optional.)
- Description of Image X: Basic description including words and objects represented. Detail: Detailed and creative analysis of the target object and/or word colors, background colors and content, and frame positions of the aforementioned. You can also elaborate on intended meanings and feelings.
- Link Index Title: Title of Example Index
- Click or Press Enter To Visit Link Index Items (Note: These instructions are usually only implemented on the Main page.)
- Item: First Thing
- Item: Second Thing
- Item: And So On
- Bullet List Title: Title of Example List (Note: The Numeric Item Reference is Optional) OR Beginning of Bullet List
- Item 1: First Thing
- Item 2: Second Thing
- Item 3: You Get It
- List Title: Title of Similar But Distinct List Format OR Beginning of List
- This is the first thing.
- This is the second thing.
- This is yet another thing.
- End of List (Note: This format trades line headers for an End of List addition. This is useful for long list items.)
- Beginning of Document (Note: Documents can be any long individual cohesive segment of body text.)
- Paragraph 1
- Paragraph 2
- Summation
- Document Attribution: They Who Wrote It
- End of Document
Section 7 – Summation
The High Descriptive Standard is not just a system of formatting, but a mindset of descriptive communication. Though it may be a lengthy and meticulous process to implement, we believe that you or your company will have the appreciation and thanks of your screen reader reliant visitors. Format with Pride.
Section 8 – Professional Services
If you or your company requires assistance implementing H.D.S. on your websites, Morgan Dynamic Research has trusted individuals that can help. Please Contact Us with the basics of what you would like H.D.S. formatted for more information.