# Add HTML5 Data Attribute Support to XHP

DevFeed: [Add HTML5 Data Attribute Support to XHP](<https://devfeed.tech/articles/add-html5-data-attribute-support-to-xhp-22035.md>)

Original publisher: [Read original article](<https://codebeforethehorse.tumblr.com/post/4792658458>)

Author: Codebeforethehorse

Published: 2011-04-21T01:18:00Z

Content type: tutorial

Language: en

Sources: [Stefan Parker](<https://devfeed.tech/sources/stefan-parker.md>)

Topics: [PHP](<https://devfeed.tech/topics/php.md>), [HTML5 and CSS3 tricks](<https://devfeed.tech/topics/html5-and-css3-tricks.md>), [aria](<https://devfeed.tech/topics/aria.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [aria](<https://devfeed.tech/tags/aria.md>), [html](<https://devfeed.tech/tags/html.md>), [html5](<https://devfeed.tech/tags/html5.md>), [php](<https://devfeed.tech/tags/php.md>), [xhp](<https://devfeed.tech/tags/xhp.md>)

## AI overview

A tutorial on modifying PHP-based XHP to support HTML5 data-* and WAI-ARIA attributes. It explains how to bypass validation for these attributes, limit that behavior to HTML elements rather than custom components, and optimize the relevant attribute-access methods.

## Source excerpt

UPDATE: I've added data- and aria- attribute support into XHP by default. Downloading the latest source will get you this for free. XHP runs validation checks on all attribute sets and gets, but in the emerging world of HTML5, data attributes are validation-less. With a little bit of tweaking, you can add HTML5 data attribute support to all HTML elements in XHP. In the same swing, you can add WAI-ARIA support for your accessibility users. In this post we'll dig into the php source of XHP and do a little optimizations of our own. First, you'll need to change the getAttribute() and setAttribute() functions inside :x:composable-element to account for these special attributes. The logic behind it is simple, if it's a data or aria attribute, skip the validation checks. This is how those two functions would now look: final public function setAttribute($attr, $val) { if (substr($attr, 0, 5) != 'data-' && substr($attr, 0, 5) != 'aria-') { $this->validateAttributeValue($attr, $val); } $this->attributes[$attr] = $val; return $this; } final public function getAttribute($attr) { if (isset($this->attributes[$attr])) { return $this->attributes[$attr]; } else if (substr($attr, 0, 5) == 'data-' || substr($attr, 0, 5) == 'aria-') { return null; } // Maintain the rest of this function as is. } Voila! Now all your XHP elements support HTML5 data attributes. You could stop here and be just fine, but technically this isn't the best solution. HTML elements support data attributes, but you don't want your own custom XHP components to take them*. To allow HTML5 data attributes on only HTML elements, we need to rethink our approach. Going back to XHP's default behavior, rename the getAttribute() and setAttribute() methods in :x:composable-element to getDeclaredAttribute() and setDeclaredAttribute() respectively, make them protected, and replace them with the following non-final functions: public function getAttribute($attr) { return $this->getDeclaredAttribute($attr); } public function setA