Structured data accessibility page - accessibility

This is proving tricky to find an answer for as structured data provides accessibility.
I know a bit about schema, I have added things like breadcrumbs, product info, etc. to the website so far (and Google recognised it and did cool things with it!!!
What I would like to know is what sort of structured data tags I can use on the page explaining the accessibility of a website. For example can I add anything to help explain this bit: (if there is anything relevant!)
<h2>Access Keys:</h2>
<p>Most browsers support jumping to specific links by typing keys defined on the web site. Primary navigation links (sections) on this site use the following access keys:</p>
<ul>
<li>Access key s – skip to content</li>
<li>Access key 0 – Home Page</li>
<li>Access key 1 – Contact</li>
<li>Access key 2 – Reps</li>
<li>Access key 3 – Fees</li>
<li>Access key 4 – About</li>
<li>Access key 5 – Login / My Account</li>
<li>Access key 6 – Join Us</li>
<li>Access key 7 – Cart</li>
<li>Access key 8 – Policies</li>
<li>Access key 9 – Accessibility</li>
</ul>
<p>Depending on the web browser, please use following key combinations to use access keys:</p>
<h4>Keystroke combinations</h4>
<p>Different browsers use different keystrokes to activate accesskey shortcuts, as shown below:</p>
<ul>
<li>Alt + [the accesskey]
<ul>
<li>Internet Explorer for Windows</li>
<li>Chrome for Windows (not that Shift is required in some circumstances</li>
<li>Safari for Windows</li>
</ul>
</li>
<li>Shift + Alt + [the accesskey]
<ul>
<li>Firefox for Windows</li>
</ul>
</li>
<li>Ctrl + Option / alt + [the accesskey]
<ul>
<li>Safari for Mac</li>
<li>Chrome for Mac</li>
<li>Firefox for Mac</li>
</ul>
</li>
</ul>
Thanks in advance!

This is done using the properties of http://schema.org/WebPage plus http://schema.org/Book etc, eg
<meta itemprop="accessibilityControl" content="fullMouseControl"/>
<meta itemprop="accessibilityHazard" content="noFlashing"/>
<meta itemprop="accessibilityHazard" content="MotionSimulation"/>
<meta itemprop="accessibilityHazard" content="Sound"/>
Further examples can be found on https://schema.org/accessibilityControl.
I found this very helpful in deciding what to add.
The original proposal was described here before being accepted by schema.org, it still includes examples but I can't comment on the accuracy given the pace of change in structured data.

In case Schema.org contains related properties, they would most likely be defined for the WebPage type.
You’ll see that they define some accessibility-related properties, namely (as of version 2.01):
accessibilityAPI
accessibilityControl
accessibilityFeature
accessibilityHazard
Possible values for these properties are listed on http://www.w3.org/wiki/WebSchemas/Accessibility.
You can apply these properties also to WebSite (or any other CreativeWork).
So it seems that there’s no property for listing access keys.

The short answer is no. Accessibility should be considered as "usability for the disabled". Just like there's no way to indicate the usability level of your website in the source code, there's also no way to indicate the accessibility level.
If your doctype is HTML5, you may consider using semantic sectioning tags. Wrapping your navigation links in < nav > and your main content in < main > will greatly improve the accessibility of your web site. That should be enough to signal the search engines and assistive devices that your web site was developed with a consideration for accessibility.
Unless your product is a web application which will be repeatedly used by a closed user group, please consider removing the access keys all together. Access keys are only useful in a handful of situations and it's generally avoided by many accessibility professionals. Rather than relying on access keys, keep your HTML tidy, semantic and structured, that will do the trick.
Please read the article on WebAIM

Related

What is Meant by rel="nofollow noopener"?

When I make backlinks for transfemme we first see Target blank but now its showing rel="nofollow noopener". What does it mean?
The difference is that, in theory, rel="noreferrer" should not have any SEO impact, while nofollow clearly specifies that the link does not endorse in any way the target URL.
nofollow was invented by Google back in 2005 in order to fight comment spam in blogs, any URL appearing in the comment section would not pass PR to the target webpage.
rel="noreferrer" mainly affects analytics, how did this visit landed to this page? where comes it from? noreferrer specifies to hide that kind of information.
I said in theory because there is currently no official documentation that explicitly indicates using noreferral would change anything in SEO terms, but it shouldn't.

Why is Webmaster Tools reporting missing author/ updated when the markup exists?

Google Webmaster Tools is reporting Structured Data > hentry errors for my Wordpress site (Divi theme)
Missing: author
Missing: updated
When I check the page with Google's Structured Data Testing Tool, it contains the following markup
<p class="post-meta">
<span class="author vcard">
Author Name
</span>
<span class="published">Dec 1, 2016</span>
</p>
I have two questions:
What is wrong with this markup that is preventing the hentry author and
updated attributes from being detected? (or, where is a link to up-to-date markup requirements, Google searching reveals many variations).
The page also contains complete and error free JSON-LD structured
data. Are there any conflicts/ issues with having two structured
data formats on the same page?
1) I would recommend to use Microdata or JSON-LD to describe your objects
2) It is hard to make a proposition without seeing that. Also, it is not understandable what object you tries to describe.
Thanks

GTM - Track links per section, per page

I've pretty much spent all day configuring GTM (it takes forever) but I'm facing a situation which I don't know how to track:
Lets say there are many links, on many pages, they all have a url like this /xxx/yyy/zzz.
only zzz is changing. I have these links in different sections on the website.
When a user clicks a link I need to know what section and what page was this link DOM element was at. (or in GTM only target clicks for links in a specific section)
Example markup for homepage
<section class='A'>
<a href='/xxx/yyy/1'>link</a>
<a href='/xxx/yyy/2'>link</a>
<a href='/xxx/yyy/3'>link</a>
</section>
<section class='B'>
<a href='/xxx/yyy/1'>link</a>
<a href='/xxx/yyy/2'>link</a>
<a href='/xxx/yyy/3'>link</a>
</section>
I've read google's instructions carefully but they don't explain how to set up specific tracking, they only talk about general all-purpose tracking.
I don't want to use dataLayer.push() but I want the GTM system to handle everything for me, without changing the website code.
I would imagine GTM has some sort of event-delegated capabilities which could be used as rules to track links only on specific places, so more specific rules could be created.
Depending on the version of GTM you are using the terminology and steps might be different, but I'll outline how to handle this.
Set up an auto event macro named parentClass (or something simialr) to return the class of the parent element of the clicked element.
Set up a Link Click Listener to fire on all pages if you haven't already.
Set up a Google Analytics Event tag in GTM. Use the parentClass macro as the event label.
Set up a rule that fires when the GA Event tag when the URL contains the pattern you're looking for.
There are other ways to set this up and you may need to capture additional information, but this should get you going.

Acceptable to apply visuallyhidden class to schema properties?

When adding schema data to your site for SEO, it seems like a no-brainer to keep all your schema data within one itemscope. Or at least on the same page with redundant itemscopes of the same type.
But let's say I'm following a style guide and only display certain properties on the site (e.g. not enough room in the footer to list all the item properties). Yet, I still want this information to show up in a search engine (e.g. hours of operation or a Google Map).
If I have a footer using the HealthAndBeautyBusiness schema data but only want to show some of the fields, is it okay to just list them and apply class="visuallyhidden" to the item properties I don't want to display?
<div class="contact_info" itemscope itemtype="http://schema.org/HealthAndBeautyBusiness">
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<p itemprop="streetAddress"></p>
<p>
<span itemprop="addressLocality"></span>,
<span itemprop="addressRegion"></span>
<span itemprop="postalCode"></span>
</p>
</span>
<p itemprop="email" class="visuallyhidden"></p>
<p itemprop="telephone" class="visuallyhidden"></p>
</div>
In other words, is there a clearly defined way to distinguish between a malicious versus a proper use of the .visuallyhidden class?
Additional question: when a search engine crawls your site, does it crawl the entire site and store the aggregate schema data? Or does it treat schema data on each page as separate?
As far as Microdata and schema.org are concerned, this is valid.
Note that Microdata allows the use of meta and link elements in the body, which are typically hidden by default, especially for the purpose of adding properties for content that is not visible on the page.
Consumers (like search engines) might have additional rules about what they will ignore, what they will parse, what they will penalize, etc. However, discussing this is about SEO, which is off-topic here on Stack Overflow.

Display paragraph

I insert the below paragraph into the database .However while displaying it is displayed as (which is not desired one):
The use of this website is subject to the following terms of use: • The content of the pages of this website is for your general information and use only. It is subject to change without notice. • Neither we nor any third parties provide any warranty or guarantee as to the accuracy,
Desired paragraph view:
The use of this website is subject to the following terms of use:
• The content of the pages of this website is for your general information and use only. It is subject to change without notice.
• Neither we nor any third parties provide any warranty or guarantee as to the accuracy.
How can we achieve this in asp.net/C#
Insert the complete html into database and set into div as innerhtml
<div id="div" runat="server"></div>
div.InnerHtml = "paragraph from Database which saved as HTML";"
Use the paragraph tag.
<p>The use of this website is subject to the following terms of use:</p>
<p>• The content of the pages of this website is for your general information and use only. It is subject to change without notice. • Neither we nor any third parties provide any warranty or guarantee as to the accuracy.</p>
You may need to substitute your line feed/carriage return symbols with br tags before you put the text in the control. Or, possibly put the br tag into your paragraph text when its stored in the database.
To substitute, you can use String.Replace()
The character codes can be found here http://www.asciitable.com/
Look for character codes 10 and 13. You should check the text you're attempting to substitute, to find out if both codes are in the string, or just one of them.

Resources